formstone
Version:
Library of modular front end components.
180 lines (131 loc) • 3.84 kB
text/less
/**
* @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;
}
}
}