mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Rename bulma folder to sass
This commit is contained in:
Jeremy Thomas
6
sass/base/base.sass
Normal file
6
sass/base/base.sass
Normal file
@@ -0,0 +1,6 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "generic"
|
||||
@import "content"
|
||||
@import "highlight"
|
||||
@import "helpers"
|
||||
67
sass/base/content.sass
Normal file
67
sass/base/content.sass
Normal file
@@ -0,0 +1,67 @@
|
||||
.content
|
||||
@extend .block
|
||||
// Inline
|
||||
li + li
|
||||
margin-top: 0.25em
|
||||
// Block
|
||||
blockquote,
|
||||
p,
|
||||
ol,
|
||||
ul
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: $text-strong
|
||||
font-weight: 300
|
||||
line-height: 1.125
|
||||
margin-bottom: 20px
|
||||
h1,
|
||||
h2,
|
||||
h3
|
||||
&:not(:first-child)
|
||||
margin-top: 40px
|
||||
blockquote
|
||||
background: $background
|
||||
border-left: 5px solid $border
|
||||
padding: 1.5em
|
||||
h1
|
||||
font-size: 2em
|
||||
h2
|
||||
font-size: 1.75em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
h4
|
||||
font-size: 1.25em
|
||||
h5
|
||||
font-size: 1.125em
|
||||
h6
|
||||
font-size: 1em
|
||||
ol
|
||||
list-style: decimal outside
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style: disc outside
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style-type: circle
|
||||
margin-top: 0.5em
|
||||
ul
|
||||
list-style-type: square
|
||||
// Sizes
|
||||
&.is-medium
|
||||
font-size: $size-5
|
||||
code
|
||||
font-size: $size-6
|
||||
&.is-large
|
||||
font-size: $size-4
|
||||
code
|
||||
font-size: $size-5
|
||||
118
sass/base/generic.sass
Normal file
118
sass/base/generic.sass
Normal file
@@ -0,0 +1,118 @@
|
||||
html
|
||||
background: $body-background
|
||||
font-size: $size-normal
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
min-width: 300px
|
||||
overflow-x: hidden
|
||||
overflow-y: scroll
|
||||
text-rendering: optimizeLegibility
|
||||
// Modifiers
|
||||
&.has-modal
|
||||
overflow: hidden
|
||||
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
section
|
||||
display: block
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
font-family: $family-primary
|
||||
|
||||
code,
|
||||
pre
|
||||
-moz-osx-font-smoothing: auto
|
||||
-webkit-font-smoothing: auto
|
||||
font-family: $family-code
|
||||
line-height: 1.25
|
||||
|
||||
body
|
||||
color: $text
|
||||
font-size: 1rem
|
||||
line-height: 1.428571428571429
|
||||
|
||||
// Inline
|
||||
|
||||
a
|
||||
color: $link
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
transition: none $speed $easing
|
||||
&:hover
|
||||
color: $link-hover
|
||||
|
||||
code
|
||||
background: $code-background
|
||||
color: $code
|
||||
font-size: 12px
|
||||
font-weight: normal
|
||||
padding: 1px 2px 2px
|
||||
|
||||
hr
|
||||
border-top-color: $border
|
||||
margin: 20px 0
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: $size-small
|
||||
|
||||
strong
|
||||
color: $text-strong
|
||||
|
||||
// Block
|
||||
|
||||
pre
|
||||
background: $pre-background
|
||||
color: $pre
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
code
|
||||
background: $pre-background
|
||||
color: $pre
|
||||
display: block
|
||||
overflow-x: auto
|
||||
padding: 16px 20px
|
||||
|
||||
table
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
text-align: left
|
||||
vertical-align: top
|
||||
th
|
||||
color: $text-strong
|
||||
|
||||
// Classes
|
||||
|
||||
.block
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
|
||||
.container
|
||||
position: relative
|
||||
+desktop
|
||||
margin: 0 auto
|
||||
max-width: 960px
|
||||
// Modifiers
|
||||
&.is-fluid
|
||||
margin: 0 20px
|
||||
max-width: none
|
||||
|
||||
.fa
|
||||
font-size: 21px
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
63
sass/base/helpers.sass
Normal file
63
sass/base/helpers.sass
Normal file
@@ -0,0 +1,63 @@
|
||||
// Display
|
||||
|
||||
.is-flex
|
||||
display: flex
|
||||
|
||||
// Float
|
||||
|
||||
.is-clearfix
|
||||
+clearfix
|
||||
|
||||
.is-pulled-left
|
||||
float: left
|
||||
|
||||
.is-pulled-right
|
||||
float: right
|
||||
|
||||
// Overlay
|
||||
|
||||
.is-overlay
|
||||
+overlay
|
||||
|
||||
// Text
|
||||
|
||||
.has-text-centered
|
||||
text-align: center
|
||||
|
||||
.has-text-left
|
||||
text-align: left
|
||||
|
||||
.has-text-right
|
||||
text-align: right
|
||||
|
||||
// Visibility
|
||||
|
||||
.is-hidden
|
||||
display: none !important
|
||||
|
||||
.is-hidden-mobile
|
||||
+mobile
|
||||
display: none !important
|
||||
|
||||
.is-hidden-tablet
|
||||
+tablet
|
||||
display: none !important
|
||||
|
||||
.is-hidden-touch
|
||||
+touch
|
||||
display: none !important
|
||||
|
||||
.is-hidden-desktop
|
||||
+desktop
|
||||
display: none !important
|
||||
|
||||
// Other
|
||||
|
||||
.is-disabled
|
||||
pointer-events: none
|
||||
|
||||
.is-marginless
|
||||
margin: 0 !important
|
||||
|
||||
.is-unselectable
|
||||
+unselectable
|
||||
123
sass/base/highlight.sass
Normal file
123
sass/base/highlight.sass
Normal file
@@ -0,0 +1,123 @@
|
||||
.highlight
|
||||
background-color: #fdf6e3
|
||||
color: #586e75
|
||||
.c
|
||||
color: #93a1a1
|
||||
.err,
|
||||
.g
|
||||
color: #586e75
|
||||
.k
|
||||
color: #859900
|
||||
.l,
|
||||
.n
|
||||
color: #586e75
|
||||
.o
|
||||
color: #859900
|
||||
.x
|
||||
color: #cb4b16
|
||||
.p
|
||||
color: #586e75
|
||||
.cm
|
||||
color: #93a1a1
|
||||
.cp
|
||||
color: #859900
|
||||
.c1
|
||||
color: #93a1a1
|
||||
.cs
|
||||
color: #859900
|
||||
.gd
|
||||
color: #2aa198
|
||||
.ge
|
||||
color: #586e75
|
||||
font-style: italic
|
||||
.gr
|
||||
color: #dc322f
|
||||
.gh
|
||||
color: #cb4b16
|
||||
.gi
|
||||
color: #859900
|
||||
.go,
|
||||
.gp
|
||||
color: #586e75
|
||||
.gs
|
||||
color: #586e75
|
||||
font-weight: bold
|
||||
.gu
|
||||
color: #cb4b16
|
||||
.gt
|
||||
color: #586e75
|
||||
.kc
|
||||
color: #cb4b16
|
||||
.kd
|
||||
color: #268bd2
|
||||
.kn,
|
||||
.kp
|
||||
color: #859900
|
||||
.kr
|
||||
color: #268bd2
|
||||
.kt
|
||||
color: #dc322f
|
||||
.ld
|
||||
color: #586e75
|
||||
.m,
|
||||
.s
|
||||
color: #2aa198
|
||||
.na
|
||||
color: #B58900
|
||||
.nb
|
||||
color: #586e75
|
||||
.nc
|
||||
color: #268bd2
|
||||
.no
|
||||
color: #cb4b16
|
||||
.nd
|
||||
color: #268bd2
|
||||
.ni,
|
||||
.ne
|
||||
color: #cb4b16
|
||||
.nf
|
||||
color: #268bd2
|
||||
.nl,
|
||||
.nn,
|
||||
.nx,
|
||||
.py
|
||||
color: #586e75
|
||||
.nt,
|
||||
.nv
|
||||
color: #268bd2
|
||||
.ow
|
||||
color: #859900
|
||||
.w
|
||||
color: #586e75
|
||||
.mf,
|
||||
.mh,
|
||||
.mi,
|
||||
.mo
|
||||
color: #2aa198
|
||||
.sb
|
||||
color: #93a1a1
|
||||
.sc
|
||||
color: #2aa198
|
||||
.sd
|
||||
color: #586e75
|
||||
.s2
|
||||
color: #2aa198
|
||||
.se
|
||||
color: #cb4b16
|
||||
.sh
|
||||
color: #586e75
|
||||
.si,
|
||||
.sx
|
||||
color: #2aa198
|
||||
.sr
|
||||
color: #dc322f
|
||||
.s1,
|
||||
.ss
|
||||
color: #2aa198
|
||||
.bp,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi
|
||||
color: #268bd2
|
||||
.il
|
||||
color: #2aa198
|
||||
59
sass/components/card.sass
Normal file
59
sass/components/card.sass
Normal file
@@ -0,0 +1,59 @@
|
||||
.card-header
|
||||
align-items: stretch
|
||||
box-shadow: 0 1px 2px rgba(black, 0.1)
|
||||
display: flex
|
||||
min-height: 40px
|
||||
|
||||
.card-header-title
|
||||
align-items: flex-start
|
||||
color: $text-strong
|
||||
display: flex
|
||||
flex: 1
|
||||
font-weight: bold
|
||||
padding: 10px
|
||||
|
||||
.card-header-icon
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: 40px
|
||||
|
||||
.card-image
|
||||
display: block
|
||||
position: relative
|
||||
|
||||
.card-content
|
||||
padding: 20px
|
||||
.title + .subtitle
|
||||
margin-top: -20px
|
||||
|
||||
.card-footer
|
||||
background: $background
|
||||
border-top: 1px solid $border
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
.card-footer-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: 1
|
||||
justify-content: center
|
||||
padding: 10px
|
||||
&:not(:last-child)
|
||||
border-right: 1px solid $border
|
||||
|
||||
.card
|
||||
background: white
|
||||
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
|
||||
color: $text
|
||||
max-width: 100%
|
||||
position: relative
|
||||
width: 300px
|
||||
.media:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
&.is-rounded
|
||||
border-radius: 5px
|
||||
28
sass/components/components.sass
Normal file
28
sass/components/components.sass
Normal file
@@ -0,0 +1,28 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "grid"
|
||||
@import "navbar"
|
||||
@import "card"
|
||||
@import "table"
|
||||
@import "tabs"
|
||||
@import "media"
|
||||
@import "menu"
|
||||
@import "pagination"
|
||||
@import "panel"
|
||||
@import "modal"
|
||||
|
||||
.box
|
||||
@extend .block
|
||||
background: white
|
||||
border-radius: 5px
|
||||
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
|
||||
display: block
|
||||
padding: 20px
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
|
||||
|
||||
254
sass/components/grid.sass
Normal file
254
sass/components/grid.sass
Normal file
@@ -0,0 +1,254 @@
|
||||
.column
|
||||
flex: 1
|
||||
padding: 10px
|
||||
.columns.is-mobile > &.is-narrow
|
||||
flex: none
|
||||
.columns.is-mobile > &.is-full
|
||||
flex: none
|
||||
width: 100%
|
||||
.columns.is-mobile > &.is-three-quarters
|
||||
flex: none
|
||||
width: 75%
|
||||
.columns.is-mobile > &.is-two-thirds
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
.columns.is-mobile > &.is-half
|
||||
flex: none
|
||||
width: 50%
|
||||
.columns.is-mobile > &.is-one-third
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
.columns.is-mobile > &.is-one-quarter
|
||||
flex: none
|
||||
width: 25%
|
||||
.columns.is-mobile > &.is-offset-three-quarters
|
||||
margin-left: 75%
|
||||
.columns.is-mobile > &.is-offset-two-thirds
|
||||
margin-left: 66.6666%
|
||||
.columns.is-mobile > &.is-offset-half
|
||||
margin-left: 50%
|
||||
.columns.is-mobile > &.is-offset-one-third
|
||||
margin-left: 33.3333%
|
||||
.columns.is-mobile > &.is-offset-one-quarter
|
||||
margin-left: 25%
|
||||
@for $i from 1 through 12
|
||||
.columns.is-mobile > &.is-#{$i}
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
.columns.is-mobile > &.is-offset-#{$i}
|
||||
margin-left: ($i / 12) * 100%
|
||||
+mobile
|
||||
&.is-narrow-mobile
|
||||
flex: none
|
||||
&.is-full-mobile
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-mobile
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-mobile
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-mobile
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-mobile
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-mobile
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-offset-three-quarters-mobile
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-mobile
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-mobile
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-mobile
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-mobile
|
||||
margin-left: 25%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}-mobile
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
&.is-offset-#{$i}-mobile
|
||||
margin-left: ($i / 12) * 100%
|
||||
+tablet
|
||||
&.is-narrow,
|
||||
&.is-narrow-tablet
|
||||
flex: none
|
||||
&.is-full,
|
||||
&.is-full-tablet
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters,
|
||||
&.is-three-quarters-tablet
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds,
|
||||
&.is-two-thirds-tablet
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half,
|
||||
&.is-half-tablet
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third,
|
||||
&.is-one-third-tablet
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter,
|
||||
&.is-one-quarter-tablet
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-offset-three-quarters,
|
||||
&.is-offset-three-quarters-tablet
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds,
|
||||
&.is-offset-two-thirds-tablet
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half,
|
||||
&.is-offset-half-tablet
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third,
|
||||
&.is-offset-one-third-tablet
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter,
|
||||
&.is-offset-one-quarter-tablet
|
||||
margin-left: 25%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i},
|
||||
&.is-#{$i}-tablet
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
&.is-offset-#{$i},
|
||||
&.is-offset-#{$i}-tablet
|
||||
margin-left: ($i / 12) * 100%
|
||||
+desktop
|
||||
&.is-narrow-desktop
|
||||
flex: none
|
||||
&.is-full-desktop
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-desktop
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-desktop
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-desktop
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-desktop
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-desktop
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-offset-three-quarters-desktop
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-desktop
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-desktop
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-desktop
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-desktop
|
||||
margin-left: 25%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}-desktop
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
&.is-offset-#{$i}-desktop
|
||||
margin-left: ($i / 12) * 100%
|
||||
|
||||
.columns
|
||||
margin-left: -10px
|
||||
margin-right: -10px
|
||||
margin-top: -10px
|
||||
&:last-child
|
||||
margin-bottom: -10px
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
// Modifiers
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-gapless
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
margin-top: 0
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
& > .column
|
||||
margin: 0
|
||||
padding: 0
|
||||
&.is-grid
|
||||
// Responsiveness
|
||||
+tablet
|
||||
flex-wrap: wrap
|
||||
& > .column
|
||||
flex-basis: 33.3333%
|
||||
max-width: 33.3333%
|
||||
padding: 10px
|
||||
width: 33.3333%
|
||||
& + .column
|
||||
margin-left: 0
|
||||
&.is-mobile
|
||||
display: flex
|
||||
&.is-multiline
|
||||
flex-wrap: wrap
|
||||
&.is-vcentered
|
||||
align-items: center
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(.is-desktop)
|
||||
display: flex
|
||||
+desktop
|
||||
// Modifiers
|
||||
&.is-desktop
|
||||
display: flex
|
||||
|
||||
.tilefiejsoif
|
||||
flex: 1
|
||||
// Modifiers
|
||||
&.is-parent
|
||||
padding: 10px
|
||||
// Responsiveness
|
||||
+tablet
|
||||
// Sizes
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
|
||||
.tile
|
||||
align-items: stretch
|
||||
flex: 1
|
||||
// Modifiers
|
||||
&.is-ancestor
|
||||
margin-left: -10px
|
||||
margin-right: -10px
|
||||
margin-top: -10px
|
||||
&:last-child
|
||||
margin-bottom: -10px
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
&.is-child
|
||||
margin: 0 !important
|
||||
&.is-parent
|
||||
padding: 10px
|
||||
&.is-vertical
|
||||
flex-direction: column
|
||||
& > .tile.is-child:not(:last-child)
|
||||
margin-bottom: 20px !important
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(.is-child)
|
||||
display: flex
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
63
sass/components/media.sass
Normal file
63
sass/components/media.sass
Normal file
@@ -0,0 +1,63 @@
|
||||
.media-number
|
||||
background: $background
|
||||
border-radius: 290486px
|
||||
display: inline-block
|
||||
font-size: $size-medium
|
||||
height: 32px
|
||||
line-height: 24px
|
||||
min-width: 32px
|
||||
padding: 4px 8px
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
// Responsiveness
|
||||
+mobile
|
||||
margin-bottom: 10px
|
||||
+tablet
|
||||
margin-right: 10px
|
||||
|
||||
.media-left
|
||||
margin-right: 10px
|
||||
|
||||
.media-right
|
||||
margin-left: 10px
|
||||
|
||||
.media-content
|
||||
flex: 1
|
||||
text-align: left
|
||||
|
||||
.media
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
text-align: left
|
||||
.content:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
.media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
display: flex
|
||||
padding-top: 10px
|
||||
.textarea
|
||||
+control-small
|
||||
.button
|
||||
+button-small
|
||||
.content:not(:last-child),
|
||||
.control:not(:last-child)
|
||||
margin-bottom: 5px
|
||||
.media
|
||||
font-size: 12px
|
||||
padding-top: 5px
|
||||
& + .media
|
||||
margin-top: 5px
|
||||
& + .media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
margin-top: 10px
|
||||
padding-top: 10px
|
||||
// Sizes
|
||||
&.is-large
|
||||
& + .media
|
||||
margin-top: 20px
|
||||
padding-top: 20px
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&.is-large
|
||||
.media-number
|
||||
margin-right: 20px
|
||||
32
sass/components/menu.sass
Normal file
32
sass/components/menu.sass
Normal file
@@ -0,0 +1,32 @@
|
||||
.menu-nav
|
||||
a
|
||||
display: block
|
||||
padding: 5px 10px
|
||||
|
||||
.menu-list
|
||||
a
|
||||
border-radius: 2px
|
||||
color: $text
|
||||
display: block
|
||||
padding: 5px 10px
|
||||
&:hover
|
||||
background: $background
|
||||
color: $link
|
||||
// Modifiers
|
||||
&.is-active
|
||||
background: $link
|
||||
color: $link-invert
|
||||
li
|
||||
ul
|
||||
border-left: 1px solid $border
|
||||
margin: 10px
|
||||
padding-left: 10px
|
||||
|
||||
.menu-label
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
&:not(:first-child)
|
||||
margin-top: 20px
|
||||
36
sass/components/modal.sass
Normal file
36
sass/components/modal.sass
Normal file
@@ -0,0 +1,36 @@
|
||||
.modal-background
|
||||
+overlay
|
||||
background: rgba(black, 0.86)
|
||||
|
||||
.modal-content
|
||||
margin: 0 20px
|
||||
max-height: calc(100vh - 160px)
|
||||
overflow: auto
|
||||
position: relative
|
||||
width: 100%
|
||||
// Responsiveness
|
||||
+tablet
|
||||
margin: 0 auto
|
||||
max-height: calc(100vh - 40px)
|
||||
width: 640px
|
||||
|
||||
.modal-close
|
||||
@extend .delete
|
||||
background: none
|
||||
height: 40px
|
||||
position: fixed
|
||||
right: 20px
|
||||
top: 20px
|
||||
width: 40px
|
||||
|
||||
.modal
|
||||
+overlay
|
||||
align-items: center
|
||||
display: none
|
||||
justify-content: center
|
||||
overflow: hidden
|
||||
position: fixed
|
||||
z-index: 1986
|
||||
// Modifiers
|
||||
&.is-active
|
||||
display: flex
|
||||
49
sass/components/navbar.sass
Normal file
49
sass/components/navbar.sass
Normal file
@@ -0,0 +1,49 @@
|
||||
.navbar-item
|
||||
.title,
|
||||
.subtitle
|
||||
margin-bottom: 0
|
||||
// Responsiveness
|
||||
+mobile
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
|
||||
.navbar-left,
|
||||
.navbar-right
|
||||
.navbar-item
|
||||
&:not(:last-child)
|
||||
margin-right: 10px
|
||||
// Modifiers
|
||||
&.is-flexible
|
||||
flex: 1
|
||||
|
||||
.navbar-left
|
||||
// Responsiveness
|
||||
+mobile
|
||||
& + .navbar-right
|
||||
margin-top: 20px
|
||||
+tablet
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
.navbar-right
|
||||
// Responsiveness
|
||||
+tablet
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
|
||||
.navbar
|
||||
@extend .block
|
||||
code
|
||||
border-radius: $radius
|
||||
img
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
// Responsiveness
|
||||
+tablet
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
& > .navbar-item
|
||||
&:not(.is-narrow)
|
||||
flex: 1
|
||||
41
sass/components/pagination.sass
Normal file
41
sass/components/pagination.sass
Normal file
@@ -0,0 +1,41 @@
|
||||
.pagination
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
a
|
||||
@extend .button
|
||||
display: block
|
||||
min-width: 32px
|
||||
padding: 3px 8px
|
||||
// Modifiers
|
||||
&.is-active
|
||||
background: $link
|
||||
border-color: $link
|
||||
color: $link-invert
|
||||
span
|
||||
color: $text-light
|
||||
display: block
|
||||
margin: 0 4px
|
||||
li
|
||||
margin: 0 2px
|
||||
ul
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: 1
|
||||
justify-content: center
|
||||
// Responsiveness
|
||||
+mobile
|
||||
flex-wrap: wrap
|
||||
& > a
|
||||
width: calc(50% - 5px)
|
||||
&:not(:first-child)
|
||||
margin-left: 10px
|
||||
li
|
||||
flex: 1
|
||||
ul
|
||||
margin-top: 10px
|
||||
+tablet
|
||||
& > a
|
||||
&:not(:first-child)
|
||||
order: 1
|
||||
55
sass/components/panel.sass
Normal file
55
sass/components/panel.sass
Normal file
@@ -0,0 +1,55 @@
|
||||
.panel-icon
|
||||
+fa(14px, 16px)
|
||||
color: $text-light
|
||||
float: left
|
||||
margin: 0 4px 0 -2px
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
|
||||
.panel-heading
|
||||
background: $background
|
||||
border-bottom: 1px solid $border
|
||||
border-radius: 4px 4px 0 0
|
||||
color: $text-strong
|
||||
font-size: $size-medium
|
||||
font-weight: 300
|
||||
padding: 10px
|
||||
|
||||
.panel-list
|
||||
a
|
||||
color: $text
|
||||
&:hover
|
||||
color: $link
|
||||
|
||||
.panel-tabs
|
||||
display: flex
|
||||
font-size: $size-small
|
||||
padding: 5px 10px 0
|
||||
justify-content: center
|
||||
a
|
||||
border-bottom: 1px solid $border
|
||||
margin-bottom: -1px
|
||||
padding: 5px
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom-color: $link-active-border
|
||||
color: $link-active
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
|
||||
.panel-block
|
||||
color: $text-strong
|
||||
display: block
|
||||
line-height: 16px
|
||||
padding: 10px
|
||||
&:hover
|
||||
background: $background
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
|
||||
.panel
|
||||
border: 1px solid $border
|
||||
border-radius: 5px
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
89
sass/components/table.sass
Normal file
89
sass/components/table.sass
Normal file
@@ -0,0 +1,89 @@
|
||||
.table
|
||||
background: white
|
||||
color: $text-strong
|
||||
margin-bottom: 20px
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
border: 1px solid $border
|
||||
border-width: 0 0 1px
|
||||
padding: 8px 10px
|
||||
vertical-align: top
|
||||
// Modifiers
|
||||
&.table-icon
|
||||
padding: 5px
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
.fa
|
||||
+fa(21px, 24px)
|
||||
&.table-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px
|
||||
&.table-link
|
||||
padding: 0
|
||||
& > a
|
||||
display: block
|
||||
padding: 8px 10px
|
||||
&:hover
|
||||
background: $link
|
||||
color: $link-invert
|
||||
&.table-narrow
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
th
|
||||
color: $text-strong
|
||||
text-align: left
|
||||
tr
|
||||
&:hover
|
||||
background: $background
|
||||
color: $text-strong
|
||||
thead
|
||||
td,
|
||||
th
|
||||
border-width: 0 0 2px
|
||||
color: $text-light
|
||||
tbody
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 0
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: 2px 0 0
|
||||
color: $text-light
|
||||
// Modifiers
|
||||
&.is-bordered
|
||||
td,
|
||||
th
|
||||
border-width: 1px
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 1px
|
||||
&.is-narrow
|
||||
td,
|
||||
th
|
||||
padding: 5px 10px
|
||||
// Modifiers
|
||||
&.table-icon
|
||||
padding: 2px
|
||||
&.table-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 2px
|
||||
&.table-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px 10px
|
||||
&.is-striped
|
||||
tbody
|
||||
tr
|
||||
&:nth-child(2n)
|
||||
background: $background
|
||||
&:hover
|
||||
background: $border
|
||||
104
sass/components/tabs.sass
Normal file
104
sass/components/tabs.sass
Normal file
@@ -0,0 +1,104 @@
|
||||
.tabs
|
||||
@extend .block
|
||||
line-height: 24px
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
a
|
||||
border-bottom: 1px solid $border
|
||||
color: $text
|
||||
display: block
|
||||
margin-bottom: -1px
|
||||
padding: 5px 0
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-bottom-color: $text-strong
|
||||
color: $text-strong
|
||||
li
|
||||
display: block
|
||||
vertical-align: top
|
||||
& + li
|
||||
margin-left: 20px
|
||||
// Modifiers
|
||||
&.is-active
|
||||
a
|
||||
border-bottom-color: $link
|
||||
color: $link
|
||||
ul
|
||||
border-bottom: 1px solid $border
|
||||
display: flex
|
||||
.fa
|
||||
font-size: 14px
|
||||
line-height: 20px
|
||||
margin: 2px -2px
|
||||
width: 20px
|
||||
// Modifiers
|
||||
&.is-boxed
|
||||
a
|
||||
border: 1px solid transparent
|
||||
border-radius: $radius $radius 0 0
|
||||
padding: 5px 15px
|
||||
&:hover
|
||||
background: $background
|
||||
border-bottom-color: $border
|
||||
li
|
||||
& + li
|
||||
margin-left: 5px
|
||||
// Modifiers
|
||||
&.is-active
|
||||
a
|
||||
background: white
|
||||
border-color: $border
|
||||
border-bottom-color: transparent
|
||||
// Modifiers
|
||||
&.is-centered
|
||||
li
|
||||
&,
|
||||
& + li
|
||||
margin: 0 2px
|
||||
&.is-centered
|
||||
a
|
||||
padding: 5px 10px
|
||||
li
|
||||
& + li
|
||||
margin-left: 0
|
||||
ul
|
||||
justify-content: center
|
||||
text-align: center
|
||||
&.is-fullwidth
|
||||
li
|
||||
flex: 1
|
||||
& + li
|
||||
margin-left: 0
|
||||
ul
|
||||
justify-content: center
|
||||
text-align: center
|
||||
&.is-right
|
||||
ul
|
||||
justify-content: flex-end
|
||||
&.is-toggle
|
||||
a
|
||||
border: 1px solid $border
|
||||
margin-bottom: 0
|
||||
padding: 5px 10px
|
||||
position: relative
|
||||
&:hover
|
||||
background: $background
|
||||
border-color: $border-hover
|
||||
z-index: 2
|
||||
li
|
||||
& + li
|
||||
margin-left: -1px
|
||||
&:first-child a
|
||||
border-radius: $radius 0 0 $radius
|
||||
&:last-child a
|
||||
border-radius: 0 $radius $radius 0
|
||||
// Modifiers
|
||||
&.is-active
|
||||
a
|
||||
background: $primary
|
||||
border-color: $primary
|
||||
color: $primary-invert
|
||||
z-index: 1
|
||||
ul
|
||||
border-bottom: none
|
||||
78
sass/config/generated-variables.sass
Normal file
78
sass/config/generated-variables.sass
Normal file
@@ -0,0 +1,78 @@
|
||||
// Colors
|
||||
|
||||
$dark: $grey-darker
|
||||
$dark-invert: findColorInvert($dark)
|
||||
|
||||
$primary-invert: findColorInvert($primary)
|
||||
$info: $blue
|
||||
$info-invert: findColorInvert($info)
|
||||
$success: $green
|
||||
$success-invert: findColorInvert($success)
|
||||
$warning: $yellow
|
||||
$warning-invert: findColorInvert($warning)
|
||||
$danger: $red
|
||||
$danger-invert: findColorInvert($danger)
|
||||
|
||||
$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
|
||||
|
||||
$body-background: $grey-lighter
|
||||
|
||||
$background: $grey-lighter
|
||||
|
||||
$border: $grey-light
|
||||
$border-hover: $grey
|
||||
|
||||
// Text
|
||||
|
||||
$text: $grey-dark
|
||||
$text-invert: findColorInvert($text)
|
||||
$text-light: $grey
|
||||
$text-strong: $grey-darker
|
||||
|
||||
// Code
|
||||
|
||||
$code: $red
|
||||
$code-background: $background
|
||||
|
||||
$pre: $text
|
||||
$pre-background: $background
|
||||
|
||||
// Links
|
||||
|
||||
$link: $primary
|
||||
$link-invert: $primary-invert
|
||||
$link-visited: $purple
|
||||
|
||||
$link-hover: $grey-darker
|
||||
$link-hover-background: $grey-lighter
|
||||
$link-hover-border: $grey-darker
|
||||
|
||||
$link-active: $grey-darker
|
||||
$link-active-border: $grey-darker
|
||||
|
||||
// Controls
|
||||
|
||||
$control: $text-strong
|
||||
$control-background: $text-invert
|
||||
$control-border: $border
|
||||
|
||||
$control-hover: $link-hover
|
||||
$control-hover-border: $border-hover
|
||||
|
||||
$control-active: $link
|
||||
$control-active-background: $link
|
||||
$control-active-background-invert: $link-invert
|
||||
$control-active-border: $link
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: $family-sans-serif
|
||||
$family-code: $family-monospace
|
||||
|
||||
$size-small: $size-7
|
||||
$size-normal: $size-6
|
||||
$size-medium: $size-5
|
||||
$size-large: $size-3
|
||||
$size-huge: $size-1
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
|
||||
52
sass/config/variables.sass
Normal file
52
sass/config/variables.sass
Normal file
@@ -0,0 +1,52 @@
|
||||
// Colors
|
||||
|
||||
$grey-darker: #222324
|
||||
$grey-dark: #69707a
|
||||
$grey: #aeb1b5
|
||||
$grey-light: #d3d6db
|
||||
$grey-lighter: #f5f7fa
|
||||
|
||||
$blue: #42afe3
|
||||
$green: #97cd76
|
||||
$orange: #f68b39
|
||||
$purple: #847bb9
|
||||
$red: #ed6c63
|
||||
$turquoise: #1fc8db
|
||||
$yellow: #fce473
|
||||
|
||||
$primary: $turquoise
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
|
||||
$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace
|
||||
|
||||
$size-1: 48px
|
||||
$size-2: 40px
|
||||
$size-3: 28px
|
||||
$size-4: 24px
|
||||
$size-5: 18px
|
||||
$size-6: 14px
|
||||
|
||||
$size-7: 11px
|
||||
|
||||
$weight-title-normal: 300
|
||||
$weight-title-bold: 500
|
||||
|
||||
// Breakpoints
|
||||
|
||||
$tablet: 769px
|
||||
$desktop: 980px
|
||||
$widescreen: 1180px
|
||||
|
||||
// Dimensions
|
||||
|
||||
$column-gap: 20px
|
||||
|
||||
$header-height: 50px
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
$easing: ease-out
|
||||
$radius: 3px
|
||||
$speed: 86ms
|
||||
111
sass/elements/buttons.sass
Normal file
111
sass/elements/buttons.sass
Normal file
@@ -0,0 +1,111 @@
|
||||
=button-small
|
||||
border-radius: 2px
|
||||
font-size: 11px
|
||||
height: 24px
|
||||
line-height: 16px
|
||||
padding: 3px 6px
|
||||
=button-medium
|
||||
font-size: 18px
|
||||
height: 40px
|
||||
padding: 7px 14px
|
||||
=button-large
|
||||
font-size: 22px
|
||||
height: 48px
|
||||
padding: 11px 20px
|
||||
|
||||
.button
|
||||
+control
|
||||
+unselectable
|
||||
justify-content: center
|
||||
padding: 3px 10px
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
strong
|
||||
color: inherit
|
||||
small
|
||||
display: block
|
||||
font-size: $size-small
|
||||
line-height: 1
|
||||
margin-top: 5px
|
||||
.icon,
|
||||
.tag
|
||||
&:first-child
|
||||
margin-left: -2px
|
||||
margin-right: 4px
|
||||
&:last-child
|
||||
margin-left: 4px
|
||||
margin-right: -2px
|
||||
&:hover
|
||||
color: $control-hover
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba(black, 0.2)
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&:focus
|
||||
background: darken($color, 10%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:active
|
||||
border-color: transparent
|
||||
&.is-inverted
|
||||
background: $color-invert
|
||||
color: $color
|
||||
&:hover
|
||||
background: darken($color-invert, 5%)
|
||||
&.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
color: $color-invert
|
||||
&:hover
|
||||
background: rgba(black, 0.05)
|
||||
border-color: $color-invert
|
||||
color: $color-invert
|
||||
&.is-loading
|
||||
&:after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-outlined
|
||||
background: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&:focus
|
||||
border-color: darken($color, 10%)
|
||||
color: darken($color, 10%)
|
||||
&.is-link
|
||||
border-color: transparent
|
||||
color: $text
|
||||
text-decoration: underline
|
||||
&:hover,
|
||||
&:focus
|
||||
background: $border
|
||||
color: $text-strong
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
&.is-medium
|
||||
+button-medium
|
||||
&.is-large
|
||||
+button-large
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
opacity: 0.5
|
||||
&.is-flexible
|
||||
height: auto
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-loading
|
||||
color: transparent
|
||||
pointer-events: none
|
||||
&:after
|
||||
@extend .loader
|
||||
+center(16px)
|
||||
position: absolute !important
|
||||
287
sass/elements/controls.sass
Normal file
287
sass/elements/controls.sass
Normal file
@@ -0,0 +1,287 @@
|
||||
=control
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
align-items: center
|
||||
background: $control-background
|
||||
border: 1px solid $control-border
|
||||
border-radius: $radius
|
||||
color: $control
|
||||
display: inline-flex
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
line-height: 24px
|
||||
padding: 3px 8px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-color: $control-hover-border
|
||||
&:active,
|
||||
&:focus
|
||||
border-color: $control-active-border
|
||||
outline: none
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background: $background
|
||||
border-color: $control-border
|
||||
cursor: not-allowed
|
||||
pointer-events: none
|
||||
+placeholder
|
||||
color: rgba($control, 0.3)
|
||||
|
||||
=form-control
|
||||
+control
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
|
||||
=control-small
|
||||
border-radius: 2px
|
||||
font-size: 11px
|
||||
height: 24px
|
||||
line-height: 16px
|
||||
padding: 3px 6px
|
||||
=control-medium
|
||||
font-size: 18px
|
||||
height: 40px
|
||||
line-height: 32px
|
||||
padding: 3px 10px
|
||||
=control-large
|
||||
font-size: 24px
|
||||
height: 48px
|
||||
line-height: 40px
|
||||
padding: 3px 12px
|
||||
|
||||
.input
|
||||
+form-control
|
||||
box-shadow: inset 0 1px 2px rgba(black, 0.1)
|
||||
display: block
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[type="search"]
|
||||
border-radius: 290486px
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-flat
|
||||
padding: 4px 6px
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-flat
|
||||
padding: 4px 10px
|
||||
&.is-large
|
||||
+control-large
|
||||
&.is-flat
|
||||
padding: 4px 12px
|
||||
// Modifiers
|
||||
&.is-flat
|
||||
border: none
|
||||
box-shadow: none
|
||||
padding: 4px 8px
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-inline
|
||||
display: inline
|
||||
width: auto
|
||||
|
||||
.textarea
|
||||
@extend .input
|
||||
line-height: 1.2
|
||||
max-height: 600px
|
||||
max-width: 100%
|
||||
min-height: 120px
|
||||
min-width: 100%
|
||||
padding: 10px
|
||||
resize: vertical
|
||||
|
||||
%control-with-element
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 16px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
input
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: $control-hover
|
||||
&.is-disabled
|
||||
color: $text-light
|
||||
pointer-events: none
|
||||
input
|
||||
pointer-events: none
|
||||
|
||||
.checkbox
|
||||
@extend %control-with-element
|
||||
|
||||
.radio
|
||||
@extend %control-with-element
|
||||
& + .radio
|
||||
margin-left: 10px
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
height: 32px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
select
|
||||
+form-control
|
||||
cursor: pointer
|
||||
display: block
|
||||
outline: none
|
||||
padding-right: 36px
|
||||
&:hover
|
||||
border-color: $control-hover-border
|
||||
&::ms-expand
|
||||
display: none
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&:after
|
||||
+arrow($link)
|
||||
margin-top: -6px
|
||||
right: 16px
|
||||
top: 50%
|
||||
&:hover
|
||||
&:after
|
||||
border-color: $link-hover
|
||||
|
||||
.label
|
||||
color: $text-strong
|
||||
display: block
|
||||
font-weight: bold
|
||||
&:not(:last-child)
|
||||
margin-bottom: 5px
|
||||
|
||||
.help
|
||||
display: block
|
||||
font-size: $size-small
|
||||
margin-top: 5px
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
|
||||
// Containers
|
||||
|
||||
.control-label
|
||||
+mobile
|
||||
margin-bottom: 5px
|
||||
+tablet
|
||||
flex: 1
|
||||
margin-right: 20px
|
||||
padding-top: 7px
|
||||
text-align: right
|
||||
|
||||
.control
|
||||
position: relative
|
||||
text-align: left
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
.button,
|
||||
.input,
|
||||
.select
|
||||
border-radius: 0
|
||||
margin-right: -1px
|
||||
&:hover
|
||||
z-index: 2
|
||||
&:active,
|
||||
&:focus
|
||||
z-index: 3
|
||||
&:first-child
|
||||
border-radius: $radius 0 0 $radius
|
||||
select
|
||||
border-radius: $radius 0 0 $radius
|
||||
&:last-child
|
||||
border-radius: 0 $radius $radius 0
|
||||
select
|
||||
border-radius: 0 $radius $radius 0
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
justify-content: flex-end
|
||||
&.has-icon
|
||||
& > .fa
|
||||
+fa(14px, 24px)
|
||||
color: $text-light
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 4px
|
||||
z-index: 4
|
||||
.input
|
||||
&:focus + .fa
|
||||
color: $text-strong
|
||||
&.is-small + .fa
|
||||
font-size: 10.5px
|
||||
top: 0
|
||||
&.is-medium + .fa
|
||||
font-size: 21px
|
||||
top: 8px
|
||||
&.is-large + .fa
|
||||
font-size: 21px
|
||||
top: 12px
|
||||
&:not(.has-icon-right)
|
||||
& > .fa
|
||||
left: 4px
|
||||
.input
|
||||
padding-left: 32px
|
||||
&.is-small
|
||||
padding-left: 24px
|
||||
& + .fa
|
||||
left: 0
|
||||
&.is-medium
|
||||
padding-left: 40px
|
||||
& + .fa
|
||||
left: 8px
|
||||
&.is-large
|
||||
padding-left: 48px
|
||||
& + .fa
|
||||
left: 12px
|
||||
&.has-icon-right
|
||||
& > .fa
|
||||
right: 4px
|
||||
.input
|
||||
padding-right: 32px
|
||||
&.is-small
|
||||
padding-right: 24px
|
||||
& + .fa
|
||||
right: 0
|
||||
&.is-medium
|
||||
padding-right: 40px
|
||||
& + .fa
|
||||
right: 8px
|
||||
&.is-large
|
||||
padding-right: 48px
|
||||
& + .fa
|
||||
right: 12px
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
& > .button,
|
||||
& > .input,
|
||||
& > .select
|
||||
&:not(:last-child)
|
||||
margin-right: 10px
|
||||
& > .input
|
||||
flex: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
& > .control
|
||||
display: flex
|
||||
flex: 5
|
||||
&.is-loading
|
||||
&:after
|
||||
@extend .loader
|
||||
position: absolute !important
|
||||
right: 8px
|
||||
top: 8px
|
||||
191
sass/elements/elements.sass
Normal file
191
sass/elements/elements.sass
Normal file
@@ -0,0 +1,191 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "controls"
|
||||
@import "buttons"
|
||||
@import "titles"
|
||||
@import "images"
|
||||
@import "messages"
|
||||
@import "notifications"
|
||||
@import "progress"
|
||||
|
||||
.delete
|
||||
+unselectable
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
background: rgba(black, 0.2)
|
||||
border: none
|
||||
border-radius: 290486px
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
height: 24px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 24px
|
||||
&:before,
|
||||
&:after
|
||||
background: white
|
||||
content: ""
|
||||
display: block
|
||||
height: 2px
|
||||
left: 50%
|
||||
margin-left: -25%
|
||||
margin-top: -1px
|
||||
position: absolute
|
||||
top: 50%
|
||||
width: 50%
|
||||
&:before
|
||||
transform: rotate(45deg)
|
||||
&:after
|
||||
transform: rotate(-45deg)
|
||||
&:hover
|
||||
background: rgba(black, 0.5)
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 16px
|
||||
width: 16px
|
||||
&.is-medium
|
||||
height: 32px
|
||||
width: 32px
|
||||
&.is-large
|
||||
height: 40px
|
||||
width: 40px
|
||||
|
||||
.icon
|
||||
+fa(21px, 24px)
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
// Sizes
|
||||
&.is-small
|
||||
+fa(14px, 16px)
|
||||
&.is-medium
|
||||
+fa(28px, 32px)
|
||||
&.is-large
|
||||
+fa(42px, 48px)
|
||||
|
||||
.hamburger
|
||||
cursor: pointer
|
||||
display: block
|
||||
height: 50px
|
||||
position: relative
|
||||
width: 50px
|
||||
span
|
||||
background: $text
|
||||
display: block
|
||||
height: 1px
|
||||
left: 50%
|
||||
margin-left: -7px
|
||||
position: absolute
|
||||
top: 50%
|
||||
transition: none $speed $easing
|
||||
transition-property: background, left, opacity, transform
|
||||
width: 15px
|
||||
&:nth-child(1)
|
||||
margin-top: -6px
|
||||
&:nth-child(2)
|
||||
margin-top: -1px
|
||||
&:nth-child(3)
|
||||
margin-top: 4px
|
||||
&:hover
|
||||
background: $background
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
background: $link
|
||||
&:nth-child(1)
|
||||
margin-left: -5px
|
||||
transform: rotate(45deg)
|
||||
transform-origin: left top
|
||||
&:nth-child(2)
|
||||
opacity: 0
|
||||
&:nth-child(3)
|
||||
margin-left: -5px
|
||||
transform: rotate(-45deg)
|
||||
transform-origin: left bottom
|
||||
+tablet
|
||||
height: $header-height
|
||||
width: $header-height
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
|
||||
.highlight
|
||||
@extend .block
|
||||
font-size: 12px
|
||||
font-weight: normal
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
pre
|
||||
overflow: auto
|
||||
max-width: 100%
|
||||
|
||||
.loader
|
||||
animation: spin-around 500ms infinite linear
|
||||
border: 2px solid $border
|
||||
border-radius: 290486px
|
||||
border-right-color: transparent
|
||||
border-top-color: transparent
|
||||
content: ""
|
||||
display: block
|
||||
height: 16px
|
||||
position: relative
|
||||
width: 16px
|
||||
|
||||
.number
|
||||
background: $background
|
||||
border-radius: 290486px
|
||||
display: inline-block
|
||||
font-size: $size-medium
|
||||
vertical-align: top
|
||||
|
||||
.tag
|
||||
align-items: center
|
||||
background: $background
|
||||
border-radius: 290486px
|
||||
color: $text
|
||||
display: inline-flex
|
||||
font-size: 12px
|
||||
height: 24px
|
||||
justify-content: center
|
||||
line-height: 16px
|
||||
padding: 4px 10px
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -6px
|
||||
&:not(.is-large)
|
||||
.delete
|
||||
@extend .delete.is-small
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background: $color
|
||||
color: $color-invert
|
||||
&.is-dark
|
||||
background: $text
|
||||
color: $text-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
height: 20px
|
||||
padding: 2px 8px
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
padding: 8px 14px
|
||||
&.is-large
|
||||
font-size: $size-5
|
||||
height: 40px
|
||||
line-height: 24px
|
||||
padding: 8px 18px
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -8px
|
||||
34
sass/elements/images.sass
Normal file
34
sass/elements/images.sass
Normal file
@@ -0,0 +1,34 @@
|
||||
$dimensions: 16 24 32 48 64 96 128
|
||||
|
||||
.image
|
||||
display: block
|
||||
position: relative
|
||||
img
|
||||
display: block
|
||||
// Ratio
|
||||
&.is-square,
|
||||
&.is-1by1,
|
||||
&.is-4by3,
|
||||
&.is-3by2,
|
||||
&.is-16by9,
|
||||
&.is-2by1
|
||||
img
|
||||
+overlay
|
||||
height: 100%
|
||||
width: 100%
|
||||
&.is-square,
|
||||
&.is-1by1
|
||||
padding-top: 100%
|
||||
&.is-4by3
|
||||
padding-top: 75%
|
||||
&.is-3by2
|
||||
padding-top: 66.6666%
|
||||
&.is-16by9
|
||||
padding-top: 56.25%
|
||||
&.is-2by1
|
||||
padding-top: 50%
|
||||
// Sizes
|
||||
@each $dimension in $dimensions
|
||||
&.is-#{$dimension}x#{$dimension}
|
||||
height: $dimension * 1px
|
||||
width: $dimension * 1px
|
||||
39
sass/elements/messages.sass
Normal file
39
sass/elements/messages.sass
Normal file
@@ -0,0 +1,39 @@
|
||||
.message-body
|
||||
border: 1px solid $border
|
||||
border-radius: $radius
|
||||
padding: 12px 15px
|
||||
strong
|
||||
color: inherit
|
||||
|
||||
.message-header
|
||||
background: $text
|
||||
border-radius: $radius $radius 0 0
|
||||
color: $text-invert
|
||||
padding: 7px 10px
|
||||
strong
|
||||
color: inherit
|
||||
& + .message-body
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
|
||||
.message
|
||||
@extend .block
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$lightning: (100% - lightness($color)) - 4%
|
||||
$darkness: max(lightness($color) - 10%, lightness($color))
|
||||
&.is-#{$name}
|
||||
background: lighten($color, $lightning)
|
||||
.message-header
|
||||
background: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
@if (colorLuminance($color) > 0.8)
|
||||
color: desaturate(lighten(darken($color, 100%), 40%), 40%)
|
||||
@else
|
||||
color: desaturate(lighten(darken($color, 100%), 50%), 30%)
|
||||
21
sass/elements/notifications.sass
Normal file
21
sass/elements/notifications.sass
Normal file
@@ -0,0 +1,21 @@
|
||||
.notification
|
||||
@extend .block
|
||||
+clearfix
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
padding: 16px 20px
|
||||
position: relative
|
||||
.delete
|
||||
border-radius: 0 $radius
|
||||
float: right
|
||||
margin: -16px -20px 0 20px
|
||||
.subtitle,
|
||||
.title
|
||||
color: inherit
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background: $color
|
||||
color: $color-invert
|
||||
32
sass/elements/progress.sass
Normal file
32
sass/elements/progress.sass
Normal file
@@ -0,0 +1,32 @@
|
||||
.progress
|
||||
@extend .block
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
border: none
|
||||
border-radius: 290486px
|
||||
display: block
|
||||
height: 12px
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
width: 100%
|
||||
&::-webkit-progress-bar
|
||||
background: $border
|
||||
&::-webkit-progress-value
|
||||
background: $text
|
||||
&::-moz-progress-bar
|
||||
background: $text
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&::-webkit-progress-value
|
||||
background: $color
|
||||
&::-moz-progress-bar
|
||||
background: $color
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 8px
|
||||
&.is-medium
|
||||
height: 16px
|
||||
&.is-large
|
||||
height: 20px
|
||||
72
sass/elements/titles.sass
Normal file
72
sass/elements/titles.sass
Normal file
@@ -0,0 +1,72 @@
|
||||
.title,
|
||||
.subtitle
|
||||
@extend .block
|
||||
font-weight: $weight-title-normal
|
||||
word-break: break-all
|
||||
em,
|
||||
span
|
||||
font-weight: $weight-title-normal
|
||||
a
|
||||
&:hover
|
||||
border-bottom: 1px solid
|
||||
strong
|
||||
font-weight: $weight-title-bold
|
||||
.tag
|
||||
vertical-align: bottom
|
||||
|
||||
.title
|
||||
color: $text-strong
|
||||
font-size: $size-large
|
||||
line-height: 1
|
||||
code
|
||||
display: inline-block
|
||||
font-size: $size-large
|
||||
strong
|
||||
color: inherit
|
||||
& + .highlight
|
||||
margin-top: -10px
|
||||
& + .subtitle
|
||||
margin-top: -10px
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
// Responsiveness
|
||||
+tablet
|
||||
& + .subtitle
|
||||
margin-top: -15px
|
||||
|
||||
.subtitle
|
||||
color: $text
|
||||
font-size: $size-medium
|
||||
line-height: 1.125
|
||||
code
|
||||
border-radius: $radius
|
||||
display: inline-block
|
||||
font-size: $size-normal
|
||||
padding: 2px 3px
|
||||
vertical-align: top
|
||||
strong
|
||||
color: $text-strong
|
||||
& + .title
|
||||
margin-top: -20px
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
11
sass/layout/footer.sass
Normal file
11
sass/layout/footer.sass
Normal file
@@ -0,0 +1,11 @@
|
||||
.footer
|
||||
background: $background
|
||||
padding: 40px 20px 80px
|
||||
a
|
||||
color: $text
|
||||
&:hover
|
||||
color: $text-strong
|
||||
&:not(.icon)
|
||||
border-bottom: 1px solid $border
|
||||
&:hover
|
||||
border-bottom-color: $link
|
||||
161
sass/layout/header.sass
Normal file
161
sass/layout/header.sass
Normal file
@@ -0,0 +1,161 @@
|
||||
.header
|
||||
+clearfix
|
||||
background: white
|
||||
display: flex
|
||||
line-height: 24px
|
||||
position: relative
|
||||
text-align: center
|
||||
z-index: 2
|
||||
.container
|
||||
align-items: stretch
|
||||
display: flex
|
||||
width: 100%
|
||||
// Modifiers
|
||||
&.has-shadow
|
||||
box-shadow: 0 1px 2px rgba(black, 0.1)
|
||||
// Responsiveness
|
||||
+mobile
|
||||
.container
|
||||
flex-direction: column
|
||||
+tablet
|
||||
height: $header-height
|
||||
|
||||
.header-toggle
|
||||
@extend .hamburger
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: none
|
||||
|
||||
// Elements
|
||||
|
||||
.header-item
|
||||
align-items: center
|
||||
display: flex
|
||||
padding: 10px
|
||||
a
|
||||
flex-grow: 1
|
||||
img
|
||||
max-height: 24px
|
||||
.button + .button
|
||||
margin-left: 10px
|
||||
.fa
|
||||
font-size: 21px
|
||||
line-height: 24px
|
||||
.tag
|
||||
&:first-child
|
||||
margin-right: 5px
|
||||
&:last-child
|
||||
margin-left: 5px
|
||||
// Responsiveness
|
||||
+mobile
|
||||
text-align: left
|
||||
|
||||
.header-item a,
|
||||
a.header-item
|
||||
color: $text
|
||||
&:hover
|
||||
color: $link-hover
|
||||
// Modifiers
|
||||
&.is-active
|
||||
color: $link-active
|
||||
|
||||
.header-icon
|
||||
+fa(14px, 24px)
|
||||
color: $text
|
||||
margin: 0 5px
|
||||
&:hover
|
||||
color: $link-hover
|
||||
|
||||
.header-tab
|
||||
align-items: center
|
||||
border-bottom: 1px solid transparent
|
||||
color: $text
|
||||
display: block
|
||||
height: $header-height
|
||||
line-height: 24px
|
||||
padding: 13px 15px
|
||||
&:hover
|
||||
border-bottom: 1px solid $link
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom: 3px solid $link
|
||||
color: $link
|
||||
|
||||
// Containers
|
||||
|
||||
.header-left
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex: 1
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
// Responsiveness
|
||||
+mobile
|
||||
height: $header-height
|
||||
+desktop
|
||||
margin-left: -10px
|
||||
|
||||
.header-right
|
||||
align-items: stretch
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: flex
|
||||
+desktop
|
||||
margin-right: -10px
|
||||
|
||||
.header-full
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
width: 100%
|
||||
& > .header-item
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex: 1
|
||||
justify-content: center
|
||||
padding: 0
|
||||
& > a
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: 100%
|
||||
|
||||
.header-menu
|
||||
// Responsiveness
|
||||
+mobile
|
||||
box-shadow: 0 4px 7px rgba(black, 0.1)
|
||||
display: none
|
||||
.header-item
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
padding: 10px
|
||||
// Modifiers
|
||||
&.is-active
|
||||
display: block
|
||||
|
||||
// States
|
||||
|
||||
.header.is-centered
|
||||
justify-content: center
|
||||
.header-left,
|
||||
.header-right
|
||||
justify-content: center
|
||||
|
||||
.header.is-small
|
||||
background: $background
|
||||
box-shadow: none
|
||||
height: 40px
|
||||
z-index: 1
|
||||
.container
|
||||
height: 40px
|
||||
.header-tab
|
||||
font-size: 13px
|
||||
height: 40px
|
||||
padding: 8px 10px
|
||||
&:hover,
|
||||
&.is-active
|
||||
border-bottom-width: 2px
|
||||
155
sass/layout/hero.sass
Normal file
155
sass/layout/hero.sass
Normal file
@@ -0,0 +1,155 @@
|
||||
.hero-video
|
||||
+overlay
|
||||
overflow: hidden
|
||||
video
|
||||
left: 50%
|
||||
min-height: 100%
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translate3d(-50%, -50%, 0)
|
||||
// Modifiers
|
||||
&.is-transparent
|
||||
opacity: 0.3
|
||||
// Responsiveness
|
||||
+mobile
|
||||
display: none
|
||||
|
||||
.hero-content
|
||||
padding: 40px 20px
|
||||
// Responsiveness
|
||||
+desktop
|
||||
padding: 40px 0
|
||||
|
||||
.hero-buttons
|
||||
margin-top: 20px
|
||||
// Responsiveness
|
||||
+mobile
|
||||
.button
|
||||
display: block
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
+tablet
|
||||
display: flex
|
||||
justify-content: center
|
||||
.button:not(:last-child)
|
||||
margin-right: 20px
|
||||
|
||||
.hero
|
||||
background: white
|
||||
.header
|
||||
background: none
|
||||
.container
|
||||
box-shadow: 0 1px 0 rgba($border, 0.3)
|
||||
.tabs
|
||||
a
|
||||
border: none
|
||||
ul
|
||||
border-bottom: none
|
||||
// Modifiers
|
||||
&.is-boxed
|
||||
a
|
||||
padding: 8px 15px
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background: $color
|
||||
color: $color-invert
|
||||
.title
|
||||
color: $color-invert
|
||||
a,
|
||||
strong
|
||||
color: inherit
|
||||
.subtitle
|
||||
color: rgba($color-invert, 0.7)
|
||||
a,
|
||||
strong
|
||||
color: $color-invert
|
||||
.header .container
|
||||
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
|
||||
.header-icon,
|
||||
a.header-item,
|
||||
.header-item > a:not(.button)
|
||||
color: rgba($color-invert, 0.5)
|
||||
&:hover,
|
||||
&.is-active
|
||||
color: $color-invert
|
||||
.tabs
|
||||
a
|
||||
color: $color-invert
|
||||
opacity: 0.5
|
||||
&:hover
|
||||
opacity: 1
|
||||
li.is-active a
|
||||
opacity: 1
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
color: $color-invert
|
||||
&:hover
|
||||
background: rgba(black, 0.1)
|
||||
li.is-active a
|
||||
&,
|
||||
&:hover
|
||||
background: $color-invert
|
||||
color: $color
|
||||
// Modifiers
|
||||
&.is-bold
|
||||
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||
// Responsiveness
|
||||
+mobile
|
||||
.header-toggle
|
||||
span
|
||||
background: $color-invert
|
||||
&:hover
|
||||
background: rgba(black, 0.1)
|
||||
&.is-active
|
||||
span
|
||||
background: $color-invert
|
||||
.header-menu
|
||||
.header-item
|
||||
border-top-color: rgba($color-invert, 0.2)
|
||||
// Sizes
|
||||
&.is-fullheight,
|
||||
&.is-large
|
||||
// Responsiveness
|
||||
+tablet
|
||||
.tabs
|
||||
font-size: $size-medium
|
||||
&.is-medium
|
||||
// Responsiveness
|
||||
+tablet
|
||||
.hero-content
|
||||
padding: 120px 20px
|
||||
+desktop
|
||||
.hero-content
|
||||
padding: 120px 0
|
||||
&.is-fullheight
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
min-height: 100vh
|
||||
.tabs
|
||||
a
|
||||
padding: 15px 20px
|
||||
.hero-content
|
||||
display: flex
|
||||
flex: 1
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
&.is-large
|
||||
.tabs
|
||||
a
|
||||
padding: 10px 15px
|
||||
// Responsiveness
|
||||
+tablet
|
||||
.hero-content
|
||||
padding: 240px 20px
|
||||
+desktop
|
||||
.hero-content
|
||||
padding: 240px 0
|
||||
6
sass/layout/layout.sass
Normal file
6
sass/layout/layout.sass
Normal file
@@ -0,0 +1,6 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "header"
|
||||
@import "hero"
|
||||
@import "section"
|
||||
@import "footer"
|
||||
13
sass/layout/section.sass
Normal file
13
sass/layout/section.sass
Normal file
@@ -0,0 +1,13 @@
|
||||
.section
|
||||
background: white
|
||||
padding: 40px 20px
|
||||
& + .section
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
// Responsiveness
|
||||
+desktop
|
||||
padding: 40px 0
|
||||
// Sizes
|
||||
&.is-medium
|
||||
padding: 120px 0
|
||||
&.is-large
|
||||
padding: 240px 0
|
||||
5
sass/utilities/animations.sass
Normal file
5
sass/utilities/animations.sass
Normal file
@@ -0,0 +1,5 @@
|
||||
@keyframes spin-around
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(359deg)
|
||||
34
sass/utilities/functions.sass
Normal file
34
sass/utilities/functions.sass
Normal file
@@ -0,0 +1,34 @@
|
||||
@function powerNumber($number, $exp)
|
||||
$value: 1
|
||||
@if $exp > 0
|
||||
@for $i from 1 through $exp
|
||||
$value: $value * $number
|
||||
@else if $exp < 0
|
||||
@for $i from 1 through -$exp
|
||||
$value: $value / $number
|
||||
@return $value
|
||||
|
||||
@function colorLuminance($color)
|
||||
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
|
||||
@each $name, $value in $color-rgb
|
||||
$adjusted: 0
|
||||
$value: $value / 255
|
||||
@if $value < 0.03928
|
||||
$value: $value / 12.92
|
||||
@else
|
||||
$value: ($value + .055) / 1.055
|
||||
$value: powerNumber($value, 2)
|
||||
$color-rgb: map-merge($color-rgb, ($name: $value))
|
||||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||
|
||||
@function closestEvenNumber($number)
|
||||
@if ($number % 2 == 0px)
|
||||
@return $number
|
||||
@else
|
||||
@return ($number + 1px)
|
||||
|
||||
@function findColorInvert($color)
|
||||
@if (colorLuminance($color) > 0.8)
|
||||
@return rgba(black, 0.5)
|
||||
@else
|
||||
@return white
|
||||
91
sass/utilities/mixins.sass
Normal file
91
sass/utilities/mixins.sass
Normal file
@@ -0,0 +1,91 @@
|
||||
=arrow($color)
|
||||
border: 1px solid $color
|
||||
border-right: 0
|
||||
border-top: 0
|
||||
content: " "
|
||||
display: block
|
||||
height: 7px
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
transform: rotate(-45deg)
|
||||
width: 7px
|
||||
|
||||
=clearfix
|
||||
&:after
|
||||
clear: both
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
=center($size)
|
||||
left: 50%
|
||||
margin-left: -($size / 2)
|
||||
margin-top: -($size / 2)
|
||||
position: absolute
|
||||
top: 50%
|
||||
|
||||
=fa($size, $dimensions)
|
||||
display: inline-block
|
||||
font-size: $size
|
||||
height: $dimensions
|
||||
line-height: $dimensions
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
width: $dimensions
|
||||
|
||||
=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
|
||||
|
||||
=replace($background, $width, $height)
|
||||
background: $background center center no-repeat
|
||||
background-size: $width $height
|
||||
display: block
|
||||
height: $height
|
||||
outline: none
|
||||
overflow: hidden
|
||||
text-indent: -290486px
|
||||
width: $width
|
||||
|
||||
=unselectable
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
=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)
|
||||
@content
|
||||
|
||||
=touch
|
||||
@media screen and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=desktop
|
||||
@media screen and (min-width: $desktop)
|
||||
@content
|
||||
|
||||
=widescreen
|
||||
@media screen and (min-width: $widescreen)
|
||||
@content
|
||||
174
sass/utilities/reset.sass
Normal file
174
sass/utilities/reset.sass
Normal file
@@ -0,0 +1,174 @@
|
||||
//
|
||||
// HTML5 Reset :: style.css
|
||||
// ----------------------------------------------------------
|
||||
// We have learned much from/been inspired by/taken code where offered from:
|
||||
//
|
||||
// Eric Meyer :: http://meyerweb.com
|
||||
// HTML5 Doctor :: http://html5doctor.com
|
||||
// and the HTML5 Boilerplate :: http://html5boilerplate.com
|
||||
//
|
||||
//-------------------------------------------------------------------------------
|
||||
|
||||
// Let's default this puppy out
|
||||
|
||||
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 0
|
||||
font-size: 100%
|
||||
font-weight: normal
|
||||
vertical-align: baseline
|
||||
background: transparent
|
||||
|
||||
article, aside, figure, footer, header, nav, section, details, summary
|
||||
display: block
|
||||
|
||||
// Handle box-sizing while better addressing child elements:
|
||||
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||
html
|
||||
box-sizing: border-box
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after
|
||||
box-sizing: inherit
|
||||
|
||||
// consider resetting the default cursor: https://gist.github.com/murtaugh/5247154
|
||||
|
||||
// Responsive images and other embedded objects
|
||||
img,
|
||||
object,
|
||||
embed
|
||||
max-width: 100%
|
||||
|
||||
//
|
||||
// Note: keeping IMG here will cause problems if you're using foreground images as sprites.
|
||||
// In fact, it *will* cause problems with Google Maps' controls at small size.
|
||||
// If this is the case for you, try uncommenting the following:
|
||||
//
|
||||
//#map img {
|
||||
// max-width: none;
|
||||
//}
|
||||
|
||||
// force a vertical scrollbar to prevent a jumpy page
|
||||
html
|
||||
overflow-y: scroll
|
||||
|
||||
// we use a lot of ULs that aren't bulleted.
|
||||
// don't forget to restore the bullets within content.
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
blockquote, q
|
||||
quotes: none
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after
|
||||
content: ''
|
||||
content: none
|
||||
|
||||
a
|
||||
margin: 0
|
||||
padding: 0
|
||||
font-size: 100%
|
||||
vertical-align: baseline
|
||||
background: transparent
|
||||
|
||||
del
|
||||
text-decoration: line-through
|
||||
|
||||
abbr[title], dfn[title]
|
||||
border-bottom: 1px dotted #000
|
||||
cursor: help
|
||||
|
||||
// tables still need cellspacing="0" in the markup
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
|
||||
th
|
||||
font-weight: bold
|
||||
vertical-align: bottom
|
||||
|
||||
td
|
||||
font-weight: normal
|
||||
vertical-align: top
|
||||
|
||||
hr
|
||||
display: block
|
||||
height: 1px
|
||||
border: 0
|
||||
border-top: 1px solid #ccc
|
||||
margin: 1em 0
|
||||
padding: 0
|
||||
|
||||
input, select
|
||||
vertical-align: middle
|
||||
|
||||
pre
|
||||
white-space: pre
|
||||
// CSS2
|
||||
white-space: pre-wrap
|
||||
// CSS 2.1
|
||||
white-space: pre-line
|
||||
// CSS 3 (and 2.1 as well, actually)
|
||||
word-wrap: break-word
|
||||
// IE
|
||||
|
||||
input[type="radio"]
|
||||
vertical-align: text-bottom
|
||||
|
||||
input[type="checkbox"]
|
||||
vertical-align: bottom
|
||||
|
||||
select, input, textarea
|
||||
font: 99% sans-serif
|
||||
|
||||
table
|
||||
font-size: inherit
|
||||
font: 100%
|
||||
|
||||
small
|
||||
font-size: 85%
|
||||
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
td, td img
|
||||
vertical-align: top
|
||||
|
||||
// Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930
|
||||
sub, sup
|
||||
font-size: 75%
|
||||
line-height: 0
|
||||
position: relative
|
||||
|
||||
sup
|
||||
top: -0.5em
|
||||
|
||||
sub
|
||||
bottom: -0.25em
|
||||
|
||||
// standardize any monospaced elements
|
||||
pre, code, kbd, samp
|
||||
font-family: monospace, sans-serif
|
||||
|
||||
// hand cursor on clickable elements
|
||||
label,
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=file],
|
||||
button
|
||||
cursor: pointer
|
||||
|
||||
// Webkit browsers add a 2px margin outside the chrome of form elements
|
||||
button, input, select, textarea
|
||||
margin: 0
|
||||
|
||||
// make buttons play nice in IE
|
||||
button,
|
||||
input[type=button]
|
||||
width: auto
|
||||
overflow: visible
|
||||
6
sass/utilities/utilities.sass
Normal file
6
sass/utilities/utilities.sass
Normal file
@@ -0,0 +1,6 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "reset"
|
||||
@import "functions"
|
||||
@import "mixins"
|
||||
@import "animations"
|
||||
Reference in New Issue
Block a user