@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/base/_base.scss

@@ -0,0 +1,931 @@
+html {
+    height: 100%;
+}
+
+body {
+    font-family: $font-stack;
+    background-color: $navyblue;
+    font-size: $font-std;
+    color: $text-color;
+    -webkit-font-smoothing: antialiased;
+    height: 100%;
+    overflow: auto;
+}
+
+/* Design repo */
+
+body > div#wrapper,
+body > div#wrapper > central-layout {
+    background-color: #292c36;
+    height: 100%;
+    width: 100%;
+    display: table;
+}
+
+body > div#wrapper nav.navbar-default {
+    display: table-cell;
+    vertical-align: top;
+    height: 100%;
+    background-color: $navyblue;
+    position: fixed;    
+    overflow-y: scroll;
+}
+
+body > div#wrapper nav.navbar-default::-webkit-scrollbar {
+        display: none;
+        width: 0px;  
+        background: $navyblue;  
+}    
+
+
+body > div#wrapper > central-layout > sidemenu {
+    display: table;
+    // Weird Issue in latest version of chrome MacOS 76.0.3809.132
+    // height: 100%;    
+}
+
+
+body > div#wrapper > nav.navbar-static-side {
+    left: 0;
+    background-color: $navyblue;
+}
+
+@media (max-width: 768px) {
+    
+    nav.navbar-static-side {
+        display: none;
+        position: absolute;
+        width: 70px;
+    }
+
+    body > div#wrapper nav.navbar-default {
+        display: none;
+    }
+
+    body > div#wrapper > central-layout > sidemenu {
+        display: none;
+    }
+
+    body.mini-navbar > div#wrapper > central-layout > sidemenu,
+    body.mini-navbar > div#wrapper > central-layout > sidemenu > nav.navbar-default {
+        display: table-cell !important;
+        vertical-align: top;
+    }
+
+}
+
+//body > div#wrapper > div#page-wrapper
+body > div#wrapper div#page-wrapper {
+    display: table-cell;
+    vertical-align: top;
+    height: 100%;
+    margin: 0px auto;
+    padding-left: 230px;
+}
+
+//body.mini-navbar > div#wrapper > div#page-wrapper
+body.mini-navbar > div#wrapper div#page-wrapper {
+    padding-left: 85px;
+}
+
+@media (max-width: 768px) {
+    //body > div#wrapper div#page-wrapper
+    body > div#wrapper div#page-wrapper  {
+        padding-left: 15px; 
+    }
+}
+
+/* End of Design repo */
+
+
+
+a, .link {
+  cursor: pointer;
+  color: $accent-color;
+
+  &:hover, &:focus {
+      color: darken($accent-color, 15%);
+      transition: all 0.3s ease-in-out;    
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-normal {
+  font-weight: 400 !important;
+}
+
+hr.sm {
+    margin: 10px 0;
+}
+
+hr.xs {
+    margin: 4px 0;
+}
+
+/* BORDERS */
+
+.b-r {
+    border-right: 1px solid $border-color;
+}
+
+.b-t {
+    border-top: 1px solid $border-color;
+}
+
+.b-b {
+    border-bottom: 1px solid $border-color;
+}
+
+.b-l {
+    border-left: 1px solid $border-color;
+}
+
+.b-none {
+    border: none !important;
+    border-width: 0px !important;
+    border-style: none !important;
+}
+
+.b-t-none {
+    border-top: none !important;
+    border-top-width: 0px !important;
+    border-top-style: none !important;
+}
+
+.b-tb {
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+}
+
+.b-lr {
+    border-left: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+}
+
+/* Loader */
+
+.sk-spinner-three-bounce.sk-spinner {
+  margin: 15px auto;
+  }
+
+/* ibox */
+
+.ibox-content h1,
+.ibox-content h2,
+.ibox-content h3,
+.ibox-content h4,
+.ibox-content h5,
+.ibox-title h1,
+.ibox-title h2,
+.ibox-title h3,
+.ibox-title h4,
+.ibox-title h5 {
+  margin-top: 0;
+}
+
+/* TABLES */
+
+.table {
+    margin-bottom: 5px;
+}
+
+.table > thead > tr > th {
+  border-bottom: 0;
+}
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+    vertical-align: middle;
+}
+
+.nav-tabs > li > a {
+  padding: 10px 12px;
+}
+
+.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
+  background-color: #e6e6e6;
+  color: $text-color;
+}
+
+.ui-tab .tab-content {
+  padding: 20px 0px;
+}
+
+/* DROPDOWNS */
+
+.dropdown-menu {
+    box-shadow: 0 1px 6px rgba(86,96,117,0.5);
+    display: none;
+    float: left;
+    font-size: $font-std;
+    list-style: none outside none;
+    padding: 0;
+    position: absolute;
+    text-shadow: none;
+    top: 100%;
+    z-index: 1000;
+    margin-top: 5px;
+    height: auto;
+    max-height: 359px;
+    overflow-x: hidden;
+    border-radius: 2px;
+
+    li > a {
+        border-radius: 2px;
+        color: inherit;
+        line-height: 20px;
+        margin: 0;
+        font-weight: normal;
+        padding: 10px;
+
+        &:hover {
+            background-color: $lightest-grey;
+            color: $text-color;
+        }
+
+        .font-bold {
+            font-weight: 500;
+        }
+    }
+
+}
+
+.agile-list.bg-change .dropdown-menu li.divider {
+    background-color: #e5e5e5 !important;
+    height: 2px;
+}
+
+.radio-list {
+    list-style: none outside none;
+    padding: 0px;
+
+    li {
+        list-style: none outside none;
+        margin: 10px 0 10px 0;
+    }
+}
+
+.open > .dropdown-menu-right {
+    left: auto;
+    right: 0;
+}
+
+.dropdown-menu .divider {
+    margin: 0;
+}
+
+
+/* GLOBAL  */
+
+#page-wrapper {
+    height: 100%;
+    //overflow: scroll;
+}
+
+.no-padding-left {
+  padding-left: 0 !important;
+}
+
+.no-padding-right {
+  padding-right: 0 !important;
+}
+
+.instruction {
+    font-size: 90%;
+    color: darken($light-grey, 21%);
+    line-height: 16px;
+    margin-bottom: 5px;
+}
+
+.p-lh-m {
+    line-height: 1.75em !important;
+}
+
+
+.disabled {
+    opacity: 0.45;
+
+    i {
+        opacity: 0.45;
+    }
+}
+
+span.disabled {
+    cursor: default;
+}
+
+.full-width-container {
+    padding: 20px;
+    margin-left: -15px;
+    margin-right: -15px;
+    background-color: #E4E4E4;
+}
+
+.col-centered {
+    float: none;
+    margin: 0 auto;
+}
+
+.wrapper-content {
+    padding: 15px 10px 40px;
+}
+
+
+
+#my-courses-filters {
+    .nav > li {
+        display: block; 
+        width: 100%;
+    }
+}
+
+@media (min-width: 373px) {
+    #my-courses-filters {
+        .nav > li {
+            display: inline-block; 
+            width: auto;
+        }
+    }   
+}
+
+@media (max-width: 460px) {
+    #my-courses-filters {
+        .nav > li > a {
+            padding: 14px 20px 15px 20px;
+        }
+    }
+}
+
+@media (max-width: 992px) {
+    .wrapper-content {
+        padding: 15px 0px 40px 0px;
+    }
+
+    /* 
+    #my-courses-filters-wrapper .wrapper-content {
+        padding-bottom: 0px;
+    }    
+    */
+
+    .my-courses-filters-wrapper {
+        background-color: #FFF;
+    }
+
+    #my-courses-filters {
+
+        .nav-tabs {
+            padding-left: 10px;
+        }
+
+        .nav-tabs a {
+            border-radius: 4px;
+            margin-bottom: 20px;
+            background-color: #3a4e78;
+            color: #FFF;
+            margin-right: 10px;
+        }
+
+        .tabs-container .nav-tabs > li a {
+            padding-bottom: 17px;
+        }
+
+        .tabs-container .nav-tabs > li.active a {
+            background-color: #f3f3f4 !important;
+            color: #3a4e78 !important;
+            border: 1px solid #f3f3f4;
+        }
+    }
+
+}
+
+
+.wrapper-hr {
+    border-color: $lighter-grey;
+    margin-bottom: 20px;
+    margin-top: 0;
+}
+
+.well {
+    margin-bottom: 0;
+}
+
+.validation-error {
+    color: $red;
+    font-size: 12px;
+    padding: 5px 0 0 0;
+}
+
+.fw-img {  // Full width image
+    width: 100%;
+}
+
+.nobr { white-space: nowrap; }
+
+.page-heading {
+    position: relative;
+    padding: 0px 0px 15px 0px;
+    z-index: 101;
+}
+
+/* BACKGROUNDS */
+
+.navy-bg {
+    background-color: $accent-color !important;
+    color: #ffffff !important;
+
+    a {
+        color: #ffffff;
+    }
+}
+
+.light-navy-bg {
+    background-color: #d8e0f1 !important;
+}
+
+.navy-lighter-grey-bg {    
+    color: $text-color;
+    @include background-with-two-colors($navy, $lighter-grey, 18%, "images/pattern_centres.png");     
+
+    h1 { color: $navy; } 
+}
+
+.yellow-bg {
+    background-color: $mustard;
+    color: #ffffff;
+
+    a {
+        color: #ffffff;
+    }
+}
+
+.red-bg {
+    background-color: $red !important;
+    color: #ffffff;
+
+    a {
+        color: #ffffff;
+    }
+}
+
+.red-inverted-bg {
+    background-color: lighten($red, 40%);
+    color: $red;
+}
+
+.grey-bg {
+    background-color: $grey;
+    color: #ffffff;
+
+    a {
+        color: #ffffff;
+    }
+}
+
+/* Deprecated
+.gray-bg {
+    background: $gray;
+}
+*/
+
+.light-grey-bg {
+    background: $light-grey;
+}
+
+.lighter-grey-bg {
+    background: $lighter-grey;
+}
+
+.lightest-grey-bg {
+    background: $lightest-grey;
+}
+
+.ultra-light-grey-bg {
+    background: $ultra-light-grey;
+}
+
+.info-bg {
+    background-color: $info;
+    color: #ffffff;
+}
+
+.brown-bg {
+    background-color: #795548;
+    color: #FFFFFF;
+}
+
+.green-bg {
+    background-color: $green;
+    color: #ffffff;
+}
+
+.neongreen-bg {
+    background-color: #1ab394;
+    color: #FFF;
+}
+
+.lightgreen-bg {
+    background-color: lighten($green, 57%);
+    color: $green;
+}
+
+.orange-bg {
+    background-color: $orange !important;
+    color: #ffffff !important;
+
+    a {
+        color: #ffffff;
+    }
+}
+
+.orange-lighter-grey-bg {    
+    color: $text-color;
+    @include background-with-two-colors($orange, $lighter-grey, 18%, "images/pattern_educ.png");      
+    h1 { color: $orange; }
+}
+
+.orangepeel-bg {
+    background-color: $orangepeel;
+    color: #FFFFFF;
+}
+
+.orangepeel-bg-important {
+    background-color: $orangepeel !important;
+    color: #FFFFFF;
+}
+
+.orangepeel-lighter-grey-bg {    
+    color: $text-color;
+    @include background-with-two-colors($orangepeel, $lighter-grey, 18%, "images/pattern_educ.png");     
+
+    h1 { color: $orangepeel; } 
+}
+
+.pink-bg {
+    background-color: $pink;
+    color: #FFFFFF;
+}
+
+.pink-lighter-grey-bg {    
+    color: $text-color;
+    @include background-with-two-colors($pink, $lighter-grey, 18%, "images/pattern_educ.png");      
+
+    h1 { color: $pink; }
+}
+
+.purple-bg {
+    background-color: $purple;
+    color: #FFFFFF;
+}
+
+.purple-bg-important {
+    background-color: $purple !important;
+    color: #FFFFFF;
+}
+
+.teal-bg {
+    background-color: $teal;
+    color: #FFFFFF;
+}
+
+.teal-bg-important {
+    background-color: $teal !important;
+    color: #FFFFFF;
+}
+
+.teal-lighter-grey-bg {    
+    color: $text-color;
+    @include background-with-two-colors($teal, $lighter-grey, 18%, "images/pattern_educ.png");      
+
+    h1 { color: $teal; }
+}
+
+.deepblue-bg {
+    background-color: $deep-blue;
+    color: #FFFFFF;
+}
+
+/* PANELS */
+
+.panel-info {
+    border-color: $info;
+}
+
+.panel-info > .panel-heading {
+    background-color: $info;
+    border-color: $info;
+}
+
+
+/* MARGINS & PADDINGS */
+
+.p-xxs {
+    padding: 5px !important;
+}
+
+.p-xs {
+    padding: 10px !important;
+}
+
+.p-sm {
+    padding: 15px !important;
+}
+
+.p-mlr-smtb {
+    padding: 15px 20px !important;
+}
+
+.p-xstb-mlr {
+    padding: 10px 20px !important;
+}
+
+.p-m {
+    padding: 20px !important;
+}
+
+.p-md {
+    padding: 25px !important;
+}
+
+.p-lg {
+    padding: 30px !important;
+}
+
+.p-xl {
+    padding: 40px !important;
+}
+
+.p-none {
+    padding: 0px !important;
+}
+
+/* Top padding */
+.p-t-none {
+    padding-top: 0px !important;
+}
+.p-t-xxs {
+    padding-top: 5px !important;
+}
+.p-t-xs {
+    padding-top: 10px !important;
+}
+.p-t-sm {
+    padding-top: 15px !important;
+}
+.p-t-m {
+    padding-top: 20px !important;
+}
+
+/* Left padding */
+.p-l-none {
+    padding-left: 0px !important;
+}
+.p-l-xxs {
+    padding-left: 5px !important;
+}
+.p-l-xs {
+    padding-left: 10px !important;
+}
+.p-l-m {
+  padding-left: 20px !important;
+}
+
+/* Bottom padding */
+.p-b-none {
+    padding-bottom: 0px !important;
+}
+.p-b-xxs {
+    padding-bottom: 5px !important;
+}
+.p-b-xs {
+    padding-bottom: 10px !important;
+}
+.p-b-sm {
+    padding-bottom: 15px !important;
+}
+.p-b-m {
+    padding-bottom: 20px !important;
+}
+.p-b-lg {
+    padding-bottom: 25px !important;
+}
+
+/* Right padding */
+.p-r-none {
+    padding-right: 0px !important;
+}
+
+
+/* Combo padding */
+.p-tb-none {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
+
+/* Top margin */
+.m-t-nxxs {
+    margin-top: -5px !important;
+}
+.m-t-nxsm {
+    margin-top: -15px !important;
+}
+
+.m-t-none {
+    margin-top: 0px !important;
+}
+
+.m-t-one {
+    margin-top: 1px !important;
+}
+
+.m-t-xxs {
+    margin-top: 5px !important;
+}
+
+.m-t-xs {
+    margin-top: 10px !important;
+}
+
+.m-t-sm {
+    margin-top: 15px !important;
+}
+
+.m-t-m {
+    margin-top: 20px !important;
+}
+
+.m-t-lg {
+    margin-top: 25px !important;
+}
+
+/* Bottom margin */
+.m-b-nxlg {
+    margin-bottom: -30px !important;
+}
+
+.m-b-none {
+    margin-bottom: 0px !important;
+}
+
+.m-b-xxs {
+    margin-bottom: 4px !important;
+}
+
+.m-b-xs {
+    margin-bottom: 10px !important;
+}
+
+.m-b-sm {
+    margin-bottom: 15px !important;
+}
+
+.m-b-md {
+    margin-bottom: 20px !important;
+}
+
+.m-b-lg {
+    margin-bottom: 25px !important;
+}
+
+.m-b-xlg {
+    margin-bottom: 30px !important;
+}
+
+.m-b-xxlg {
+    margin-bottom: 40px !important;
+}
+
+
+/* Right margin */
+.m-r-none {
+    margin-right: 0px !important;
+}
+
+.m-r-xxs {
+    margin-right: 5px !important;
+}
+
+.m-r-xs {
+    margin-right: 10px !important;
+}
+
+.m-r-sm {
+    margin-right: 15px !important;
+}
+
+.m-r-m {
+    margin-right: 20px !important;
+}
+
+/* Left margin */
+.m-l-none {
+    margin-left: 0px !important;
+}
+
+.m-l-xxs {
+    margin-left: 5px !important;
+}
+
+.m-l-xs {
+    margin-left: 10px !important;
+}
+
+.m-l-sm {
+    margin-left: 15px !important;
+}
+
+.m-l-m {
+    margin-left: 20px !important;
+}
+
+.m-l-lg {
+    margin-left: 25px !important;
+}
+
+.m-none {
+    margin: 0 !important;
+}
+
+/* Page loader custom style */
+.pace .pace-progress {
+    background: $accent-color;
+}
+
+
+/* Media Query related */
+
+.show-on-mobile {
+  display: none;
+}
+
+/* Vertical align */
+
+.vertical-align {
+    font-size: 0;
+
+    > [class*="col"] {
+        display: inline-block;
+        vertical-align: middle;
+        float: none;
+        font-size: $font-std;
+    }
+}
+
+
+
+.no-gutter > [class*='col-'] {
+    padding-right:0;
+    padding-left:0;
+}
+
+
+.modal-content {
+    border: 0px !important;
+}
+
+
+
+
+.caret {
+    display: none;
+
+    .profile-dropdown & {
+        display: inline-block;
+        margin-top: -10px;
+    }
+
+    c-initial-circle & {
+        margin-top: 0px;
+    }
+
+    a &,
+    button & {
+        display: inline-block;
+    }
+}
+
+.transparent {
+    background: transparent !important;
+}
+
+
+
+
+.overflow-auto {
+    overflow: auto;
+}
+
+.block-clear {
+    display: block !important;
+    clear: both !important;
+}