From 78b7baea9d5f80eaea522463243c25f4f908fcc5 Mon Sep 17 00:00:00 2001 From: =?utf8?q?John=20Molakvo=C3=A6?= Date: Wed, 4 May 2022 09:56:06 +0200 Subject: [PATCH] Migrate apps scss MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- apps/encryption/css/settings-personal.scss | 2 +- .../css/settings-personal.scss | 9 ++++-- apps/files/css/files.scss | 29 ++++++++++--------- apps/files/css/mobile.scss | 4 ++- apps/files_sharing/css/icons.scss | 8 +++-- apps/files_sharing/css/mobile.scss | 4 ++- apps/files_sharing/css/public.scss | 6 ++-- apps/settings/css/settings.scss | 16 +++++----- apps/user_status/css/user-status-menu.scss | 6 ++-- 9 files changed, 50 insertions(+), 34 deletions(-) diff --git a/apps/encryption/css/settings-personal.scss b/apps/encryption/css/settings-personal.scss index f7892c001df..59981356573 100644 --- 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 d94e06f943d..501b81df436 100644 --- 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 87b4151078d..c6097858ed5 100644 --- 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 da6fdd25f28..7c5fc8fe4a2 100644 --- 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 002235b6e32..529d8bd5100 100644 --- 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 . * */ +@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 0202fdd08d1..38a7a9cd711 100644 --- 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 aadf7d41037..a3754b7be9f 100644 --- 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 e2b9099f5d3..4e9ad4c7f8a 100644 --- 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 0591bf15748..6dc681c1448 100644 --- 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 . * */ +@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); } -- 2.39.5