Skip to content

Commit

Permalink
Add new spacing helpers
Browse files Browse the repository at this point in the history
  • Loading branch information
jgthms committed May 17, 2020
1 parent 0dc4416 commit a2a9564
Show file tree
Hide file tree
Showing 15 changed files with 433 additions and 147 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Expand Up @@ -3,6 +3,8 @@
.DS_Store
.ruby-version
npm-debug.log
test.css
test.css.map
test.html
test.sass
test.css
Expand Down
1 change: 0 additions & 1 deletion sass/components/_all.sass
Expand Up @@ -4,7 +4,6 @@
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"
Expand Down
40 changes: 1 addition & 39 deletions sass/components/list.sass
@@ -1,39 +1 @@
$list-background-color: $scheme-main !default
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$list-radius: $radius !default

$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default

.list
@extend %block
background-color: $list-background-color
border-radius: $list-radius
box-shadow: $list-shadow
// &.is-hoverable > .list-item:hover:not(.is-active)
// background-color: $list-item-hover-background-color
// cursor: pointer
.list-item
display: block
padding: 0.5em 1em
&:not(a)
color: $list-item-color
&:first-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
border-bottom-left-radius: $list-radius
border-bottom-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
background-color: $list-item-active-background-color
color: $list-item-active-color

a.list-item
background-color: $list-item-hover-background-color
cursor: pointer
@warn "The list.sass file is DEPRECATED. Please use sass/components/panel instead."
10 changes: 10 additions & 0 deletions sass/helpers/_all.sass
@@ -0,0 +1,10 @@
@charset "utf-8"

@import "color.sass"
@import "float.sass"
@import "other.sass"
@import "overflow.sass"
@import "position.sass"
@import "spacing.sass"
@import "typography.sass"
@import "visibility.sass"
16 changes: 16 additions & 0 deletions sass/helpers/color.sass
@@ -0,0 +1,16 @@
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
a.has-text-#{$name}
&:hover,
&:focus
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important

@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
.has-background-#{$name}
background-color: $shade !important
8 changes: 8 additions & 0 deletions sass/helpers/float.sass
@@ -0,0 +1,8 @@
.is-clearfix
+clearfix

.is-pulled-left
float: left !important

.is-pulled-right
float: right !important
8 changes: 8 additions & 0 deletions sass/helpers/other.sass
@@ -0,0 +1,8 @@
.is-radiusless
border-radius: 0 !important

.is-shadowless
box-shadow: none !important

.is-unselectable
@extend %unselectable
2 changes: 2 additions & 0 deletions sass/helpers/overflow.sass
@@ -0,0 +1,2 @@
.is-clipped
overflow: hidden !important
5 changes: 5 additions & 0 deletions sass/helpers/position.sass
@@ -0,0 +1,5 @@
.is-overlay
@extend %overlay

.is-relative
position: relative !important
28 changes: 28 additions & 0 deletions sass/helpers/spacing.sass
@@ -0,0 +1,28 @@
.is-marginless
margin: 0 !important

.is-paddingless
padding: 0 !important

$spacing-shortcuts: ("margin": "m", "padding": "p") !default
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
$spacing-horizontal: "x" !default
$spacing-vertical: "y" !default
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default

@each $property, $shortcut in $spacing-shortcuts
@each $direction, $suffix in $spacing-directions
@each $name, $value in $spacing-values
// Cardinal directions
.#{$shortcut}#{$suffix}-#{$name}
#{$property}-#{$direction}: $value !important
// Horizontal axis
@if $spacing-horizontal != null
.#{$shortcut}#{$spacing-horizontal}-#{$name}
#{$property}-left: $value !important
#{$property}-right: $value !important
// Vertical axis
@if $spacing-vertical != null
.#{$shortcut}#{$spacing-vertical}-#{$name}
#{$property}-top: $value !important
#{$property}-bottom: $value !important
98 changes: 98 additions & 0 deletions sass/helpers/typography.sass
@@ -0,0 +1,98 @@
=typography-size($target:'')
@each $size in $sizes
$i: index($sizes, $size)
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important

