UNPKG

formstone

Version:

Library of modular front end components.

180 lines (131 loc) 3.84 kB
/** * @theme * @name Light * @component Number */ .fs-number { @import "_config.less"; @theme_name: fs-light; // Config @fs-number-height: 40px; @fs-number-background-color: @fs-light-white; @fs-number-border-color: @fs-light-primary_600; @fs-number-border-width: 1px; @fs-number-border-radius: 2px; @fs-number-font-size: 15px; @fs-number-text-color: @fs-light-primary_900; @fs-number-margin: 0 0 10px 0; @fs-number-padding: 0 40px 0 15px; @fs-number-arrow-width: 25px; @fs-number-arrow-color: @fs-light-primary_600; @fs-number-arrow-size: 5px; @fs-number-arrow-border-width: 2px; @fs-number-arrow-border-radius: 4px; @fs-number-arrow-hover-background: @fs-light-primary_100; // disabled @fs-number-disabled-opacity: 0.5; // Hover @fs-number-hover-border-color: @fs-light-primary_900; @fs-number-hover-arrow-color: @fs-light-primary_900; &.@{theme_name} { position: relative; border-radius: @fs-number-border-radius; margin: @fs-number-margin; } // Element .@{theme_name} &-element { width: 100%; height: @fs-number-height; background: @fs-number-background-color; border: @fs-number-border-width solid @fs-number-border-color; border-radius: @fs-number-border-radius; color: @fs-number-text-color; font-size: @fs-number-font-size; margin: 0; padding: @fs-number-padding; } // Arrows .@{theme_name} &-arrow { width: @fs-number-arrow-width; height: 50%; position: absolute; right: @fs-number-border-width; z-index: 1; background: @fs-number-background-color; border: @fs-number-arrow-border-width solid @fs-number-background-color; border-radius: @fs-number-arrow-border-radius; text-indent: 200%; white-space: nowrap; &:after { width: 0; height: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-left: @fs-number-arrow-size solid transparent; border-right: @fs-number-arrow-size solid transparent; content: ''; display: block; margin: auto; } .no-touchevents &:hover { background: @fs-number-arrow-hover-background; } } .@{theme_name} &-arrow&-up { top: @fs-number-border-width; &:after { border-bottom: @fs-number-arrow-size solid @fs-number-arrow-color; } } .@{theme_name} &-arrow&-down { bottom: @fs-number-border-width; &:after { border-top: @fs-number-arrow-size solid @fs-number-arrow-color; } } // Hover .@{theme_name}&-focus &-element, .no-touchevents .@{theme_name}:hover &-element { border-color: @fs-number-hover-border-color; } .@{theme_name}&-focus &-arrow&-up, .no-touchevents .@{theme_name}:hover &-arrow&-up { &:after { border-bottom-color: @fs-number-hover-arrow-color; } } .@{theme_name}&-focus &-arrow&-down, .no-touchevents .@{theme_name}:hover &-arrow&-down { &:after { border-top-color: @fs-number-hover-arrow-color; } } // Disabled .@{theme_name}&-disabled, .no-touchevents .@{theme_name}&-disabled:hover { opacity: @fs-number-disabled-opacity; } .@{theme_name}&-disabled &-element, .no-touchevents .@{theme_name}&-disabled:hover &-element { border-color: @fs-number-border-color; } .@{theme_name}&-disabled &-arrow, .no-touchevents .@{theme_name}&-disabled:hover &-arrow { background: @fs-number-background-color; } .@{theme_name}&-disabled &-arrow&-up, .no-touchevents .@{theme_name}&-disabled:hover &-arrow&-up { &:after { border-bottom-color: @fs-number-arrow-color; } } .@{theme_name}&-disabled &-arrow&-down, .no-touchevents .@{theme_name}&-disabled:hover &-arrow&-down { &:after { border-top-color: @fs-number-arrow-color; } } }