summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes/valo/components/_checkbox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_checkbox.scss')
-rw-r--r--WebContent/VAADIN/themes/valo/components/_checkbox.scss167
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);
- }
- }
-
-
-}