bulma/sass/utilities/mixins.sass

285 lines
5.7 KiB
Sass
Raw Normal View History

2020-10-31 23:52:27 +00:00
@import "derived-variables"
2016-01-24 00:03:43 +00:00
=clearfix
2018-04-08 18:08:39 +00:00
&::after
2016-01-24 00:03:43 +00:00
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} * 0.5))
top: calc(50% - (#{$height} * 0.5))
2017-04-02 13:37:10 +00:00
@else
left: calc(50% - (#{$width} * 0.5))
top: calc(50% - (#{$width} * 0.5))
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)
2021-09-19 00:23:53 +00:00
-moz-appearance: none
-webkit-appearance: none
appearance: none
background: none
border: none
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
2020-01-05 13:27:54 +00:00
background-color: bulmaRgba(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
2016-12-22 19:51:52 +00:00
=overflow-touch
-webkit-overflow-scrolling: touch
2016-01-24 00:03:43 +00:00
=placeholder
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
@each $placeholder in $placeholders
&:#{$placeholder}-placeholder
@content
=reset
-moz-appearance: none
-webkit-appearance: none
appearance: none
background: none
border: none
color: currentColor
font-family: inherit
font-size: 1em
margin: 0
padding: 0
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
2018-04-08 19:11:48 +00:00
@if $widescreen-enabled
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
@content
=until-widescreen
@if $widescreen-enabled
@media screen and (max-width: $widescreen - 1px)
@content
=widescreen
2018-04-08 19:11:48 +00:00
@if $widescreen-enabled
@media screen and (min-width: $widescreen)
@content
2017-03-14 21:00:58 +00:00
=widescreen-only
2018-04-08 19:11:48 +00:00
@if $widescreen-enabled and $fullhd-enabled
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=until-fullhd
@if $fullhd-enabled
@media screen and (max-width: $fullhd - 1px)
@content
2017-03-14 21:00:58 +00:00
=fullhd
2018-04-08 19:11:48 +00:00
@if $fullhd-enabled
@media screen and (min-width: $fullhd)
@content
2018-04-08 17:48:47 +00:00
2020-01-20 19:39:09 +00:00
=ltr
@if not $rtl
@content
=rtl
@if $rtl
@content
2020-01-22 09:14:04 +00:00
=ltr-property($property, $spacing, $right: true)
2020-01-21 07:50:51 +00:00
$normal: if($right, "right", "left")
$opposite: if($right, "left", "right")
2020-01-20 19:39:09 +00:00
@if $rtl
2020-01-21 07:50:51 +00:00
#{$property}-#{$opposite}: $spacing
2020-01-20 19:39:09 +00:00
@else
2020-01-21 07:50:51 +00:00
#{$property}-#{$normal}: $spacing
2020-01-20 19:39:09 +00:00
2020-01-22 09:14:04 +00:00
=ltr-position($spacing, $right: true)
$normal: if($right, "right", "left")
$opposite: if($right, "left", "right")
2020-01-20 19:39:09 +00:00
@if $rtl
2020-01-22 09:14:04 +00:00
#{$opposite}: $spacing
2020-01-20 19:39:09 +00:00
@else
2020-01-22 09:14:04 +00:00
#{$normal}: $spacing
2020-01-20 19:39:09 +00:00
2018-04-08 17:48:47 +00:00
// Placeholders
=unselectable
2018-04-08 17:48:47 +00:00
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
=arrow($color: transparent)
border: 3px solid $color
2018-04-11 08:59:47 +00:00
border-radius: 2px
2018-04-08 17:48:47 +00:00
border-right: 0
border-top: 0
content: " "
display: block
2018-04-11 08:59:47 +00:00
height: 0.625em
margin-top: -0.4375em
2018-04-08 17:48:47 +00:00
pointer-events: none
position: absolute
2018-04-11 08:59:47 +00:00
top: 50%
2018-04-08 17:48:47 +00:00
transform: rotate(-45deg)
transform-origin: center
2018-04-11 08:59:47 +00:00
width: 0.625em
2018-04-08 17:48:47 +00:00
2019-05-17 12:50:39 +00:00
=block($spacing: $block-spacing)
2018-04-08 17:48:47 +00:00
&:not(:last-child)
2019-05-17 12:50:39 +00:00
margin-bottom: $spacing
2018-04-08 17:48:47 +00:00
=delete
+unselectable
2018-04-08 17:48:47 +00:00
-moz-appearance: none
-webkit-appearance: none
2020-01-05 13:27:54 +00:00
background-color: bulmaRgba($scheme-invert, 0.2)
2018-04-08 17:48:47 +00:00
border: none
border-radius: $radius-rounded
cursor: pointer
pointer-events: auto
2018-04-08 17:48:47 +00:00
display: inline-block
flex-grow: 0
flex-shrink: 0
font-size: 0
height: 20px
max-height: 20px
max-width: 20px
min-height: 20px
min-width: 20px
outline: none
position: relative
vertical-align: top
width: 20px
2018-04-08 18:08:39 +00:00
&::before,
&::after
2019-10-13 14:12:30 +00:00
background-color: $scheme-main
2018-04-08 17:48:47 +00:00
content: ""
display: block
left: 50%
position: absolute
top: 50%
transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
2018-04-08 18:08:39 +00:00
&::before
2018-04-08 17:48:47 +00:00
height: 2px
width: 50%
2018-04-08 18:08:39 +00:00
&::after
2018-04-08 17:48:47 +00:00
height: 50%
width: 2px
&:hover,
&:focus
2020-01-05 13:27:54 +00:00
background-color: bulmaRgba($scheme-invert, 0.3)
2018-04-08 17:48:47 +00:00
&:active
2020-01-05 13:27:54 +00:00
background-color: bulmaRgba($scheme-invert, 0.4)
2018-04-08 17:48:47 +00:00
// Sizes
&.is-small
height: 16px
max-height: 16px
max-width: 16px
min-height: 16px
min-width: 16px
width: 16px
&.is-medium
height: 24px
max-height: 24px
max-width: 24px
min-height: 24px
min-width: 24px
width: 24px
&.is-large
height: 32px
max-height: 32px
max-width: 32px
min-height: 32px
min-width: 32px
width: 32px
=loader
2018-04-08 17:48:47 +00:00
animation: spinAround 500ms infinite linear
border: 2px solid $grey-lighter
2018-04-08 17:48:47 +00:00
border-radius: $radius-rounded
border-right-color: transparent
border-top-color: transparent
content: ""
display: block
height: 1em
position: relative
width: 1em
=overlay($offset: 0)
2018-09-04 13:24:50 +00:00
bottom: $offset
left: $offset
2018-04-08 17:48:47 +00:00
position: absolute
2018-09-04 13:24:50 +00:00
right: $offset
top: $offset