Migrate apps scss

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

diff --git a/apps/encryption/css/settings-personal.scss b/apps/encryption/css/settings-personal.scss
index f7892c001df32fd11436f73b63e06dd3f8b27334..59981356573c001ed060bf1f91cd85509961abb7 100644 (file)
--- a/apps/encryption/css/settings-personal.scss
+++ b/apps/encryption/css/settings-personal.scss
@@ -12,4 +12,4 @@
 /* icons for sidebar */
 .nav-icon-basic-encryption-module {
        background-image: var(--icon-encryption-dark);
-}
\ No newline at end of file
+}

diff --git a/apps/federatedfilesharing/css/settings-personal.scss b/apps/federatedfilesharing/css/settings-personal.scss
index d94e06f943da0ed279618e6bbab0882d65369630..501b81df43639e799767f3afc127853b4aad5644 100644 (file)
--- a/apps/federatedfilesharing/css/settings-personal.scss
+++ b/apps/federatedfilesharing/css/settings-personal.scss
@@ -1,3 +1,6 @@
+@use 'variables';
+@import 'functions';
+
 #fileSharingSettings h2 {
        display: inline-block;
 }
@@ -29,13 +32,13 @@
 }
 
 .social-diaspora {
-       @include icon-color('social-diaspora', 'federatedfilesharing', $color-black);
+       @include icon-color('social-diaspora', 'federatedfilesharing', variables.$color-black);
 }
 .social-twitter {
-    @include icon-color('social-twitter', 'federatedfilesharing', $color-black);
+    @include icon-color('social-twitter', 'federatedfilesharing', variables.$color-black);
 }
 .social-facebook {
-       @include icon-color('social-facebook', 'federatedfilesharing', $color-black);
+       @include icon-color('social-facebook', 'federatedfilesharing', variables.$color-black);
 }
 
 .social_sharing_buttons {

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 87b4151078d391e3db7ffbea861f8b6b10e489c4..c6097858ed5f8e317ebe3fa9d3c28c6365836d9d 100644 (file)
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -5,6 +5,8 @@
  * This file is licensed under the Affero General Public License version 3 or later.
  * See the COPYING-README file.
  */
+@use 'variables';
+@import 'functions';
 
 /* FILE MENU */
 .actions {
@@ -66,9 +68,8 @@
        thead {
                position: -webkit-sticky;
                position: sticky;
-               @include position('sticky');
                // header + breadcrumbs
-               top: $header-height;
+               top: variables.$header-height;
                // under breadcrumbs, over file list
                z-index: 60;
                display: block;
@@ -127,37 +128,37 @@
 
 /* icons for sidebar */
 .nav-icon-files {
-       @include icon-color('folder', 'files', $color-black);
+       @include icon-color('folder', 'files', variables.$color-black);
 }
 .nav-icon-recent {
-       @include icon-color('recent', 'files', $color-black);
+       @include icon-color('recent', 'files', variables.$color-black);
 }
 .nav-icon-favorites {
-       @include icon-color('starred', 'actions', $color-black, 2, true);
+       @include icon-color('starred', 'actions', variables.$color-black, 2, true);
 }
 .nav-icon-sharingin,
 .nav-icon-sharingout,
 .nav-icon-pendingshares,
 .nav-icon-shareoverview {
-       @include icon-color('share', 'files', $color-black);
+       @include icon-color('share', 'files', variables.$color-black);
 }
 .nav-icon-sharinglinks {
-       @include icon-color('public', 'files', $color-black);
+       @include icon-color('public', 'files', variables.$color-black);
 }
 .nav-icon-extstoragemounts {
-       @include icon-color('external', 'files', $color-black);
+       @include icon-color('external', 'files', variables.$color-black);
 }
 .nav-icon-trashbin {
-       @include icon-color('delete', 'files', $color-black);
+       @include icon-color('delete', 'files', variables.$color-black);
 }
 .nav-icon-trashbin-starred {
        @include icon-color('delete', 'files', #ff0000);
 }
 .nav-icon-deletedshares {
-       @include icon-color('unshare', 'files', $color-black);
+       @include icon-color('unshare', 'files', variables.$color-black);
 }
 .nav-icon-favorites-starred {
-       @include icon-color('starred', 'actions', $color-yellow, 2, true);
+       @include icon-color('starred', 'actions', variables.$color-yellow, 2, true);
 }
 
 #app-navigation .nav-files a.nav-icon-files {
@@ -823,7 +824,7 @@ table.dragshadow td.size {
                background-image: none;
        }
        & .icon-starred {
-               @include icon-color('star-dark', 'actions', $color-yellow, 1, true);
+               @include icon-color('star-dark', 'actions', variables.$color-yellow, 1, true);
        }
 }
 
@@ -846,10 +847,10 @@ table.dragshadow td.size {
 
 .breadcrumb .canDrop > a,
 #filestable tbody tr.canDrop {
-       background-color: rgba( $color-primary, .3 );
+       background-color: rgba( variables.$color-primary, .3 );
 }
 .dropzone-background {
-       background-color: rgba( $color-primary, .3 );
+       background-color: rgba( variables.$color-primary, .3 );
        :hover{
                box-shadow: none !important;
        }

diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss
index da6fdd25f285ba855ecc144361ee7a7d12914d0c..7c5fc8fe4a25ad3c93ca714835273ec22a6303d8 100644 (file)
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -1,8 +1,10 @@
+@use 'variables';
+
 /* 938 = table min-width(688) + app-navigation width: 250\
        $breakpoint-mobile +1 = size where app-navigation is hidden +1
        688 = table min-width */
 $min-table-width: 688px;
-@media only screen and (max-width: $min-table-width + $navigation-width) and (min-width: $breakpoint-mobile + 1), only screen and (max-width: $min-table-width) {
+@media only screen and (max-width: $min-table-width + variables.$navigation-width) and (min-width: variables.$breakpoint-mobile + 1), only screen and (max-width: $min-table-width) {
 
 .app-files #app-content.dir-drop{
        background-color: rgba(255, 255, 255, 1)!important;

diff --git a/apps/files_sharing/css/icons.scss b/apps/files_sharing/css/icons.scss
index 002235b6e32ed5cdbc3b278ebc13870e2577c3b8..529d8bd5100a6fb5a32066749ff086c87c5f6e1c 100644 (file)
--- a/apps/files_sharing/css/icons.scss
+++ b/apps/files_sharing/css/icons.scss
@@ -19,14 +19,16 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+@use 'variables';
+@import 'functions';
 
 // This is the icons used in the sharing ui (multiselect)
 .icon-room {
-       @include icon-color('app', 'spreed', $color-black);
+       @include icon-color('app', 'spreed', variables.$color-black);
 }
 .icon-circle {
-       @include icon-color('circles', 'circles', $color-black, 3, false);
+       @include icon-color('circles', 'circles', variables.$color-black, 3, false);
 }
 .icon-guests {
-       @include icon-color('app', 'guests', $color-black);
+       @include icon-color('app', 'guests', variables.$color-black);
 }
\ No newline at end of file

diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss
index 0202fdd08d1c5b1999c5d59a681334444d9e995a..38a7a9cd711119a432bc58a4a01e57e153afc65b 100644 (file)
--- a/apps/files_sharing/css/mobile.scss
+++ b/apps/files_sharing/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) {
 
 /* make header scroll up for single shares, more view of content on small screens */
 #header.share-file {

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index aadf7d410373416dc2594479acbe3d94ffdad466..a3754b7be9fde42d027ce0cfd17e48b3335b14b5 100644 (file)
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -1,3 +1,5 @@
+@use 'variables';
+
 #preview {
        text-align: center;
 }
@@ -204,7 +206,7 @@ thead {
 
 // hide the download entry on the menu
 // on public share when NOT on mobile
-@media only screen and (min-width: $breakpoint-mobile + 1) {
+@media only screen and (min-width: variables.$breakpoint-mobile + 1) {
        #body-public {
                .header-right {
                        #header-actions-menu {
@@ -217,7 +219,7 @@ thead {
 }
 
 // hide the primary on public share on mobile
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (max-width: variables.$breakpoint-mobile) {
        #body-public {
                .header-right {
                        #header-primary-action {

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index e2b9099f5d32acfadfe4b5a67c42ccc8066bdebe..4e9ad4c7f8acd670820755893889fb8f98929d44 100644 (file)
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -1,6 +1,8 @@
 /* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
+@use 'variables';
+@import 'functions';
 
 input {
        &#openid, &#webdav {
@@ -15,23 +17,23 @@ input {
 
 /* icons for sidebar */
 .nav-icon-personal-settings {
-       @include icon-color('personal', 'settings', $color-black);
+       @include icon-color('personal', 'settings', variables.$color-black);
 }
 
 .nav-icon-security {
-       @include icon-color('toggle-filelist', 'settings', $color-black);
+       @include icon-color('toggle-filelist', 'settings', variables.$color-black);
 }
 
 .nav-icon-clientsbox {
-       @include icon-color('change', 'settings', $color-black);
+       @include icon-color('change', 'settings', variables.$color-black);
 }
 
 .nav-icon-federated-cloud {
-       @include icon-color('share', 'settings', $color-black);
+       @include icon-color('share', 'settings', variables.$color-black);
 }
 
 .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
-       @include icon-color('password', 'settings', $color-black);
+       @include icon-color('password', 'settings', variables.$color-black);
 }
 
 #avatarform {
@@ -916,7 +918,7 @@ span.version {
        }
 }
 
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (max-width: variables.$breakpoint-mobile) {
        .store .section {
                width: 50%;
        }
@@ -1572,7 +1574,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
                                align-self: normal;
                                background-color: var(--color-main-background);
                                z-index: 100; /* above multiselect */
-                               top: $header-height;
+                               top: variables.$header-height;
 
                                &.sticky {
                                        box-shadow: 0 -2px 10px 1px var(--color-box-shadow);

diff --git a/apps/user_status/css/user-status-menu.scss b/apps/user_status/css/user-status-menu.scss
index 0591bf15748f8d2d71af8342a643d3cf9c330dcf..6dc681c14481b3e2e2e4cefbd1cfbd51b3b097ba 100644 (file)
--- a/apps/user_status/css/user-status-menu.scss
+++ b/apps/user_status/css/user-status-menu.scss
@@ -19,9 +19,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+@use 'variables';
+@import 'functions';
 
 .icon-user-status {
-       @include icon-color('app', 'user_status', $color-black, 1);
+       @include icon-color('app', 'user_status', variables.$color-black, 1);
 }
 
 .icon-user-status-online {
@@ -38,5 +40,5 @@
 
 // TODO: debug why icon-black-white does not work here
 .icon-user-status-invisible {
-       @include icon-color('user-status-invisible', 'user_status', $color-black, 1);
+       @include icon-color('user-status-invisible', 'user_status', variables.$color-black, 1);
 }