diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss index f3134b6eab..f67ce5f85a 100644 --- a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss +++ b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss @@ -4,40 +4,41 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-checkbox-theme() { - @mixin hover-border($color) { - .customised-control-input:checked ~ .customised-control-indicator { - border-color: $color; - } - .customised-control-input:hover:enabled ~ .customised-control-indicator { - border-color: lighten($color, 10%); - } - } - - @mixin checkmark($size, $color, $border-size) { - &::before { - content: ''; - position: absolute; - height: calc(#{$size} * 0.6); - width: calc(#{$size} * 0.4); - border: solid $color; - border-width: 0 $border-size $border-size 0; - transform: rotate(45deg); - } +// locally used mixin +@mixin hover-border($color) { + .customised-control-input:checked ~ .customised-control-indicator { + border-color: $color; } - - @mixin set-style($bg, $size, $border-size, $border-color) { - background-color: $bg; - width: $size; - height: $size; - border: $border-size solid $border-color; + .customised-control-input:hover:enabled ~ .customised-control-indicator { + border-color: lighten($color, 10%); } - - @mixin description-style { - color: nb-theme(color-fg-heading); - padding-left: 0.25rem; +} +// locally used mixin +@mixin chackbox-checkmark($size, $color, $border-size) { + &::before { + content: ''; + position: absolute; + height: calc(#{$size} * 0.6); + width: calc(#{$size} * 0.4); + border: solid $color; + border-width: 0 $border-size $border-size 0; + transform: rotate(45deg); } +} +// locally used mixin +@mixin set-style($bg, $size, $border-size, $border-color) { + background-color: $bg; + width: $size; + height: $size; + border: $border-size solid $border-color; +} +// locally used mixin +@mixin description-style { + color: nb-theme(color-fg-heading); + padding-left: 0.25rem; +} +@mixin nb-checkbox-theme() { nb-checkbox { .customised-control { position: relative; @@ -64,7 +65,7 @@ display: flex; justify-content: center; - @include checkmark( + @include chackbox-checkmark( nb-theme(checkbox-size), nb-theme(checkbox-checkmark), nb-theme(checkbox-border-size) @@ -89,7 +90,7 @@ display: flex; justify-content: center; - @include checkmark( + @include chackbox-checkmark( nb-theme(checkbox-checked-size), nb-theme(checkbox-checked-checkmark), nb-theme(checkbox-checked-border-size) @@ -108,7 +109,7 @@ display: flex; justify-content: center; - @include checkmark( + @include chackbox-checkmark( nb-theme(checkbox-disabled-size), nb-theme(checkbox-checkmark), nb-theme(checkbox-disabled-border-size) @@ -133,7 +134,7 @@ display: flex; justify-content: center; - @include checkmark( + @include chackbox-checkmark( nb-theme(checkbox-disabled-size), nb-theme(checkbox-disabled-checkmark), nb-theme(checkbox-disabled-border-size) @@ -163,3 +164,4 @@ } } } + diff --git a/src/framework/theme/styles/global/bootstrap/_custom-forms.scss b/src/framework/theme/styles/global/bootstrap/_custom-forms.scss index 25a4479e45..23c9d131f7 100644 --- a/src/framework/theme/styles/global/bootstrap/_custom-forms.scss +++ b/src/framework/theme/styles/global/bootstrap/_custom-forms.scss @@ -4,15 +4,16 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin custom-forms() { - @mixin hover-checked-border($color) { - .custom-control-input:hover ~ .custom-control-indicator, - .custom-control-input:checked ~ .custom-control-indicator, - .custom-control-input:hover:checked ~ .custom-control-indicator { - border-color: $color; - } +// locally used mixin +@mixin hover-checked-border($color) { + .custom-control-input:hover ~ .custom-control-indicator, + .custom-control-input:checked ~ .custom-control-indicator, + .custom-control-input:hover:checked ~ .custom-control-indicator { + border-color: $color; } +} +@mixin custom-forms() { .custom-control { margin: 0; min-height: inherit; @@ -111,3 +112,4 @@ } } } + diff --git a/src/framework/theme/styles/global/bootstrap/_forms.scss b/src/framework/theme/styles/global/bootstrap/_forms.scss index 14ea09aad0..7ac5168070 100644 --- a/src/framework/theme/styles/global/bootstrap/_forms.scss +++ b/src/framework/theme/styles/global/bootstrap/_forms.scss @@ -8,6 +8,52 @@ @import '../../core/mixins'; @import './custom-forms'; +// locally used mixin +@mixin checkmark($size, $color, $wight, $opacity: 1) { + ~ .custom-control-label::after { + background-image: none; + content: ''; + position: absolute; + height: calc(#{$size} * 0.6); + width: calc(#{$size} * 0.4); + top: calc(#{$size} * 0.4); + left: calc(#{$size} * 0.3); + border: solid $color; + border-width: 0 $wight $wight 0; + transform: rotate(45deg); + opacity: $opacity; + } +} +// locally used mixin +@mixin radio($size, $color, $opacity) { + ~ .custom-control-label::after { + content: ''; + position: absolute; + background-color: $color; + height: calc(#{$size} * 0.5); + width: calc(#{$size} * 0.5); + border: solid $color 0.35rem; + border-radius: 50%; + opacity: $opacity; + top: calc(#{$size} * 0.5); + left: calc(#{$size} * 0.21); + } +} +// locally used mixin +@mixin label($color, $opacity) { + ~ .custom-control-label { + opacity: $opacity; + &::before { + color: transparent; + background-color: transparent; + border: 2px solid $color; + height: 1.25rem; + width: 1.25rem; + opacity: $opacity; + } + } +} + @mixin nb-b-forms-theme() { .input-group-addon, @@ -67,51 +113,6 @@ } } - @mixin checkmark($size, $color, $wight, $opacity) { - ~ .custom-control-label::after { - background-image: none; - content: ''; - position: absolute; - height: calc(#{$size} * 0.6); - width: calc(#{$size} * 0.4); - top: calc(#{$size} * 0.4); - left: calc(#{$size} * 0.3); - border: solid $color; - border-width: 0 $wight $wight 0; - transform: rotate(45deg); - opacity: $opacity; - } - } - - @mixin radio($size, $color, $opacity) { - ~ .custom-control-label::after { - content: ''; - position: absolute; - background-color: $color; - height: calc(#{$size} * 0.5); - width: calc(#{$size} * 0.5); - border: solid $color 0.35rem; - border-radius: 50%; - opacity: $opacity; - top: calc(#{$size} * 0.5); - left: calc(#{$size} * 0.21); - } - } - - @mixin label($color, $opacity) { - ~ .custom-control-label { - opacity: $opacity; - &::before { - color: transparent; - background-color: transparent; - border: 2px solid $color; - height: 1.25rem; - width: 1.25rem; - opacity: $opacity; - } - } - } - .custom-control { position: relative; display: block;