mirror of
https://github.com/explosion/spaCy.git
synced 2024-09-23 12:29:18 +03:00
255 lines
4.4 KiB
Sass
255 lines
4.4 KiB
Sass
//- 💫 CSS > BASE > UTILITIES
|
|
|
|
//- Text
|
|
|
|
.u-text,
|
|
.u-text-small,
|
|
.u-text-tiny
|
|
font-family: $font-primary
|
|
|
|
.u-text
|
|
font-size: 1.35rem
|
|
line-height: 1.5
|
|
|
|
.u-text-small
|
|
font-size: 1.3rem
|
|
line-height: 1.375
|
|
|
|
.u-text-tiny
|
|
font-size: 1.1rem
|
|
line-height: 1.375
|
|
|
|
//- Labels & Tags
|
|
|
|
.u-text-label
|
|
font: normal 600 1.4rem/#{1.5} $font-secondary
|
|
text-transform: uppercase
|
|
|
|
&.u-text-label--light,
|
|
&.u-text-label--dark
|
|
display: inline-block
|
|
border-radius: 1em
|
|
padding: 0 1rem 0.15rem
|
|
|
|
&.u-text-label--dark
|
|
background: $color-dark
|
|
box-shadow: inset 1px 1px 1px rgba($color-front, 0.25)
|
|
color: $color-back
|
|
margin: 1.5rem 0 0 2rem
|
|
|
|
&.u-text-label--light
|
|
background: $color-back
|
|
color: $color-theme
|
|
margin-bottom: 1rem
|
|
|
|
.u-text-tag
|
|
display: inline-block
|
|
font: 600 1.1rem/#{1} $font-secondary
|
|
background: $color-theme
|
|
color: $color-back
|
|
padding: 0.15em 0.5em 0.35em
|
|
border-radius: 1em
|
|
text-transform: uppercase
|
|
vertical-align: middle
|
|
|
|
&.u-text-tag--spaced
|
|
margin-left: 0.75em
|
|
margin-right: 0.5em
|
|
|
|
|
|
//- Headings
|
|
|
|
.u-heading
|
|
margin-bottom: 1em
|
|
|
|
@include breakpoint(max, md)
|
|
word-wrap: break-word
|
|
|
|
&:not(:first-child)
|
|
padding-top: 3.5rem
|
|
|
|
&.u-heading--title:after
|
|
content: ""
|
|
display: block
|
|
width: 10%
|
|
min-width: 6rem
|
|
height: 6px
|
|
background: $color-theme
|
|
margin-top: 3rem
|
|
|
|
.u-heading-0
|
|
font: normal 600 7rem/#{1} $font-secondary
|
|
|
|
@include breakpoint(max, sm)
|
|
font-size: 6rem
|
|
|
|
|
|
@each $level, $size in $headings
|
|
.u-heading-#{$level}
|
|
font: normal 500 #{$size}rem/#{1.1} $font-secondary
|
|
|
|
.u-heading__teaser
|
|
margin-top: 2rem
|
|
font-weight: normal
|
|
|
|
|
|
//- Links
|
|
|
|
.u-link
|
|
color: $color-theme
|
|
border-bottom: 1px solid
|
|
transition: color 0.2s ease
|
|
|
|
&:hover
|
|
color: $color-theme-dark
|
|
|
|
.u-hide-link.u-hide-link
|
|
border: none
|
|
color: inherit
|
|
|
|
&:hover
|
|
color: inherit
|
|
|
|
.u-permalink
|
|
position: relative
|
|
|
|
&:before
|
|
content: "\00b6"
|
|
font-size: 0.9em
|
|
font-weight: normal
|
|
color: $color-subtle
|
|
@include position(absolute, top, left, 0.15em, -2.85rem)
|
|
opacity: 0
|
|
transition: opacity 0.2s ease
|
|
|
|
&:hover:before
|
|
opacity: 1
|
|
|
|
&:active:before
|
|
color: $color-theme
|
|
|
|
&:target
|
|
display: inline-block
|
|
|
|
&:before
|
|
bottom: 0.15em
|
|
top: initial
|
|
|
|
|
|
[id]:target
|
|
padding-top: $nav-height * 1.25
|
|
|
|
|
|
|
|
//- Layout
|
|
|
|
.u-width-full
|
|
width: 100%
|
|
|
|
.u-float-left
|
|
float: left
|
|
margin-right: 1rem
|
|
|
|
.u-float-right
|
|
float: right
|
|
margin-left: 1rem
|
|
|
|
.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: 1.8rem
|
|
|
|
.u-padding-top
|
|
padding-top: 2rem
|
|
|
|
.u-inline-block
|
|
display: inline-block
|
|
|
|
.u-flex-full
|
|
flex: 1
|
|
|
|
.u-nowrap
|
|
white-space: nowrap
|
|
|
|
.u-wrap
|
|
white-space: pre-wrap
|
|
|
|
.u-break.u-break
|
|
word-wrap: break-word
|
|
white-space: initial
|
|
|
|
&.u-break--all
|
|
word-break: break-all
|
|
|
|
.u-no-border
|
|
border: none
|
|
|
|
.u-border
|
|
border: 1px solid $color-subtle
|
|
border-radius: 2px
|
|
|
|
.u-border-dotted
|
|
border-bottom: 1px dotted $color-subtle
|
|
|
|
@each $name, $color in (theme: $color-theme, dark: $color-dark, 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
|
|
|
|
|
|
//- Loaders
|
|
|
|
.u-loading,
|
|
[data-loading]
|
|
$spinner-size: 75px
|
|
$spinner-bar: 8px
|
|
|
|
position: relative
|
|
|
|
& > *
|
|
opacity: 0.35
|
|
|
|
&:before
|
|
@include position(absolute, top, left, 0, 0)
|
|
@include size($spinner-size)
|
|
right: 0
|
|
bottom: 0
|
|
margin: auto
|
|
content: ""
|
|
border: $spinner-bar solid $color-subtle
|
|
border-right: $spinner-bar solid $color-theme
|
|
border-radius: 50%
|
|
animation: rotate 1s linear infinite
|
|
z-index: 10
|
|
|
|
|
|
//- Hidden elements
|
|
|
|
.u-hidden
|
|
display: none
|
|
|
|
@each $breakpoint in (xs, sm, md)
|
|
.u-hidden-#{$breakpoint}.u-hidden-#{$breakpoint}
|
|
@include breakpoint(max, $breakpoint)
|
|
display: none
|