app/assets/stylesheets/spina.sass
// Configuration
@import font_awesome5_webfont
@import font_awesome5
@import spina/trix
@import spina/configuration
// Mixins
@import spina/mixins
// Normalizing
@import spina/normalize
// Icons
@import spina/ics_spina
@import spina/fonts
// Animations
@import spina/animate
@import spina/custom_animations
// Elements
@import spina/forms
@import spina/tables
@import spina/buttons
@import spina/labels
@import spina/modal
@import spina/sortable_lists
@import spina/gallery
@import spina/login
@import spina/trix_custom
@import spina/wizard
@import spina/notifications
html
box-sizing: border-box
min-height: 100%
*, *:before, *:after
box-sizing: inherit
html, body
height: 100%
font-family: $font-family
-webkit-font-smoothing: antialiased
body
background: #f5f5fa
min-width: 1024px
// Primary navigation
nav#primary
background: linear-gradient($primary-color-dark, $primary-color-light)
height: 100%
overflow: hidden
position: fixed
width: 300px
z-index: 5
& > ul
height: 100%
padding-top: 12px
position: relative
width: 100%
ul li
display: block
ul li.bottom
bottom: 10px
position: absolute
ul li a
color: #f5f5fa
display: block
font-size: 15px
font-weight: 600
line-height: 54px
opacity: .5
outline: none
padding: 0 20px
position: relative
&:hover
opacity: 1
.icon
font-size: 26px
margin-left: 5px
margin-right: 11px
.icon-caret-right
font-size: 18px
position: absolute
right: 10px
.icon-home
font-size: 32px
margin-left: 2px
margin-right: 8px
ul li.active > a
opacity: 1
ul li ul
background: linear-gradient($primary-color-dark, $primary-color-light)
bottom: 0
left: 80px
padding-top: 20px
position: absolute
top: 0
transform: translateX(100%)
width: calc(100% - 80px)
z-index: 1
li a
line-height: 40px
ul li ul li a.back-to-main-menu
font-size: 13px
font-weight: 700
opacity: .25
text-transform: uppercase
.icon
font-size: 16px
margin: -2px 0 0 -2px
&:hover
opacity: .5
ul li ul li
position: relative
ul li ul li[data-badge]:after
background: rgba(255, 255, 255, .4)
border-radius: 9px
color: $primary-color-dark
content: attr(data-badge)
display: block
font-size: 12px
font-weight: 600
height: 18px
line-height: 18px
min-width: 24px
padding: 0 8px
position: absolute
right: 20px
text-align: center
top: 50%
transform: translateY(-50%)
vertical-align: middle
z-index: 1
ul li ul li[data-badge] a
z-index: 2
ul li ul li.active[data-badge], ul li ul li:hover[data-badge]
&:after
background: rgba(255, 255, 255, .9)
&.animated > ul
transition: background .3s ease
& > li > a
transition: all .3s ease
.icon
transition: all .3s ease
li.active ul
transition: all .3s ease
&.transformed > ul
background: rgba(0, 0, 0, .4)
& > li > a
color: transparent
transform: translateX(-10px)
.icon
color: #f5f5fa
transform: translateX(10px)
li.active ul
transform: translateX(0%)
// Secondary navigation
nav#secondary
margin-bottom: -30px
margin-top: 20px
ul li
display: inline
ul li a
color: #4b4b4d
display: inline-block
font-size: 12px
font-weight: 700
line-height: 34px
opacity: .5
outline: none
padding: 0 16px
position: relative
text-transform: uppercase
&:after
background-color: $primary-color
bottom: 0px
content: " "
height: 3px
left: 0px
opacity: 0
position: absolute
transform: scale(0)
width: 100%
ul li a:hover
opacity: 1
ul li.active a
cursor: default
opacity: 1
margin: 0 16px
padding: 0
&:after
opacity: 1
transform: scale(1)
transition: all .2s ease
transition-delay: .05s
ul li:first-child a
margin-left: 0
padding-left: 0
// Tabs
.tab-content
display: none
&.active
display: block
// Permanent notice
.permanent-notice
background: #eee
border-bottom: 1px solid #ddd
color: #333
margin: 0 -40px 30px -40px
padding: 0 40px
position: relative
i.icon
font-size: 16px
left: 14px
opacity: .25
position: absolute
top: 12px
p
font-size: 13px
font-weight: 600
line-height: 18px
margin: 0
padding: 12px 0
small
display: block
font-size: 12px
font-weight: 400
&.permanent-notice-info
background: #eef6fe
border-color: #def
color: #12659b
p
color: inherit
// Filters
.filters
margin: 20px 0
// Datepicker
.ui-datepicker
background: #fff
border: none
box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
width: 250px
.ui-datepicker-header
border: none
font-weight: 300
a.ui-datepicker-prev, a.ui-datepicker-next
background: none
border: none
color: transparent
cursor: pointer
display: block
height: 36px
opacity: .6
padding: 8px 0
position: absolute
right: 0
top: 0
width: 36px
a.ui-datepicker-prev
left: 0
a.ui-datepicker-prev:hover, a.ui-datepicker-next:hover
opacity: 1
a.ui-datepicker-prev span
background: url(asset-path('spina/arrow-left.svg')) no-repeat center
background-size: 10px 13px
display: block
a.ui-datepicker-next span
background: url(asset-path('spina/arrow-right.svg')) no-repeat center
background-size: 10px 13px
display: block
.ui-datepicker-title
line-height: 42px
text-align: center
.ui-datepicker-calendar
width: 100%
tr td:first-child, tr th:first-child
padding-left: 0px
tr td:last-child, tr th:last-child
padding-right: 0px
thead th
color: #444
font-weight: 600
tbody tr, thead tr
border: none
tbody tr td
background: none
tbody tr td a
display: block
line-height: 28px
text-align: center
padding: 2px 4px
width: 32px
tbody tr td a.ui-state-default
background: none
border: none
color: #777
font-weight: 600
tr:hover
background: none
tbody tr td a:hover
color: #000
tbody tr td a.ui-state-highlight
background: #eee
border-radius: 2px
tbody tr td a.ui-state-active
background: #444
border-radius: 2px
color: #fff
// Main header
header#header
background: #fff
border-bottom: 1px solid #eee
left: 300px
padding: 30px 40px
position: fixed
right: 0
top: 0
z-index: 10
#header_actions
float: right
position: absolute
right: 20px
top: 24px
// Main content
section#main
padding: 30px 40px 30px 340px
// Danger zone
.danger-zone
background: url(asset-path('spina/danger-zone-ribbon.png')) repeat-x #fcfcfc
margin: 60px -40px 0 -40px
padding: 26px 40px
h2
color: #777
font-size: 16px
font-weight: 600
&:before
margin-right: 6px
vertical-align: middle
// Breadcrumbs
#main_content_header
.preview-website i
vertical-align: bottom
.breadcrumbs
color: #333
display: inline-block
font-size: 24px
.button
margin-left: 12px
vertical-align: middle
a
color: #999
&:hover
color: #999
.divider
background: url(asset-path('spina/divider.svg'))
color: #999
display: inline-block
height: 17px
margin: 0 20px
width: 6px
// Well
.well
background: #fff
border: 1px solid #eee
border-radius: 3px
margin: 24px -20px
padding: 20px
hr.divider
clear: both
margin: 20px -20px
.table-container
margin: -20px -20px
.table
margin: 0
tr td:first-child, tr th:first-child
padding-left: 20px
tr td:last-child, tr th:last-child
padding-right: 20px
// General styles
h1, h2, h3, h4, h5, h6
font-weight: 400
margin: 0
&.page-header
border-bottom: 1px solid #eee
color: #333
margin: 40px 0 20px 0
padding-bottom: 8px
h1, h2
color: #333
font-size: 24px
h3
color: #333
ul
list-style: none
margin: 0
padding: 0
p
color: #333
font-size: 14px
line-height: 18px
a
color: $primary-color
text-decoration: none
&:hover
color: shade($primary-color, 40%)
label
color: #333
font-size: 11px
font-weight: 600
margin-right: 14px
.divider-container
margin: 0 -40px
hr.divider
background: #e9e9eb
border: none
height: 1px
margin: 20px 0
.pull-left
float: left
.pull-right
float: right
.clearfix:after
clear: both
content: " "
display: block
.spina-logo
bottom: 0px
opacity: .5
padding: 20px
position: fixed
right: 0px
transition: opacity .2s ease
&:hover
opacity: 1
img
display: block
.text-danger
color: $danger-color
.text-success
color: $success-color
.text-muted
color: #999
.text-center
text-align: center
.text-right
text-align: right
// Turbolinks
.turbolinks-progress-bar
background-color: $primary-color