+typography-size()

+mobile
+typography-size('mobile')

+tablet
+typography-size('tablet')

+touch
+typography-size('touch')

+desktop
+typography-size('desktop')

+widescreen
+typography-size('widescreen')

+fullhd
+typography-size('fullhd')

$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')

@each $alignment, $text-align in $alignments
.has-text-#{$alignment}
text-align: #{$text-align} !important

@each $alignment, $text-align in $alignments
+mobile
.has-text-#{$alignment}-mobile
text-align: #{$text-align} !important
+tablet
.has-text-#{$alignment}-tablet
text-align: #{$text-align} !important
+tablet-only
.has-text-#{$alignment}-tablet-only
text-align: #{$text-align} !important
+touch
.has-text-#{$alignment}-touch
text-align: #{$text-align} !important
+desktop
.has-text-#{$alignment}-desktop
text-align: #{$text-align} !important
+desktop-only
.has-text-#{$alignment}-desktop-only
text-align: #{$text-align} !important
+widescreen
.has-text-#{$alignment}-widescreen
text-align: #{$text-align} !important
+widescreen-only
.has-text-#{$alignment}-widescreen-only
text-align: #{$text-align} !important
+fullhd
.has-text-#{$alignment}-fullhd
text-align: #{$text-align} !important

.is-capitalized
text-transform: capitalize !important

.is-lowercase
text-transform: lowercase !important

.is-uppercase
text-transform: uppercase !important

.is-italic
font-style: italic !important

.has-text-weight-light
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-medium
font-weight: $weight-medium !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important

.is-family-primary
font-family: $family-primary !important

.is-family-secondary
font-family: $family-secondary !important

.is-family-sans-serif
font-family: $family-sans-serif !important

.is-family-monospace
font-family: $family-monospace !important

.is-family-code
font-family: $family-code !important
122 changes: 122 additions & 0 deletions sass/helpers/visibility.sass
@@ -0,0 +1,122 @@


$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'

@each $display in $displays
.is-#{$display}
display: #{$display} !important
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important

.is-hidden
display: none !important

.is-sr-only
border: none !important
clip: rect(0, 0, 0, 0) !important
height: 0.01em !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 0.01em !important

+mobile
.is-hidden-mobile
display: none !important

+tablet
.is-hidden-tablet
display: none !important

+tablet-only
.is-hidden-tablet-only
display: none !important

+touch
.is-hidden-touch
display: none !important

+desktop
.is-hidden-desktop
display: none !important

+desktop-only
.is-hidden-desktop-only
display: none !important

+widescreen
.is-hidden-widescreen
display: none !important

+widescreen-only
.is-hidden-widescreen-only
display: none !important

+fullhd
.is-hidden-fullhd
display: none !important

.is-invisible
visibility: hidden !important

+mobile
.is-invisible-mobile
visibility: hidden !important

+tablet
.is-invisible-tablet
visibility: hidden !important

+tablet-only
.is-invisible-tablet-only
visibility: hidden !important

+touch
.is-invisible-touch
visibility: hidden !important

+desktop
.is-invisible-desktop
visibility: hidden !important

+desktop-only
.is-invisible-desktop-only
visibility: hidden !important

+widescreen
.is-invisible-widescreen
visibility: hidden !important

+widescreen-only
.is-invisible-widescreen-only
visibility: hidden !important

+fullhd
.is-invisible-fullhd
visibility: hidden !important
2 changes: 1 addition & 1 deletion sass/utilities/_all.sass
Expand Up @@ -2,7 +2,7 @@

@import "initial-variables.sass"
@import "functions.sass"
@import "derived-variables.sass"
@import "derived-variables.scss"
@import "animations.sass"
@import "mixins.sass"
@import "controls.sass"

0 comments on commit a2a9564

Please sign in to comment.