Compile Attract styles using config, utils and base styling from Pillar
De-duplicated code, yay!
This commit is contained in:
@@ -279,67 +279,6 @@ nav.sidebar
|
|||||||
@include status-color-property(background-color, '', 'dark')
|
@include status-color-property(background-color, '', 'dark')
|
||||||
|
|
||||||
|
|
||||||
/* General style for activities in all places */
|
|
||||||
.d-activity
|
|
||||||
font-size: .9em
|
|
||||||
|
|
||||||
$activity-highlight-color: #00cc9f
|
|
||||||
ul
|
|
||||||
cursor: default
|
|
||||||
padding: 5px
|
|
||||||
color: $color-text-dark-primary
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
li
|
|
||||||
padding: 0 10px 7px 10px
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
span.date
|
|
||||||
color: darken($activity-highlight-color, 5%)
|
|
||||||
|
|
||||||
/* Left Dot */
|
|
||||||
&:after
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
position: absolute
|
|
||||||
top: 6px
|
|
||||||
left: -3px
|
|
||||||
width: 5px
|
|
||||||
height: 5px
|
|
||||||
border-radius: 50%
|
|
||||||
background-color: $color-background-light
|
|
||||||
border: thin solid $activity-highlight-color
|
|
||||||
transition: all 250ms ease-in-out
|
|
||||||
|
|
||||||
/* Left Line */
|
|
||||||
&:before
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
position: absolute
|
|
||||||
top: 10px
|
|
||||||
left: -1px
|
|
||||||
width: 1px
|
|
||||||
height: 100%
|
|
||||||
background-color: $activity-highlight-color
|
|
||||||
transition: all 250ms ease-in-out
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
&:before
|
|
||||||
background-color: transparent
|
|
||||||
|
|
||||||
span.actor
|
|
||||||
padding: 0 5px
|
|
||||||
color: $color-text-dark
|
|
||||||
|
|
||||||
img.actor-avatar
|
|
||||||
width: 16px
|
|
||||||
height: 16px
|
|
||||||
border-radius: 50%
|
|
||||||
margin-right: 5px
|
|
||||||
position: relative
|
|
||||||
top: -2px
|
|
||||||
|
|
||||||
|
|
||||||
.attract-box
|
.attract-box
|
||||||
.item-id
|
.item-id
|
||||||
padding: 8px
|
padding: 8px
|
||||||
|
|||||||
@@ -1,615 +1 @@
|
|||||||
/* Collection of mixins that can be plugged everywhere */
|
/* Collection of mixins that can be plugged everywhere */
|
||||||
|
|
||||||
=clearfix
|
|
||||||
clear: both
|
|
||||||
&:after
|
|
||||||
// Basically same as .clearfix from bootstrap
|
|
||||||
clear: both
|
|
||||||
display: block
|
|
||||||
content: ' '
|
|
||||||
|
|
||||||
|
|
||||||
@mixin button($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
|
|
||||||
|
|
||||||
&: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
|
|
||||||
|
|
||||||
|
|
||||||
@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
|
|
||||||
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
|
|
||||||
|
|
||||||
=animation-wiggle
|
|
||||||
animation:
|
|
||||||
name: wiggle
|
|
||||||
duration: 1s
|
|
||||||
delay: 0s
|
|
||||||
fill-mode: forwards
|
|
||||||
iteration-count: infinite
|
|
||||||
timing-function: linear
|
|
||||||
|
|
||||||
.spin
|
|
||||||
+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
|
|
||||||
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
|
|
||||||
|
|
||||||
/* 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
|
|
||||||
background-color: $color-background-nav-light
|
|
||||||
box-shadow: inset 2px 0 0 $color-primary
|
|
||||||
color: white
|
|
||||||
|
|||||||
@@ -1,95 +1,3 @@
|
|||||||
$color-background: #eaebec
|
/* Attract specific configuration settings */
|
||||||
$color-background-light: lighten($color-background, 5%)
|
|
||||||
$color-background-dark: darken($color-background, 5%)
|
|
||||||
$color-background-nav: hsl(hue($color-background), 20%, 25%)
|
|
||||||
|
|
||||||
$color-background-nav-light: hsl(hue($color-background), 20%, 35%)
|
|
||||||
$color-background-nav-dark: hsl(hue($color-background), 20%, 15%)
|
|
||||||
|
|
||||||
$color-background-active: #dff5f6 // background colour for active items.
|
|
||||||
|
|
||||||
$font-body: 'Roboto'
|
|
||||||
$font-headings: 'Lato'
|
|
||||||
$font-size: 14px
|
|
||||||
|
|
||||||
$color-text: #4d4e53
|
|
||||||
|
|
||||||
$color-text-dark: $color-text
|
|
||||||
$color-text-dark-primary: #646469 // rgba($color-text, .87)
|
|
||||||
$color-text-dark-secondary: #9E9FA2 // rgba($color-text, .54)
|
|
||||||
$color-text-dark-hint: #BBBBBD // rgba($color-text, .38)
|
|
||||||
|
|
||||||
$color-text-light: white
|
|
||||||
$color-text-light-primary: rgba($color-text-light, .87)
|
|
||||||
$color-text-light-secondary: rgba($color-text-light, .54)
|
|
||||||
$color-text-light-hint: rgba($color-text-light, .38)
|
|
||||||
|
|
||||||
$color-primary: #68B3C8
|
|
||||||
$color-primary-light: hsl(hue($color-primary), 30%, 90%)
|
|
||||||
$color-primary-dark: hsl(hue($color-primary), 80%, 30%)
|
|
||||||
$color-primary-accent: hsl(hue($color-primary), 100%, 50%)
|
|
||||||
|
|
||||||
$color-secondary: #f42942
|
|
||||||
$color-secondary-light: hsl(hue($color-secondary), 30%, 90%)
|
|
||||||
$color-secondary-dark: hsl(hue($color-secondary), 80%, 40%)
|
|
||||||
$color-secondary-accent: hsl(hue($color-secondary), 100%, 50%)
|
|
||||||
|
|
||||||
$color-warning: #F3BB45 !default
|
|
||||||
$color-info: #68B3C8 !default
|
|
||||||
$color-success: #27AE60 !default
|
|
||||||
$color-danger: #EB5E28 !default
|
|
||||||
|
|
||||||
/* Borrowed from dillo.space :) */
|
|
||||||
$color_upvote: #ff8b60
|
|
||||||
$color_downvote: #74a4ff
|
|
||||||
|
|
||||||
/* Label Status */
|
|
||||||
$color-status-invalid: #999
|
|
||||||
$color-status-invalid-light: lighten($color-status-invalid, 10%)
|
|
||||||
$color-status-invalid-dark: darken($color-status-invalid, 10%)
|
|
||||||
$color-status-todo: #ff8080
|
|
||||||
$color-status-todo-light: hsl(hue($color-status-todo), 100%, 85%)
|
|
||||||
$color-status-todo-dark: hsl(hue($color-status-todo), 100%, 65%)
|
|
||||||
$color-status-on_hold: #cb9e15
|
|
||||||
$color-status-on_hold-light: hsl(hue($color-status-on_hold), 50%, 70%)
|
|
||||||
$color-status-on_hold-dark: hsl(hue($color-status-on_hold), 60%, 40%)
|
|
||||||
$color-status-in_progress: #ffbe00
|
|
||||||
$color-status-in_progress-light: hsl(hue($color-status-in_progress), 100%, 55%)
|
|
||||||
$color-status-in_progress-dark: hsl(hue($color-status-in_progress), 100%, 45%)
|
|
||||||
$color-status-review: #00ceff
|
|
||||||
$color-status-review-light: hsl(hue($color-status-review), 100%, 75%)
|
|
||||||
$color-status-review-dark: hsl(hue($color-status-review), 100%, 40%)
|
|
||||||
$color-status-approved: #00cc9f
|
|
||||||
$color-status-approved-light: hsl(hue($color-status-approved), 100%, 70%)
|
|
||||||
$color-status-approved-dark: hsl(hue($color-status-approved), 100%, 35%)
|
|
||||||
$color-status-cbb: #acbf92
|
|
||||||
$color-status-cbb-light: hsl(hue($color-status-cbb), 40%, 75%)
|
|
||||||
$color-status-cbb-dark: hsl(hue($color-status-cbb), 15%, 50%)
|
|
||||||
$color-status-final: #b0ea10
|
|
||||||
$color-status-final-light: hsl(hue($color-status-final), 100%, 70%)
|
|
||||||
$color-status-final-dark: hsl(hue($color-status-final), 100%, 30%)
|
|
||||||
|
|
||||||
$color-status-active: #E6F3FD
|
|
||||||
$color-status-updated: #e7f5d3
|
|
||||||
|
|
||||||
/* Mobile Stuff */
|
|
||||||
$screen-xs: 480px !default
|
|
||||||
$screen-xs-min: $screen-xs
|
|
||||||
$screen-phone: $screen-xs-min
|
|
||||||
$screen-sm: 768px !default
|
|
||||||
$screen-sm-min: $screen-sm
|
|
||||||
$screen-tablet: $screen-sm-min
|
|
||||||
$screen-md: 1100px !default
|
|
||||||
$screen-md-min: $screen-md
|
|
||||||
$screen-desktop: $screen-md-min
|
|
||||||
$screen-lg: 1270px !default
|
|
||||||
$screen-lg-min: $screen-lg
|
|
||||||
$screen-lg-desktop: $screen-lg-min
|
|
||||||
$screen-xs-max: $screen-sm-min - 1
|
|
||||||
$screen-sm-max: $screen-md-min - 1
|
|
||||||
$screen-md-max: $screen-lg-min - 1
|
|
||||||
|
|
||||||
|
|
||||||
$sidebar-width: 50px
|
|
||||||
|
|
||||||
$items-list-thumbnail-width: 100px
|
$items-list-thumbnail-width: 100px
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
|
@import ../../../pillar/src/styles/_config
|
||||||
|
@import ../../../pillar/src/styles/_utils
|
||||||
|
@import ../../../pillar/src/styles/base
|
||||||
|
@import ../../../pillar/src/styles/_error
|
||||||
|
|
||||||
@import _config
|
@import _config
|
||||||
@import _app_utils
|
@import _app_utils
|
||||||
@import _app_base
|
@import _app_base
|
||||||
@@ -5,5 +10,4 @@
|
|||||||
@import _tasks
|
@import _tasks
|
||||||
@import _shots
|
@import _shots
|
||||||
@import _dashboard
|
@import _dashboard
|
||||||
@import ../../../pillar/src/styles/_error
|
|
||||||
@import plugins/pikaday
|
@import plugins/pikaday
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import ../config
|
@import ../../../../pillar/src/styles/_config
|
||||||
|
|
||||||
.select2-container
|
.select2-container
|
||||||
width: 100% !important
|
width: 100% !important
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@import ../_config
|
@import ../../../../pillar/src/styles/_config
|
||||||
@import ../_app_utils
|
@import ../../../../pillar/src/styles/_utils
|
||||||
@charset "UTF-8"
|
@charset "UTF-8"
|
||||||
|
|
||||||
/* Pikaday */
|
/* Pikaday */
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ html(lang="en")
|
|||||||
|
|
||||||
link(href="{{ url_for('static_pillar', filename='assets/css/vendor/bootstrap.min.css', v=171120161) }}", rel="stylesheet")
|
link(href="{{ url_for('static_pillar', filename='assets/css/vendor/bootstrap.min.css', v=171120161) }}", rel="stylesheet")
|
||||||
link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css', v=171120161) }}", rel="stylesheet")
|
link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css', v=171120161) }}", rel="stylesheet")
|
||||||
link(href="{{ url_for('static_pillar', filename='assets/css/base.css', v=171120161) }}", rel="stylesheet")
|
|
||||||
link(href="{{ url_for('static_attract', filename='assets/css/main.css', v=171120161) }}", rel="stylesheet")
|
link(href="{{ url_for('static_attract', filename='assets/css/main.css', v=171120161) }}", rel="stylesheet")
|
||||||
link(href="{{ url_for('static_attract', filename='assets/css/plugins/js_select2.css', v=171120161) }}", rel="stylesheet")
|
link(href="{{ url_for('static_attract', filename='assets/css/plugins/js_select2.css', v=171120161) }}", rel="stylesheet")
|
||||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery-3.1.0.min.js', v=171120161)}}")
|
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery-3.1.0.min.js', v=171120161)}}")
|
||||||
|
|||||||
Reference in New Issue
Block a user