Home
Diffusion Pillar (dillo) Browse

pillar/src/styles/_utils.sass
9c59b06ab9bcdillo

Last Change
Raw File

_utils.sass
View Options

/* Collection of mixins that can be plugged everywhere */
=clearfix
clear: both
&:after
// Basically same as .clearfix from bootstrap
clear: both
display: block
content: ' '
=container-behavior
width: 100%
+media-lg
width: $screen-lg-min
margin-left: auto
margin-right: auto
box-sizing: border-box
+clearfix
@mixin button-rounded($mixin-color, $roundness, $filled: false)
font-family: $font-body
text-transform: uppercase
opacity: .9
padding:
left: 20px
right: 20px
border-radius: $roundness
@if $filled
background: linear-gradient(lighten($mixin-color, 2%), $mixin-color)
color: white
border: thin solid darken($mixin-color, 5%)
text-shadow: 1px 1px 0 rgba(black, .15)
@else
background-color: transparent
color: $mixin-color
border: thin solid $mixin-color
text-shadow: none
transition: color 350ms ease-out, border 150ms ease-in-out, opacity 150ms ease-in-out, background-color 150ms ease-in-out
&:hover
opacity: 1
cursor: pointer
text-decoration: none
@if $filled
background: linear-gradient(lighten($mixin-color, 5%), lighten($mixin-color, 5%))
color: white
border-color: lighten($mixin-color, 5%)
@else
background-color: rgba($mixin-color, .1)
color: $mixin-color
border-color: $mixin-color
&:active, &:focus
outline: none
border-color: $mixin-color
background-color: $mixin-color
color: white
i
margin-right: 10px
small
font-size: .6em
@mixin button-rounded-filled($mixin-color, $roundness)
font-family: $font-body
text-transform: uppercase
opacity: .9
padding:
left: 20px
right: 20px
color: white
border: thin solid darken($mixin-color, 5%)
border-radius: $roundness
background: linear-gradient(lighten($mixin-color, 2%), $mixin-color)
text-shadow: 1px 1px 0 rgba(black, .15)
transition: color 150ms ease-out, opacity 100ms ease-in-out, background 100ms ease-out
&:hover
opacity: 1
cursor: pointer
color: white
border-color: lighten($mixin-color, 5%)
background: linear-gradient(lighten($mixin-color, 5%), lighten($mixin-color, 5%))
text-decoration: none
&:active, &:focus
outline: none
box-shadow: none
border-color: lighten($mixin-color, 5%)
background: $mixin-color
color: white
i
margin-right: 10px
small
font-size: .6em
@mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: linear-gradient(to bottom, $from-color $from-percentage, $to-color $to-percentage)
@mixin stripes($color-light, $color-dark, $deg, $size)
background-size: $size $size
background-image: linear-gradient($deg, $color-light 25%, $color-dark 25%, $color-dark 50%, $color-light 50%, $color-light 75%, $color-dark 75%, $color-dark)
=stripes-animate
animation:
name: background-slide
duration: 1s
delay: 0s
// fill-mode: forwards
iteration-count: infinite
timing-function: linear
=container-box
position: relative
background-color: white
border-radius: 3px
box-shadow: 0 0 0 1px rgba(black, .1), 1px 1px 2px rgba(black, .1)
=text-overflow-ellipsis
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
=position-center-translate
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
=input-generic
color: $color-text-dark
box-shadow: none
font-family: $font-body
border-radius: 3px
border-color: $color-background-dark
background-color: $color-background-light
&:focus
border-color: $color-info
box-shadow: none
=label-generic
color: $color-text-dark
font-family: $font-body
font-weight: 300
@mixin badge($mixin-color, $roundness)
padding:
left: 10px
right: 10px
text-transform: uppercase
color: $mixin-color
border: 1px solid $mixin-color
border-radius: $roundness
i
margin-right: 10px
/* Smallest, like phones on portrait.
** Menu is collapsed, columns stack, no brand */
=media-xs
@media (max-width: #{$screen-tablet - 1px})
@content
/* Small but wide: phablets, iPads
** Menu is collapsed, columns stack, no brand */
=media-sm
@media (min-width: #{$screen-tablet}) and (max-width: #{$screen-desktop - 1px})
@content
/* Tablets portrait.
** Menu is expanded, but columns stack, brand is shown */
=media-md
@media (min-width: #{$screen-desktop})
@content
=media-lg
@media (min-width: #{$screen-lg-desktop})
@content
=media-print
@media print
@content
=spin
animation:
name: spin-once
duration: 1s
delay: 0s
fill-mode: forwards
iteration-count: infinite
timing-function: linear
=spin-once
+spin
animation:
iteration-count: 1
=pulse
animation:
name: pulse
duration: 1s
delay: 0s
fill-mode: forwards
iteration-count: infinite
=pulse-75
animation:
name: pulse-75
duration: 1s
delay: 0
fill-mode: forwards
iteration-count: infinite
@mixin badge($mixin-color, $roundness)
=anim-grow-bounce
animation:
name: grow-bounce
duration: .25s
delay: 0s
fill-mode: forwards
iteration-count: 1
timing-function: linear
.anim-grow-bounce
+anim-grow-bounce
.spin
position: relative
+spin
&:before, &:after
+spin
margin:
left: 0 !important
right: 0 !important
.spinner
position: relative
+spin
&:before, &:after
+spin
@keyframes spin-once
from
transform: rotate(0deg)
to
transform: rotate(360deg)
@keyframes pulse
0
opacity: 1
50%
opacity: 0
100%
opacity: 1
@keyframes pulse-75
0
opacity: 1
50%
opacity: .8
100%
opacity: 1
@keyframes background-fill-left-right
from
background-position: right bottom
to
background-position: left bottom
@keyframes grow-bounce-in
0
transform: scale(0.8)
opacity: 0
50%
transform: scale(1.05)
opacity: 1
85%
transform: scale(1.0)
90%
transform: scale(0.99)
100%
transform: scale(1.0)
@keyframes grow-bounce-out
0
transform: scale(1.0)
opacity: 1
100%
transform: scale(0.9)
opacity: 0
@keyframes background-slide
from
background-position: 0 0
to
background-position: 50px 50px
@keyframes grow-bounce
0
transform: scale(1.0)
opacity: 1
50%
transform: scale(1.01)
opacity: .9
85%
transform: scale(1.0)
90%
transform: scale(0.99)
opacity: 1
100%
transform: scale(1.0)
@keyframes grow-bounce-heartbeat
0
transform: scale(1.0)
85%
transform: scale(1.0)
90%
transform: scale(1.15)
94%
transform: scale(0.9)
96%
transform: scale(1.05)
100%
transform: scale(1.0)
=list-bullets
ul
padding-left: 20px
list-style: none
li:before
content: '·'
font-weight: 400
position: relative
left: -10px
=node-details-description
padding: 15px 0 25px 0
color: darken($color-text-dark, 5%)
font:
family: $font-body
weight: 300
size: 1.2em
word-break: break-word
clear: both
+clearfix
+media-xs
font-size: 1.1em
strong, b
font-weight: 400
a:not([class])
color: $color-text-dark-primary
text-decoration: underline
&:hover
color: $color-primary
p
padding:
left: 20px
right: 20px
margin-bottom: 20px
line-height: 1.5em
word-wrap: break-word
h1, h2, h3, h4, h5, h6
padding:
top: 20px
left: 20px
right: 20px
blockquote
background-color: lighten($color-background, 5%)
text-shadow: 1px 1px 0 rgba(white, .2)
margin:
left: 20px
right: 20px
bottom: 30px
font-size: 1em
p
padding: 0
margin: 0
ul li blockquote
margin:
left: 0
top: 15px
img,
p img,
ul li img
max-width: 100%
padding:
top: 25px
// bottom: 10px
bottom: 25px
h2
margin-bottom: 15px
+media-xs
font-size: 1.5em
/* e.g. YouTube embed */
iframe
margin-top: 20px
width: 100%
max-width: 100%
height: auto
min-height: 354px
+media-sm
iframe
min-height: 314px
+media-xs
iframe
min-height: 314px
iframe[src^="https://w.soundcloud"]
min-height: auto
+list-bullets
ul
padding-left: 40px
margin-bottom: 25px
li
margin-bottom: 7px
img
display: block
padding:
top: 25px
bottom: 10px
ul, ul li ul
margin-top: 15px
padding-left: 20px
code, kbd, pre, samp
font-size: 1.3rem
pre
background-color: lighten($color-background, 5%)
border-color: $color-background
border-radius: 3px
color: $color-text
/* when <pre> is outside <p> */
margin:
left: 20px
right: 20px
pre+p
margin-top: 30px
p+pre
/* a <pre> right after a <p> usually are related, remove some spacing */
margin-top: -10px
p
pre
/* We already have spacing on the sides inside <p> */
margin:
left: 0
right: 0
=markdown-preview-container
border:
top: 1px solid $color-background
bottom: 1px solid $color-background
position: relative
margin: 40px auto 25px auto
padding: 10px 10px 25px 10px
color: $color-text-dark-primary
cursor: default
transition: all 150ms ease-in-out
+node-details-description
// Funny, normalize.css doesn't normalize when it's outside
h1
font-size: 2.8em
h2
margin-bottom: 15px
=ribbon
background-color: $color-success
cursor: default
overflow: hidden
white-space: nowrap
position: absolute
right: -40px
top: 10px
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
span
border: thin dashed rgba(white, .5)
color: white
display: block
font-size: 70%
margin: 1px 0
padding: 3px 50px
text:
align: center
transform: uppercase
@mixin text-background($text-color, $background-color, $roundness, $padding)
border-radius: $roundness
padding: $padding
background-color: rgba($background-color, .9)
box-shadow: 0.5em 0 0 rgba($background-color, .9),-0.5em 0 0 rgba($background-color, .9)
box-decoration-break: clone
color: $text-color
=list-meta
margin: 0
padding: 0
list-style: none
color: $color-text-dark-primary
li
display: inline-block
padding-left: 15px
position: relative
&:before
content: '·'
position: relative
top: 1px
left: -7px
color: $color-text-dark-secondary
&:first-child
padding-left: 0
&:before
content: ''
a
color: $color-text-dark-secondary
&:hover
color: $color-primary
/* Bootstrap's img-responsive class */
=img-responsive
display: block
max-width: 100%
height: auto