Форк Rambox
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

122 lines
2.7 KiB

.#{$prefix}segmented-button {
display: table;
table-layout: fixed;
}
.#{$prefix}segmented-button-item {
display: table-cell;
vertical-align: top;
@if $include-slicer-border-radius {
> .#{$prefix}frame {
width: 100%;
height: 100%;
}
}
@if $include-slicer-border-radius {
.#{$prefix}btn-mc {
width: 100%;
}
}
}
.#{$prefix}segmented-button-item-horizontal {
display: table-cell;
// IE8 needs height:100% or else the "frame" element will not stretch to fit the
// height of the button
height: 100%;
&.#{$prefix}segmented-button-first {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@if $include-slicer-border-radius {
.#{$prefix}btn-tr,
.#{$prefix}btn-mr,
.#{$prefix}btn-br {
display: none;
}
}
}
&.#{$prefix}segmented-button-middle {
border-radius: 0;
border-left: 0;
@if $include-slicer-border-radius {
.#{$prefix}btn-tl,
.#{$prefix}btn-tr,
.#{$prefix}btn-ml,
.#{$prefix}btn-mr,
.#{$prefix}btn-bl,
.#{$prefix}btn-br {
display: none;
}
}
}
&.#{$prefix}segmented-button-last {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@if $include-slicer-border-radius {
.#{$prefix}btn-tl,
.#{$prefix}btn-ml,
.#{$prefix}btn-bl {
display: none;
}
}
}
}
.#{$prefix}segmented-button-row {
display: table-row;
}
.#{$prefix}segmented-button-item-vertical {
&.#{$prefix}segmented-button-first {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
@if $include-slicer-border-radius {
.#{$prefix}btn-bl,
.#{$prefix}btn-bc,
.#{$prefix}btn-br {
display: none;
}
}
}
&.#{$prefix}segmented-button-middle {
border-radius: 0;
border-top: 0;
@if $include-slicer-border-radius {
.#{$prefix}btn-tl,
.#{$prefix}btn-tc,
.#{$prefix}btn-tr,
.#{$prefix}btn-bl,
.#{$prefix}btn-bc,
.#{$prefix}btn-br {
display: none;
}
}
}
&.#{$prefix}segmented-button-last {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
@if $include-slicer-border-radius {
.#{$prefix}btn-tl,
.#{$prefix}btn-tc,
.#{$prefix}btn-tr {
display: none;
}
}
}
}