library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use extends

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-08 18:48:47 +01:00
parent 7e6d335c6d
commit 292fd8ac4f
4 changed files with 990 additions and 2739 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3434
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

6
sass/components/navbar.sass
View File

@ -178,6 +178,8 @@ a.navbar-link
.navbar-link
padding-right: 2.5em
&::after
+arrow($navbar-dropdown-arrow)
.navbar-dropdown
font-size: 0.875rem
@ -202,6 +204,9 @@ a.navbar-link
.navbar-item
align-items: center
display: flex
.navbar-link
&::after
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px rgba($black, 0.1)
@ -287,7 +292,6 @@ a.navbar-link
transform: translateY(0)
.navbar-link
&::after
+arrow($navbar-dropdown-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%

5
sass/utilities/controls.sass
View File

@ -4,7 +4,7 @@ $control-radius-small: $radius-small !default
$control-padding-vertical: calc(0.375em - 1px) !default
$control-padding-horizontal: calc(0.625em - 1px) !default
=control
%control
-moz-appearance: none
-webkit-appearance: none
align-items: center
@ -31,6 +31,9 @@ $control-padding-horizontal: calc(0.625em - 1px) !default
&[disabled]
cursor: not-allowed
=control
@extend %control
// The controls sizes use mixins so they can be used at different breakpoints
=control-small
border-radius: $control-radius-small

284
sass/utilities/mixins.sass
View File

@ -1,22 +1,5 @@
@import "initial-variables"
=arrow($color)
border: 1px solid $color
border-right: 0
border-top: 0
content: " "
display: block
height: 0.5em
pointer-events: none
position: absolute
transform: rotate(-45deg)
transform-origin: center
width: 0.5em
=block
&:not(:last-child)
margin-bottom: 1.5rem
=clearfix
&:after
clear: both
@ -32,8 +15,143 @@
left: calc(50% - (#{$width} / 2))
top: calc(50% - (#{$width} / 2))
=delete
+unselectable
=fa($size, $dimensions)
display: inline-block
font-size: $size
height: $dimensions
line-height: $dimensions
text-align: center
vertical-align: top
width: $dimensions
=hamburger($dimensions)
cursor: pointer
display: block
height: $dimensions
position: relative
width: $dimensions
span
background-color: currentColor
display: block
height: 1px
left: calc(50% - 8px)
position: absolute
transform-origin: center
transition-duration: $speed
transition-property: background-color, opacity, transform
transition-timing-function: $easing
width: 16px
&:nth-child(1)
top: calc(50% - 6px)
&:nth-child(2)
top: calc(50% - 1px)
&:nth-child(3)
top: calc(50% + 4px)
&:hover
background-color: rgba(black, 0.05)
// Modifers
&.is-active
span
&:nth-child(1)
transform: translateY(5px) rotate(45deg)
&:nth-child(2)
opacity: 0
&:nth-child(3)
transform: translateY(-5px) rotate(-45deg)
=overflow-touch
-webkit-overflow-scrolling: touch
=placeholder
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
@each $placeholder in $placeholders
&:#{$placeholder}-placeholder
@content
// Responsiveness
=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
@content
=tablet-only
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
@content
=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
=widescreen-only
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=fullhd
@media screen and (min-width: $fullhd)
@content
// Placeholders
%unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
=unselectable
@extend %unselectable
%arrow
border: 1px solid transparent
border-right: 0
border-top: 0
content: " "
display: block
height: 0.5em
pointer-events: none
position: absolute
transform: rotate(-45deg)
transform-origin: center
width: 0.5em
=arrow($color)
@extend %arrow
border-color: $color
%block
&:not(:last-child)
margin-bottom: 1.5rem
=block
@extend %block
%delete
@extend %unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: rgba($black, 0.2)
@ -97,51 +215,10 @@
min-width: 32px
width: 32px
=fa($size, $dimensions)
display: inline-block
font-size: $size
height: $dimensions
line-height: $dimensions
text-align: center
vertical-align: top
width: $dimensions
=delete
@extend %delete
=hamburger($dimensions)
cursor: pointer
display: block
height: $dimensions
position: relative
width: $dimensions
span
background-color: currentColor
display: block
height: 1px
left: calc(50% - 8px)
position: absolute
transform-origin: center
transition-duration: $speed
transition-property: background-color, opacity, transform
transition-timing-function: $easing
width: 16px
&:nth-child(1)
top: calc(50% - 6px)
&:nth-child(2)
top: calc(50% - 1px)
&:nth-child(3)
top: calc(50% + 4px)
&:hover
background-color: rgba(black, 0.05)
// Modifers
&.is-active
span
&:nth-child(1)
transform: translateY(5px) rotate(45deg)
&:nth-child(2)
opacity: 0
&:nth-child(3)
transform: translateY(-5px) rotate(-45deg)
=loader
%loader
animation: spinAround 500ms infinite linear
border: 2px solid $border
border-radius: $radius-rounded
@ -153,71 +230,20 @@
position: relative
width: 1em
=overflow-touch
-webkit-overflow-scrolling: touch
=loader
@extend %loader
%overlay
bottom: 0
left: 0
position: absolute
right: 0
top: 0
=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
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
// Responsiveness
=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
@content
=tablet-only
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
@content
=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
=widescreen-only
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=fullhd
@media screen and (min-width: $fullhd)
@content
@extend %overlay
@if $offset != 0
bottom: $offset
left: $offset
right: $offset
top: $offset