bulma/sass/utilities/mixins.sass

224 lines
4.4 KiB
Sass
Raw Normal View History

@import "initial-variables"
2016-01-24 00:03:43 +00:00
=arrow($color)
border: 1px solid $color
border-right: 0
border-top: 0
content: " "
display: block
2016-10-29 20:51:13 +00:00
height: 0.5em
2016-01-24 00:03:43 +00:00
pointer-events: none
position: absolute
transform: rotate(-45deg)
2017-10-24 11:23:31 +00:00
transform-origin: center
2016-10-29 20:51:13 +00:00
width: 0.5em
2016-01-24 00:03:43 +00:00
2016-09-22 22:14:18 +00:00
=block
&:not(:last-child)
2016-10-29 17:53:30 +00:00
margin-bottom: 1.5rem
2016-09-22 22:14:18 +00:00
2016-01-24 00:03:43 +00:00
=clearfix
&:after
clear: both
content: " "
display: table
2017-04-02 13:37:10 +00:00
=center($width, $height: 0)
2016-01-24 00:03:43 +00:00
position: absolute
2017-04-02 13:37:10 +00:00
@if $height != 0
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$height} / 2))
@else
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$width} / 2))
2016-01-24 00:03:43 +00:00
2016-09-22 22:14:18 +00:00
=delete
+unselectable
-moz-appearance: none
-webkit-appearance: none
2016-10-30 16:11:04 +00:00
background-color: rgba($black, 0.2)
2016-09-22 22:14:18 +00:00
border: none
border-radius: 290486px
cursor: pointer
display: inline-block
2017-05-28 14:35:14 +00:00
flex-grow: 0
flex-shrink: 0
font-size: 0
2017-03-12 16:25:41 +00:00
height: 20px
2017-05-28 14:35:14 +00:00
max-height: 20px
max-width: 20px
min-height: 20px
min-width: 20px
2016-09-23 21:08:03 +00:00
outline: none
2016-09-22 22:14:18 +00:00
position: relative
vertical-align: top
2017-03-12 16:25:41 +00:00
width: 20px
2016-09-22 22:14:18 +00:00
&:before,
&:after
background-color: $white
content: ""
display: block
left: 50%
position: absolute
top: 50%
2017-03-12 16:25:41 +00:00
transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
2016-09-22 22:14:18 +00:00
&:before
2016-10-30 10:41:53 +00:00
height: 2px
width: 50%
2016-09-22 22:14:18 +00:00
&:after
2016-10-30 10:41:53 +00:00
height: 50%
width: 2px
2016-10-30 16:11:04 +00:00
&:hover,
&:focus
background-color: rgba($black, 0.3)
&:active
background-color: rgba($black, 0.4)
2016-09-22 22:14:18 +00:00
// Sizes
&.is-small
2017-03-12 16:25:41 +00:00
height: 16px
max-height: 16px
max-width: 16px
min-height: 16px
min-width: 16px
2017-03-12 16:25:41 +00:00
width: 16px
2016-09-22 22:14:18 +00:00
&.is-medium
2017-03-12 16:25:41 +00:00
height: 24px
max-height: 24px
max-width: 24px
min-height: 24px
min-width: 24px
2017-03-12 16:25:41 +00:00
width: 24px
2016-09-22 22:14:18 +00:00
&.is-large
2017-03-12 16:25:41 +00:00
height: 32px
max-height: 32px
max-width: 32px
min-height: 32px
min-width: 32px
2017-03-12 16:25:41 +00:00
width: 32px
2016-09-22 22:14:18 +00:00
2016-01-24 00:03:43 +00:00
=fa($size, $dimensions)
display: inline-block
font-size: $size
height: $dimensions
line-height: $dimensions
text-align: center
vertical-align: top
width: $dimensions
2016-09-24 15:04:53 +00:00
=hamburger($dimensions)
2016-09-22 22:14:18 +00:00
cursor: pointer
display: block
2016-09-24 15:04:53 +00:00
height: $dimensions
2016-09-22 22:14:18 +00:00
position: relative
2016-09-24 15:04:53 +00:00
width: $dimensions
2016-09-22 22:14:18 +00:00
span
2017-09-09 21:56:54 +00:00
background-color: currentColor
2016-09-22 22:14:18 +00:00
display: block
height: 1px
2017-10-18 10:27:51 +00:00
left: calc(50% - 8px)
2016-09-22 22:14:18 +00:00
position: absolute
2017-10-18 10:27:51 +00:00
transform-origin: center
transition-duration: $speed
transition-property: background-color, opacity, transform
transition-timing-function: $easing
width: 16px
2016-09-22 22:14:18 +00:00
&:nth-child(1)
2017-10-18 10:27:51 +00:00
top: calc(50% - 6px)
2016-09-22 22:14:18 +00:00
&:nth-child(2)
2017-10-18 10:27:51 +00:00
top: calc(50% - 1px)
2016-09-22 22:14:18 +00:00
&:nth-child(3)
2017-10-18 10:27:51 +00:00
top: calc(50% + 4px)
2016-09-22 22:14:18 +00:00
&:hover
2017-09-09 21:56:54 +00:00
background-color: rgba(black, 0.05)
2016-09-22 22:14:18 +00:00
// Modifers
&.is-active
span
&:nth-child(1)
2017-10-18 10:27:51 +00:00
transform: translateY(5px) rotate(45deg)
2016-09-22 22:14:18 +00:00
&:nth-child(2)
opacity: 0
&:nth-child(3)
2017-10-18 10:27:51 +00:00
transform: translateY(-5px) rotate(-45deg)
2016-09-22 22:14:18 +00:00
=loader
2016-10-16 18:15:56 +00:00
animation: spinAround 500ms infinite linear
2016-09-22 22:14:18 +00:00
border: 2px solid $border
border-radius: 290486px
border-right-color: transparent
border-top-color: transparent
content: ""
display: block
2017-03-12 17:49:24 +00:00
height: 1em
2016-09-22 22:14:18 +00:00
position: relative
2017-03-12 17:49:24 +00:00
width: 1em
2016-09-22 22:14:18 +00:00
2016-12-22 19:51:52 +00:00
=overflow-touch
-webkit-overflow-scrolling: touch
2016-01-24 00:03:43 +00:00
=overlay($offset: 0)
bottom: $offset
left: $offset
position: absolute
right: $offset
top: $offset
=placeholder
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
@each $placeholder in $placeholders
&:#{$placeholder}-placeholder
@content
2016-09-22 22:14:18 +00:00
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
2016-09-22 19:30:09 +00:00
// Responsiveness
2016-01-24 00:03:43 +00:00
=from($device)
@media screen and (min-width: $device)
@content
=until($device)
@media screen and (max-width: $device - 1px)
@content
=mobile
@media screen and (max-width: $tablet - 1px)
@content
=tablet
@media screen and (min-width: $tablet), print
2016-01-24 00:03:43 +00:00
@content
=tablet-only
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
@content
2016-01-24 00:03:43 +00:00
=touch
@media screen and (max-width: $desktop - 1px)
@content
=desktop
@media screen and (min-width: $desktop)
@content
=desktop-only
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
@content
=widescreen
@media screen and (min-width: $widescreen)
@content
2017-03-14 21:00:58 +00:00
=widescreen-only
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=fullhd
@media screen and (min-width: $fullhd)
@content