@csdsesystems/central-styles 1.0.2 → 1.0.4

package/sass/components/_buttons.scss

@@ -1,769 +0,0 @@
-/* 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;
-}