@csdsesystems/central-styles 1.0.2 → 1.0.4

package/sass/utilities/_mixins.scss

@@ -1,607 +0,0 @@
-/* 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

@@ -1,118 +0,0 @@
-// 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

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