From 345b9d151fb41f8608b06da0221a8244f6b0235e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 28 Sep 2017 18:14:31 +0200 Subject: [PATCH 1/4] Initial commit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 34 +++++++++++++++++----------------- core/css/share.scss | 2 +- core/css/styles.scss | 8 ++++---- 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 42de33b0be..418ec398a2 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -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; } } @@ -218,7 +218,7 @@ input { border-radius: 50%; margin: 3px; margin-top: 1px; - border: 1px solid nc-lighten($color-main-text, 53%); + border: 1px solid nc-darken($color-main-background, 47%); } &:not(:disabled):not(:checked) + label:hover:before, &:focus + label:before { @@ -233,11 +233,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 nc-darken($color-main-background, 47%); + background-color: nc-darken($color-main-background, 27%) !important; /* override other status */ } &:checked:disabled + label:before { - background-color: nc-lighten($color-main-text, 73%); + background-color: nc-darken($color-main-background, 27%); } } &.checkbox { @@ -258,7 +258,7 @@ input { &.radio--white, &.checkbox--white { + label:before { - border-color: nc-lighten($color-main-text, 86%); + border-color: nc-darken($color-main-background, 14%); } &:not(:disabled):not(:checked) + label:hover:before, &:focus + label:before { @@ -270,13 +270,13 @@ input { border-color: $color-border } &: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: nc-darken($color-main-background, 23%) !important; /* override other status */ + border-color: rgba($color-main-background, 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%); + border-color: nc-darken($color-main-background, 27%); + background-color: nc-darken($color-main-background, 27%); } } &.checkbox--white { @@ -290,10 +290,10 @@ input { background-image: url('../img/actions/checkbox-mixed-white.svg'); } &:checked:disabled + label:after { - border-color: nc-lighten($color-main-text, 73%); + border-color: nc-darken($color-main-background, 27%); } &:indeterminate:disabled + label:after { - background-color: nc-lighten($color-main-text, 73%); + background-color: nc-darken($color-main-background, 27%); } } } @@ -304,7 +304,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 +369,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 +383,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 +414,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; diff --git a/core/css/share.scss b/core/css/share.scss index 35d90fb4b8..2a9f357bc3 100644 --- a/core/css/share.scss +++ b/core/css/share.scss @@ -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; diff --git a/core/css/styles.scss b/core/css/styles.scss index 33618d3411..c23c5cd86a 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -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; } From a0d268d7a119b06eb317669f6949a2f48fb5447f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 28 Sep 2017 18:57:02 +0200 Subject: [PATCH 2/4] Fix white inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 418ec398a2..067f208e27 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -257,43 +257,40 @@ input { } &.radio--white, &.checkbox--white { - + label:before { - border-color: nc-darken($color-main-background, 14%); - } - &:not(:disabled):not(:checked) + label:hover:before, + + label:before, &:focus + label:before { - border-color: $color-main-background; + border-color: darken(#fff, 27%); + } + &:not(:disabled):not(:checked) + label:hover:before { + border-color: #fff; } &: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(#fff, 14%); + border-color: darken(#fff, 14%); } &:disabled + label:before { - background-color: nc-darken($color-main-background, 23%) !important; /* override other status */ - border-color: rgba($color-main-background, 0.4) !important; /* override other status */ + background-color: darken(#fff, 27%) !important; /* override other status */ + border-color: rgba(#fff, 0.4) !important; /* override other status */ } &:checked:disabled + label:before { - box-shadow: inset 0px 0px 0px 2px $color-main-text; - border-color: nc-darken($color-main-background, 27%); - background-color: nc-darken($color-main-background, 27%); + box-shadow: inset 0px 0px 0px 2px $color-main-background; + border-color: rgba(#fff, 0.4) !important; /* override other status */ + background-color: darken(#fff, 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: #fff !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-darken($color-main-background, 27%); - } - &:indeterminate:disabled + label:after { - background-color: nc-darken($color-main-background, 27%); + &:disabled + label:before { + opacity: 0.7; /* No other choice for white background image */ } } } From 27a6bbcd8a3710b74e4e7f1a26d485a99c3c3a4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 4 Oct 2017 15:42:16 +0200 Subject: [PATCH 3/4] White checkboxes variable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 067f208e27..441827c9ae 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -255,35 +255,36 @@ input { background-image: url('../img/actions/checkbox-mixed.svg'); } } + $color-checkbox-white: #fff; &.radio--white, &.checkbox--white { + label:before, &:focus + label:before { - border-color: darken(#fff, 27%); + border-color: darken($color-checkbox-white, 27%); } &:not(:disabled):not(:checked) + label:hover:before { - border-color: #fff; + border-color: $color-checkbox-white; } &:checked + label:before { box-shadow: inset 0px 0px 0px 2px $color-main-background; - background-color: darken(#fff, 14%); - border-color: darken(#fff, 14%); + background-color: darken($color-checkbox-white, 14%); + border-color: darken($color-checkbox-white, 14%); } &:disabled + label:before { - background-color: darken(#fff, 27%) !important; /* override other status */ - border-color: rgba(#fff, 0.4) !important; /* override other status */ + background-color: darken($color-checkbox-white, 27%) !important; /* override other status */ + border-color: rgba($color-checkbox-white, 0.4) !important; /* override other status */ } &:checked:disabled + label:before { box-shadow: inset 0px 0px 0px 2px $color-main-background; - border-color: rgba(#fff, 0.4) !important; /* override other status */ - background-color: darken(#fff, 27%); + border-color: rgba($color-checkbox-white, 0.4) !important; /* override other status */ + background-color: darken($color-checkbox-white, 27%); } } &.checkbox--white { &:checked + label:before, &:indeterminate + label:before { background-color: transparent !important; /* Override default checked */ - border-color: #fff !important; /* Override default checked */ + border-color: $color-checkbox-white !important; /* Override default checked */ background-image: url('../img/actions/checkbox-mark-white.svg'); } &:indeterminate + label:before { From c2abc5810c505dfd2ae6f2aaaecb7ca01cb79647 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 4 Oct 2017 16:09:45 +0200 Subject: [PATCH 4/4] Variable for checkboxes and name fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 441827c9ae..eb7d20cf8a 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -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-darken($color-main-background, 47%); + 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-darken($color-main-background, 47%); - background-color: nc-darken($color-main-background, 27%) !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-darken($color-main-background, 27%); + background-color: $color-checkbox-radio-disabled; } } &.checkbox { @@ -255,36 +257,38 @@ input { background-image: url('../img/actions/checkbox-mixed.svg'); } } - $color-checkbox-white: #fff; + + /* 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, &:focus + label:before { - border-color: darken($color-checkbox-white, 27%); + border-color: darken($color-checkbox-radio-white, 27%); } &:not(:disabled):not(:checked) + label:hover:before { - border-color: $color-checkbox-white; + border-color: $color-checkbox-radio-white; } &:checked + label:before { box-shadow: inset 0px 0px 0px 2px $color-main-background; - background-color: darken($color-checkbox-white, 14%); - border-color: darken($color-checkbox-white, 14%); + background-color: darken($color-checkbox-radio-white, 14%); + border-color: darken($color-checkbox-radio-white, 14%); } &:disabled + label:before { - background-color: darken($color-checkbox-white, 27%) !important; /* override other status */ - border-color: rgba($color-checkbox-white, 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-background; - border-color: rgba($color-checkbox-white, 0.4) !important; /* override other status */ - background-color: darken($color-checkbox-white, 27%); + 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-checkbox-white !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 {