wikijs-fork/client/scss/components/toggle.scss

68 lines
1.1 KiB
SCSS
Raw Normal View History

.toggle {
display: inline-flex;
align-items: center;
height: 24px;
cursor: pointer;
margin: 5px 5px 5px 0;
& + & {
margin-left: 15px;
}
&-container {
display: inline-flex;
align-items: center;
height: 24px;
width: 50px;
2017-07-02 22:15:05 +00:00
background-color: mc('blue-grey', '200');
border-radius: 12px;
padding: 2px;
transition: background-color .5s ease;
}
&-pin {
display: flex;
background-color: #FFF;
border-radius:10px;
height: 20px;
width: 20px;
transition: all .5s ease;
}
&-text {
padding-left: 10px;
color: mc('grey', '700');
font-size: 12px;
}
&:hover {
.toggle-container {
background-color: mc('grey', '400');
}
}
&.is-active {
.toggle-container {
background-color: mc('indigo', '500');
}
.toggle-pin {
margin-left: 28px;
}
}
}
2017-07-02 22:15:05 +00:00
/* THEME OVERRIDE - START */
@each $color, $colorvalue in $material-colors {
.is-primary-#{$color} .toggle {
&.is-active {
.toggle-container {
background-color: mc($color, '500');
}
}
}
}
/* THEME OVERRIDE - END */