Zhihe Li
2ec2c2934c
* chore: 🤖 Add stylelint packages * style: 💄 Initial stylelint fixes * style: 💄 Use suggested module * style: 💄 Fix comment whitespace and remove unneeded ones * style: 💄 Fix few more styles * style: 💄 Ignore a few styles and fix the rest * style: 💄 Fix scss/dollar-variable-pattern rule * chore: 🤖 Remove stylelint order package * style: 💄 Fix custom-property-pattern rule * chore: 🤖 Add stylelintrc file to eslintrc * refactor: 💡 Remove duplicated css selector
117 lines
3.1 KiB
SCSS
117 lines
3.1 KiB
SCSS
@use 'sass:map';
|
|
@use 'type' as typography;
|
|
@use '../variables/sizing';
|
|
|
|
@mixin button {
|
|
@include typography.type(button, semibold);
|
|
|
|
display: inline-block;
|
|
margin-bottom: sizing.rems(l);
|
|
margin-right: sizing.rems(xs);
|
|
padding: sizing.rems(off-xs) sizing.rems(l);
|
|
border-radius: sizing.rems(xxxs);
|
|
border: sizing.rems(xxxxs) solid;
|
|
background: none;
|
|
|
|
.rose-button-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
&.has-icon-left .rose-icon:first-child {
|
|
margin-left: -(sizing.rems(xs));
|
|
margin-right: sizing.rems(xxs);
|
|
}
|
|
|
|
&.has-icon-right .rose-icon:last-child {
|
|
margin-left: sizing.rems(xxs);
|
|
margin-right: -(sizing.rems(xs));
|
|
}
|
|
|
|
&.has-icon-only {
|
|
padding-right: sizing.rems(s);
|
|
padding-left: sizing.rems(s);
|
|
|
|
.rose-button-body {
|
|
position: absolute;
|
|
top: -1000px;
|
|
left: -1000px;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin button-style($name, $default, $hover: &, $active: &, $disabled: &) {
|
|
.rose-button-#{$name} {
|
|
@include button;
|
|
|
|
border-color: map.get($default, border-color);
|
|
color: map.get($default, color);
|
|
background-color: map.get($default, background-color);
|
|
@if map.get($default, 'box-shadow') {
|
|
box-shadow: map.get($default, 'box-shadow');
|
|
}
|
|
@if map.get($default, 'text-shadow') {
|
|
text-shadow: map.get($default, 'text-shadow');
|
|
}
|
|
|
|
&:not(:disabled) {
|
|
@if $hover {
|
|
&:hover {
|
|
@if map.get($hover, 'border-color') {
|
|
border-color: map.get($hover, 'border-color');
|
|
}
|
|
@if map.get($hover, 'color') {
|
|
color: map.get($hover, 'color');
|
|
}
|
|
@if map.get($hover, 'background-color') {
|
|
background-color: map.get($hover, 'background-color');
|
|
}
|
|
@if map.get($hover, 'box-shadow') {
|
|
box-shadow: map.get($hover, 'box-shadow');
|
|
}
|
|
@if map.get($hover, 'text-shadow') {
|
|
text-shadow: map.get($hover, 'text-shadow');
|
|
}
|
|
}
|
|
}
|
|
@if $active {
|
|
&:active {
|
|
@if map.get($active, 'border-color') {
|
|
border-color: map.get($active, 'border-color');
|
|
}
|
|
@if map.get($active, 'color') {
|
|
color: map.get($active, 'color');
|
|
}
|
|
@if map.get($active, 'background-color') {
|
|
background-color: map.get($active, 'background-color');
|
|
}
|
|
@if map.get($active, 'box-shadow') {
|
|
box-shadow: map.get($active, 'box-shadow');
|
|
}
|
|
@if map.get($active, 'text-shadow') {
|
|
text-shadow: map.get($active, 'text-shadow');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $disabled {
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
@if map.get($disabled, 'border-color') {
|
|
border-color: map.get($disabled, 'border-color');
|
|
}
|
|
@if map.get($disabled, 'opacity') {
|
|
opacity: map.get($disabled, 'opacity');
|
|
}
|
|
@if map.get($disabled, 'box-shadow') {
|
|
box-shadow: map.get($disabled, 'box-shadow');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|