archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Introducing apps_base.sass, contains basic layout/generic classes

Browse Source
This commit is contained in:
Pablo Vazquez 2016-11-09 22:36:55 +01:00
parent dc70705b1e
commit ad3f2c0119
6 changed files with 379 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

322
src/styles/_apps_base.sass Normal file
View File

@ -0,0 +1,322 @@
::-webkit-scrollbar
width: 5px
height: 5px
::-webkit-scrollbar-track
background-color: $color-background
::-webkit-scrollbar-thumb
background-color: $color-text-dark-hint
$splitter-width: 5px
// Main Containers
#app-main
display: flex
align-items: stretch
position: relative
height: 100%
+media-xs
display: block
height: auto
.flyout.notifications
left: $sidebar-width + 5
top: initial
bottom: 40px
box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
#col_sidebar
position: relative
width: $sidebar-width
min-width: $sidebar-width
#col_left, #col_main, #col_right
position: relative
flex: 0 0 auto
min-width: 150px
height: 100%
min-height: 100%
position: relative
+media-xs
height: auto
min-height: auto
margin: 0 auto
padding-left: $sidebar-width !important
#col_main
background-color: $color-background
width: 50% // gets overriden by JS, dragging the col-splitter
+media-xs
width: 100%
#col_right
flex: 1 1 auto
background-color: $color-background-light
.col-splitter
flex: 0 0 auto
width: $splitter-width
background-color: $color-background
border-left: thin solid $color-background-light
border-right: 2px solid $color-background-dark
min-height: 200px
cursor: col-resize
top: 0
bottom: 0
z-index: 1
+media-xs
display: none
visibility: hidden
.col_header
position: relative
z-index: 1
display: flex
align-items: center
width: 100%
min-height: 50px
background-color: white
padding: 10px 15px
font-size: 1.2em
border-bottom: thin solid $color-background
box-shadow: 0 0 15px rgba(black, .2)
&.scrolled
box-shadow: 0 -2px 20px rgba(black, .2)
.header_text::first-letter
text-transform: capitalize
.col-list-item
display: flex
align-items: center
width: 100%
background-color: white
border-bottom: thin solid $color-background
&.empty
padding: 15px
justify-content: center
span
cursor: default
text-align: center
color: $color-text-dark-secondary
i
margin-right: 5px
display: inline-block
transform-origin: 50% 60%
&:hover span i
+animation-wiggle
/* Status Bar */
#status-bar
color: $color-text-dark-secondary
margin-left: auto
text-align: right
/* Sidebar Navigation */
nav.sidebar
position: fixed
z-index: 1
left: 0
width: $sidebar-width
height: 100%
background-color: $color-background-nav-dark
display: flex
flex-direction: column
.dropdown
min-width: $sidebar-width
.dropdown-menu
top: initial
bottom: 3px
left: $sidebar-width
box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
min-width: 200px
li a
justify-content: flex-start
ul
width: 100%
margin: 0
padding: 0
&.bottom
margin-top: auto
li
display: block
a.navbar-item, button
display: flex
color: $color-text-light-hint
font-size: 1.5em
align-items: center
justify-content: center
padding: 10px 0
background: transparent
border: none
width: 100%
text-decoration: none
&:hover
color: $color-text-light-primary
&:active
outline: none
&.cloud
i
position: relative
left: -4px
a.dropdown-toggle
padding: 0
margin: 0
width: $sidebar-width
max-width: $sidebar-width
.special
top: 8px
left: 27px
#notifications-toggle
&.active .flyout-hat
display: none
#notifications-count
right: 5px
span
top: 1px
/* Tables */
.table
display: table
width: 100%
position: relative
margin-bottom: initial // overrides BS
.table-row
display: table-row
position: relative
.table-head
display: table-header-group
.table-cell
font-size: .9em
color: $color-text-dark-secondary
.table-body
display: table-row-group
.table-cell
display: table-cell
border-bottom: thin solid $color-background-dark
vertical-align: middle
span.hint
color: $color-text-dark-hint
.table-cell-spacer
background-color: $color-background-light
width: 6px
min-width: 4px
height: 100%
display: table-cell
border: 2px solid $color-background
border-top: none
border-bottom: none
cursor: e-resize
.table.table-hover
.table-row:hover
background-color: $color-background-light
/* Generic Statuses */
.processing
+stripes(rgba(black, .1), rgba(white, .1), -45deg, 25px)
+stripes-animate
animation-duration: 2s
.flash-on
background-color: lighten($color-success, 40%) !important
border-color: lighten($color-success, 40%) !important
color: darken($color-success, 10%) !important
text-shadow: 1px 1px 0 white
transition: all .1s ease-in
img
transition: all .1s ease-in
opacity: .8
&:before
background-color: lighten($color-success, 40%) !important
.flash-off
transition: all 1s ease-out
img
transition: all 1s ease-out
.btn:active
box-shadow: none
.bg-status
@include status-color-property(background-color, '', 'dark')
.fg-status
@include status-color-property(color, '', 'dark')
/* Modal Bootstrap overrides */
.modal-dialog
margin-top: 0
.modal-content
border: none
box-shadow: 0 0 25px rgba(black, .25)
background-color: $color-background-light
.modal-header
background-color: white
padding: 10px 10px 10px 15px
.title
font-size: 1.2em
.close
float: right
background: transparent
border: none
color: $color-text-dark-hint
&:hover
color: $color-primary
.modal-backdrop
background-color: transparent
.modal-help-panel
overflow: hidden
border-radius: 3px
width: 30%
background-color: white
box-shadow: 1px 2px 10px rgba(black, .1)
.title
display: block
padding: 10px
color: $color-text-dark-primary
.collapsing
transition: all 150ms ease-in-out
opacity: 0
.collapse
transition: all 250ms ease-in-out
&.in
opacity: 1

