ohif-viewer/Packages/ohif-design/components/roundedButtonGroup/roundedButtonGroup.styl

82 lines
1.8 KiB
Stylus

@import "{ohif:design}/app"
$height = 25px
.roundedButtonGroup
position: relative
z-index: 0
.roundedButtonWrapper
cursor: pointer
display: inline-block
float: left
margin-left: -2px
text-decoration: none
text-align: center
&.disabled
opacity: 0.5
cursor: not-allowed
.roundedButton
align-items: center
theme('background-color', '$uiGrayDark')
theme('border', '2px solid $uiBorderColorDark')
theme('color', '$textSecondaryColor')
display: flex
font-size: 11px
font-weight: 500
justify-content: center
height: $height
line-height: $height
padding: 0 22px
position: relative
text-transform: uppercase
transition($sidebarTransition)
z-index: 1
svg
theme('fill', '$defaultColor')
theme('stroke', '$defaultColor')
svg
span
margin: 0 2px
i
line-height: 15px
font-size: 15px
.bottomLabel
theme('color', '$textSecondaryColor')
font-size: 12px
font-weight: 500
line-height: 12px
margin-top: 8px
&:first-child
margin-left: 0
.roundedButton
border-bottom-left-radius: $height
border-top-left-radius: $height
&:last-child .roundedButton
border-bottom-right-radius: $height
border-top-right-radius: $height
&:hover .roundedButton
theme('color', '$uiGrayDark')
theme('background-color', '$boxBackgroundColor')
&.active .roundedButton
theme('background-color', '$activeColor')
theme('border-color', '$uiBorderColorActive')
theme('color', '$uiGrayDark')
z-index: 2
&:hover .roundedButton
&.active .roundedButton
svg
theme('fill', '$uiGrayDark')
theme('stroke', '$uiGrayDark')