Merge pull request #3024 from nextcloud/apps-scss-optimisation
Apps scss optimisation
This commit is contained in:
John Molakvoæ
GitHub
commit
8d8aff1bce
|
|
@ -1,3 +1,30 @@
|
|||
/**
|
||||
* @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com)
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
*/
|
||||
|
||||
/* HEADING STYLING ---------------------------------------------------------- */
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 12px;
|
||||
line-height: 140%;
|
||||
}
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
margin: 12px 0;
|
||||
}
|
||||
/* do not use italic typeface style, instead lighter color */
|
||||
em {
|
||||
font-style: normal;
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* APP STYLING -------------------------------------------------------------- */
|
||||
|
||||
#app {
|
||||
|
|
@ -39,13 +66,15 @@
|
|||
&.without-app-settings {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.active.with-menu > a, .with-counter > a {
|
||||
.active.with-menu > a,
|
||||
.with-counter > a {
|
||||
padding-right: 50px;
|
||||
}
|
||||
.active.with-menu.with-counter > a {
|
||||
padding-right: 90px;
|
||||
}
|
||||
.with-icon a, .app-navigation-entry-loading a {
|
||||
.with-icon a,
|
||||
.app-navigation-entry-loading a {
|
||||
padding-left: 44px;
|
||||
background-size: 16px 16px;
|
||||
background-position: 14px center;
|
||||
|
|
@ -64,25 +93,14 @@
|
|||
color: #000;
|
||||
opacity: .57;
|
||||
}
|
||||
.active {
|
||||
li:hover > a,
|
||||
li:focus > a,
|
||||
a:focus,
|
||||
.selected,
|
||||
.selected a,
|
||||
.active,
|
||||
.active a {
|
||||
opacity: 1;
|
||||
a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
li {
|
||||
&:hover > a, &:focus > a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
a:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.selected {
|
||||
opacity: 1;
|
||||
a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.collapse {
|
||||
display: none;
|
||||
|
|
@ -105,11 +123,15 @@
|
|||
outline: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover > a, &:focus > a {
|
||||
&:hover > a,
|
||||
&:focus > a {
|
||||
background-image: none;
|
||||
}
|
||||
&:hover > .collapse, &:focus > .collapse {
|
||||
display: block;
|
||||
&:hover,
|
||||
&:focus {
|
||||
> .collapse {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.collapse {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
|
|
@ -128,6 +150,7 @@
|
|||
}
|
||||
}
|
||||
> {
|
||||
/* Second level nesting for lists */
|
||||
ul ul {
|
||||
display: none;
|
||||
li > a {
|
||||
|
|
@ -135,20 +158,23 @@
|
|||
}
|
||||
}
|
||||
.with-icon ul li {
|
||||
> a, &.app-navigation-entry-loading > a {
|
||||
> a,
|
||||
&.app-navigation-entry-loading > a {
|
||||
padding-left: 68px;
|
||||
background-position: 44px center;
|
||||
}
|
||||
}
|
||||
}
|
||||
> ul .collapsible.open {
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 3px #ddd;
|
||||
}
|
||||
ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/* Deleted entries with undo button */
|
||||
.app-navigation-entry-deleted {
|
||||
display: inline-block;
|
||||
height: 44px;
|
||||
|
|
@ -178,6 +204,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* counter and actions, legacy code */
|
||||
.utils {
|
||||
position: absolute;
|
||||
padding: 7px 7px 0 0;
|
||||
|
|
@ -191,6 +218,7 @@
|
|||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
/* drag and drop */
|
||||
.drag-and-drop {
|
||||
-webkit-transition: padding-bottom 500ms ease 0s;
|
||||
transition: padding-bottom 500ms ease 0s;
|
||||
|
|
@ -202,32 +230,34 @@
|
|||
.app-navigation-separator {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/**
|
||||
* App navigation utils, buttons and counters for drop down menu
|
||||
*/
|
||||
.app-navigation-entry-utils {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 105;
|
||||
ul {
|
||||
display: block !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
width: 44px !important;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
.active > .app-navigation-entry-utils li {
|
||||
display: inline-block;
|
||||
}
|
||||
.app-navigation-entry-utils button {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
line-height: 38px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.app-navigation-entry-utils-menu-button {
|
||||
display: none;
|
||||
button {
|
||||
border: 0;
|
||||
opacity: .5;
|
||||
|
|
@ -236,7 +266,8 @@
|
|||
background-position: center;
|
||||
background-image: url('../img/actions/more.svg?v=1');
|
||||
}
|
||||
&:hover button, &:focus button {
|
||||
&:hover button,
|
||||
&:focus button {
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -253,109 +284,8 @@
|
|||
.app-navigation-entry-utils ul, .app-navigation-entry-menu ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Second level nesting for lists */
|
||||
|
||||
/* Deleted entries with undo button */
|
||||
|
||||
/* counter and actions, legacy code */
|
||||
|
||||
/* drag and drop */
|
||||
|
||||
/**
|
||||
* App navigation utils, buttons and counters for drop down menu
|
||||
*/
|
||||
|
||||
/* menu bubble / popover */
|
||||
|
||||
.bubble, #app-navigation .app-navigation-entry-menu {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
border-top-right-radius: 0;
|
||||
z-index: 110;
|
||||
margin: 5px;
|
||||
margin-top: -5px;
|
||||
right: 0;
|
||||
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
}
|
||||
|
||||
.ie {
|
||||
.bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.edge {
|
||||
.bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
/* miraculous border arrow stuff */
|
||||
|
||||
.bubble:after, #app-navigation .app-navigation-entry-menu:after {
|
||||
bottom: 100%;
|
||||
right: 6px;
|
||||
/* change this to adjust the arrow position */
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bubble:after, #app-navigation .app-navigation-entry-menu:after {
|
||||
border-color: rgba(238, 238, 238, 0);
|
||||
border-bottom-color: #fff;
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.bubble .action {
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
|
||||
filter: alpha(opacity = 50) !important;
|
||||
opacity: .5 !important;
|
||||
&:hover, &:focus, &.active {
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
|
||||
filter: alpha(opacity = 100) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#app-navigation {
|
||||
.app-navigation-entry-menu {
|
||||
display: none;
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
display: block !important;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
width: 38px !important;
|
||||
button {
|
||||
float: right;
|
||||
width: 36px !important;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border: 0;
|
||||
opacity: .5;
|
||||
background-color: transparent;
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* editing an entry */
|
||||
.app-navigation-entry-edit {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
|
@ -372,7 +302,8 @@
|
|||
float: left;
|
||||
border: 1px solid rgba(190, 190, 190, 0.9);
|
||||
}
|
||||
button, input[type='submit'] {
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: 36px;
|
||||
height: 38px;
|
||||
float: left;
|
||||
|
|
@ -386,18 +317,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* list of options for an entry */
|
||||
|
||||
/* editing an entry */
|
||||
|
||||
/* APP-CONTENT ---------------------------------------------------------------*/
|
||||
|
||||
/* Part where the content will be loaded into */
|
||||
|
||||
#app-content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
/* no top border for first settings item */
|
||||
> .section:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
&.with-app-sidebar {
|
||||
margin-right: 27%;
|
||||
}
|
||||
}
|
||||
|
||||
#app-content-wrapper {
|
||||
|
|
@ -412,7 +344,6 @@
|
|||
have it as first element within app-content in order to shrink other
|
||||
sibling containers properly. Compare Files app for example.
|
||||
*/
|
||||
|
||||
#app-sidebar {
|
||||
position: fixed;
|
||||
top: 45px;
|
||||
|
|
@ -430,27 +361,22 @@
|
|||
overflow-y: auto;
|
||||
visibility: visible;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
#app-content.with-app-sidebar {
|
||||
margin-right: 27%;
|
||||
}
|
||||
|
||||
#app-sidebar.disappear {
|
||||
visibility: hidden;
|
||||
&.disappear {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* APP-SETTINGS ---------------------------------------------------------------*/
|
||||
|
||||
/* settings area */
|
||||
|
||||
#app-settings {
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
/* change to 100% when layout positions are absolute */
|
||||
bottom: 0;
|
||||
z-index: 140;
|
||||
&.open #app-settings-content, &.opened #app-settings-content {
|
||||
&.open #app-settings-content,
|
||||
&.opened #app-settings-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -465,6 +391,11 @@
|
|||
border-right: 1px solid #eee;
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* display input fields at full width */
|
||||
input[type='text'] {
|
||||
width: 93%;
|
||||
}
|
||||
}
|
||||
|
||||
#app-settings-header {
|
||||
|
|
@ -473,12 +404,6 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* display input fields at full width */
|
||||
|
||||
#app-settings-content input[type='text'] {
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
display: block;
|
||||
height: 44px;
|
||||
|
|
@ -495,7 +420,8 @@
|
|||
text-align: left;
|
||||
padding-left: 42px;
|
||||
font-weight: normal;
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
&.opened {
|
||||
|
|
@ -505,18 +431,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
|
||||
button.loading {
|
||||
background-image: url('../img/loading.gif');
|
||||
background-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
/* general styles for the content area */
|
||||
|
||||
/* GENERAL SECTION ---------------------------------------------------------- */
|
||||
.section {
|
||||
display: block;
|
||||
padding: 30px;
|
||||
|
|
@ -525,8 +440,15 @@ button.loading {
|
|||
&.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
/* slight position correction of checkboxes and radio buttons */
|
||||
input {
|
||||
&[type='checkbox'],
|
||||
&[type='radio'] {
|
||||
vertical-align: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-section {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
|
|
@ -534,36 +456,6 @@ button.loading {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* no top border for first settings item */
|
||||
|
||||
#app-content > .section:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* heading styles */
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 12px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* slight position correction of checkboxes and radio buttons */
|
||||
|
||||
.section input {
|
||||
&[type='checkbox'], &[type='radio'] {
|
||||
vertical-align: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.appear {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 500ms ease 0s;
|
||||
|
|
@ -576,16 +468,7 @@ h3 {
|
|||
}
|
||||
}
|
||||
|
||||
/* do not use italic typeface style, instead lighter color */
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* generic dropdown style */
|
||||
|
||||
/* DROPDOWN ----------------------------------------------------------------- */
|
||||
.dropdown {
|
||||
background: #eee;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
|
@ -600,8 +483,7 @@ em {
|
|||
padding: 16px;
|
||||
}
|
||||
|
||||
/* generic tab styles */
|
||||
|
||||
/* TABS --------------------------------------------------------------------- */
|
||||
.tabHeaders {
|
||||
display: inline-block;
|
||||
margin: 15px;
|
||||
|
|
@ -632,7 +514,6 @@ em {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabsContainer {
|
||||
clear: left;
|
||||
.tab {
|
||||
|
|
@ -640,50 +521,143 @@ em {
|
|||
}
|
||||
}
|
||||
|
||||
/* popover menu styles (use together with 'bubble' class) */
|
||||
|
||||
.popovermenu {
|
||||
.menuitem {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
|
||||
filter: alpha(opacity = 50);
|
||||
opacity: .5;
|
||||
&:hover, &:focus, &.active {
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
|
||||
filter: alpha(opacity = 100);
|
||||
opacity: 1;
|
||||
}
|
||||
img {
|
||||
padding: initial;
|
||||
}
|
||||
}
|
||||
a.menuitem, label.menuitem, .menuitem {
|
||||
padding: 10px !important;
|
||||
width: auto;
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
.menuitem {
|
||||
display: flex !important;
|
||||
line-height: 30px;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
.icon, .no-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
opacity: 0.5;
|
||||
}
|
||||
li:hover .menuitem {
|
||||
opacity: 1;
|
||||
/* POPOVER MENU ------------------------------------------------------------- */
|
||||
.ie,
|
||||
.edge {
|
||||
.bubble, .bubble:after,
|
||||
.popovermenu, .popovermenu:after,
|
||||
#app-navigation .app-navigation-entry-menu,
|
||||
#app-navigation .app-navigation-entry-menu:after {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble,
|
||||
.app-navigation-entry-menu,
|
||||
.popovermenu {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
border-top-right-radius: 0;
|
||||
z-index: 110;
|
||||
margin: 5px;
|
||||
margin-top: -5px;
|
||||
right: 0;
|
||||
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
||||
display: none;
|
||||
|
||||
&:after {
|
||||
bottom: 100%;
|
||||
/* Min-width of popover is 36px and arrow width is 20px
|
||||
wich leaves us 8px right and 8px left */
|
||||
right: 8px;
|
||||
/* change this to adjust the arrow position */
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(238, 238, 238, 0);
|
||||
border-bottom-color: #fff;
|
||||
border-width: 10px;
|
||||
}
|
||||
/* Center the popover */
|
||||
&.menu-center {
|
||||
transform: translateX(50%);
|
||||
right: 50%;
|
||||
margin-right: 0;
|
||||
border-top-right-radius: 3px;
|
||||
&:after {
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
/* Align the popover to the left */
|
||||
&.menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 3px;
|
||||
&:after {
|
||||
left: 6px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul {
|
||||
/* Overwrite #app-navigation > ul ul */
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
> button,
|
||||
> a {
|
||||
cursor: pointer;
|
||||
line-height: 36px;
|
||||
border: 0;
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
|
||||
filter: alpha(opacity = 50) !important;
|
||||
opacity: .5 !important;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
font-weight: inherit;
|
||||
/* prevent .action class to break the design */
|
||||
&.action {
|
||||
padding: inherit !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
|
||||
filter: alpha(opacity = 100) !important;
|
||||
opacity: 1 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
> span {
|
||||
cursor: pointer;
|
||||
}
|
||||
> p {
|
||||
width: 150px;
|
||||
line-height: 1.6em;
|
||||
padding: 8px 0;
|
||||
> span {
|
||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)' !important;
|
||||
filter: alpha(opacity = 70) !important;
|
||||
opacity: .7 !important;
|
||||
}
|
||||
}
|
||||
/* Add padding if contains icon+text */
|
||||
&:not(:empty) {
|
||||
padding: 0 !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
> img {
|
||||
width: 16px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
[class^='icon-'],
|
||||
[class*=' icon-']{
|
||||
/* Keep padding to define the width to
|
||||
assure correct position of a possible text */
|
||||
padding: 18px 0 18px 36px;
|
||||
min-width: 0; /* Overwrite icons*/
|
||||
min-height: 0;
|
||||
background-position: 10px center
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue