summaryrefslogtreecommitdiff
path: root/styles/_sass/base
diff options
context:
space:
mode:
Diffstat (limited to 'styles/_sass/base')
-rw-r--r--styles/_sass/base/_all.sass5
-rw-r--r--styles/_sass/base/generic.sass130
-rw-r--r--styles/_sass/base/helpers.sass276
-rw-r--r--styles/_sass/base/minireset.sass84
4 files changed, 495 insertions, 0 deletions
diff --git a/styles/_sass/base/_all.sass b/styles/_sass/base/_all.sass
new file mode 100644
index 0000000..e913d6b
--- /dev/null
+++ b/styles/_sass/base/_all.sass
@@ -0,0 +1,5 @@
+@charset "utf-8"
+
+@import "minireset.sass"
+@import "generic.sass"
+@import "helpers.sass"
diff --git a/styles/_sass/base/generic.sass b/styles/_sass/base/generic.sass
new file mode 100644
index 0000000..42a3d88
--- /dev/null
+++ b/styles/_sass/base/generic.sass
@@ -0,0 +1,130 @@
+$body-background-color: $white !default
+$body-size: 16px !default
+$body-rendering: optimizeLegibility !default
+$body-family: $family-primary !default
+$body-color: $text !default
+$body-weight: $weight-normal !default
+$body-line-height: 1.5 !default
+
+$code-family: $family-code !default
+$code-padding: 0.25em 0.5em 0.25em !default
+$code-weight: normal !default
+$code-size: 0.875em !default
+
+$hr-background-color: $background !default
+$hr-height: 2px !default
+$hr-margin: 1.5rem 0 !default
+
+$strong-color: $text-strong !default
+$strong-weight: $weight-bold !default
+
+html
+ background-color: $body-background-color
+ font-size: $body-size
+ -moz-osx-font-smoothing: grayscale
+ -webkit-font-smoothing: antialiased
+ min-width: 300px
+ overflow-x: hidden
+ overflow-y: scroll
+ text-rendering: $body-rendering
+ text-size-adjust: 100%
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section
+ display: block
+
+body,
+button,
+input,
+select,
+textarea
+ font-family: $body-family
+
+code,
+pre
+ -moz-osx-font-smoothing: auto
+ -webkit-font-smoothing: auto
+ font-family: $code-family
+
+body
+ color: $body-color
+ font-size: 1rem
+ font-weight: $body-weight
+ line-height: $body-line-height
+
+// Inline
+
+a
+ color: $link
+ cursor: pointer
+ text-decoration: none
+ strong
+ color: currentColor
+ &:hover
+ color: $link-hover
+
+code
+ background-color: $code-background
+ color: $code
+ font-size: $code-size
+ font-weight: $code-weight
+ padding: $code-padding
+
+hr
+ background-color: $hr-background-color
+ border: none
+ display: block
+ height: $hr-height
+ margin: $hr-margin
+
+img
+ height: auto
+ max-width: 100%
+
+input[type="checkbox"],
+input[type="radio"]
+ vertical-align: baseline
+
+small
+ font-size: 0.875em
+
+span
+ font-style: inherit
+ font-weight: inherit
+
+strong
+ color: $strong-color
+ font-weight: $strong-weight
+
+// Block
+
+fieldset
+ border: none
+
+pre
+ +overflow-touch
+ background-color: $pre-background
+ color: $pre
+ font-size: 0.875em
+ overflow-x: auto
+ padding: 1.25rem 1.5rem
+ white-space: pre
+ word-wrap: normal
+ code
+ background-color: transparent
+ color: currentColor
+ font-size: 1em
+ padding: 0
+
+table
+ td,
+ th
+ text-align: left
+ vertical-align: top
+ th
+ color: $text-strong
diff --git a/styles/_sass/base/helpers.sass b/styles/_sass/base/helpers.sass
new file mode 100644
index 0000000..17fdf15
--- /dev/null
+++ b/styles/_sass/base/helpers.sass
@@ -0,0 +1,276 @@
+// Float
+
+.is-clearfix
+ +clearfix
+
+.is-pulled-left
+ float: left !important
+
+.is-pulled-right
+ float: right !important
+
+// Overflow
+
+.is-clipped
+ overflow: hidden !important
+
+// Overlay
+
+.is-overlay
+ @extend %overlay
+
+// Typography
+
+=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
+
+@each $name, $pair in $colors
+ $color: nth($pair, 1)
+ .has-text-#{$name}
+ color: $color !important
+ a.has-text-#{$name}
+ &:hover,
+ &:focus
+ color: darken($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
+
+.has-text-weight-light
+ font-weight: $weight-light !important
+.has-text-weight-normal
+ font-weight: $weight-normal !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
+
+// Visibility
+
+$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
+
+// Other
+
+.is-marginless
+ margin: 0 !important
+
+.is-paddingless
+ padding: 0 !important
+
+.is-radiusless
+ border-radius: 0 !important
+
+.is-shadowless
+ box-shadow: none !important
+
+.is-unselectable
+ @extend %unselectable
diff --git a/styles/_sass/base/minireset.sass b/styles/_sass/base/minireset.sass
new file mode 100644
index 0000000..9c34a89
--- /dev/null
+++ b/styles/_sass/base/minireset.sass
@@ -0,0 +1,84 @@
+/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+ margin: 0
+ padding: 0
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+ font-size: 100%
+ font-weight: normal
+
+// List
+ul
+ list-style: none
+
+// Form
+button,
+input,
+select,
+textarea
+ margin: 0
+
+// Box sizing
+html
+ box-sizing: border-box
+
+*
+ &,
+ &::before,
+ &::after
+ box-sizing: inherit
+
+// Media
+img,
+embed,
+iframe,
+object,
+video
+ height: auto
+ max-width: 100%
+
+audio
+ max-width: 100%
+
+// Iframe
+iframe
+ border: 0
+
+// Table
+table
+ border-collapse: collapse
+ border-spacing: 0
+
+td,
+th
+ padding: 0
+ text-align: left