spaCy/website/assets/css/_base/_utilities.sass
Ines Montani 49cee4af92
💫 Interactive code examples, spaCy Universe and various docs improvements (#2274)
* Integrate Python kernel via Binder

* Add live model test for languages with examples

* Update docs and code examples

* Adjust margin (if not bootstrapped)

* Add binder version to global config

* Update terminal and executable code mixins

* Pass attributes through infobox and section

* Hide v-cloak

* Fix example

* Take out model comparison for now

* Add meta text for compat

* Remove chart.js dependency

* Tidy up and simplify JS and port big components over to Vue

* Remove chartjs example

* Add Twitter icon

* Add purple stylesheet option

* Add utility for hand cursor (special cases only)

* Add transition classes

* Add small option for section

* Add thumb object for small round thumbnail images

* Allow unset code block language via "none" value

(workaround to still allow unset language to default to DEFAULT_SYNTAX)

* Pass through attributes

* Add syntax highlighting definitions for Julia, R and Docker

* Add website icon

* Remove user survey from navigation

* Don't hide GitHub icon on small screens

* Make top navigation scrollable on small screens

* Remove old resources page and references to it

* Add Universe

* Add helper functions for better page URL and title

* Update site description

* Increment versions

* Update preview images

* Update mentions of resources

* Fix image

* Fix social images

* Fix problem with cover sizing and floats

* Add divider and move badges into heading

* Add docstrings

* Reference converting section

* Add section on converting word vectors

* Move converting section to custom section and fix formatting

* Remove old fastText example

* Move extensions content to own section

Keep weird ID to not break permalinks for now (we don't want to rewrite URLs if not absolutely necessary)

* Use better component example and add factories section

* Add note on larger model

* Use better example for non-vector

* Remove similarity in context section

Only works via small models with tensors so has always been kind of confusing

* Add note on init-model command

* Fix lightning tour examples and make excutable if possible

* Add spacy train CLI section to train

* Fix formatting and add video

* Fix formatting

* Fix textcat example description (resolves #2246)

* Add dummy file to try resolve conflict

* Delete dummy file

* Tidy up [ci skip]

* Ensure sufficient height of loading container

* Add loading animation to universe

* Update Thebelab build and use better startup message

* Fix asset versioning

* Fix typo [ci skip]

* Add note on project idea label
2018-04-29 02:06:46 +02:00

268 lines
4.6 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: 2px 6px 4px
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-hand
cursor: pointer
.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
min-height: $spinner-size * 2
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,
[v-cloak]
display: none !important
@each $breakpoint in (xs, sm, md)
.u-hidden-#{$breakpoint}.u-hidden-#{$breakpoint}
@include breakpoint(max, $breakpoint)
display: none
//- Transitions
.u-fade-enter-active
transition: opacity 0.5s
.u-fade-enter
opacity: 0