spaCy/website/assets/css/_base/_objects.sass

174 lines
2.8 KiB
Sass
Raw Normal View History

2016-10-31 21:04:15 +03:00
//- 💫 CSS > BASE > OBJECTS
2016-10-03 21:19:13 +03:00
2016-10-31 21:04:15 +03:00
//- Main container
2016-10-03 21:19:13 +03:00
2016-10-31 21:04:15 +03:00
.o-main
padding: $nav-height 0 0 0
2016-10-03 21:19:13 +03:00
max-width: 100%
2016-10-31 21:04:15 +03:00
min-height: 100vh
2016-10-03 21:19:13 +03:00
@include breakpoint(min, md)
2016-10-31 21:04:15 +03:00
&.o-main--sidebar
margin-left: $sidebar-width
&.o-main--aside
margin-right: $aside-width
position: relative
&:after
@include position(absolute, top, left, 0, 100%)
@include size($aside-width, 100%)
content: ""
display: block
background: $pattern
z-index: -1
min-height: 100vh
2016-10-03 21:19:13 +03:00
2016-10-31 21:04:15 +03:00
//- Content container
2016-10-03 21:19:13 +03:00
2016-10-31 21:04:15 +03:00
.o-content
padding: 3rem 7.5rem
margin: 0 auto
width: $content-width
max-width: 100%
@include breakpoint(max, sm)
padding: 3rem
2016-10-03 21:19:13 +03:00
//- Footer
.o-footer
position: relative
2016-10-31 21:04:15 +03:00
padding: 2.5rem 0
2016-10-03 21:19:13 +03:00
overflow: auto
2017-10-03 15:14:52 +03:00
background: $color-subtle-light
.o-main &
border-top-left-radius: $border-radius
2016-10-03 21:19:13 +03:00
//- Blocks
2017-10-03 15:14:52 +03:00
.o-section
width: 100%
max-width: 100%
&:not(:last-child)
margin-bottom: 7rem
padding-bottom: 4rem
border-bottom: 1px dotted $color-subtle
2016-10-03 21:19:13 +03:00
.o-block
2017-10-03 15:14:52 +03:00
margin-bottom: 4rem
2016-10-03 21:19:13 +03:00
.o-block-small
margin-bottom: 2rem
.o-no-block.o-no-block
2016-10-31 21:04:15 +03:00
margin-bottom: 0
2016-10-21 01:59:27 +03:00
2016-10-31 21:04:15 +03:00
.o-card
background: $color-back
2017-10-03 15:14:52 +03:00
border-radius: $border-radius
box-shadow: $box-shadow
2017-03-16 23:52:52 +03:00
//- Box
.o-box
2017-10-03 15:14:52 +03:00
background: $color-subtle-light
2017-03-16 23:52:52 +03:00
padding: 2rem
2017-10-03 15:14:52 +03:00
border-radius: $border-radius
.o-box__logos
padding-bottom: 1rem
2017-03-16 23:52:52 +03:00
2016-10-31 21:04:15 +03:00
//- Icons
2016-10-03 21:19:13 +03:00
.o-icon
vertical-align: middle
&.o-icon--inline
2017-10-03 15:14:52 +03:00
margin: 0 0.5rem 0 0.1rem
&.o-icon--tag
vertical-align: bottom
height: 100%
position: relative
top: 1px
2017-10-03 15:14:52 +03:00
.o-emoji
margin-right: 0.75rem
vertical-align: text-bottom
.o-badge
border-radius: 1em
2016-10-31 21:04:15 +03:00
2016-10-03 21:19:13 +03:00
2017-05-13 04:10:41 +03:00
//- SVG
.o-svg
height: auto
2016-10-03 21:19:13 +03:00
//- Inline List
.o-inline-list > *
display: inline
&:not(:last-child)
margin-right: 3rem
//- Logo
.o-logo
@include size($logo-width, $logo-height)
2016-10-03 21:19:13 +03:00
fill: currentColor
2016-10-31 21:04:15 +03:00
vertical-align: middle
margin: 0 0.5rem
2017-10-03 15:14:52 +03:00
//- Embeds
.o-chart
max-width: 100%
.cp_embed_iframe
border: 1px solid $color-subtle
border-radius: $border-radius
//- Form fields
.o-field
background: $color-back
padding: 0 0.25em
border-radius: 2em
border: 1px solid $color-subtle
margin-bottom: 0.25rem
.o-field__input,
.o-field__button
padding: 0 0.35em
.o-field__input
width: 100%
.o-field__select
background: transparent
color: $color-dark
height: 1.4em
border: none
text-align-last: center
.o-empty:empty:before
@include size(1em)
border-radius: 50%
content: ""
display: inline-block
background: $color-red
vertical-align: middle