150 lines
2.4 KiB
SCSS
150 lines
2.4 KiB
SCSS
.ct-buttons-group {
|
|
display: flex;
|
|
margin: 0;
|
|
|
|
li {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
height: 30px;
|
|
min-width: 40px;
|
|
margin: 0;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
box-shadow: inset 0px 0px 0px 1px var(--optionBorderColor);
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&:hover {
|
|
color: #444;
|
|
background: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
&.active {
|
|
z-index: 1;
|
|
color: #fff;
|
|
background: var(--ui-accent-color);
|
|
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
margin-inline-start: -1px;
|
|
}
|
|
|
|
// border radius
|
|
&:first-child {
|
|
border-start-start-radius: var(--ui-border-radius, 3px);
|
|
border-end-start-radius: var(--ui-border-radius, 3px);
|
|
}
|
|
|
|
&:last-child {
|
|
border-start-end-radius: var(--ui-border-radius, 3px);
|
|
border-end-end-radius: var(--ui-border-radius, 3px);
|
|
}
|
|
}
|
|
|
|
// compact type
|
|
&[data-type="compact"] li {
|
|
height: 26px;
|
|
}
|
|
|
|
// ratio buttons
|
|
&[data-buttons="ratio"] {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
// meta divider
|
|
&[data-type="meta-divider"] li {
|
|
flex: 1 0 0;
|
|
|
|
&:nth-child(2):before {
|
|
content: '';
|
|
width: 1px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
background: currentColor;
|
|
transform: rotate(25deg);
|
|
}
|
|
|
|
&:nth-child(3):before {
|
|
content: '';
|
|
width: 10px;
|
|
height: 1px;
|
|
border-radius: 2px;
|
|
background: currentColor;
|
|
}
|
|
|
|
&:nth-child(4):before {
|
|
content: '●';
|
|
font-size: 5px;
|
|
}
|
|
}
|
|
|
|
// content spacing
|
|
&[data-type="content-spacing"] li {
|
|
height: 42px;
|
|
|
|
span {
|
|
position: relative;
|
|
width: 18px;
|
|
opacity: 0.9;
|
|
background: currentColor;
|
|
|
|
|
|
&:before, &:after {
|
|
position: absolute;
|
|
content: '';
|
|
inset-inline-start: 0;
|
|
width: calc(100%);
|
|
height: 6px;
|
|
box-sizing: border-box;
|
|
border: 1px solid currentColor;
|
|
}
|
|
|
|
&:before {
|
|
top: 1px;
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
&:after {
|
|
bottom: 1px;
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) span {
|
|
height: 8px;
|
|
}
|
|
|
|
&:nth-child(2) span {
|
|
top: 3px;
|
|
height: 13px;
|
|
|
|
&:after {
|
|
background: currentColor;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) span {
|
|
bottom: 2px;
|
|
height: 13px;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) span {
|
|
height: 18px;
|
|
|
|
&:before, &:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
} |