Migrate core scss

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

diff --git a/core/css/apps.scss b/core/css/apps.scss
index a9b20cfec2b19d8a75e7b78cc193c206ea1f1dd1..aab575f5dd274616cfe40c820fecf2d54c1e47fb 100644 (file)
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -15,6 +15,9 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
+@use 'sass:math';
+@import 'functions';
 
 /* BASE STYLING ------------------------------------------------------------ */
 // no h1 allowed since h1 = logo
@@ -78,9 +81,9 @@ kbd {
 /* APP-NAVIGATION ------------------------------------------------------------ */
 /* Navigation: folder like structure */
 #app-navigation:not(.vue) {
-       width: $navigation-width;
+       width: variables.$navigation-width;
        position: fixed;
-       top: $header-height;
+       top: variables.$header-height;
        left: 0;
        z-index: 500;
        overflow-y: auto;
@@ -378,7 +381,7 @@ kbd {
                        margin: 0;
                        padding: 0;
                        background: none;
-                       @include icon-color('triangle-s', 'actions', $color-black, 1, true);
+                       @include icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
                        background-size: 16px;
                        background-repeat: no-repeat;
                        background-position: center;
@@ -394,7 +397,7 @@ kbd {
                        z-index: 105; // above a, under button
                        background-color: var(--color-background-hover);
                        border-radius: 50%;
-                       transition: opacity $animation-quick ease-in-out;
+                       transition: opacity variables.$animation-quick ease-in-out;
                }
 
                /* force padding on link no matter if 'a' has an icon class */
@@ -442,7 +445,7 @@ kbd {
                .app-navigation-entry-utils-menu-button {
                        /* Prevent bg img override if an icon class is set */
                        button:not([class^='icon-']):not([class*=' icon-']) {
-                               @include icon-color('more', 'actions', $color-black, 1, true);
+                               @include icon-color('more', 'actions', variables.$color-black, 1, true);
                        }
                        &:hover button,
                        &:focus button {
@@ -530,7 +533,7 @@ kbd {
        .app-navigation-entry-deleted {
                display: inline-flex;
                padding-left: 44px;
-               transform: translateX(#{$navigation-width});
+               transform: translateX(#{variables.$navigation-width});
                .app-navigation-entry-deleted-description {
                        position: relative;
                        white-space: nowrap;
@@ -592,7 +595,7 @@ kbd {
        position: relative;
        display: flex;
        // padding is included in height
-       padding-top: $header-height;
+       padding-top: variables.$header-height;
        min-height: 100%;
 }
 
@@ -601,10 +604,10 @@ kbd {
 
 /**
  * !Important. We are defining the minimum requirement we want for flex
- * Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width
+ * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width
  * -> 468px. In that case we want 200px for the list and 268px for the content
  */
-$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
+$min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width;
 
 #app-content {
        z-index: 1000;
@@ -614,7 +617,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
        min-height: 100%;
        /* margin if navigation element is here */
        #app-navigation:not(.hidden) + & {
-               margin-left: $navigation-width;
+               margin-left: variables.$navigation-width;
        }
        /* no top border for first settings item */
        > .section:first-child {
@@ -648,16 +651,17 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 */
 #app-sidebar {
        width: 27vw;
-       min-width: $sidebar-min-width;
-       max-width: $sidebar-max-width;
+       min-width: variables.$sidebar-min-width;
+       max-width: variables.$sidebar-max-width;
        display: block;
-       @include position('sticky');
-       top: $header-height;
+       position: -webkit-sticky;
+       position: sticky;
+       top: variables.$header-height;
        right:0;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1500;
-       height: calc(100vh - #{$header-height});
+       height: calc(100vh - #{variables.$header-height});
        background: var(--color-main-background);
        border-left: 1px solid var(--color-border);
        flex-shrink: 0;
@@ -727,6 +731,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
        width: 100%;
        padding: 0;
        margin: 0;
+       background-color: var(--color-main-background);
        box-shadow: none;
        border: 0;
        border-radius: 0;
@@ -867,7 +872,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 /* POPOVER MENU ------------------------------------------------------------ */
 $popoveritem-height: 44px;
 $popovericon-size: 16px;
-$outter-margin: ($popoveritem-height - $popovericon-size) / 2;
+$outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 
 .ie,
 .edge {
@@ -1126,19 +1131,20 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
 
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
-       @include position('sticky');
-       top: $header-height;
+       position: -webkit-sticky;
+       position: sticky;
+       top: variables.$header-height;
        border-right: 1px solid var(--color-border);
        display: flex;
        flex-direction: column;
        transition: transform 250ms ease-in-out;
-       min-height: calc(100vh - #{$header-height});
-       max-height: calc(100vh - #{$header-height});
+       min-height: calc(100vh - #{variables.$header-height});
+       max-height: calc(100vh - #{variables.$header-height});
        overflow-y: auto;
        overflow-x: hidden;
-       flex: 1 1 $list-min-width;
-       min-width: $list-min-width;
-       max-width: $list-max-width;
+       flex: 1 1 variables.$list-min-width;
+       min-width: variables.$list-min-width;
+       max-width: variables.$list-max-width;
 
        /* Default item */
        .app-content-list-item {

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
deleted file mode 100644 (file)
index 1fe6e88..0000000
--- a/core/css/css-variables.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-// CSS4 Variables
-// Remember, you cannot use scss functions with css4 variables
-// All css4 variables must be fixed! Scss is a PRE processor
-// css4 variables are processed after scss!
-:root {
-       --color-main-text: #{$color-main-text};
-       --color-main-background: #{$color-main-background};
-       --color-main-background-translucent: #{$color-main-background-translucent};
-
-       // To use like this: background-image: linear-gradient(0, var(--gradient-main-background));
-       --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
-
-       --color-background-hover: #{$color-background-hover};
-       --color-background-dark: #{$color-background-dark};
-       --color-background-darker: #{$color-background-darker};
-
-       --color-placeholder-light: #{$color-placeholder-light};
-       --color-placeholder-dark: #{$color-placeholder-dark};
-
-       --color-primary: #{$color-primary};
-       --color-primary-hover: #{$color-primary-hover};
-       --color-primary-light: #{$color-primary-light};
-       --color-primary-light-hover: #{$color-primary-light-hover};
-       --color-primary-text: #{$color-primary-text};
-       --color-primary-light-text: #{$color-primary-light-text};
-       --color-primary-text-dark: #{$color-primary-text-dark};
-       --color-primary-element: #{$color-primary-element};
-       --color-primary-element-hover: #{$color-primary-element-hover};
-       --color-primary-element-light: #{$color-primary-element-light};
-       --color-primary-element-lighter: #{$color-primary-element-lighter};
-
-       --color-error: #{$color-error};
-       --color-error-hover: #{$color-error-hover};
-       --color-warning: #{$color-warning};
-       --color-warning-hover: #{$color-warning-hover};
-       --color-success: #{$color-success};
-       --color-success-hover: #{$color-success-hover};
-
-       --color-text-maxcontrast: #{$color-text-maxcontrast};
-       --color-text-light: #{$color-main-text};
-       --color-text-lighter: #{$color-text-maxcontrast};
-
-       --image-logo: #{$image-logo};
-       --image-login-background: #{$image-login-background};
-       --image-logoheader: #{$image-logoheader};
-       --image-favicon: #{$image-favicon};
-
-       --color-loading-light: #{$color-loading-light};
-       --color-loading-dark: #{$color-loading-dark};
-
-       --color-box-shadow: #{$color-box-shadow};
-
-       --color-border: #{$color-border};
-       --color-border-dark: #{$color-border-dark};
-
-
-       --border-radius: #{$border-radius};
-       --border-radius-large: #{$border-radius-large};
-       --border-radius-pill: #{$border-radius-pill};
-
-       --font-face: #{$font-face};
-       --default-font-size: #{$default-font-size};
-
-       --default-line-height: #{$default-line-height};
-
-       --animation-quick: #{$animation-quick};
-       --animation-slow: #{$animation-slow};
-
-       --header-height: #{$header-height};
-}

diff --git a/core/css/functions.scss b/core/css/functions.scss
index 35db19c31423602d4abfe6f6b57c440cd5c69f7c..62cd200a09813f1a14a991ddfe5b8f9ccf294cd1 100644 (file)
--- a/core/css/functions.scss
+++ b/core/css/functions.scss
@@ -20,21 +20,6 @@
  *
  */
 
-/**
- * Removes the "#" from a color.
- *
- * @param string $color The color
- * @return string The color without #
- */
-@function remove-hash-from-color($color) {
-       $color: unquote($color);
-       $index: str-index(inspect($color), '#');
-       @if $index {
-               $color: str-slice(inspect($color), 2);
-       }
-       @return $color;
-}
-
 /**
  * @see core/src/icons.js
  */
@@ -80,12 +65,3 @@
        $varName: "--icon-#{$icon}-#{$color}";
        background-image: var(#{$varName});
 }
-
-@mixin position($value) {
-       @if $value == 'sticky' {
-               position: -webkit-sticky; // Safari support
-               position: sticky;
-       } @else {
-               position: $value;
-       }
-}

diff --git a/core/css/header.scss b/core/css/header.scss
index a5a706ae23935c2744c38660d17270e152b4f828..4549c18487e4ca34af932594c3a734f62741d928 100644 (file)
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -12,6 +12,7 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
 
 /* prevent ugly selection effect on accidental selection */
 #header,
@@ -48,7 +49,7 @@
        top: 0;
        width: 100%;
        z-index: 2000;
-       height: $header-height;
+       height: variables.$header-height;
        background-color: var(--color-primary);
        background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
        box-sizing: border-box;
@@ -78,7 +79,7 @@
 
 @mixin header-menu-height() {
        min-height: calc(44px * 1.5); // show at least 1.5 entries
-       max-height: calc(100vh - #{$header-height} * 4);
+       max-height: calc(100vh - #{variables.$header-height} * 4);
 }
 
 #header {
@@ -96,7 +97,7 @@
                max-width: 350px;
                @include header-menu-height();
                right: 5px; // relative to parent
-               top: $header-height;
+               top: variables.$header-height;
                margin: 0;
 
                &:not(.popovermenu) {
@@ -229,7 +230,7 @@
                                display: flex;
                                justify-content: center;
                                align-items: center;
-                               width: $header-height;
+                               width: variables.$header-height;
                                height: 100%;
                                cursor: pointer;
                                opacity: 0.6;
@@ -300,9 +301,9 @@
 /* NAVIGATION --------------------------------------------------------------- */
 nav[role='navigation'] {
        display: inline-block;
-       width: $header-height;
-       height: $header-height;
-       margin-left: -$header-height;
+       width: variables.$header-height;
+       height: variables.$header-height;
+       margin-left: -#{variables.$header-height};
        position: relative;
 }
 
@@ -424,7 +425,7 @@ nav[role='navigation'] {
 /* Apps menu */
 #appmenu {
        display: inline-flex;
-       min-width: $header-height;
+       min-width: variables.$header-height;
        z-index: 2;
 
        li {
@@ -438,8 +439,8 @@ nav[role='navigation'] {
                        position: relative;
                        display: flex;
                        margin: 0;
-                       height: $header-height;
-                       width: $header-height;
+                       height: variables.$header-height;
+                       width: variables.$header-height;
                        align-items: center;
                        justify-content: center;
                        opacity: .6;
@@ -642,13 +643,13 @@ nav[role='navigation'] {
        background: var(--color-primary) !important;
 
        &.skip-content {
-               left: $navigation-width;
+               left: variables.$navigation-width;
                margin-left: 3px;
        }
 
        &:focus,
        &:active {
-               top: $header-height;
+               top: variables.$header-height;
        }
 }
 

diff --git a/core/css/icons.scss b/core/css/icons.scss
index 9acec4895be7c0c11082e9643068939edae09e2e..710dd6b0287b72c4bce6d5810fdafe3f75ad3056 100644 (file)
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -26,6 +26,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+@use 'variables';
+@import 'functions';
 
 /* GLOBAL ------------------------------------------------------------------- */
 [class^='icon-'], [class*=' icon-'] {
@@ -117,36 +119,13 @@ audio, canvas, embed, iframe, img, input, object, video {
        background-size: 32px !important;
 }
 
-.icon-white {
-       &.icon-shadow {
-               filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-       }
-}
-
-.icon-audio-white {
-       filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-audio-off-white {
-       filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-fullscreen-white {
-       filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-screen-white {
-       filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-screen-off-white {
-       filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-.icon-video-white {
-       filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
+.icon-white.icon-shadow,
+.icon-audio-white,
+.icon-audio-off-white,
+.icon-fullscreen-white,
+.icon-screen-white,
+.icon-screen-off-white,
+.icon-video-white,
 .icon-video-off-white {
        filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 057daf672ee9244483b29ac6b6e5073eb00ea447..4d444df8f628eeab1a689e686a1ca9e844da7d31 100644 (file)
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -11,6 +11,8 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
+@import 'functions';
 
  /* Specifically override browser styles */
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
@@ -281,7 +283,7 @@ input {
                        margin-right: 0;
                        &:disabled {
                                cursor: default;
-                               @include icon-color('confirm-fade', 'actions', $color-black, 2, true);
+                               @include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
                        }
                }
 
@@ -330,8 +332,8 @@ select,
 
 /* Radio & Checkboxes */
 $checkbox-radio-size: 14px;
-$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
-$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
+$color-checkbox-radio-disabled: nc-darken(variables.$color-main-background, 27%);
+$color-checkbox-radio-border: nc-darken(variables.$color-main-background, 47%);
 $color-checkbox-radio-white: #fff;
 
 input {

diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index d1abb0176a518839132d32c0b752d1ec4238a93e..2dd03480b26968ebe521ce2765f2856bd4aa14f8 100644 (file)
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -1,4 +1,6 @@
-@media only screen and (max-width: $breakpoint-mobile) {
+@use 'variables';
+
+@media only screen and (max-width: variables.$breakpoint-mobile) {
 
        /* position share dropdown */
        #dropdown {
@@ -20,7 +22,7 @@
 
        /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
        #app-navigation {
-               transform: translateX(-#{$navigation-width});
+               transform: translateX(-#{variables.$navigation-width});
        }
        .snapjs-left {
                #app-navigation {
@@ -64,7 +66,7 @@
                #app-navigation-toggle-back {
                        position: fixed;
                        display: inline-block !important;
-                       top: $header-height;
+                       top: variables.$header-height;
                        left: 0;
                        width: 44px;
                        height: 44px;
@@ -117,7 +119,7 @@
                display: none;
        }
        #body-settings #controls {
-               min-width: $breakpoint-mobile !important;
+               min-width: variables.$breakpoint-mobile !important;
        }
 
        /* do not show dates in filepicker */

diff --git a/core/css/styles.scss b/core/css/styles.scss
index bd7e747169b7e0f9338656c66d1bd5eb15223936..f1130979134eabb87616692ef96ddd53dcb4d569 100644 (file)
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -13,6 +13,7 @@
  * @license GNU AGPL version 3 or any later version
  *
  */
+@use 'variables';
 
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
        margin: 0;
@@ -179,7 +180,8 @@ body {
 
 #controls {
        box-sizing: border-box;
-       @include position('sticky');
+       position: -webkit-sticky;
+       position: sticky;
        height: 44px;
        padding: 0;
        margin: 0;
@@ -190,7 +192,7 @@ body {
        -ms-user-select: none;
        user-select: none;
        display: flex;
-       top: $header-height;
+       top: variables.$header-height;
 }
 
 /* position controls for apps with app-navigation */

diff --git a/core/css/toast.scss b/core/css/toast.scss
new file mode 100644 (file)
index 0000000..88d9cbc
--- /dev/null
+++ b/core/css/toast.scss
@@ -0,0 +1,52 @@
+@use 'variables';
+@import 'functions';
+
+.toastify.toast {
+       min-width: 200px;
+       background: none;
+       background-color: var(--color-main-background);
+       color: var(--color-main-text);
+       box-shadow: 0 0 6px 0 var(--color-box-shadow);
+       padding: 12px;
+       padding-right: 34px;
+       margin-top: 45px;
+       position: fixed;
+       z-index: 9000;
+       border-radius: var(--border-radius);
+
+       .toast-close {
+               position: absolute;
+               top: 0;
+               right: 0;
+               width: 38px;
+               opacity: 0.4;
+               padding: 12px;
+               @include icon-color('close', 'actions', variables.$color-black, 2, true);
+               background-position: center;
+               background-repeat: no-repeat;
+               text-indent: 200%;
+               white-space: nowrap;
+               overflow: hidden;
+
+               &:hover, &:focus, &:active {
+                       cursor: pointer;
+                       opacity: 1;
+               }
+       }
+}
+.toastify.toastify-top {
+       right: 10px;
+}
+
+.toast-error {
+       border-left: 3px solid var(--color-error);
+}
+.toast-info {
+       border-left: 3px solid var(--color-primary);
+}
+.toast-warning {
+       border-left: 3px solid var(--color-warning);
+}
+.toast-success {
+       border-left: 3px solid var(--color-success);
+}

diff --git a/core/css/variables.scss b/core/css/variables.scss
index 87ef3fdcb1b0985bbf91c7b88e5ec4ad7f650f97..9ec9effb0c665129fb58d75bd2da1527c2511125 100644 (file)
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -19,8 +19,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
- // SCSS darken/lighten function override
+// SCSS darken/lighten function override
 @function nc-darken($color, $value) {
        @return darken($color, $value);
 }
@@ -117,3 +116,4 @@ $header-menu-profile-item-height: 66px;
 
 // mobile. Keep in sync with core/js/js.js
 $breakpoint-mobile: 1024px;
+