mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Inputs scss 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-06-03 11:24:06 +02:00
parent d44e6b7266
commit e8ccdb8644
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 62 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
core/css/inputs.scss
View File

@ -42,28 +42,28 @@ div[contenteditable=true],
margin: 3px 3px 3px 0; margin: 3px 3px 3px 0;
padding: 7px 6px; padding: 7px 6px;
font-size: 13px; font-size: 13px;
background-color: $color-main-background; background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%); border: 1px solid nc-darken($color-main-background, 14%);
outline: none; outline: none;
border-radius: $border-radius; border-radius: var(--border-radius);
cursor: text; cursor: text;
&:not(:disabled):not(.primary) { &:not(:disabled):not(.primary) {
&:hover, &:hover,
&:focus, &:focus,
&.active { &.active {
/* active class used for multiselect */ /* active class used for multiselect */
border-color: $color-primary-element; border-color: var(--color-primary-element);
outline: none; outline: none;
} }
&:active { &:active {
outline: none; outline: none;
background-color: $color-main-background; background-color: var(--color-main-background);
} }
} }
&:disabled { &:disabled {
background-color: nc-darken($color-main-background, 8%); background-color: nc-darken($color-main-background, 8%);
color: rgba($color-main-text, 0.4); color: rgba(var(--color-main-text), 0.4);
cursor: default; cursor: default;
opacity: 0.5; opacity: 0.5;
} }
@ -72,25 +72,25 @@ div[contenteditable=true],
} }
&:invalid { &:invalid {
box-shadow: none !important; box-shadow: none !important;
border-color: $color-error; border-color: var(--color-error);
} }
/* Primary action button, use sparingly */ /* Primary action button, use sparingly */
&.primary { &.primary {
background-color: $color-primary-element; background-color: var(--color-primary-element);
border: 1px solid $color-primary-text; border: 1px solid var(--color-primary-text);
color: $color-primary-text; color: var(--color-primary-text);
cursor: pointer; cursor: pointer;
&:not(:disabled) { &:not(:disabled) {
&:hover, &:hover,
&:focus { &:focus {
background-color: rgba($color-primary-element, .85); background-color: rgba(var(--color-primary-element), .85);
} }
&:active { &:active {
background-color: rgba($color-primary-element, .7); background-color: rgba(var(--color-primary-element), .7);
} }
} }
&:disabled { &:disabled {
background-color: rgba($color-primary-element, .7); background-color: rgba(var(--color-primary-element), .7);
color: nc-lighten($color-main-text, 73%); color: nc-lighten($color-main-text, 73%);
} }
} }
@ -100,15 +100,15 @@ div[contenteditable=false] {
margin: 3px 3px 3px 0; margin: 3px 3px 3px 0;
padding: 7px 6px; padding: 7px 6px;
font-size: 13px; font-size: 13px;
background-color: $color-main-background; background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%); border: 1px solid nc-darken($color-main-background, 14%);
outline: none; outline: none;
border-radius: $border-radius; border-radius: var(--border-radius);
cursor: text; cursor: text;
background-color: nc-darken($color-main-background, 8%); background-color: nc-darken($color-main-background, 8%);
color: rgba($color-main-text, 0.4); color: rgba(var(--color-main-text), 0.4);
cursor: default; cursor: default;
opacity: 0.5; opacity: 0.5;
} }
@ -191,7 +191,7 @@ textarea, div[contenteditable=true] {
&:hover, &:hover,
&:focus { &:focus {
border-color: nc-darken($color-main-background, 14%) !important; border-color: nc-darken($color-main-background, 14%) !important;
background-color: $color-main-background !important; background-color: var(--color-main-background) !important;
} }
} }
} }
@ -222,10 +222,10 @@ input {
+ .icon-confirm { + .icon-confirm {
margin-left: -8px !important; margin-left: -8px !important;
border-left-color: transparent !important; border-left-color: transparent !important;
border-radius: 0 $border-radius $border-radius 0 !important; border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
background-clip: padding-box; background-clip: padding-box;
/* Avoid background under border */ /* Avoid background under border */
background-color: $color-main-background !important; background-color: var(--color-main-background) !important;
opacity: 1; opacity: 1;
width: 34px; width: 34px;
padding: 7px 6px; padding: 7px 6px;
@ -242,8 +242,8 @@ input {
&:active, &:active,
&:hover, &:hover,
&:focus { &:focus {
border-color: $color-primary-element !important; border-color: var(--color-primary-element) !important;
border-radius: $border-radius !important; border-radius: var(--border-radius) !important;
&:disabled { &:disabled {
border-color: nc-darken($color-main-background, 14%) !important; border-color: nc-darken($color-main-background, 14%) !important;
} }
@ -255,11 +255,11 @@ input {
&:focus { &:focus {
&:invalid { &:invalid {
+ .icon-confirm { + .icon-confirm {
border-color: $color-error; border-color: var(--color-error);
} }
} }
+ .icon-confirm { + .icon-confirm {
border-color: $color-primary-element !important; border-color: var(--color-primary-element) !important;
border-left-color: transparent !important; border-left-color: transparent !important;
/* above previous input */ /* above previous input */
z-index: 2; z-index: 2;
@ -281,8 +281,8 @@ select,
/* Radio & Checkboxes */ /* Radio & Checkboxes */
input { input {
$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%); --color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
$color-checkbox-radio-border: nc-darken($color-main-background, 47%); --color-checkbox-radio-border: nc-darken($color-main-background, 47%);
&[type='checkbox'], &[type='checkbox'],
&[type='radio'] { &[type='radio'] {
&.radio, &.radio,
@ -309,26 +309,26 @@ input {
border-radius: 50%; border-radius: 50%;
margin: 3px; margin: 3px;
margin-top: 1px; margin-top: 1px;
border: 1px solid $color-checkbox-radio-border; border: 1px solid var(--color-checkbox-radio-border);
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
border-color: $color-primary-element; border-color: var(--color-primary-element);
} }
&:checked + label:before, &:checked + label:before,
&.checkbox:indeterminate + label:before { &.checkbox:indeterminate + label:before {
/* ^ :indeterminate have a strange behavior on radio, /* ^ :indeterminate have a strange behavior on radio,
so we respecified the checkbox class again to be safe */ so we respecified the checkbox class again to be safe */
box-shadow: inset 0px 0px 0px 2px $color-main-background; box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
background-color: $color-primary-element; background-color: var(--color-primary-element);
border-color: $color-primary-element; border-color: var(--color-primary-element);
} }
&:disabled + label:before { &:disabled + label:before {
border: 1px solid $color-checkbox-radio-border; border: 1px solid var(--color-checkbox-radio-border);
background-color: $color-checkbox-radio-disabled !important; /* override other status */ background-color: var(--color-checkbox-radio-disabled) !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
background-color: $color-checkbox-radio-disabled; background-color: var(--color-checkbox-radio-disabled);
} }
} }
&.checkbox { &.checkbox {
@ -348,7 +348,7 @@ input {
} }
/* We do not use the nc-darken function as this si not supposed to be changed */ /* We do not use the nc-darken function as this si not supposed to be changed */
$color-checkbox-radio-white: #fff; --color-checkbox-radio-white: #fff;
&.radio--white, &.radio--white,
&.checkbox--white { &.checkbox--white {
+ label:before, + label:before,
@ -356,20 +356,20 @@ input {
border-color: darken($color-checkbox-radio-white, 27%); border-color: darken($color-checkbox-radio-white, 27%);
} }
&:not(:disabled):not(:checked) + label:hover:before { &:not(:disabled):not(:checked) + label:hover:before {
border-color: $color-checkbox-radio-white; border-color: var(--color-checkbox-radio-white);
} }
&:checked + label:before { &:checked + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-background; box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
background-color: darken($color-checkbox-radio-white, 14%); background-color: darken($color-checkbox-radio-white, 14%);
border-color: darken($color-checkbox-radio-white, 14%); border-color: darken($color-checkbox-radio-white, 14%);
} }
&:disabled + label:before { &:disabled + label:before {
background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */ background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-background; box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */
background-color: darken($color-checkbox-radio-white, 27%); background-color: darken($color-checkbox-radio-white, 27%);
} }
} }
@ -377,7 +377,7 @@ input {
&:checked + label:before, &:checked + label:before,
&:indeterminate + label:before { &:indeterminate + label:before {
background-color: transparent !important; /* Override default checked */ background-color: transparent !important; /* Override default checked */
border-color: $color-checkbox-radio-white !important; /* Override default checked */ border-color: var(--color-checkbox-radio-white) !important; /* Override default checked */
background-image: url('../img/actions/checkbox-mark-white.svg'); background-image: url('../img/actions/checkbox-mark-white.svg');
} }
&:indeterminate + label:before { &:indeterminate + label:before {
@ -393,7 +393,7 @@ input {
/* Select2 overriding. Merged to core with vendor stylesheet */ /* Select2 overriding. Merged to core with vendor stylesheet */
.select2-drop { .select2-drop {
margin-top: -2px; margin-top: -2px;
background-color: $color-main-background; background-color: var(--color-main-background);
&.select2-drop-active { &.select2-drop-active {
border-color: nc-darken($color-main-background, 14%); border-color: nc-darken($color-main-background, 14%);
} }
@ -439,7 +439,7 @@ input {
} }
.select2-highlighted { .select2-highlighted {
background-color: nc-darken($color-main-background, 3%); background-color: nc-darken($color-main-background, 3%);
color: $color-main-text; color: var(--color-main-text);
} }
} }
} }
@ -456,10 +456,10 @@ input {
box-shadow: none; box-shadow: none;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background: $color-main-background; background: var(--color-main-background);
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
box-sizing: content-box; box-sizing: content-box;
border-radius: $border-radius; border-radius: var(--border-radius);
border: 1px solid nc-darken($color-main-background, 14%); border: 1px solid nc-darken($color-main-background, 14%);
margin: 0; margin: 0;
padding: 2px 0; padding: 2px 0;
@ -472,7 +472,7 @@ input {
&:active, &:active,
& { & {
background-image: none; background-image: none;
background-color: $color-main-background; background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%); border: 1px solid nc-darken($color-main-background, 14%);
} }
@ -501,10 +501,10 @@ input {
box-shadow: none; box-shadow: none;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background: $color-main-background; background: var(--color-main-background);
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
box-sizing: content-box; box-sizing: content-box;
border-radius: $border-radius; border-radius: var(--border-radius);
border: 1px solid nc-darken($color-main-background, 14%); border: 1px solid nc-darken($color-main-background, 14%);
margin: 0; margin: 0;
padding: 2px 0; padding: 2px 0;
@ -521,8 +521,8 @@ input {
} }
&.select2-search-choice-focus, &.select2-search-choice-focus,
&:hover { &:hover {
background-color: $color-border; background-color: var(--color-border);
border-color: $color-border; border-color: var(--color-border);
} }
} }
.select2-arrow { .select2-arrow {
@ -556,7 +556,7 @@ input {
line-height: 20px; line-height: 20px;
padding-left: 5px; padding-left: 5px;
background-image: none; background-image: none;
background-color: $color-main-background; background-color: var(--color-main-background);
color: nc-lighten($color-main-text, 33%); color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%); border: 1px solid nc-darken($color-main-background, 14%);
display: inline-flex; display: inline-flex;
@ -607,11 +607,11 @@ input {
} }
} }
&.highlight { &.highlight {
color: $color-main-text; color: var(--color-main-text);
} }
&.active > a { &.active > a {
background-color: nc-darken($color-main-background, 3%); background-color: nc-darken($color-main-background, 3%);
color: $color-main-text; color: var(--color-main-text);
&::before { &::before {
visibility: visible; visibility: visible;
} }
@ -628,7 +628,7 @@ input {
display: inline-block; display: inline-block;
width: 160px; width: 160px;
position: relative; position: relative;
background-color: $color-main-background; background-color: var(--color-main-background);
&.multiselect--active { &.multiselect--active {
/* Opened: force display the input */ /* Opened: force display the input */
input.multiselect__input { input.multiselect__input {
@ -709,7 +709,7 @@ input {
padding: 8px 10px; padding: 8px 10px;
flex: 0 0 100%; flex: 0 0 100%;
z-index: 1; /* above input */ z-index: 1; /* above input */
background-color: $color-main-background; background-color: var(--color-main-background);
cursor: pointer; cursor: pointer;
} }
/* displayed text if tag limit reached */ /* displayed text if tag limit reached */
@ -746,7 +746,7 @@ input {
width: 100%; width: 100%;
margin-top: -1px; margin-top: -1px;
border: 1px solid nc-darken($color-main-background, 14%); border: 1px solid nc-darken($color-main-background, 14%);
background: $color-main-background; background: var(--color-main-background);
z-index: 50; z-index: 50;
max-height: 250px; max-height: 250px;
overflow-y: auto; overflow-y: auto;
@ -808,7 +808,7 @@ input {
} }
} }
&.multiselect__option--highlight { &.multiselect__option--highlight {
color: $color-main-text; color: var(--color-main-text);
} }
&:not(.multiselect__option--disabled):hover::before { &:not(.multiselect__option--disabled):hover::before {
opacity: .3; opacity: .3;
@ -831,29 +831,29 @@ progress {
padding: 0; padding: 0;
border: 0 none; border: 0 none;
background-color: nc-darken($color-main-background, 10%); background-color: nc-darken($color-main-background, 10%);
border-radius: $border-radius; border-radius: var(--border-radius);
flex-basis: 100%; flex-basis: 100%;
height: 5px; height: 5px;
overflow: hidden; overflow: hidden;
&.warn { &.warn {
&::-moz-progress-bar { &::-moz-progress-bar {
background: $color-error; background: var(--color-error);
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background: $color-error; background: var(--color-error);
} }
} }
&::-webkit-progress-bar { &::-webkit-progress-bar {
background: transparent; background: transparent;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: $border-radius; border-radius: var(--border-radius);
background: $color-primary; background: var(--color-primary);
transition: 250ms all ease-in-out; transition: 250ms all ease-in-out;
} }
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: $border-radius; border-radius: var(--border-radius);
background: $color-primary; background: var(--color-primary);
transition: 250ms all ease-in-out; transition: 250ms all ease-in-out;
} }
} }