mirror of https://github.com/explosion/spaCy.git
153 lines
2.7 KiB
Sass
153 lines
2.7 KiB
Sass
//- 💫 CSS > BASE > UTILITIES
|
|
|
|
//- Text
|
|
|
|
.u-text
|
|
font: 1.5rem/#{1.55} $font-primary
|
|
|
|
.u-text-small
|
|
font: 1.4rem/#{1.375} $font-primary
|
|
|
|
.u-text-tiny
|
|
font: 1.1rem/#{1.375} $font-primary
|
|
|
|
|
|
//- Labels & Tags
|
|
|
|
.u-text-label
|
|
font: normal 600 1.4rem/#{1.5} $font-code
|
|
text-transform: uppercase
|
|
|
|
&.u-text-label--dark
|
|
display: inline-block
|
|
background: $color-dark
|
|
box-shadow: inset 1px 1px 1px rgba($color-front, 0.25)
|
|
color: $color-back
|
|
padding: 0 0.75rem
|
|
margin: 1.5rem 0 0 2rem
|
|
border-radius: 2px
|
|
|
|
.u-text-tag
|
|
display: inline-block
|
|
font: 600 1.1rem/#{1} $font-code
|
|
background: $color-theme
|
|
color: $color-back
|
|
padding: 0.15em 0.25em
|
|
border-radius: 2px
|
|
text-transform: uppercase
|
|
vertical-align: middle
|
|
|
|
&.u-text-tag--spaced
|
|
margin-left: 0.75em
|
|
margin-right: 0.5em
|
|
|
|
|
|
//- Headings
|
|
|
|
.u-heading
|
|
margin-bottom: 2rem
|
|
|
|
@include breakpoint(max, md)
|
|
word-wrap: break-word
|
|
|
|
&:not(:first-child)
|
|
padding-top: 3.5rem
|
|
|
|
.u-heading-0
|
|
font: normal bold 7rem/#{1} $font-primary
|
|
|
|
@each $level, $size in $headings
|
|
.u-heading-#{$level}
|
|
font: normal bold #{$size}rem/#{1.25} $font-primary
|
|
|
|
|
|
//- Links
|
|
|
|
.u-link
|
|
color: $color-theme
|
|
border-bottom: 1px solid
|
|
|
|
.u-permalink
|
|
position: relative
|
|
|
|
&:target
|
|
display: inline-block
|
|
padding-top: $nav-height * 1.25
|
|
|
|
& + *
|
|
margin-top: $nav-height * 1.25
|
|
|
|
.u-permalink__icon
|
|
@include position(absolute, bottom, left, 0.35em, -2.75rem)
|
|
@include size(1.5rem)
|
|
color: $color-subtle
|
|
|
|
.u-permalink:hover &
|
|
color: $color-subtle-dark
|
|
|
|
.u-permalink:active &
|
|
color: $color-theme
|
|
|
|
|
|
//- Layout
|
|
|
|
.u-text-center
|
|
text-align: center
|
|
|
|
.u-text-right
|
|
text-align: right
|
|
|
|
.u-padding
|
|
padding: 5rem
|
|
|
|
.u-padding-small
|
|
padding: 0.5em 0.75em
|
|
|
|
.u-padding-medium
|
|
padding: 2.5rem
|
|
|
|
.u-inline-block
|
|
display: inline-block
|
|
|
|
.u-nowrap
|
|
white-space: nowrap
|
|
|
|
.u-no-border
|
|
border: none
|
|
|
|
.u-border
|
|
border: 1px solid $color-subtle
|
|
border-radius: 2px
|
|
|
|
.u-border-bottom
|
|
border: 1px solid $color-subtle
|
|
|
|
.u-border-dotted
|
|
border-top: 1px dotted $color-subtle
|
|
|
|
@each $name, $color in (theme: $color-theme, subtle: $color-subtle-dark, light: $color-back, red: $color-red, green: $color-green, yellow: $color-yellow)
|
|
.u-color-#{$name}
|
|
color: $color
|
|
|
|
.u-grayscale
|
|
filter: grayscale(100%)
|
|
transition: filter 0.15s ease
|
|
user-select: none
|
|
|
|
&:hover
|
|
filter: none
|
|
|
|
.u-pattern
|
|
background: $pattern
|
|
|
|
|
|
//- Hidden elements
|
|
|
|
.u-hidden
|
|
display: none
|
|
|
|
@each $breakpoint in (xs, sm, md)
|
|
.u-hidden-#{$breakpoint}.u-hidden-#{$breakpoint}
|
|
@include breakpoint(max, $breakpoint)
|
|
display: none
|