Added Fetch Image from URL feature + Storm filelocks fixes + bulma inclusion into core
This commit is contained in:
NGPixel
@@ -0,0 +1,14 @@
|
||||
.box
|
||||
@extend .block
|
||||
background-color: $white
|
||||
border-radius: $radius-large
|
||||
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
|
||||
@@ -0,0 +1,110 @@
|
||||
=button-small
|
||||
border-radius: $radius-small
|
||||
font-size: 11px
|
||||
height: 24px
|
||||
line-height: 16px
|
||||
padding-left: 6px
|
||||
padding-right: 6px
|
||||
=button-medium
|
||||
font-size: 18px
|
||||
height: 40px
|
||||
padding-left: 14px
|
||||
padding-right: 14px
|
||||
=button-large
|
||||
font-size: 22px
|
||||
height: 48px
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
|
||||
.button
|
||||
+control
|
||||
@extend .unselectable
|
||||
justify-content: center
|
||||
padding-left: 10px
|
||||
padding-right: 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,
|
||||
&:focus,
|
||||
&.is-active
|
||||
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: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.is-active
|
||||
background-color: darken($color, 10%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:active
|
||||
border-color: transparent
|
||||
&.is-inverted
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&:hover
|
||||
background-color: darken($color-invert, 5%)
|
||||
&.is-loading
|
||||
&:after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-link
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $text
|
||||
text-decoration: underline
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $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-fullwidth
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-loading
|
||||
color: transparent !important
|
||||
pointer-events: none
|
||||
&:after
|
||||
@extend .loader
|
||||
+center(16px)
|
||||
position: absolute !important
|
||||
@@ -0,0 +1,73 @@
|
||||
.content
|
||||
@extend .block
|
||||
// Inline
|
||||
a:not(.button)
|
||||
border-bottom: 1px solid $border
|
||||
&:visited
|
||||
color: $link-visited
|
||||
&:hover
|
||||
border-bottom-color: $link
|
||||
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-color: $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
|
||||
@@ -0,0 +1,13 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "box"
|
||||
@import "button"
|
||||
@import "content"
|
||||
@import "form"
|
||||
@import "image"
|
||||
@import "notification"
|
||||
@import "progress"
|
||||
@import "table"
|
||||
@import "title"
|
||||
|
||||
@import "other"
|
||||
@@ -0,0 +1,252 @@
|
||||
=form-control
|
||||
+control
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
|
||||
.input
|
||||
+form-control
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.1)
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[type="search"]
|
||||
border-radius: 290486px
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-inline
|
||||
display: inline
|
||||
width: auto
|
||||
|
||||
.textarea
|
||||
@extend .input
|
||||
display: block
|
||||
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
|
||||
&.is-small
|
||||
height: 24px
|
||||
select
|
||||
+control-small
|
||||
padding-right: 28px
|
||||
&.is-medium
|
||||
height: 40px
|
||||
select
|
||||
+control-medium
|
||||
padding-right: 44px
|
||||
&.is-large
|
||||
height: 48px
|
||||
select
|
||||
+control-large
|
||||
padding-right: 52px
|
||||
|
||||
.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-grow: 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
|
||||
width: auto
|
||||
&: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
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
justify-content: flex-end
|
||||
&.has-addons-fullwidth
|
||||
.button,
|
||||
.input,
|
||||
.select
|
||||
flex-grow: 1
|
||||
&.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
|
||||
& > .control
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
margin-right: 10px
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
& > .control
|
||||
display: flex
|
||||
flex-grow: 5
|
||||
&.is-loading
|
||||
&:after
|
||||
@extend .loader
|
||||
position: absolute !important
|
||||
right: 8px
|
||||
top: 8px
|
||||
@@ -0,0 +1,36 @@
|
||||
$dimensions: 16 24 32 48 64 96 128
|
||||
|
||||
.image
|
||||
display: block
|
||||
position: relative
|
||||
img
|
||||
display: block
|
||||
height: auto
|
||||
width: 100%
|
||||
// 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
|
||||
@@ -0,0 +1,21 @@
|
||||
.notification
|
||||
@extend .block
|
||||
+clearfix
|
||||
background-color: $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: $color-invert
|
||||
@@ -0,0 +1,187 @@
|
||||
.delete
|
||||
@extend .unselectable
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
background-color: 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-color: $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-color: 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: $nav-height
|
||||
position: relative
|
||||
width: $nav-height
|
||||
span
|
||||
background-color: $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-color: $background
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
background-color: $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
|
||||
|
||||
.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-color: $background
|
||||
border-radius: 290486px
|
||||
display: inline-block
|
||||
font-size: $size-medium
|
||||
vertical-align: top
|
||||
|
||||
.tag
|
||||
align-items: center
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
color: $text
|
||||
display: inline-flex
|
||||
font-size: 12px
|
||||
height: 24px
|
||||
justify-content: center
|
||||
line-height: 16px
|
||||
padding-left: 10px
|
||||
padding-right: 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: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
height: 20px
|
||||
padding-left: 8px
|
||||
padding-right: 8px
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
padding-left: 14px
|
||||
padding-right: 14px
|
||||
&.is-large
|
||||
font-size: $size-5
|
||||
height: 40px
|
||||
line-height: 24px
|
||||
padding-left: 18px
|
||||
padding-right: 18px
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -8px
|
||||
|
||||
.unselectable
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
@@ -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-color: $border
|
||||
&::-webkit-progress-value
|
||||
background-color: $text
|
||||
&::-moz-progress-bar
|
||||
background-color: $text
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&::-webkit-progress-value
|
||||
background-color: $color
|
||||
&::-moz-progress-bar
|
||||
background-color: $color
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 8px
|
||||
&.is-medium
|
||||
height: 16px
|
||||
&.is-large
|
||||
height: 20px
|
||||
@@ -0,0 +1,91 @@
|
||||
.table
|
||||
background-color: $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
|
||||
&.is-icon
|
||||
padding: 5px
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
.fa
|
||||
+fa(21px, 24px)
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
display: block
|
||||
padding: 8px 10px
|
||||
&:hover
|
||||
background-color: $link
|
||||
color: $link-invert
|
||||
&.is-narrow
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
th
|
||||
color: $text-strong
|
||||
text-align: left
|
||||
tr
|
||||
&:hover
|
||||
background-color: $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
|
||||
&.is-icon
|
||||
padding: 2px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 2px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px 10px
|
||||
&.is-striped
|
||||
tbody
|
||||
tr
|
||||
&:hover
|
||||
background-color: darken($background, 2%)
|
||||
&:nth-child(2n)
|
||||
background-color: $background
|
||||
&:hover
|
||||
background-color: darken($background, 2%)
|
||||
@@ -0,0 +1,72 @@
|
||||
.title,
|
||||
.subtitle
|
||||
@extend .block
|
||||
font-weight: $weight-title-normal
|
||||
word-break: break-word
|
||||
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
|
||||
Reference in New Issue
Block a user