[+] Helper form WIP
This commit is contained in:
Kevin Granger
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,16 +1,15 @@
|
||||
@import "_bootstrap.scss"
|
||||
@import "_font-awesome.scss"
|
||||
@import "_toggle-switch.scss"
|
||||
@import "bootstrap/variables"
|
||||
@import "bootstrap"
|
||||
@import "font-awesome"
|
||||
@import "toggle-switch"
|
||||
|
||||
html, body
|
||||
height: 100%
|
||||
background: #EEEEEE
|
||||
|
||||
body.fixed-top
|
||||
position: relative
|
||||
top: 56px
|
||||
margin-bottom: 50px
|
||||
font-family: 'Open Sans', sans-serif
|
||||
|
||||
#main
|
||||
position: relative
|
||||
@@ -21,13 +20,13 @@ body.fixed-top
|
||||
float: left
|
||||
width: 1280px
|
||||
min-height: 100%
|
||||
padding: 20px 20px 90px 20px
|
||||
padding: 10px 20px 90px
|
||||
margin: 0 0 0 240px
|
||||
border-left: 2px solid black
|
||||
background-color: white
|
||||
|
||||
.page-sidebar
|
||||
top: 65px
|
||||
top: 56px
|
||||
position: fixed
|
||||
width: 240px
|
||||
> ul
|
||||
@@ -119,7 +118,7 @@ body.fixed-top
|
||||
margin-bottom: 5px
|
||||
|
||||
#menu .maintab > a [class^="icon-"], #menu .maintab > a [class*=" icon-"]
|
||||
font-size: 18px
|
||||
font-size: 22px
|
||||
border-radius: 35px
|
||||
height: 30px
|
||||
width: 30px
|
||||
@@ -129,9 +128,9 @@ body.fixed-top
|
||||
line-height: 30px
|
||||
|
||||
label span.label-tooltip
|
||||
color: #0086CE
|
||||
color: $brand-primary
|
||||
text-decoration: none
|
||||
border-bottom: dashed 1px #647858
|
||||
border-bottom: dotted 1px $brand-primary
|
||||
|
||||
label.required:before
|
||||
content: '*'
|
||||
@@ -141,6 +140,9 @@ label.required:before
|
||||
//variables
|
||||
$icon-color: #7A0928
|
||||
|
||||
.icon-AdminDashboard
|
||||
@extend .icon-dashboard
|
||||
background-color: adjust-hue($icon-color, -20)
|
||||
.icon-AdminCatalog
|
||||
@extend .icon-book
|
||||
background-color: adjust-hue($icon-color, 20)
|
||||
@@ -175,7 +177,6 @@ $icon-color: #7A0928
|
||||
@extend .icon-bar-chart
|
||||
background-color: adjust-hue($icon-color, 220)
|
||||
|
||||
|
||||
.navbar-inner
|
||||
box-shadow: none!important
|
||||
.input-append
|
||||
@@ -188,10 +189,14 @@ $icon-color: #7A0928
|
||||
padding: 2px 5px !important
|
||||
font-size: 11px
|
||||
margin-right: 3px
|
||||
border-bottom: 3px solid darken($brand-primary,10%)
|
||||
position: relative
|
||||
&:hover
|
||||
color: #3D89CC
|
||||
border-color: #3D89CC
|
||||
color: $brand-primary
|
||||
border-color: $brand-primary
|
||||
background-color: white !important
|
||||
border-bottom: 1px solid darken($brand-primary,10%)
|
||||
top: 2px
|
||||
|
||||
[class^="process-icon-"], [class*=" process-icon-"]
|
||||
height: 32px
|
||||
@@ -202,7 +207,7 @@ $icon-color: #7A0928
|
||||
font-family: FontAwesome
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
font-size: 30px
|
||||
font-size: 25px
|
||||
line-height: 32px
|
||||
text-decoration: inherit
|
||||
-webkit-font-smoothing: antialiased
|
||||
@@ -253,36 +258,34 @@ $icon-color: #7A0928
|
||||
|
||||
.page-head
|
||||
position: relative
|
||||
padding: 5px 5px 0 20px
|
||||
min-height: 63px
|
||||
padding: 4px 5px 0 20px
|
||||
min-height: 65px
|
||||
margin-bottom: 20px
|
||||
background: #EEEEEE
|
||||
.page-title
|
||||
background: lighten($brand-primary,30%)
|
||||
border-bottom: 3px solid $brand-primary
|
||||
h2.page-title
|
||||
margin: 0
|
||||
float: left
|
||||
padding: 0
|
||||
font-size: 20px
|
||||
line-height: 55px
|
||||
color: #272822
|
||||
font-weight: 300
|
||||
line-height: 60px
|
||||
color: $brand-primary
|
||||
text-transform: uppercase
|
||||
font-family: 'Ubuntu', sans-serif
|
||||
|
||||
.btn-toolbar
|
||||
margin: 0
|
||||
.nav-tabs
|
||||
margin: 0
|
||||
.nav-tabs > li > a
|
||||
color: #333
|
||||
> .active > a, > .active > a:hover
|
||||
color: #3399ff
|
||||
background: #f5f5f5
|
||||
|
||||
.page-bar
|
||||
float: right
|
||||
padding: 0
|
||||
height: 68px
|
||||
|
||||
.btn-toolbar
|
||||
margin: 0
|
||||
.nav-tabs
|
||||
margin: 0
|
||||
.nav-tabs > li > a
|
||||
color: #333
|
||||
> .active > a, > .active > a:hover
|
||||
color: #3399ff
|
||||
background: #f5f5f5
|
||||
|
||||
/////////////////////// WIP DRAFT
|
||||
//form
|
||||
select.input-tiny,
|
||||
@@ -358,3 +361,7 @@ input[type="text"].filter, input[type="password"].filter, select.filter
|
||||
form .alert
|
||||
clear: both
|
||||
|
||||
#notifs_icon_wrapper i
|
||||
font-size: 1.5em
|
||||
color: white
|
||||
|
||||
|
||||
@@ -0,0 +1,429 @@
|
||||
// //
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
|
||||
// $gray-darker: lighten(#000, 13.5%) ; #222
|
||||
// $gray-dark: lighten(#000, 20%) ; #333
|
||||
// $gray: lighten(#000, 33.5%) ; #555
|
||||
// $gray-light: lighten(#000, 60%) ; #999
|
||||
// $gray-lighter: lighten(#000, 93.5%) ; #eee
|
||||
|
||||
// Brand colors
|
||||
// -------------------------
|
||||
|
||||
$brand-primary: #5D8FB1 ;
|
||||
// $brand-success: #5cb85c ;
|
||||
// $brand-warning: #f0ad4e ;
|
||||
// $brand-danger: #d9534f ;
|
||||
// $brand-info: #5bc0de ;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
|
||||
$body-bg: #eee ;
|
||||
// $text-color: $gray-dark ;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
|
||||
// $link-color: $brand-primary ;
|
||||
// $link-hover-color: darken($link-color, 15%) ;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
||||
$font-family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif ;
|
||||
// $font-family-serif: Georgia, "Times New Roman", Times, serif ;
|
||||
// $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace ;
|
||||
// $font-family-base: $font-family-sans-serif ;
|
||||
|
||||
$font-size-base: 12px ;
|
||||
// $font-size-large: ceil($font-size-base * 1.25) ; ~18px
|
||||
// $font-size-small: ceil($font-size-base * 0.85) ; ~12px
|
||||
// $font-size-mini: ceil($font-size-base * 0.75) ; ~11px
|
||||
|
||||
// $line-height-base: 1.428571429 ; 20/14
|
||||
// $line-height-computed: floor($font-size-base * $line-height-base) ; ~20px
|
||||
|
||||
// $headings-font-family: $font-family-base ;
|
||||
$headings-font-weight: 400 ;
|
||||
// $headings-line-height: 1.1 ;
|
||||
|
||||
|
||||
// Components
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 1.428 line-height (~20px to start)
|
||||
|
||||
// $padding-base-vertical: 8px ;
|
||||
// $padding-base-horizontal: 12px ;
|
||||
|
||||
// $padding-large-vertical: 14px ;
|
||||
// $padding-large-horizontal: 16px ;
|
||||
|
||||
// $padding-small-vertical: 5px ;
|
||||
// $padding-small-horizontal: 10px ;
|
||||
|
||||
// $border-radius-base: 4px ;
|
||||
// $border-radius-large: 6px ;
|
||||
// $border-radius-small: 3px ;
|
||||
|
||||
// $component-active-bg: $brand-primary ;
|
||||
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
|
||||
// $table-bg: transparent ; overall background-color
|
||||
// $table-bg-accent: #f9f9f9 ; for striping
|
||||
// $table-bg-hover: #f5f5f5 ; for hover
|
||||
|
||||
// $table-border-color: #ddd ; table and cell border
|
||||
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
|
||||
// $btn-default-color: #fff ;
|
||||
$btn-default-bg: #6E6E6E ;
|
||||
// $btn-default-border: $btn-default-bg ;
|
||||
|
||||
// $btn-primary-color: $btn-default-color ;
|
||||
// $btn-primary-bg: $brand-primary ;
|
||||
// $btn-primary-border: $btn-primary-bg ;
|
||||
|
||||
// $btn-success-color: $btn-default-color ;
|
||||
// $btn-success-bg: $brand-success ;
|
||||
// $btn-success-border: $btn-success-bg ;
|
||||
|
||||
// $btn-warning-color: $btn-default-color ;
|
||||
// $btn-warning-bg: $brand-warning ;
|
||||
// $btn-warning-border: $btn-warning-bg ;
|
||||
|
||||
// $btn-danger-color: $btn-default-color ;
|
||||
// $btn-danger-bg: $brand-danger ;
|
||||
// $btn-danger-border: $btn-danger-bg ;
|
||||
|
||||
// $btn-info-color: $btn-default-color ;
|
||||
// $btn-info-bg: $brand-info ;
|
||||
// $btn-info-border: $btn-info-bg ;
|
||||
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
|
||||
// $input-bg: #fff ;
|
||||
// $input-bg-disabled: $gray-lighter ;
|
||||
|
||||
// $input-border: #ccc ;
|
||||
// $input-border-radius: $border-radius-base ;
|
||||
|
||||
// $input-color-placeholder: $gray-light ;
|
||||
|
||||
// $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) ;
|
||||
// $input-height-large: (ceil($font-size-large * $line-height-base) + ($padding-large-vertical * 2) + 2) ;
|
||||
// $input-height-small: (ceil($font-size-small * $line-height-base) + ($padding-small-vertical * 2) + 2) ;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
|
||||
// $dropdown-bg: #fff ;
|
||||
// $dropdown-border: rgba(0,0,0,.15) ;
|
||||
// $dropdown-divider-top: #e5e5e5 ;
|
||||
// $dropdown-divider-bottom: #fff ;
|
||||
|
||||
// $dropdown-link-active-color: #fff ;
|
||||
// $dropdown-link-active-bg: $component-active-bg ;
|
||||
|
||||
// $dropdown-link-color: $gray-dark ;
|
||||
// $dropdown-link-hover-color: #fff ;
|
||||
// $dropdown-link-hover-bg: $dropdown-link-active-bg ;
|
||||
|
||||
|
||||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
// Number of columns in the grid system
|
||||
// $grid-columns: 12 ;
|
||||
// Padding, to be divided by two and applied to the left and right of all columns
|
||||
// $grid-gutter-width: 30px ;
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Z-index master list
|
||||
// -------------------------
|
||||
// Used for a bird's eye view of components dependent on the z-axis
|
||||
// Try to avoid customizing these :)
|
||||
|
||||
// $zindex-dropdown: 1000 ;
|
||||
// $zindex-popover: 1010 ;
|
||||
// $zindex-tooltip: 1030 ;
|
||||
// $zindex-navbar-fixed: 1030 ;
|
||||
// $zindex-modal-background: 1040 ;
|
||||
// $zindex-modal: 1050 ;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
|
||||
// Basics of a navbar
|
||||
// $navbar-height: 50px ;
|
||||
// $navbar-color: #777 ;
|
||||
// $navbar-bg: #eee ;
|
||||
// $navbar-padding: floor($grid-gutter-width / 2) ; ~15px
|
||||
|
||||
// Navbar links
|
||||
// $navbar-link-color: #777 ;
|
||||
// $navbar-link-hover-color: #333 ;
|
||||
// $navbar-link-hover-bg: transparent ;
|
||||
// $navbar-link-active-color: #555 ;
|
||||
// $navbar-link-active-bg: darken($navbar-bg, 10%) ;
|
||||
// $navbar-link-disabled-color: #ccc ;
|
||||
// $navbar-link-disabled-bg: transparent ;
|
||||
|
||||
// Navbar brand label
|
||||
// $navbar-brand-color: $navbar-link-color ;
|
||||
// $navbar-brand-hover-color: darken($navbar-link-color, 10%) ;
|
||||
// $navbar-brand-hover-bg: transparent ;
|
||||
|
||||
// Inverted navbar
|
||||
// $navbar-inverse-color: $gray-light ;
|
||||
// $navbar-inverse-bg: #222 ;
|
||||
|
||||
// Inverted navbar links
|
||||
// $navbar-inverse-link-color: $gray-light ;
|
||||
// $navbar-inverse-link-hover-color: #fff ;
|
||||
// $navbar-inverse-link-hover-bg: transparent ;
|
||||
// $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color ;
|
||||
// $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) ;
|
||||
// $navbar-inverse-link-disabled-color: #444 ;
|
||||
// $navbar-inverse-link-disabled-bg: transparent ;
|
||||
|
||||
// Inverted navbar brand label
|
||||
// $navbar-inverse-brand-color: $navbar-inverse-link-color ;
|
||||
// $navbar-inverse-brand-hover-color: #fff ;
|
||||
// $navbar-inverse-brand-hover-bg: transparent ;
|
||||
|
||||
// Inverted navbar search
|
||||
// Normal navbar needs no special styles or vars
|
||||
// $navbar-inverse-search-bg: lighten($navbar-inverse-bg, 25%) ;
|
||||
// $navbar-inverse-search-bg-focus: #fff ;
|
||||
// $navbar-inverse-search-border: $navbar-inverse-bg ;
|
||||
// $navbar-inverse-search-placeholder-color: #ccc ;
|
||||
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
|
||||
// $pagination-bg: #fff ;
|
||||
// $pagination-border: #ddd ;
|
||||
// $pagination-active-bg: #f5f5f5 ;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
// -------------------------
|
||||
|
||||
// $jumbotron-bg: $gray-lighter ;
|
||||
// $jumbotron-heading-color: inherit ;
|
||||
// $jumbotron-lead-color: inherit ;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
|
||||
// $state-warning-text: #c09853 ;
|
||||
// $state-warning-bg: #fcf8e3 ;
|
||||
// $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 3%) ;
|
||||
|
||||
// $state-danger-text: #b94a48 ;
|
||||
// $state-danger-bg: #f2dede ;
|
||||
// $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 3%) ;
|
||||
|
||||
// $state-success-text: #468847 ;
|
||||
// $state-success-bg: #dff0d8 ;
|
||||
// $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) ;
|
||||
|
||||
// $state-info-text: #3a87ad ;
|
||||
// $state-info-bg: #d9edf7 ;
|
||||
// $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) ;
|
||||
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
// $tooltip-color: #fff ;
|
||||
// $tooltip-bg: rgba(0,0,0,.9) ;
|
||||
// $tooltip-arrow-width: 5px ;
|
||||
// $tooltip-arrow-color: $tooltip-bg ;
|
||||
|
||||
// $popover-bg: #fff ;
|
||||
// $popover-arrow-width: 10px ;
|
||||
// $popover-arrow-color: #fff ;
|
||||
// $popover-title-bg: darken($popover-bg, 3%) ;
|
||||
|
||||
// Special enhancement for popovers
|
||||
// $popover-arrow-outer-width: ($popover-arrow-width + 1) ;
|
||||
// $popover-arrow-outer-color: rgba(0,0,0,.25) ;
|
||||
|
||||
|
||||
// Labels
|
||||
// -------------------------
|
||||
// $label-success-bg: $brand-success ;
|
||||
// $label-info-bg: $brand-info ;
|
||||
// $label-warning-bg: $brand-warning ;
|
||||
// $label-danger-bg: $brand-danger ;
|
||||
|
||||
|
||||
// Modals
|
||||
// -------------------------
|
||||
// $modal-inner-padding: 20px ;
|
||||
|
||||
// $modal-title-padding: 15px ;
|
||||
// $modal-title-line-height: $line-height-base ;
|
||||
|
||||
// Alerts
|
||||
// -------------------------
|
||||
// $alert-bg: $state-warning-bg ;
|
||||
// $alert-text: $state-warning-text ;
|
||||
// $alert-border: $state-warning-border ;
|
||||
// $alert-border-radius: $border-radius-base ;
|
||||
|
||||
// $alert-success-bg: $state-success-bg ;
|
||||
// $alert-success-text: $state-success-text ;
|
||||
// $alert-success-border: $state-success-border ;
|
||||
|
||||
// $alert-danger-bg: $state-danger-bg ;
|
||||
// $alert-danger-text: $state-danger-text ;
|
||||
// $alert-danger-border: $state-danger-border ;
|
||||
|
||||
// $alert-info-bg: $state-info-bg ;
|
||||
// $alert-info-text: $state-info-text ;
|
||||
// $alert-info-border: $state-info-border ;
|
||||
|
||||
|
||||
// Progress bars
|
||||
// -------------------------
|
||||
// $progress-bg: #f5f5f5 ;
|
||||
// $progress-bar-bg: $brand-primary ;
|
||||
// $progress-bar-success-bg: $brand-success ;
|
||||
// $progress-bar-warning-bg: $brand-warning ;
|
||||
// $progress-bar-danger-bg: $brand-danger ;
|
||||
// $progress-bar-info-bg: $brand-info ;
|
||||
|
||||
|
||||
// List group
|
||||
// -------------------------
|
||||
// $list-group-bg: #fff ;
|
||||
// $list-group-border: #ddd ;
|
||||
// $list-group-border-radius: $border-radius-base ;
|
||||
|
||||
// $list-group-hover-bg: #f5f5f5 ;
|
||||
// $list-group-active-color: #fff ;
|
||||
// $list-group-active-bg: $component-active-bg ;
|
||||
// $list-group-active-border: $list-group-active-bg ;
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
// $panel-bg: #fff ;
|
||||
// $panel-border: #ddd ;
|
||||
// $panel-border-radius: $border-radius-base ;
|
||||
// $panel-heading-bg: #f5f5f5 ;
|
||||
// $panel-footer-bg: #f5f5f5 ;
|
||||
|
||||
// $panel-primary-text: #fff ;
|
||||
// $panel-primary-border: $brand-primary ;
|
||||
// $panel-primary-heading-bg: $brand-primary ;
|
||||
|
||||
// $panel-success-text: $state-success-text ;
|
||||
// $panel-success-border: $state-success-border ;
|
||||
// $panel-success-heading-bg: $state-success-bg ;
|
||||
|
||||
// $panel-warning-text: $state-warning-text ;
|
||||
// $panel-warning-border: $state-warning-border ;
|
||||
// $panel-warning-heading-bg: $state-warning-bg ;
|
||||
|
||||
// $panel-danger-text: $state-danger-text ;
|
||||
// $panel-danger-border: $state-danger-border ;
|
||||
// $panel-danger-heading-bg: $state-danger-bg ;
|
||||
|
||||
// $panel-info-text: $state-info-text ;
|
||||
// $panel-info-border: $state-info-border ;
|
||||
// $panel-info-heading-bg: $state-info-bg ;
|
||||
|
||||
|
||||
// Thumbnails
|
||||
// -------------------------
|
||||
// $thumbnail-caption-color: $text-color ;
|
||||
// $thumbnail-bg: $body-bg ;
|
||||
// $thumbnail-border: #ddd ;
|
||||
// $thumbnail-border-radius: $border-radius-base ;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
// $well-bg: #f5f5f5 ;
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// -------------------------
|
||||
|
||||
// Hr border color
|
||||
// $hr-border: $gray-lighter ;
|
||||
|
||||
// Horizontal forms & lists
|
||||
// $component-offset-horizontal: 180px ;
|
||||
|
||||
|
||||
// Media queries breakpoints
|
||||
// --------------------------------------------------
|
||||
|
||||
// Tiny screen / phone
|
||||
// $screen-tiny: 480px ;
|
||||
// $screen-phone: $screen-tiny ;
|
||||
|
||||
// Small screen / tablet
|
||||
// $screen-small: 768px ;
|
||||
// $screen-tablet: $screen-small ;
|
||||
|
||||
// Medium screen / desktop
|
||||
// $screen-medium: 992px ;
|
||||
// $screen-desktop: $screen-medium ;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
// $screen-small-max: ($screen-medium - 1) ;
|
||||
// $screen-tablet-max: $screen-small-max ;
|
||||
|
||||
// Large screen / wide desktop
|
||||
// $screen-large: 1200px ;
|
||||
// $screen-large-desktop: $screen-large ;
|
||||
|
||||
|
||||
// Container sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Small screen / tablet
|
||||
// $container-tablet: 728px ;
|
||||
|
||||
// Medium screen / desktop
|
||||
// $container-desktop: 940px ;
|
||||
|
||||
// Large screen / wide desktop
|
||||
// $container-large-desktop: 1170px ;
|
||||
|
||||
|
||||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
// Point at which the navbar stops collapsing
|
||||
// $grid-float-breakpoint: $screen-tablet ;
|
||||
Reference in New Issue
Block a user