Home
Diffusion Pillar (wip-comments-confidence-sorting) Browse

pillar/src/styles/_utils.sass
0055633732d9wip-comments-confidence…

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: 100%
max-width: $screen-lg-min
margin-left: auto
margin-right: auto
box-sizing: border-box
+clearfix
@mixin button($mixin-color, $roundness, $filled: false)
display: inline-flex
align-items: center
justify-content: center
padding: 5px 12px
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
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
outline: none
border-color: $mixin-color
background-color: $mixin-color
color: white
i
margin-right: 8px
small
font-size: .6em
&:disabled
cursor: not-allowed
color: $color-text-dark-secondary
border-color: $color-text-dark-hint
&:hover
@if $filled
background: rgba($color-text-dark-hint, .2)
@else
background-color: rgba($color-text-dark-hint, .1)
@if $filled
background: rgba($color-text-dark-hint, .1)
text-shadow: none
=disabled-stripes
color: $color-text-dark
cursor: not-allowed
background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
border-color: darken($color-text-dark-hint, 5%)
pointer-events: none
opacity: .6
@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
iteration-count: infinite
timing-function: linear
=container-box
position: relative
background-color: white
border-radius: 3px
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px
=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
// padding: 5px 5px 5px 0
color: $color-text-dark
background-color: transparent
&:hover
border-bottom-color: $color-background
&:focus
outline: 0
border-color: $primary
box-shadow: none
=label-generic
color: $color-text-dark-primary
font-weight: normal
font-size: .9em
margin: 0
@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)
=animation-wiggle
animation:
name: wiggle
duration: 1s
delay: 0s
fill-mode: forwards
iteration-count: infinite
timing-function: linear
.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 wiggle
0
transform: rotate(0deg)
25%
transform: rotate(25deg)
75%
transform: rotate(-25deg)
100%
transform: rotate(0deg)
@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
+clearfix
color: darken($color-text-dark, 5%)
font:
weight: 300
size: 1.2em
word-break: break-word
+media-xs
font-size: 1.1em
a:not([class])
color: $color-text-dark-primary
text-decoration: underline
&:hover
color: $color-primary
p
margin-bottom: 20px
line-height: 1.5em
word-wrap: break-word
h1, h2, h3, h4, h5, h6
padding:
top: 20px
right: 20px
blockquote
background-color: lighten($color-background-light, 5%)
box-shadow: inset 5px 0 0 $color-background
display: block
font-size: 1em
margin:
left: 0
right: 20px
bottom: 30px
padding: 5px 5px 5px 20px
text-shadow: 1px 1px 0 rgba(white, .2)
ul li blockquote
margin:
left: 0
top: 15px
img,
p img,
ul li img
max-width: 100%
padding:
bottom: 25px
top: 25px
&.emoji
display: inline-block
padding: initial
h2
margin-bottom: 15px
+media-xs
font-size: 1.5em
/* e.g. YouTube embed */
iframe
height: auto
margin: 15px auto
max-width: 100%
min-height: 500px
width: 100%
+media-sm
iframe
min-height: 314px
+media-xs
iframe
min-height: 314px
iframe[src^="https://www.youtube"]
+media-xs
iframe
min-height: 420px
min-height: 500px
iframe[src^="https://w.soundcloud"]
min-height: auto
+list-bullets
ul
margin-bottom: 25px
padding-left: 40px
li
margin-bottom: 7px
img
display: block
padding:
bottom: 10px
top: 25px
ul, ul li ul
margin-top: 15px
padding-left: 20px
code, kbd, pre, samp
background-color: rgba($color-primary, .05)
color: darken($color-primary, 15%)
font-size: inherit
white-space: pre-line
code
background-color: transparent
kbd
border:
color: rgba($color-primary, .33)
radius: 3px
style: solid
width: 2px
cursor: default
display: inline-block
font:
size: .9em
weight: bold
margin: 2px
min-width: 15px
padding: 0 3px
text:
align: center
transform: uppercase
=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
border: thin dashed rgba(white, .5)
color: white
pointer-events: none
font-size: 70%
overflow: hidden
position: absolute
right: -40px
top: 10px
transform: rotate(45deg)
white-space: nowrap
span
display: block
margin: 1px 0
padding: 3px 50px
@mixin text-background($text-color, $background-color, $roundness, $padding)
border-radius: $roundness
padding: $padding
background-color: $background-color
box-shadow: 0.5em 0 0 $background-color,-0.5em 0 0 $background-color
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
/* Set the color for a specified property
* 1: $property: e.g. background-color
* 2: $where: ':before', ' .class-name', etc.
* 3: $variation: 'light', 'dark', or empty
* e.g. @include status-color-property(background-color, ':before', 'light')
*/
@mixin status-color-property($property, $where: false, $variation: false)
@if not ($where)
$where: ''
&.status
&-invalid#{$where}
@if ($variation == 'light')
#{$property}: $color-status-invalid-light
@else if ($variation == 'dark')
#{$property}: $color-status-invalid-dark
@else
#{$property}: $color-status-invalid
&-todo#{$where}
@if ($variation == 'light')
#{$property}: $color-status-todo-light
@else if ($variation == 'dark')
#{$property}: $color-status-todo-dark
@else
#{$property}: $color-status-todo
&-in_progress#{$where}
@if ($variation == 'light')
#{$property}: $color-status-in_progress-light
@else if ($variation == 'dark')
#{$property}: $color-status-in_progress-dark
@else
#{$property}: $color-status-in_progress
&-on_hold#{$where}
@if ($variation == 'light')
#{$property}: $color-status-on_hold-light
@else if ($variation == 'dark')
#{$property}: $color-status-on_hold-dark
@else
#{$property}: $color-status-on_hold
&-approved#{$where}
@if ($variation == 'light')
#{$property}: $color-status-approved-light
@else if ($variation == 'dark')
#{$property}: $color-status-approved-dark
@else
#{$property}: $color-status-approved
&-cbb#{$where}
@if ($variation == 'light')
#{$property}: $color-status-cbb-light
@else if ($variation == 'dark')
#{$property}: $color-status-cbb-dark
@else
#{$property}: $color-status-cbb
&-final#{$where}
@if ($variation == 'light')
#{$property}: $color-status-final-light
@else if ($variation == 'dark')
#{$property}: $color-status-final-dark
@else
#{$property}: $color-status-final
&-review#{$where}
@if ($variation == 'light')
#{$property}: $color-status-review-light
@else if ($variation == 'dark')
#{$property}: $color-status-review-dark
@else
#{$property}: $color-status-review
=sidebar-button-active
color: $primary
.flash-on
background-color: lighten($color-success, 50%) !important
border-color: lighten($color-success, 40%) !important
color: $color-success !important
text-shadow: 1px 1px 0 white
transition: all .1s ease-in
img
transition: all .1s ease-in
opacity: .8
.flash-off
transition: all 1s ease-out
img
transition: all 1s ease-out
.cursor-pointer
cursor: pointer
.user-select-none
user-select: none
// Bootstrap has .img-fluid, a class to limit the width of an image to 100%.
// .imgs-fluid below is to be applied on a parent container when we can't add
// classes to the images themselves. e.g. the blog.
.imgs-fluid
img
// Just re-use Bootstrap's mixin here.
+img-fluid
.overflow-hidden
overflow: hidden
=text-gradient($color_from, $color_to)
background: linear-gradient(to right, $color_from, $color_to)
background-clip: text
-webkit-background-clip: text
-webkit-text-fill-color: transparent
=active-gradient
+text-gradient(#0cc, $primary)
&:before
+text-gradient(#0cc, $primary)