Introducing Pillar Framework
Refactor of pillar-server and pillar-web into a single python package. This simplifies the overall architecture of pillar applications. Special thanks @sybren and @venomgfx
This commit is contained in:
566
src/styles/_utils.sass
Normal file
566
src/styles/_utils.sass
Normal file
@@ -0,0 +1,566 @@
|
||||
/* 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)
|
||||
opacity: .9
|
||||
padding:
|
||||
left: 20px
|
||||
right: 20px
|
||||
|
||||
text-transform: uppercase
|
||||
|
||||
color: $mixin-color
|
||||
border: 1px solid $mixin-color
|
||||
border-radius: $roundness
|
||||
background-color: transparent
|
||||
transition: color 350ms ease-out, border 150ms ease-in-out, opacity 150ms ease-in-out, background-color 150ms ease-in-out
|
||||
text-shadow: none
|
||||
|
||||
&:hover
|
||||
opacity: 1
|
||||
cursor: pointer
|
||||
color: $mixin-color
|
||||
border-color: $mixin-color
|
||||
background-color: rgba($mixin-color, .1)
|
||||
|
||||
&:active, &:focus
|
||||
outline: none
|
||||
box-shadow: 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
|
||||
Reference in New Issue
Block a user