1
src/styles/_config.sass
View File

@ -71,6 +71,7 @@ $screen-xs-max: $screen-sm-min - 1
$screen-sm-max: $screen-md-min - 1
$screen-md-max: $screen-lg-min - 1
$sidebar-width: 50px
/* Project specifics */
$project_nav-width: 240px

1
src/styles/_project.sass
View File

@ -236,7 +236,6 @@
span#status-bar
position: absolute
// left: $project_nav-width + $project-sidebar-width
left: 0
top: 10px
min-width: 33%

46
src/styles/_utils.sass
View File

@ -123,20 +123,31 @@
transform: translate(-50%, -50%)
=input-generic
color: $color-text-dark
padding: 5px 5px 5px 0
box-shadow: none
font-family: $font-body
border-radius: 3px
border-color: $color-background-dark
background-color: $color-background-light
border: thin solid transparent
border-radius: 0
border-bottom-color: $color-background-dark
background-color: transparent
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
&:hover
border-bottom-color: $color-text-dark-secondary
&:focus
border-color: $color-info
box-shadow: none
outline: 0
border: thin solid transparent
border-bottom-color: $color-primary
box-shadow: 0 1px 0 0 $color-primary
option
background-color: white
=label-generic
color: $color-text-dark-primary
font-weight: normal
font-size: .9em
margin: 0
@mixin badge($mixin-color, $roundness)
padding:
@ -210,18 +221,15 @@
@mixin badge($mixin-color, $roundness)
=anim-grow-bounce
=animation-wiggle
animation:
name: grow-bounce
duration: .25s
name: wiggle
duration: 1s
delay: 0s
fill-mode: forwards
iteration-count: 1
iteration-count: infinite
timing-function: linear
.anim-grow-bounce
+anim-grow-bounce
.spin
position: relative
+spin
@ -243,6 +251,16 @@
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

27
src/styles/base.sass
View File

@ -2,9 +2,9 @@
@import _config
@import _utils
@import _apps_base
@import _notifications
@import _comments
@import plugins/js_perfectscrollbar
html
@ -252,8 +252,6 @@ header.navbar-header
border-width: 0
display: flex
align-items: center
width: 100%
background-color: $color-background-nav
+media-lg
@ -747,16 +745,37 @@ footer
&.right .arrow:after
border-right-color: lighten($color-background-nav, 5%)
input, input.form-control
/* Inputs */
input, input.form-control,
textarea, textarea.form-control,
select, select.form-control
+input-generic
label, label.control-label
+label-generic
select, select.form-control
border-top-left-radius: 3px
border-top-right-radius: 3px
background-color: $color-background-light
option
background-color: white
input.fileupload
background-color: transparent
display: block
margin-top: 10px
textarea
resize: vertical
.input-group-flex
display: flex
.input-group-separator
margin: 10px 0
border-top: thin solid $color-background
/* File Upload forms */
.fieldlist

1
src/styles/main.sass
View File

@ -19,5 +19,6 @@
@import plugins/_jstree
@import plugins/_js_select2
@import plugins/js_perfectscrollbar
/* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */