mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 12:24:28 -07:00
108 lines
2.1 KiB
Sass
108 lines
2.1 KiB
Sass
@import "../utilities/animations.sass"
|
|
@import "../utilities/variables.sass"
|
|
|
|
%block
|
|
&:not(:last-child)
|
|
margin-bottom: 20px
|
|
|
|
%delete
|
|
@extend %unselectable
|
|
-moz-appearance: none
|
|
-webkit-appearance: none
|
|
background-color: rgba($black, 0.2)
|
|
border: none
|
|
border-radius: 290486px
|
|
cursor: pointer
|
|
display: inline-block
|
|
height: 24px
|
|
position: relative
|
|
vertical-align: top
|
|
width: 24px
|
|
&:before,
|
|
&:after
|
|
background-color: $white
|
|
content: ""
|
|
display: block
|
|
height: 2px
|
|
left: 50%
|
|
margin-left: -25%
|
|
margin-top: -1px
|
|
position: absolute
|
|
top: 50%
|
|
width: 50%
|
|
&:before
|
|
transform: rotate(45deg)
|
|
&:after
|
|
transform: rotate(-45deg)
|
|
&:hover
|
|
background-color: rgba($black, 0.5)
|
|
// Sizes
|
|
&.is-small
|
|
height: 16px
|
|
width: 16px
|
|
&.is-medium
|
|
height: 32px
|
|
width: 32px
|
|
&.is-large
|
|
height: 40px
|
|
width: 40px
|
|
|
|
%hamburger
|
|
cursor: pointer
|
|
display: block
|
|
height: $nav-height
|
|
position: relative
|
|
width: $nav-height
|
|
span
|
|
background-color: $text
|
|
display: block
|
|
height: 1px
|
|
left: 50%
|
|
margin-left: -7px
|
|
position: absolute
|
|
top: 50%
|
|
transition: none $speed $easing
|
|
transition-property: background, left, opacity, transform
|
|
width: 15px
|
|
&:nth-child(1)
|
|
margin-top: -6px
|
|
&:nth-child(2)
|
|
margin-top: -1px
|
|
&:nth-child(3)
|
|
margin-top: 4px
|
|
&:hover
|
|
background-color: $background
|
|
// Modifers
|
|
&.is-active
|
|
span
|
|
background-color: $link
|
|
&:nth-child(1)
|
|
margin-left: -5px
|
|
transform: rotate(45deg)
|
|
transform-origin: left top
|
|
&:nth-child(2)
|
|
opacity: 0
|
|
&:nth-child(3)
|
|
margin-left: -5px
|
|
transform: rotate(-45deg)
|
|
transform-origin: left bottom
|
|
|
|
%loader
|
|
animation: spin-around 500ms infinite linear
|
|
border: 2px solid $border
|
|
border-radius: 290486px
|
|
border-right-color: transparent
|
|
border-top-color: transparent
|
|
content: ""
|
|
display: block
|
|
height: 16px
|
|
position: relative
|
|
width: 16px
|
|
|
|
%unselectable
|
|
-webkit-touch-callout: none
|
|
-webkit-user-select: none
|
|
-moz-user-select: none
|
|
-ms-user-select: none
|
|
user-select: none
|