@csdsesystems/central-styles 1.0.3 → 1.0.4

package/sass/base/_base.scss

@@ -1,931 +0,0 @@
-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;
-}