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

Merge pull request #6692 from nextcloud/inputs-border-to-main-bg 

Inputs border to main bg and fix white inputs
This commit is contained in:
Roeland Jago Douma 2017-10-10 10:01:14 +02:00 committed by GitHub
parent 564d1b1789 c2abc5810c
commit 968d4f6396
3 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
core/css/inputs.scss
View File

@ -41,7 +41,7 @@ textarea,
font-size: 13px;
background-color: $color-main-background;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-lighten($color-main-text, 86%);
border: 1px solid nc-darken($color-main-background, 14%);
outline: none;
border-radius: 3px;
cursor: text;
@ -163,7 +163,7 @@ textarea {
&:active,
&:hover,
&:focus {
border-color: nc-lighten($color-main-text, 86%) !important;
border-color: nc-darken($color-main-background, 14%) !important;
background-color: $color-main-background !important;
}
}
@ -192,6 +192,8 @@ select,
/* Radio & Checkboxes */
input {
$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
&[type='checkbox'],
&[type='radio'] {
&.radio,
@ -218,7 +220,7 @@ input {
border-radius: 50%;
margin: 3px;
margin-top: 1px;
border: 1px solid nc-lighten($color-main-text, 53%);
border: 1px solid $color-checkbox-radio-border;
}
&:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before {
@ -233,11 +235,11 @@ input {
border-color: $color-primary-element;
}
&:disabled + label:before {
border: 1px solid nc-lighten($color-main-text, 53%);
background-color: nc-lighten($color-main-text, 73%) !important; /* override other status */
border: 1px solid $color-checkbox-radio-border;
background-color: $color-checkbox-radio-disabled !important; /* override other status */
}
&:checked:disabled + label:before {
background-color: nc-lighten($color-main-text, 73%);
background-color: $color-checkbox-radio-disabled;
}
}
&.checkbox {
@ -255,45 +257,45 @@ input {
background-image: url('../img/actions/checkbox-mixed.svg');
}
}
/* We do not use the nc-darken function as this si not supposed to be changed */
$color-checkbox-radio-white: #fff;
&.radio--white,
&.checkbox--white {
+ label:before {
border-color: nc-lighten($color-main-text, 86%);
}
&:not(:disabled):not(:checked) + label:hover:before,
+ label:before,
&:focus + label:before {
border-color: $color-main-background;
border-color: darken($color-checkbox-radio-white, 27%);
}
&:not(:disabled):not(:checked) + label:hover:before {
border-color: $color-checkbox-radio-white;
}
&:checked + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-text;
background-color: $color-border;
border-color: $color-border
box-shadow: inset 0px 0px 0px 2px $color-main-background;
background-color: darken($color-checkbox-radio-white, 14%);
border-color: darken($color-checkbox-radio-white, 14%);
}
&:disabled + label:before {
background-color: nc-lighten($color-main-text, 33%) !important; /* override other status */
border-color: rgba($color-main-text, 0.4) !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 */
}
&:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-text;
border-color: nc-lighten($color-main-text, 33%);
background-color: nc-lighten($color-main-text, 33%);
box-shadow: inset 0px 0px 0px 2px $color-main-background;
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
background-color: darken($color-checkbox-radio-white, 27%);
}
}
&.checkbox--white {
&:checked + label:before,
&:indeterminate + label:before {
background-color: transparent !important; /* Override default checked */
border-color: $color-main-background !important; /* Override default checked */
border-color: $color-checkbox-radio-white !important; /* Override default checked */
background-image: url('../img/actions/checkbox-mark-white.svg');
}
&:indeterminate + label:before {
background-image: url('../img/actions/checkbox-mixed-white.svg');
}
&:checked:disabled + label:after {
border-color: nc-lighten($color-main-text, 73%);
}
&:indeterminate:disabled + label:after {
background-color: nc-lighten($color-main-text, 73%);
&:disabled + label:before {
opacity: 0.7; /* No other choice for white background image */
}
}
}
@ -304,7 +306,7 @@ input {
margin-top: -2px;
background-color: $color-main-background;
&.select2-drop-active {
border-color: nc-lighten($color-main-text, 86%);
border-color: nc-darken($color-main-background, 14%);
}
.avatar {
display: inline-block;
@ -369,7 +371,7 @@ input {
color: nc-lighten($color-main-text, 33%);
box-sizing: content-box;
border-radius: 3px;
border: 1px solid nc-lighten($color-main-text, 86%);
border: 1px solid nc-darken($color-main-background, 14%);
margin: 0;
padding: 2px 0;
min-height: auto;
@ -383,7 +385,7 @@ input {
background-image: none;
background-color: $color-main-background;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-lighten($color-main-text, 86%);
border: 1px solid nc-darken($color-main-background, 14%);
}
.select2-search-choice-close {
display: none;
@ -414,7 +416,7 @@ input {
color: nc-lighten($color-main-text, 33%);
box-sizing: content-box;
border-radius: 3px;
border: 1px solid nc-lighten($color-main-text, 86%);
border: 1px solid nc-darken($color-main-background, 14%);
margin: 0;
padding: 2px 0;
padding-left: 6px;

2
core/css/share.scss
View File

@ -149,7 +149,7 @@ a {
}
#link {
border-top: 1px solid nc-lighten($color-main-text, 86%);
border-top: 1px solid nc-darken($color-main-background, 14%);
padding-top: 8px;
#showPassword img {
padding-left: 5px;

8
core/css/styles.scss
View File

@ -361,7 +361,7 @@ body {
}
a {
color: $color-primary-text;
border-bottom: 1px solid nc-lighten($color-main-text, 73%);
border-bottom: 1px solid nc-darken($color-main-background, 27%);
}
}
.infogroup {
@ -627,7 +627,7 @@ label.infield {
background: nc-darken($color-main-background, 3%);
color: nc-lighten($color-main-text, 53%);
cursor: pointer;
border: 1px solid nc-lighten($color-main-text, 86%);
border: 1px solid nc-darken($color-main-background, 14%);
span {
cursor: pointer;
padding: 10px 20px;
@ -1064,7 +1064,7 @@ code {
}
.ui-datepicker-prev, .ui-datepicker-next {
border: nc-lighten($color-main-text, 86%);
border: nc-darken($color-main-background, 14%);
background: $color-main-background;
}
@ -1287,7 +1287,7 @@ span.ui-icon {
}
.scrollarea {
overflow: auto;
border: 1px solid nc-lighten($color-main-text, 86%);
border: 1px solid nc-darken($color-main-background, 14%);
width: 100%;
height: 240px;
}