diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_checkbox.scss')
-rw-r--r-- | WebContent/VAADIN/themes/valo/components/_checkbox.scss | 167 |
1 files changed, 0 insertions, 167 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss deleted file mode 100644 index 569a414734..0000000000 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ /dev/null @@ -1,167 +0,0 @@ -/** - * Outputs the selectors and properties for the CheckBox component. - * - * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors - * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component - * - * @group checkbox - */ -@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) { - - .#{$primary-stylename} { - @include valo-checkbox-style; - } - - - @if $include-additional-styles { - .#{$primary-stylename}-small { - @include valo-checkbox-style($unit-size: $v-unit-size--small); - font-size: $v-font-size--small; - } - - .#{$primary-stylename}-large { - @include valo-checkbox-style($unit-size: $v-unit-size--large); - font-size: $v-font-size--large; - } - } - -} - - -/** - * Outputs the font icon to indicate the checked state. - * - * @group checkbox - */ -@mixin valo-checkbox-icon-style { - content: "\f00c"; - font-family: ThemeIcons; -} - - -/** - * Outputs the styles for a checkbox variant. - * - * @param {color} $background-color ($v-background-color) - The background color of the checkbox - * @param {size} $unit-size ($v-unit-size) - The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2. - * @param {color} $selection-color ($v-selection-color) - The color of the checked state icon - * - * @group checkbox - */ -@mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { - - // So that we can use the same 'unit-size' for all component sizes - $size: $unit-size/2; - - position: relative; - line-height: round($size); - white-space: nowrap; - - &.v-has-width label { - white-space: normal; - } - - :root & { - padding-left: round($size*1.33); - - label { - @include valo-tappable; - display: inline-block; - } - } - - :root & > input { - position: absolute; - clip: rect(0,0,0,0); - left: .2em; - top: .2em; - z-index: 0; - margin: 0; - - &:focus ~ label:before { - @include valo-button-focus-style($background-color: $background-color, $border-fallback: null); - @include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true)); - } - - & ~ label:before, - & ~ label:after { - content: ""; - display: inline-block; - @include box-sizing(border-box); - width: round($size); - height: round($size); - position: absolute; - top: 0; - left: 0; - border-radius: min(round($size/3), $v-border-radius); - font-size: round($v-font-size * 0.8 * ($size*2/$v-unit-size)); - text-align: center; - } - - & ~ label:before { - @include valo-button-style($background-color: $background-color, $unit-size: $size, $border-radius: min(round($size/3), $v-border-radius), $states: normal); - padding: 0; - height: round($size); - } - - & ~ label:after { - @include valo-checkbox-icon-style; - color: transparent; - @if $v-animations-enabled { - @include transition(color 100ms); - } - } - - &:active ~ label:after { - @include valo-button-active-style($background-color: $background-color); - } - - &:checked ~ label:after { - color: $selection-color; - } - } - - & > .v-icon, - & > label .v-icon { - margin: 0 round($size/3) 0 round($size/6); - min-width: 1em; - cursor: pointer; - } - - &.v-disabled { - > label, - > .v-icon { - cursor: default; - @include opacity($v-disabled-opacity); - } - - > label > .v-icon { - cursor: default; - } - - :root & > input:active ~ label:after { - background: transparent; - } - } - - &.v-readonly { - > label, - > .v-icon { - cursor: default; - } - - > label > .v-icon { - cursor: default; - } - - :root & > input:active ~ label:after { - background: transparent; - } - - :root & > input ~ label:after { - @include opacity($v-disabled-opacity); - } - } - - -} |