@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/components/_buttons.scss

@@ -0,0 +1,769 @@
+/* BUTTONS */
+
+.btn,
+.btn[disabled] {
+    font-weight: 500;
+    border-radius: 2px;
+    @include shadow-sm;
+    border: 0;
+    outline: 0 !important;
+    font-size: $font-std;
+
+    .fa {
+        font-size: 14px;
+    }
+}
+
+.btn.disabled, 
+.btn.disabled:hover, 
+.btn.disabled:active, 
+.btn.disabled:focus, 
+.btn.disabled[disabled], 
+.btn.disabled[disabled]:hover, 
+.btn.disabled[disabled]:active, 
+.btn.disabled[disabled]:focus {
+    opacity: 0.8;
+}
+
+.btn-default:hover, 
+.btn-default:focus, 
+.btn-default:active, 
+.btn-default.active, 
+.open .dropdown-toggle.btn-default, 
+.btn-default:active:focus, 
+.btn-default:active:hover, 
+.btn-default.active:hover, 
+.btn-default.active:focus {
+    border: none;
+}
+
+.btn-xs,
+.btn-xs[disabled],
+.btn-sm,
+.btn-sm[disabled] {
+    font-size: 85%;
+}
+
+.btn-lg,
+.btn-lg[disabled] {
+    font-size: 18px;
+}
+
+.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
+    margin-left: 0px;
+}
+
+.btn-primary.btn-sm {
+    padding-bottom: 6px;
+}
+
+.btn-row .btn-group {
+    margin-top: 2px;
+    margin-bottom: 4px;
+}
+
+.btn-group.pagination {
+
+    span.dots {
+        padding: 6px 7px;
+        position: relative;
+        float: left;
+    }
+
+    button {
+        margin-left: 1px;
+        margin-right: 1px;
+    }
+
+    .btn {
+        box-shadow: none;
+        padding: 6px 9px;
+    }
+
+    .btn-white {
+        &:hover {
+            background: none;
+        }
+        
+        &:first-child {
+            padding-left: 0px;
+        }
+
+        &:last-child {
+            padding-right: 0px;
+        }
+    }
+
+} 
+
+.btn-link,
+.btn-link:hover,
+.btn-link:focus,
+.btn-link:active,
+.btn-link.active,
+.btn-link:active:focus,
+.btn-link:active:hover,
+.btn-link.active:hover,
+.btn-link.active:focus,
+.btn-link.active.focus {
+    color: $accent-color;
+    border: 0;
+    outline: 0 !important;
+    &:hover {
+        color: darken($accent-color, 15%);
+    }
+}
+
+
+/////////* Button selection */
+.btn.selection {
+    text-align: left;
+    font-weight: normal;
+
+    i {
+        opacity: 0.4;
+    }
+
+    td {
+        border-top: 0;
+    }
+    
+    &:hover {
+        i  {
+            opacity:1;
+        }
+    }
+
+    &.blended-course {
+        i {
+            font-size: 18px;
+            margin-top: 2px;
+        }
+
+        h3 {
+            margin: 0;
+            color: $orangepeel;
+        }
+    }
+
+    &.online-course {
+        @extend .blended-course;
+        h3 {
+            color: $purple;
+        }
+    }
+
+    &.face-to-face-course {
+        @extend .blended-course;
+        h3 {
+            color: $teal;
+        }
+    }
+
+    &.event-booking {
+        @extend .blended-course;
+        h3 {
+            color: $navy;
+        }
+    }
+
+    &.meeting-booking {
+        @extend .blended-course;
+        h3 {
+            color: $pink;
+        }
+    }
+
+    &.clinical-booking {
+        @extend .blended-course;
+        h3 {color: $booking-type-clinical;}
+    }
+
+}
+
+.btn.active,
+.btn:active,
+.btn:active:hover,
+.btn:active:focus,
+.open .btn.dropdown-toggle,
+.open .dropdown-toggle.btn-default {
+    @include shadow-sm;
+    border: 0;
+}
+
+.btn.disabled,
+.btn.disabled:hover,
+.btn.disabled:active,
+.btn.disabled:focus,
+.btn.disabled[disabled],
+.btn.disabled[disabled]:hover,
+.btn.disabled[disabled]:active,
+.btn.disabled[disabled]:focus,
+.btn-default.disabled,
+.btn-default.disabled:hover,
+.btn-default.disabled:focus,
+.btn-default.disabled:active,
+.btn-default.disabled.active,
+.btn-default[disabled],
+.btn-default[disabled]:hover,
+.btn-default[disabled]:focus,
+.btn-default[disabled]:active,
+.btn-default.active[disabled],
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-default:hover,
+fieldset[disabled] .btn-default:focus,
+fieldset[disabled] .btn-default:active,
+fieldset[disabled] .btn-default.active,
+.btn-primary.disabled,
+.btn-primary.disabled:hover,
+.btn-primary.disabled:focus,
+.btn-primary.disabled:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled],
+.btn-primary[disabled]:hover,
+.btn-primary[disabled]:focus,
+.btn-primary[disabled]:active,
+.btn-primary.active[disabled],
+.btn-grey.disabled,
+.btn-grey.disabled:hover,
+.btn-grey.disabled:focus,
+.btn-grey.disabled:active,
+.btn-grey.disabled.active,
+.btn-grey[disabled],
+.btn-grey[disabled]:hover,
+.btn-grey[disabled]:focus,
+.btn-grey[disabled]:active,
+.btn-grey.active[disabled],
+.btn-darkgrey.disabled,
+.btn-darkgrey.disabled:hover,
+.btn-darkgrey.disabled:focus,
+.btn-darkgrey.disabled:active,
+.btn-darkgrey.disabled.active,
+.btn-darkgrey[disabled],
+.btn-darkgrey[disabled]:hover,
+.btn-darkgrey[disabled]:focus,
+.btn-darkgrey[disabled]:active,
+.btn-darkgrey.active[disabled],
+.btn-red.disabled,
+.btn-red.disabled:hover,
+.btn-red.disabled:focus,
+.btn-red.disabled:active,
+.btn-red.disabled.active,
+.btn-red[disabled],
+.btn-red[disabled]:hover,
+.btn-red[disabled]:focus,
+.btn-red[disabled]:active,
+.btn-red.active[disabled],
+.btn-danger.disabled,
+.btn-danger.disabled:hover,
+.btn-danger.disabled:focus,
+.btn-danger.disabled:active,
+.btn-danger.disabled.active,
+.btn-danger[disabled],
+.btn-danger[disabled]:hover,
+.btn-danger[disabled]:focus,
+.btn-danger[disabled]:active,
+.btn-danger.active[disabled],
+.btn-purple.disabled,
+.btn-purple.disabled:hover,
+.btn-purple.disabled:focus,
+.btn-purple.disabled:active,
+.btn-purple.disabled.active,
+.btn-purple[disabled],
+.btn-purple[disabled]:hover,
+.btn-purple[disabled]:focus,
+.btn-purple[disabled]:active,
+.btn-purple.active[disabled],
+.btn-green.disabled,
+.btn-green.disabled:hover,
+.btn-green.disabled:focus,
+.btn-green.disabled:active,
+.btn-green.disabled.active,
+.btn-green[disabled],
+.btn-green[disabled]:hover,
+.btn-green[disabled]:focus,
+.btn-green[disabled]:active,
+.btn-green.active[disabled],
+.btn-yellow.disabled,
+.btn-yellow.disabled:hover,
+.btn-yellow.disabled:focus,
+.btn-yellow.disabled:active,
+.btn-yellow.disabled.active,
+.btn-yellow[disabled],
+.btn-yellow[disabled]:hover,
+.btn-yellow[disabled]:focus,
+.btn-yellow[disabled]:active,
+.btn-yellow.active[disabled],
+.btn-white.disabled,
+.btn-white.disabled:hover,
+.btn-white.disabled:focus,
+.btn-white.disabled:active,
+.btn-white.disabled.active,
+.btn-white[disabled],
+.btn-white[disabled]:hover,
+.btn-white[disabled]:focus,
+.btn-white[disabled]:active,
+.btn-white.active[disabled] {
+  @include transition(all .2s ease-in-out);                
+  background-color: #eaeaea !important;
+  color: lighten($text-color, 20%);
+  opacity: 0.5;
+  border: 0;
+}
+
+#courses {
+    .btn-white.disabled,
+    .btn-white.disabled:hover,
+    .btn-white.disabled:focus,
+    .btn-white.disabled:active,
+    .btn-white.disabled.active,
+    .btn-white[disabled],
+    .btn-white[disabled]:hover,
+    .btn-white[disabled]:focus,
+    .btn-white[disabled]:active,
+    .btn-white.active[disabled] {
+        background-color: transparent !important;
+        box-shadow: none !important;
+    }    
+}
+
+
+/////////* Button DEFAULT */
+
+.btn-default,
+.btn-default:focus,
+.btn-default:active:focus,
+.btn-default.active:focus,
+.btn-default.active.focus,
+.open>.dropdown-toggle.btn-default.focus,
+.open>.dropdown-toggle.btn-default:focus,
+.open .dropdown-toggle.btn-default {
+    background: white;
+    color: $text-color;
+}
+
+.btn-default:hover,
+.btn-default:active,
+.btn-default.active,
+.btn-default:active:hover,
+.btn-default.active:hover,
+.open>.dropdown-toggle.btn-default:hover {
+    background: $lightest-grey;
+    color: $text-color;
+}
+
+/////////* Button PRIMARY */
+
+.btn-primary,
+.btn-primary:focus,
+.btn-primary:active:focus,
+.btn-primary.active:focus,
+.btn-primary.active.focus,
+.open>.dropdown-toggle.btn-primary.focus,
+.open>.dropdown-toggle.btn-primary:focus,
+.open .dropdown-toggle.btn-primary,
+{
+    background: $dark-accent-color;
+    color: white;
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.active,
+.btn-primary:active:hover,
+.btn-primary.active:hover,
+.open>.dropdown-toggle.btn-primary:hover {
+    @include transition(all .2s ease-in-out);                    
+    background: darken($dark-accent-color, 8%);
+    color: white;
+}
+
+/////////* Button INFO */
+
+.btn-info {
+  background-color: $info;
+}
+
+.btn-info:hover,
+.btn-info:focus,
+.btn-info:active,
+.btn-info.active,
+.open .dropdown-toggle.btn-info {
+  background-color: darken($info, 3%);
+}
+
+.btn-info:active,
+.btn-info.active,
+.open .dropdown-toggle.btn-info {
+}
+
+
+/////////* Button GREY */
+
+.btn-grey,
+.open .dropdown-toggle.btn-grey,
+.btn-grey:focus,
+.btn-grey:active:focus,
+.btn-grey.active:focus,
+.btn-grey.active.focus,
+.open>.dropdown-toggle.btn-grey.focus,
+.open>.dropdown-toggle.btn-grey:focus {
+    background: $lightest-grey;
+    color: $text-color;
+}
+
+.btn-grey:hover,
+.btn-grey:active,
+.btn-grey.active,
+.btn-grey:active:hover,
+.btn-grey.active:hover,
+.open>.dropdown-toggle.btn-grey:hover {
+    @include transition(all .2s ease-in-out);                    
+    background: $lighter-grey;
+    color: $text-color;
+}
+
+.btn-darkgrey,
+.open .dropdown-toggle.btn-darkgrey {
+    background: #CCC;
+    color: $text-color;
+}
+
+.btn-darkgrey:hover,
+.btn-darkgrey:focus,
+.btn-darkgrey:active,
+.btn-darkgrey.active,
+.btn-darkgrey:active:focus,
+.btn-darkgrey:active:hover,
+.btn-darkgrey.active:hover,
+.btn-darkgrey.active:focus,
+.btn-darkgrey.active.focus,
+.open>.dropdown-toggle.btn-darkgrey.focus,
+.open>.dropdown-toggle.btn-darkgrey:focus,
+.open>.dropdown-toggle.btn-darkgrey:hover {
+    @include transition(all .2s ease-in-out);                    
+    background: #CCC;
+    color: $text-color;
+}
+
+
+/////////* Button PURPLE */
+
+.btn-purple,
+.open .dropdown-toggle.btn-purple {
+    background: $purple;
+    color: white;
+}
+
+.btn-purple.selected,
+.btn-purple:hover,
+.btn-purple:focus,
+.btn-purple:active,
+.btn-purple.active,
+.btn-purple:active:focus,
+.btn-purple:active:hover,
+.btn-purple.active:hover,
+.btn-purple.active:focus,
+.btn-purple.active.focus,
+.open>.dropdown-toggle.btn-purple.focus,
+.open>.dropdown-toggle.btn-purple:focus,
+.open>.dropdown-toggle.btn-purple:hover {
+    background: darken($purple, 8%);
+    color: white;
+}
+
+/////////* Button GREEN */
+
+.btn-green,
+.open .dropdown-toggle.btn-green {
+    background: $green;
+    color: white;
+}
+
+.btn-green:hover,
+.btn-green:focus,
+.btn-green:active,
+.btn-green.active,
+.btn-green:active:focus,
+.btn-green:active:hover,
+.btn-green.active:hover,
+.btn-green.active:focus,
+.btn-green.active.focus,
+.open>.dropdown-toggle.btn-green.focus,
+.open>.dropdown-toggle.btn-green:focus,
+.open>.dropdown-toggle.btn-green:hover {
+    background: darken($green, 8%);
+    color: white;
+}
+
+
+/////////* Button RED or DANGER */
+
+.btn-red,
+.open .dropdown-toggle.btn-red,
+.btn-danger,
+.open .dropdown-toggle.btn-danger {
+    background: $red;
+    color: white;
+}
+
+.btn-red:hover,
+.btn-red:focus,
+.btn-danger:hover,
+.btn-danger:focus,
+.btn-red:active,
+.btn-red.active,
+.btn-red:active:focus,
+.btn-red:active:hover,
+.btn-red.active:hover,
+.btn-red.active:focus,
+.btn-red.active.focus,
+.btn-danger:active,
+.btn-danger.active,
+.btn-danger:active:focus,
+.btn-danger:active:hover,
+.btn-danger.active:hover,
+.btn-danger.active:focus,
+.btn-danger.active.focus,
+.open>.dropdown-toggle.btn-red.focus,
+.open>.dropdown-toggle.btn-red:focus,
+.open>.dropdown-toggle.btn-red:hover,
+.open>.dropdown-toggle.btn-danger.focus,
+.open>.dropdown-toggle.btn-danger:focus,
+.open>.dropdown-toggle.btn-danger:hover  {
+    background: darken($red, 8%);
+    color: white;
+}
+
+/////////* Button YELLOW */
+
+.btn-yellow,
+.open .dropdown-toggle.btn-yellow {
+    background: $mustard;
+    color: white;
+}
+
+.btn-yellow:hover,
+.btn-yellow:focus,
+.btn-yellow:active,
+.btn-yellow.active,
+.btn-yellow:active:focus,
+.btn-yellow:active:hover,
+.btn-yellow.active:hover,
+.btn-yellow.active:focus,
+.btn-yellow.active.focus,
+.open>.dropdown-toggle.btn-yellow.focus,
+.open>.dropdown-toggle.btn-yellow:focus,
+.open>.dropdown-toggle.btn-yellow:hover {
+    background: darken($mustard, 8%);
+    color: white;
+}
+
+/////////* Button WHITE */
+
+.btn-white,
+.open .dropdown-toggle.btn-white {
+    background: none;
+    color: $text-color;
+    box-shadow: none;
+}
+
+.btn-default,
+.btn-default:active
+.btn-default:focus {
+    border-top: 1px solid lighten($lighter-grey, 8%) !important;
+    padding: 5px 12px 6px 12px;
+
+    &.btn-xs {padding: 0 5px 1px 5px;}
+    &.btn-sm {padding: 4px 10px 5px 10px;}
+    &.btn-lg {padding: 9px 16px 10px 16px;}
+
+    &:hover {
+        border-color: lighten($lighter-grey, 5%) !important;
+    }
+}
+
+.btn-white:focus,
+.btn-white:hover,
+.open>.dropdown-toggle.btn-white:hover,
+.open>.dropdown-toggle.btn-white.focus,
+.open>.dropdown-toggle.btn-white:focus {
+    background: $lightest-grey;
+    color: $text-color;
+    box-shadow: none;
+    border: 0;
+}
+
+.btn-white:active,
+.btn-white.active,
+.btn-white:active:focus,
+.btn-white:active:hover,
+.btn-white.active:hover,
+.btn-white.active:focus,
+.btn-white.active.focus {
+    background: $lighter-grey;
+    color: $text-color;
+    box-shadow: none;
+    border: 0;
+}
+
+
+/////////* Button TRANSPARENT */
+
+.btn-transparent,
+.open .dropdown-toggle.btn-transparent {
+    background: none;
+    color: $text-color;
+    box-shadow: none;
+    padding: 0;
+}
+
+.btn-transparent:focus,
+.btn-transparent:hover,
+.open>.dropdown-toggle.btn-transparent:hover,
+.open>.dropdown-toggle.btn-transparent.focus,
+.open>.dropdown-toggle.btn-transparent:focus {
+    background: none;
+    color: darken($text-color, 10%);
+    box-shadow: none;
+    border: 0;
+}
+
+.btn-transparent:active,
+.btn-transparent.active,
+.btn-transparent:active:focus,
+.btn-transparent:active:hover,
+.btn-transparent.active:hover,
+.btn-transparent.active:focus,
+.btn-transparent.active.focus {
+    background: none;
+    color: darken($text-color, 10%);
+    box-shadow: none;
+    border: 0;
+}
+
+
+
+/////////* Button TRANSPARENT */
+
+.btn-flat,
+.open .dropdown-toggle.btn-flat {
+    background: $lightest-grey;
+    color: $text-color;
+    box-shadow: none;
+}
+
+.btn-flat:focus,
+.btn-flat:hover,
+.open>.dropdown-toggle.btn-flat:hover,
+.open>.dropdown-toggle.btn-flat.focus,
+.open>.dropdown-toggle.btn-flat:focus {
+    background: $lightest-grey;
+    color: darken($text-color, 10%);
+    box-shadow: none;
+    border: 0;
+}
+
+.btn-flat:active,
+.btn-flat.active,
+.btn-flat:active:focus,
+.btn-flat:active:hover,
+.btn-flat.active:hover,
+.btn-flat.active:focus,
+.btn-flat.active.focus {
+    background: $lighter-grey;
+    color: darken($text-color, 10%);
+    box-shadow: none;
+    border: 0;
+}
+
+
+
+/* ------------------------------------ */
+
+button.btn-faux.dim {
+  box-shadow: none;
+}
+
+button.btn-faux.dim:active {
+  box-shadow: none;
+}
+
+button.btn-info.dim {
+  box-shadow: inset 0px 0px 0px darken($info, 6%), 0px 5px 0px 0px darken($info, 6%), 0px 10px 5px #999999;
+}
+
+button.btn-info.dim:active {
+  box-shadow: inset 0px 0px 0px darken($info, 6%), 0px 2px 0px 0px darken($info, 6%), 0px 5px 3px #999999;
+}
+
+.circle-button {
+    @include transition(.4s);
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 2px;
+    background-color: $accent-color;
+    color: #FFFFFF;
+    font-size: 18px;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
+    cursor:pointer;    
+
+    &:hover {
+        background: darken($navy,5%);
+        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    a {
+        color: #FFFFFF;
+    }      
+}
+
+
+.floating-button {
+
+    float: right !important;
+    margin: -40px 8px 0 0;
+
+    @include transition(.4s);
+    width: 46px;
+    height: 46px;
+    text-align: center;
+    line-height: 46px;
+    border-radius: 50%;
+    background-color: $accent-color;
+    color: #FFFFFF;
+    font-size: 24px;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
+    cursor:pointer;
+
+    &:hover {
+        background: darken($navy,5%);
+        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    a {
+        color: #FFFFFF;
+    }    
+
+    &.btn-grey {
+        background: ($dark-gray);
+    }
+
+
+}
+
+
+
+/* Overrides on pagination */
+
+.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle):hover {
+    border-top-right-radius: 2px !important;
+    border-bottom-right-radius: 2px !important; 
+}
+
+.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child):hover {
+    border-top-left-radius: 2px !important;
+    border-bottom-left-radius: 2px !important;
+}