Migrate apps scss

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
pull/32261/head
John Molakvoæ 2022-05-04 09:56:06 +07:00
parent cc6037e438
commit 78b7baea9d
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
9 changed files with 50 additions and 34 deletions

@ -12,4 +12,4 @@
/* icons for sidebar */ /* icons for sidebar */
.nav-icon-basic-encryption-module { .nav-icon-basic-encryption-module {
background-image: var(--icon-encryption-dark); background-image: var(--icon-encryption-dark);
} }

@ -1,3 +1,6 @@
@use 'variables';
@import 'functions';
#fileSharingSettings h2 { #fileSharingSettings h2 {
display: inline-block; display: inline-block;
} }
@ -29,13 +32,13 @@
} }
.social-diaspora { .social-diaspora {
@include icon-color('social-diaspora', 'federatedfilesharing', $color-black); @include icon-color('social-diaspora', 'federatedfilesharing', variables.$color-black);
} }
.social-twitter { .social-twitter {
@include icon-color('social-twitter', 'federatedfilesharing', $color-black); @include icon-color('social-twitter', 'federatedfilesharing', variables.$color-black);
} }
.social-facebook { .social-facebook {
@include icon-color('social-facebook', 'federatedfilesharing', $color-black); @include icon-color('social-facebook', 'federatedfilesharing', variables.$color-black);
} }
.social_sharing_buttons { .social_sharing_buttons {

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

@ -1,8 +1,10 @@
@use 'variables';
/* 938 = table min-width(688) + app-navigation width: 250\ /* 938 = table min-width(688) + app-navigation width: 250\
$breakpoint-mobile +1 = size where app-navigation is hidden +1 $breakpoint-mobile +1 = size where app-navigation is hidden +1
688 = table min-width */ 688 = table min-width */
$min-table-width: 688px; $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{ .app-files #app-content.dir-drop{
background-color: rgba(255, 255, 255, 1)!important; background-color: rgba(255, 255, 255, 1)!important;

@ -19,14 +19,16 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * 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) // This is the icons used in the sharing ui (multiselect)
.icon-room { .icon-room {
@include icon-color('app', 'spreed', $color-black); @include icon-color('app', 'spreed', variables.$color-black);
} }
.icon-circle { .icon-circle {
@include icon-color('circles', 'circles', $color-black, 3, false); @include icon-color('circles', 'circles', variables.$color-black, 3, false);
} }
.icon-guests { .icon-guests {
@include icon-color('app', 'guests', $color-black); @include icon-color('app', 'guests', variables.$color-black);
} }

@ -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 */ /* make header scroll up for single shares, more view of content on small screens */
#header.share-file { #header.share-file {

@ -1,3 +1,5 @@
@use 'variables';
#preview { #preview {
text-align: center; text-align: center;
} }
@ -204,7 +206,7 @@ thead {
// hide the download entry on the menu // hide the download entry on the menu
// on public share when NOT on mobile // 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 { #body-public {
.header-right { .header-right {
#header-actions-menu { #header-actions-menu {
@ -217,7 +219,7 @@ thead {
} }
// hide the primary on public share on mobile // 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 { #body-public {
.header-right { .header-right {
#header-primary-action { #header-primary-action {

@ -1,6 +1,8 @@
/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net /* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
This file is licensed under the Affero General Public License version 3 or later. This file is licensed under the Affero General Public License version 3 or later.
See the COPYING-README file. */ See the COPYING-README file. */
@use 'variables';
@import 'functions';
input { input {
&#openid, &#webdav { &#openid, &#webdav {
@ -15,23 +17,23 @@ input {
/* icons for sidebar */ /* icons for sidebar */
.nav-icon-personal-settings { .nav-icon-personal-settings {
@include icon-color('personal', 'settings', $color-black); @include icon-color('personal', 'settings', variables.$color-black);
} }
.nav-icon-security { .nav-icon-security {
@include icon-color('toggle-filelist', 'settings', $color-black); @include icon-color('toggle-filelist', 'settings', variables.$color-black);
} }
.nav-icon-clientsbox { .nav-icon-clientsbox {
@include icon-color('change', 'settings', $color-black); @include icon-color('change', 'settings', variables.$color-black);
} }
.nav-icon-federated-cloud { .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 { .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 { #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 { .store .section {
width: 50%; width: 50%;
} }
@ -1572,7 +1574,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
align-self: normal; align-self: normal;
background-color: var(--color-main-background); background-color: var(--color-main-background);
z-index: 100; /* above multiselect */ z-index: 100; /* above multiselect */
top: $header-height; top: variables.$header-height;
&.sticky { &.sticky {
box-shadow: 0 -2px 10px 1px var(--color-box-shadow); box-shadow: 0 -2px 10px 1px var(--color-box-shadow);

@ -19,9 +19,11 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
@use 'variables';
@import 'functions';
.icon-user-status { .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 { .icon-user-status-online {
@ -38,5 +40,5 @@
// TODO: debug why icon-black-white does not work here // TODO: debug why icon-black-white does not work here
.icon-user-status-invisible { .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);
} }