mirror of
https://github.com/explosion/spaCy.git
synced 2025-07-11 00:32:40 +03:00
Add mixins and styles for quickstart widget
This commit is contained in:
parent
2e875c40a8
commit
7b9466f625
|
@ -86,6 +86,44 @@ mixin permalink(id)
|
||||||
block
|
block
|
||||||
|
|
||||||
|
|
||||||
|
//- Quickstart widget
|
||||||
|
quickstart.js with manual markup, inspired by PyTorch's "Getting started"
|
||||||
|
groups - [object] option groups, uses global variable QUICKSTART
|
||||||
|
headline - [string] optional text to be rendered as widget headline
|
||||||
|
|
||||||
|
mixin quickstart(groups, headline)
|
||||||
|
.c-quickstart.o-block#qs
|
||||||
|
.c-quickstart__content
|
||||||
|
if headline
|
||||||
|
+h(2)=headline
|
||||||
|
for group in groups
|
||||||
|
.c-quickstart__group.u-text-small(data-qs-group=group.id)
|
||||||
|
.c-quickstart__legend=group.title
|
||||||
|
.c-quickstart__fields
|
||||||
|
for option in group.options
|
||||||
|
input.c-quickstart__input(class="c-quickstart__input--" + (group.multiple ? "check" : "radio") type=group.multiple ? "checkbox" : "radio" name=group.id id=option.id value=option.id checked=option.checked)
|
||||||
|
label.c-quickstart__label(for=option.id)=option.title
|
||||||
|
if option.meta
|
||||||
|
| #[span.c-quickstart__label__meta (#{option.meta})]
|
||||||
|
if option.help
|
||||||
|
| #[+help(option.help).c-quickstart__label__meta]
|
||||||
|
|
||||||
|
pre.c-code-block
|
||||||
|
code.c-code-block__content.c-quickstart__code(data-qs-results="")
|
||||||
|
block
|
||||||
|
|
||||||
|
|
||||||
|
//- Quickstart code item
|
||||||
|
data [object] - Rendering conditions (keyed by option group ID, value: option)
|
||||||
|
|
||||||
|
mixin qs(data)
|
||||||
|
- args = {}
|
||||||
|
for value, setting in data
|
||||||
|
- args['data-qs-' + setting] = value
|
||||||
|
span.c-quickstart__line&attributes(args)
|
||||||
|
block
|
||||||
|
|
||||||
|
|
||||||
//- Terminal-style code window
|
//- Terminal-style code window
|
||||||
label - [string] title displayed in top bar of terminal window
|
label - [string] title displayed in top bar of terminal window
|
||||||
|
|
||||||
|
|
83
website/assets/css/_components/_quickstart.sass
Normal file
83
website/assets/css/_components/_quickstart.sass
Normal file
|
@ -0,0 +1,83 @@
|
||||||
|
//- 💫 CSS > COMPONENTS > QUICKSTART
|
||||||
|
|
||||||
|
.c-quickstart
|
||||||
|
border: 1px solid $color-subtle
|
||||||
|
border-radius: 2px
|
||||||
|
display: none
|
||||||
|
background: $color-subtle-light
|
||||||
|
|
||||||
|
.c-quickstart__content
|
||||||
|
padding: 2rem 3rem
|
||||||
|
|
||||||
|
.c-quickstart__input
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.c-quickstart__label
|
||||||
|
cursor: pointer
|
||||||
|
background: $color-back
|
||||||
|
border: 1px solid $color-subtle
|
||||||
|
border-radius: 2px
|
||||||
|
display: inline-block
|
||||||
|
padding: 0.75rem 1.25rem
|
||||||
|
margin: 0 0.5rem 0.5rem 0
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background: lighten($color-theme-light, 5)
|
||||||
|
|
||||||
|
.c-quickstart__input--radio:checked + &
|
||||||
|
color: $color-back
|
||||||
|
border-color: $color-theme
|
||||||
|
background: $color-theme
|
||||||
|
|
||||||
|
.c-quickstart__input--check + &:before
|
||||||
|
content: ""
|
||||||
|
background: $color-back
|
||||||
|
display: inline-block
|
||||||
|
width: 20px
|
||||||
|
height: 20px
|
||||||
|
position: relative
|
||||||
|
bottom: 0.2rem
|
||||||
|
border: 1px solid $color-subtle
|
||||||
|
vertical-align: middle
|
||||||
|
margin-right: 1rem
|
||||||
|
cursor: pointer
|
||||||
|
border-radius: 50%
|
||||||
|
|
||||||
|
.c-quickstart__input--check:checked + &:before
|
||||||
|
background: $color-theme url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
|
||||||
|
background-size: contain
|
||||||
|
border-color: $color-theme
|
||||||
|
|
||||||
|
.c-quickstart__label__meta
|
||||||
|
font-weight: normal
|
||||||
|
color: $color-subtle-dark
|
||||||
|
|
||||||
|
.c-quickstart__group
|
||||||
|
@include breakpoint(min, md)
|
||||||
|
display: flex
|
||||||
|
flex-flow: row nowrap
|
||||||
|
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 1rem
|
||||||
|
|
||||||
|
.c-quickstart__fields
|
||||||
|
flex: 100%
|
||||||
|
|
||||||
|
.c-quickstart__legend
|
||||||
|
color: $color-subtle-dark
|
||||||
|
margin-right: 2rem
|
||||||
|
padding-top: 0.75rem
|
||||||
|
flex: 1 1 35%
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
.c-quickstart__line
|
||||||
|
display: block
|
||||||
|
|
||||||
|
&:before
|
||||||
|
color: $color-theme
|
||||||
|
margin-right: 1em
|
||||||
|
content: "$"
|
||||||
|
|
||||||
|
.c-quickstart__code
|
||||||
|
font-size: 1.6rem
|
|
@ -32,4 +32,5 @@ $theme: blue !default
|
||||||
@import _components/navigation
|
@import _components/navigation
|
||||||
@import _components/sidebar
|
@import _components/sidebar
|
||||||
@import _components/tables
|
@import _components/tables
|
||||||
|
@import _components/quickstart
|
||||||
@import _components/tooltips
|
@import _components/tooltips
|
||||||
|
|
Loading…
Reference in New Issue
Block a user