Introducing apps_base.sass, contains basic layout/generic classes

src/styles/_apps_base.sass

@@ -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

src/styles/_config.sass

@@ -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

src/styles/_project.sass

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

src/styles/_utils.sass

@@ -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: thin solid transparent
-	border-radius: 3px
+	border-radius: 0
-	border-color: $color-background-dark
+	border-bottom-color: $color-background-dark
-	background-color: $color-background-light
+	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
+		outline: 0
-		box-shadow: none
+		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
+		name: wiggle
-		duration: .25s
+		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

src/styles/base.sass

@@ -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

src/styles/main.sass

@@ -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 */