vue-material/src/components/mdButtonToggle/mdButtonToggle.scss

42 lines
752 B
SCSS

@import '../../core/stylesheets/variables.scss';
$button-radius: 2px;
.md-button-toggle {
width: auto;
display: flex;
> .md-button {
margin: 0;
overflow: hidden;
border-width: 1px 0 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
&:first-child {
border-radius: 2px 0 0 2px;
}
&:last-child {
border-right-width: 1px;
border-radius: 0 2px 2px 0;
}
&:not([disabled]) {
color: rgba(#000, .54);
&:hover:not(.md-toggle) {
&:not(.md-raised) {
background-color: rgba(#999, .2);
text-decoration: none;
}
}
}
.md-ink-ripple {
border-radius: $button-radius;
}
}
}