@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/utilities/_mixins.scss

@@ -0,0 +1,607 @@
+/* Shadows */
+
+
+
+@mixin shadow-sm () {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-one-opacity),
+              0 -1px 1px -2px rgba(0, 0, 0, $shadow-two-opacity);
+
+    -web-kit-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-one-opacity),
+              0 -2px 1px -2px rgba(0, 0, 0, $shadow-two-opacity);
+}
+
+@mixin shadow-md () {
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-one-opacity),
+              0 -2px 3px -2px rgba(0, 0, 0, $shadow-two-opacity);
+
+    -web-kit-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-one-opacity),
+              0 -2px 3px -2px rgba(0, 0, 0, $shadow-two-opacity);
+}
+
+@mixin shadow-lg () {
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-one-opacity),
+              0 -2px 10px 0 rgba(0, 0, 0, $shadow-two-opacity);
+
+    -web-kit-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-one-opacity),
+              0 -2px 10px 0 rgba(0, 0, 0, $shadow-two-opacity);
+}
+
+@mixin no-shadow () {
+    box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
+    -web-kit-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
+}
+
+@mixin vertical-align () {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);  
+}
+
+
+@mixin button() {
+    font-weight: 500;
+    border-radius: 2px;
+
+    border: 0;
+    outline: 0 !important;
+    font-size: $font-std;
+
+    @include shadow-sm;    
+
+    .fa {
+        font-size: 14px;
+    }
+}
+
+@mixin button_primary() {
+    @include button;
+    padding-bottom: 6px;
+    background: $dark-accent-color;
+    color: white;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:active:focus,
+    &:active:hover,
+    &.active:hover,
+    &.active:focus,
+    &.active.focus {
+        @include transition(all .2s ease-in-out);                    
+        background: darken($dark-accent-color, 8%);
+        color: white;
+    }   
+}
+
+@mixin button_primary_reset () {
+    padding: 0px;
+    background: none;
+    color: $accent-color;
+    border: 0;
+    outline: 0 !important;
+}
+
+
+// Mixin for labels 
+@mixin label($color, $lightenPercentage:"") {
+    border: 1px solid $color;
+    background-color: $color;
+    color: white;
+
+    a {
+      color: $color;
+    }
+
+  @if $lightenPercentage {
+    &.outline {
+        background-color: lighten($color, $lightenPercentage);
+        color: $color;
+        border: 1px solid $color;
+    }      
+  }   
+
+}
+
+// Ellipsis for multi-line content
+@mixin ellipsis($font-size, $line-height, $lines-to-show) {
+    display: block; /* Fallback for non-webkit */
+    height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
+    overflow: hidden;
+    margin: 0 auto;
+    font-size: $font-size;
+    line-height: $line-height;
+    position: relative;
+
+    @supports (-webkit-line-clamp: 2) {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      display: -webkit-box !important;    
+      -webkit-line-clamp: $lines-to-show !important;
+      -webkit-box-orient: vertical !important;      
+    }
+
+    &:after {
+      @supports (-webkit-line-clamp: 2) {
+        display: none !important;
+      }
+
+    }    
+}
+
+
+// Ellipsis for auto-height content
+@mixin ellipsis-auto($font-size, $line-height, $lines-to-show) {
+    display: block; /* Fallback for non-webkit */
+    display: -webkit-box;
+    height: auto !important; /* Fallback for non-webkit */
+    margin: 0 auto;
+    font-size: $font-size;
+    line-height: $line-height;
+    -webkit-line-clamp: $lines-to-show;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin background-opacity($color, $opacity: 0.3) {
+    background: $color; /* The Fallback */
+    background: rgba($color, $opacity);
+}
+
+
+// Mixin for the base card
+@mixin card($color, $disabled:"", $completed:"") {
+    
+    border-radius: 5px;
+
+    $colorGenerated: $color;
+
+    @if $disabled == true {
+      $colorGenerated: lighten($color, 15%);
+    } 
+
+    @if $completed == true {
+      $colorGenerated: darken($color, 15%);
+    }     
+
+    .ibox-title {
+        background-color: $colorGenerated;
+        color: #FFF;  
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+
+        .sub-title {
+            color: darken($colorGenerated, 30%);
+
+            .my-courses & {
+                display: inline;
+                font-size: inherit;
+                height: inherit;
+                margin: 0;
+                color: #FFF;
+                opacity: .8;                         
+            }            
+        }    
+
+
+
+        @if $completed == true {
+          @include background-opacity($colorGenerated, 0.7);
+        }             
+    }
+
+    /*
+    .inverse {
+        background-color: #FFF;
+        color: $text-color;
+    }
+    */
+
+    & > .ibox-content:last-of-type {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+
+    .ibox-status {
+      background-color: rgba(darken($color, 10%), .4);
+      color: rgba(#FFF, 1);      
+    }           
+
+    .external-link {
+      span {
+        background-color: #FFFFFF;
+
+        &:hover {
+          background-color: lighten($color, 50%);
+        }
+      }
+
+    }  
+
+    h3 { 
+      color: $colorGenerated;
+    }  
+}
+
+// Mixin for agile-list style 
+@mixin agile-list-element ($color) {
+  border-left: 3px solid $color;
+
+  &.nb {
+    border-left: none;
+  }
+
+  &.inverse-white {
+      color: #FFF;
+      background: rgba(255,255,255,0.1);
+      cursor: default;
+
+      i { color: #FFF !important; }
+  }  
+}
+
+
+// Mixin for agile-list inverse style
+@mixin agile-list-nb-li ($color) {
+  color: darken($color, 10%);
+}
+
+
+// Mixin for automating floats at specified breakpoints
+@mixin float-at-breakpoint ($direction, $alignmentOnly:"") {
+  text-align: $direction !important;
+
+  @if ($alignmentOnly == '') {  
+      float: $direction !important;
+      & > div,
+      & > span {
+        float: $direction !important;
+      }    
+  } //end of if
+}
+
+//Mixin for course profile
+@mixin course-profile ($color) {
+
+    .ibox-status {
+        display: block;
+        background-color: rgba(darken($color, 10%), .4);
+        color: rgba(#FFF, 1);
+        font-size: $font-std;
+        //padding: 0 !important;
+
+        .wrapper {
+        display: block;
+        float: left;
+        }
+
+        .switch {
+            margin-top: 2px;
+        }
+    }
+
+    .container-ibox-status {
+        display: block;
+        margin-right: -15px; 
+        padding-right: 15px; 
+        margin-left: -15px; 
+        padding-left: 15px;
+        background-color: rgba(darken($color, 10%), .4);
+
+        & > .ibox-status {
+        background: none !important;
+        }    
+    }
+
+    // Content wrapper
+    .wrapper {
+      max-width: 600px;
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }  
+
+    h1 .text-muted {
+      color: darken($color, 30%); 
+    }
+
+    // Related courses
+    .related-courses li {
+        border-left: 3px solid $color;
+    }     
+
+    .left {
+        background-color: $color;
+        /* background-image: url("images/pattern_educ.png"); */
+        background-repeat: repeat;
+
+        i, em, td, a {
+            color: #FFF;
+
+            .alert-success & {
+                color: $green;
+            }
+        }
+
+
+        .alert-yellow {
+          i, a {
+            color: $yellow;
+            border-color: $yellow;
+          }
+
+          a:hover {
+            border-color: darken($yellow, 20%);
+          }          
+        }
+
+        .alert-success {
+          i, a {
+            color: $green;
+            border-color: $green;
+          }
+
+          a:hover {
+            border-color: $green;
+          }
+        }
+
+        .alert-grey {
+          i, a {
+            color: $grey;
+            border-color: $grey;
+          }
+
+          a:hover {
+            border-color: $grey;
+          }
+        }        
+
+
+        .alert-success a.btn-primary {
+          color: #FFF;
+        }
+
+        .alert-red {
+          i, a {
+            color: $red;
+            border-color: $red;
+          }
+
+          a:hover {
+            border-color: darken($red, 20%);
+          }
+        }        
+
+        button {
+          i {
+            color: $grey;
+          }
+
+          &.btn-primary {
+            i {
+              color: #FFF !important;              
+            }
+          }
+        }
+
+
+
+        .agile-list {
+          color: $text-color;
+
+          i, em, td, a {
+              color: $text-color;
+          }          
+        }
+
+        a {
+          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+
+          &:hover {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.8);            
+          }
+        }
+
+        a.btn-primary {
+            border-bottom: none !important;
+        }
+
+        .form-control {
+          color: #FFFFFF;
+        }
+
+        .ibox-title, .ibox-content {
+          background: transparent !important;
+        }
+
+      @include course-profile-form($color, #FFFFFF);      
+    }
+
+    .right {
+        background-color: #FFFFFF;
+        color: $text-color !important;
+        border-top: 1px solid #EFEFEF;
+
+        h3 {
+            color: $color;
+        }
+
+      @include course-profile-form(#FFFFFF, $accent-color);        
+    }   
+
+
+    .loc-d-t-selector {
+        overflow: hidden;
+        padding: 15px;
+        background: rgba(255,255,255,0.1);
+        border-radius: 4px;
+        margin-top: 20px;
+
+        .transparent {
+            background: transparent !important;
+        }
+    }    
+}
+
+
+
+@mixin course-profile-form ($mainColor, $reverseColor) {
+
+    hr {
+      border-color: darken($mainColor, 20%);
+      opacity: 0.3;
+    }
+
+    .form-control {
+      background: none !important;
+      @include placeholder {
+        color: darken($mainColor, 20%);
+      }
+    }
+
+    .dropdown-menu li a {
+      color: $text-color !important;
+    }
+
+    .gray-bg,
+    .gray-bg a,
+    .gray-bg a i {
+      // color: $text-color;
+    }
+
+    .gray-bg a {
+      border-color: $text-color;
+    }
+}
+
+// Color-specific items in bookings > agenda view
+@mixin agenda-item($color, $type:"") {
+    //border-color: $color;
+
+    .agenda-item-type {
+        color: $color;
+    } 
+
+    &.past {
+        border-color: lighten($grey, 40%);
+    }
+
+    ul.agile-list & {
+        border-color: $color;
+    }    
+
+
+    &.unapproved {
+        background: #DEDEDE;
+    }
+
+    .agenda-item-title {
+      span.badge {
+        //background: #e0e3ee;
+        background: #FFF;
+        color: $color;
+        border: 2px solid $color;
+        display: inline-block;
+        margin-top: -2px;
+        padding: 4px 0 3px 0;
+        width: 21px;
+        max-width: 21px;
+
+        &:before {
+            content: $type;
+        }              
+      }
+
+      span.badge-status {
+        display: inline-block;
+      }
+
+      span.approved-1 {
+        color: $green;
+      }
+
+      span.approved-0 {
+        color: $lighter-grey;
+      }
+    }
+
+    .dashboard-bookings & {
+        border: none !important;
+    }
+}
+
+
+// If direct parent mixin. Thanks to myajouri!
+@mixin if-direct-parent($parent-selector) {
+  $current-sequences: &;
+  $new-sequences: ();
+
+  @each $sequence in $current-sequences {
+    $current-selector: nth($sequence, -1);
+    $prepended-selector: join($parent-selector, $current-selector);
+    $new-sequence: set-nth($sequence, -1, $prepended-selector);
+    $new-sequences: append($new-sequences, $new-sequence, comma);
+  }
+
+  @at-root #{$new-sequences} {
+    @content;
+  }
+}
+
+@mixin widget-for-landingpages () {
+    margin-top: 10px;
+    border-radius: 5px;
+    -webkit-font-smoothing: antialiased;
+
+    p {
+        line-height: 1.2;
+        max-width: 300px;
+        margin: 0 auto 10px auto;
+    }
+
+    h1 {
+        font-weight: normal;
+        margin-bottom: 10px;
+        font-size: 30px;
+    }
+}
+
+
+
+@mixin background-with-two-colors ($mainColor, $otherColor, $percentage, $imageURL) {    
+    /* Old browsers */
+    background: $otherColor;
+
+    /* FF3.6+ */
+    background-image: url($imageURL), -moz-linear-gradient(left,  $mainColor 0%, $mainColor $percentage, $otherColor $percentage, $otherColor 100%); 
+
+    /* Chrome,Safari4+ */    
+    background-image: url($imageURL), -webkit-gradient(linear, left top, right top, color-stop(0%,$mainColor), color-stop($percentage,$mainColor), color-stop($percentage,$otherColor), color-stop(100%,$otherColor)); 
+
+    /* Chrome10+,Safari5.1+ */    
+    background-image: url($imageURL), -webkit-linear-gradient(left,  $mainColor 0%,$mainColor $percentage, $otherColor $percentage, $otherColor 100%);
+
+    /* Opera 11.10+ */    
+    background-image: url($imageURL), -o-linear-gradient(left,  $mainColor 0%, $mainColor $percentage, $otherColor $percentage,$otherColor 100%);
+    
+    /* IE10+ */    
+    background-image: url($imageURL), -ms-linear-gradient(left,  $mainColor 0%, $mainColor $percentage,$otherColor $percentage,$otherColor 100%);
+    
+    /* W3C */    
+    background-image: url($imageURL), linear-gradient(to right,  $mainColor 0%, $mainColor $percentage,$otherColor $percentage,$otherColor 100%); 
+
+    /* IE6-9 */        
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mainColor', endColorstr='$otherColor',GradientType=1 ); 
+
+    background-repeat: repeat;
+
+
+    hr {
+        border-color: darken($lighter-grey, 10%);
+    }
+}
+
+
+
+

package/sass/utilities/_variables.scss

@@ -0,0 +1,118 @@
+// Tool used for naming of colors: http://chir.ag/projects/name-that-color
+
+// Font
+$font-stack: "Roboto", "Segoe UI", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", sans-serif;
+
+// Font sizes
+$font-std: 16px;
+
+// Shadows
+$shadow-one-opacity: 0.2 !default;
+$shadow-two-opacity: 0.15 !default;
+$shadow-three-opacity: 0.15 !default;
+
+// Central colours palette
+$accent-color: #5470ac; // App-wide accent colour - e.g. links, primary buttons etc. Previously #5E6C8C
+$light-accent-color: #e5e7ef;
+$dark-accent-color: #3a4e78;
+
+$navyblue: #292c36;
+$light-navyblue: #565c71;
+$dark-navyblue: #1e2028;
+$darker-navyblue: #131419;
+
+
+
+$navy: #536296;           // Primary colour
+$blue: #1c84c6;           // Info colour
+$info: $blue;             // Info colour
+$mustard: #ce932c;        // Warning colour
+$red: #a94442;            // Danger colour
+$green: #2a7a44;          // Success colour
+
+
+$orangepeel: #ff9800; 							//Blended
+$teal: #39b4bf;									//Face to face, Course booking type
+$purple: #946fb0;								//eLearning
+
+$orange: #ff7e40; 								//Clinical booking type
+$deep-blue: #355595;							//Event booking type
+$pink: #d65c92;									//Meeting booking type
+
+
+$brown: #7a6754;
+$transparent-white: rgba(255,255,255,0.5);
+
+// CSDS brand colours
+$csds-orange: #c9602a;
+$csds-dark-grey: #3c3c3c;
+
+// Greys
+$grey: #676a6c;
+$text-color: $grey;             // Body text
+
+$medium-grey: #969696;          // Background wrapper colour
+
+$light-grey: #bebebe;
+$lighter-grey: #d8d8d8;
+$lightest-grey: #ececec;        // Background for: button, calendar, hovers
+$ultra-light-grey: #f7f7f7;
+
+$dark-gray: #c2c2c2;
+
+$border-grey: #e7eaec;
+$darker-border-grey: #dddddd;
+$hover-grey: #f7f7f7;
+
+
+// Deprecated variables in Central
+// Overriding Inspinia variables
+$light-gray: $grey;       
+$gray: $lightest-grey;
+$yellow: $mustard;
+
+
+// Other colours
+$gold: #ffd700;
+
+// iBox colours ( default panel colours)
+$border-color: $border-grey;         // ibox border
+$ibox-title-bg: white;          	// ibox background header
+$ibox-content-bg: white;        	// ibox background content
+
+// Navigation
+$nav-bg: $darker-navyblue;
+$nav-text-color: #9d9d9d;
+
+// Spinner color and margin
+$spin-color: $navy;
+$spin-margin: 0 auto;
+
+// Sidebar width
+$sidebar-width: 220px;
+
+// Boxed layout width
+$boxed-width: 1200px;
+
+// Border radius for buttons
+$btn-border-radius: 3px;
+
+// Booking types
+$booking-type-course : $teal;
+$booking-type-event : $deep-blue;
+$booking-type-meeting : $pink;
+$booking-type-clinical : $orange;
+
+// NSQHS standards
+$allports: rgb(0, 102, 164); 
+$cerulean: rgb(0, 180, 203);
+$dixie: rgb(231, 162, 25);
+$atlantis: rgb(149, 201, 74);
+$shakespeare: rgb(71, 145, 206);
+$jade: rgb(1, 167, 121);
+$shiraz: rgb(182, 9, 72);
+$ecstasy: rgb(245, 115, 37);
+$eminence: rgb(115, 43, 143);
+$bluelagoon: rgb(1, 112, 140);
+
+

package/styleguide-dep/code_example_templates/js_example_template.html.erb

@@ -0,0 +1,7 @@
+<script><%= rendered_example %></script>
+<div class="codeBlock jsExample">
+  <div class="highlight">
+    <pre><%= code_example %></pre>
+  </div>
+</div>
+