@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/components/_ibox.scss

@@ -0,0 +1,722 @@
+/* IBOX */
+
+.ibox {
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    @include shadow-sm;
+    // border-top: 1px solid $border-grey;
+    border-bottom: 0px !important;
+
+    &.border {
+        .ibox-content {
+            border-bottom: 1px solid $lighter-grey;
+            &.bg {
+                background: $hover-grey;
+            }            
+        }
+    }
+
+    &.collapsed {
+        .ibox-title {
+            cursor:pointer;
+        }
+    }
+
+    &.course-border-teal {
+        border-left: 3px solid $teal;
+    }
+
+    &.course-border-orangepeel {
+        border-left: 3px solid $orangepeel;
+    }
+
+    .collapse-link {
+        .ibox-tools i, i {
+            color: $accent-color;
+        }
+    }
+
+    &.ibox-rs {
+        .ibox-content {
+            background: transparent;
+            padding: 0px;
+            border: none;
+        }
+    }
+
+    &.reminder {
+        .ellipsis {
+            @include ellipsis(16px, 1.4, 2);
+        }            
+    }
+
+    .course-image {
+        display: block;
+        height: 150px;
+        width: auto;
+        background-size: cover;
+        background-position: center center;
+    }
+}
+
+.ibox-noshadow {
+    box-shadow: none;
+    -web-kit-shadow: none;   
+}
+
+.ibox-tools {
+    display: inline-block;
+    float: right;
+
+    button {
+        vertical-align: top;
+    }
+}
+
+.ibox-title .panel-heading,
+.ibox-title-alt .panel-heading {
+    border-radius: 0;
+    margin-bottom: 0;
+    padding: 0;
+
+    .settings-item {
+        padding: 0;
+    }
+
+    .switch {
+        float: right;
+        margin-left: 12px;
+        margin-top: 1px;        
+    }
+}
+
+.ibox-transparent {
+    @include border-top-radius(0px);
+    @include border-right-radius(0px);
+    @include border-bottom-radius(0px);
+    @include border-left-radius(0px);
+    box-shadow: none;
+    -web-kit-shadow: none;
+    margin-bottom: 35px;
+    border-top: 0px;
+
+    .ibox-title, 
+    .ibox-content {
+        padding: 0;
+        min-height: 1px;
+        border: none;
+    }
+
+}
+
+.ibox-content.no-top-border {
+    border-top: 0;
+}
+
+.ibox-filter {
+  margin-bottom: 10px;
+  background: none;
+
+  .ibox-title {
+    background: $accent-color !important; 
+    color: white;
+    padding: 15px;
+  }
+
+  .ibox-content {
+    padding: 0px 10px 0px 0px;
+    background: none;   
+  }
+
+  &.padding .ibox-content {
+    padding: 10px 20px;
+    background: #FFF;
+  }
+
+  .ibox-filter-row {
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid $lightest-grey;
+
+
+    &:last-of-type {
+      padding-bottom: 0px !important;
+      margin-bottom: 0px !important;
+      border-bottom: none !important;
+    }
+  }    
+
+  hr { 
+    border-color: $light-grey; 
+  }
+}
+
+.hide-mobile {
+  display: none;
+}
+
+.show-mobile {
+  display: inline;
+}
+
+/*
+.no-ibox-bg {
+    .ibox {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+     .ibox-content.scroll-list {
+        background-color: $lightest-grey;
+        padding: 0;
+        height: 565px;
+        border-left: 1px solid whitesmoke;
+        border-right: 1px solid whitesmoke;
+        border-bottom: 1px solid whitesmoke;
+        -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.25);
+        box-shadow: inset 0 0 8px rgba(0,0,0,.25);
+     }
+
+     h2 {
+        margin-top: 0px;
+     }
+}
+*/
+
+.ibox-title {
+    padding: 14px 15px;
+    border: 0;
+
+    .label {
+        float: none;
+        margin-left: 0;
+    }
+
+    .ibox-status {
+        display: block;
+        padding: 10px 20px;
+
+        p { 
+            margin: 0; 
+            font-size: $font-std;
+        }
+    }
+
+    .ibox-status-empty {
+        padding: 10px 10px;
+        text-transform: uppercase;
+    }
+
+    .ibox-status-text {
+        display: block;
+        overflow: hidden;
+        padding: 20px;
+    }
+
+    .external-link {
+        position: absolute; 
+        top: 0; 
+        right: 0; 
+        z-index: 999; 
+        margin: 15px;
+        cursor: pointer;
+    }
+
+    .overlay {
+        width: 100%; 
+        height: 100%; 
+        z-index: 0; 
+        opacity: 0.8; 
+        position: absolute; 
+        top: 0; 
+        left: 0; 
+        border-radius: 5px;
+        display: block;
+        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(1,4,5,0.3) 100%); /* FF3.6-15 */
+        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 50%,rgba(1,4,5,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
+        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 50%,rgba(1,4,5,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d010405',GradientType=0 ); /* IE6-9 */      
+    }    
+
+    .elearning &, 
+    .face-to-face & {
+        background: $purple;
+
+        .course-info, 
+        .course-status {
+            display: block;
+            clear: both;
+            text-align: left !important;
+        }
+
+        .course-status {
+            opacity: 0.5;
+            color: #FFF;
+            float: left !important;
+        }
+
+        h3.course-info {
+            color: #FFF;
+        }
+    }  
+
+    .face-to-face & {
+        background: $teal !important;
+    }
+}
+
+@media only screen and (min-width: 991px) {
+    .elearning, .face-to-face {
+        .ibox-title {
+            .course-status, .course-info {
+                display: inline-block;
+                clear: none;
+            }
+
+            .course-status {
+                float: right !important
+            }
+        }        
+    }
+}  
+
+.modal-header {
+    .ibox-status {
+        margin: -15px -14px 0 -14px !important;
+        padding-top: 15px;
+    }
+}
+
+
+.ibox-title-alt {
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    background-color: $hover-grey;
+    border-color: $border-color;
+    border-image: none;
+    border-style: solid solid none;
+    border-width: 0;
+    color: inherit;
+    margin-bottom: 0;
+    padding: 14px 15px;
+    min-height: 48px;
+}
+
+.ibox-title h5 {
+    margin: 0;
+}
+
+.ibox-title h3,
+.list-row h3 {
+    //display: inline-block;
+    padding: 0;
+    text-overflow: ellipsis;
+    margin:0;
+}
+
+.ibox-tools {
+    a {
+        color: darken($gray, 20%);
+        vertical-align: top;
+
+        &.btn-primary {
+            color: #fff;
+        }      
+    }
+}
+
+.panel-default > .panel-heading {
+    color: $text-color;
+}
+
+/* Cards */
+.ibox-card {
+
+    p {
+        color: $text-color !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    .ibox-title {
+        padding: 0;
+        display: block;
+        height: auto;
+        position: relative;
+
+        h2.ellipsis { display: inline-block; }
+
+        .ibox-title-wrapper {
+            display: block;
+            position: relative;
+            padding: 20px;
+        }        
+    }
+
+    .description {
+        display: block;
+        min-height: 40px;
+        word-wrap: break-word;
+        .card-course .ibox-content & {
+            min-height: 80px;
+        }
+    }
+
+    i.fa {
+        display: inline-block;
+        max-width: 20px;
+        min-width: 20px;
+        text-align: center;
+    }
+
+    .meta i.fa {
+        min-width: auto;
+    }
+
+   .btn-white {
+        color: $navy;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+
+    .ibox-content {
+        .btn.btn-white {
+            padding: 0px;
+
+            &:hover {
+                background: none;
+            }
+        }
+    }
+
+  
+}
+
+.ibox-card-wh {
+    .description {
+        word-wrap: break-word;
+    }
+}
+
+/* For ibox-cards that are clickable */
+/* wh - with hover effect */
+.ibox-card-wh {
+    cursor: pointer;
+
+    -webkit-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+    -webkit-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.08);    
+
+    &:hover {
+        /*
+        box-shadow: 
+        0 8px 10px 1px rgba(0, 0, 0, .14), 
+        0 3px 14px 2px rgba(0, 0, 0, .12), 
+        0 5px 5px -3px rgba(0, 0, 0, .2);
+        */
+        -webkit-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.16);
+        box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.16);        
+    }
+
+    .archivedCourse & {
+        cursor: default;
+    }
+}
+
+
+
+
+.ibox-card-wh-disabled {
+    -webkit-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+    -webkit-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.08);    
+}
+
+.ibox-card-header {
+    .ibox-title {
+        position: static;
+
+        .ibox-title-wrapper {
+            position: static;
+        }
+    }
+    .course-name {
+        display: block;
+    }
+}
+
+
+.completedCourse {
+    .card-orangepeel .ibox-title {
+        background: darken($orangepeel, 10%);
+         
+    }  
+
+    .card-purple .ibox-title{
+        background: darken($purple, 10%);                     
+    }  
+
+    .card-teal .ibox-title{
+        background: darken($teal, 10%);
+    }         
+}
+
+
+.triangle-corner {
+    background: linear-gradient(
+        -45deg, 
+        $teal 88%, 
+        $green 88%  
+    ) !important;  
+    color: #FFF;  
+
+
+    &.right {
+        background: linear-gradient(
+            45deg, 
+            $teal 88%, 
+            $green 88%  
+        ) !important;   
+
+        .card-orangepeel & {
+            background: linear-gradient(
+                45deg, 
+                darken($orangepeel, 10%) 88%, 
+                darken($orangepeel, 25%) 88%  
+            ) !important;
+             
+        }  
+
+        .card-purple & {
+            background: linear-gradient(
+                45deg, 
+                darken($purple, 10%) 88%, 
+                darken($purple, 25%) 88%  
+            ) !important;      
+                         
+        }  
+
+        .card-teal & {
+            background: linear-gradient(
+                45deg, 
+                darken($teal, 10%) 88%, 
+                darken($teal, 25%) 88%  
+            ) !important;  
+
+        }                         
+
+        .icon-tc {
+            position: absolute;
+            right: 15px;
+            top: 5px;
+            font-size: 25px;
+        }
+    }
+
+
+}
+
+
+.label-active {
+    background-color: transparent;
+    border: 1px solid #FFF !important;
+    opacity: 0.7;
+
+    display: block;
+    width: auto;
+    float: left !important;
+    clear: both !important;
+}
+
+.card-orangepeel {
+    .label-completion {
+        background-color: darken($orangepeel, 25%);
+        border-color: darken($orangepeel, 25%);
+    }               
+}  
+
+.card-purple {
+    .label-completion {
+        background-color: darken($purple, 25%);
+        border-color: darken($purple, 25%);
+    }                           
+}  
+
+.card-teal {
+    .label-completion {
+        background-color: darken($teal, 25%);
+        border-color: darken($teal, 25%);
+    }                             
+}
+
+.label-completion.failed {
+    background-color: $red;
+    border-color: darken($red, 25%);
+}
+
+
+
+.course-card-container {
+    .wrapper {
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        padding: 0px;
+    }
+
+    .meta {
+        display: block;
+        clear: both;
+        opacity: 0.7;
+    }
+
+}
+
+
+
+
+
+//Media queries
+//Small
+@media only screen and (min-width: 769px) {
+    .ibox-card {
+        .ibox-status {
+            position: bottom;
+            bottom: 0;
+        }
+
+        .ibox-title {
+            height: auto;
+
+            .ibox-title-wrapper {
+                //position: relative;
+                
+                .ellipsis { 
+                    @include ellipsis(24px, 1.1, 2); 
+
+                    .landingPage & {
+                        @include ellipsis(24px, 1.1, 4);                    
+                    }
+                }
+
+                .sub-title {
+                    @include ellipsis-auto(20px, 1.1, 1);
+                }
+
+            }      
+
+            &.inverse {
+                //height: 160px;
+
+                .ibox-title-wrapper {
+                    .ellipsis {
+                        @include ellipsis(20px, 1.1, 2);
+                    }
+
+                    .sub-title {
+                        opacity: 0.5;
+                    }
+                }
+            }
+        }
+
+        .description {
+            @include ellipsis(15px, 1.42857143, 2);
+
+            .card-course & {
+              @include ellipsis(15px, 1.42857143, 4);
+            }
+        }
+
+        .websiteURL {
+            @include ellipsis(15px, 1.42857143, 1);
+        }
+
+
+    } 
+
+    /*
+    &.card-pocketcentre > div:nth-child(2) {
+        height: 200px;
+        max-height: 200px;
+    }
+    */
+
+    .ibox-card-header {
+        .ibox-title {
+            height: auto;
+        }
+    }
+}
+
+//Medium
+@media only screen and (min-width: 992px) {
+    .ibox-card {
+        .ibox-title {
+            height: 160px;
+
+            .ibox-title-wrapper {
+                position: absolute;
+                bottom: 0;
+            }  
+        }
+        .duration {
+            min-height: 70px;
+        }
+    }
+    .ibox-card-header {
+        .ibox-title {
+            height: auto;    
+
+            .ibox-title-wrapper {
+                position: static;
+            }
+        }
+    }  
+}
+
+//Large
+@media only screen and (min-width: 1201px) {
+    .ibox-card {
+        .ibox-title {
+            height: 160px;
+        }
+        .duration {
+            min-height: 70px;
+        }
+    }
+    .ibox-card-header {
+        .ibox-title {
+         height: auto;
+        }
+    }  
+}
+
+.tabs-container {
+    .nav {
+        li {
+            .count { 
+                display: inline; 
+            }
+
+
+            &.active {
+                .count {
+                    display: none;
+                }
+            }
+        }
+    }
+}

package/sass/components/_icons.scss

@@ -0,0 +1,17 @@
+.icon {
+	background-repeat: no-repeat;
+	width: 32px !important;
+	height: 32px !important;
+	min-height: 32px !important;
+	min-width: 32px !important;
+	background-image: url("images/applicable_standards.png");
+
+	.simple-notification-wrapper & {
+		background-repeat: no-repeat;
+		background-image: none;
+		width: auto !important;
+		height: auto !important;
+		min-height: auto !important;
+		min-width: auto !important;
+	}
+}

package/sass/components/_inputs.scss

@@ -0,0 +1,3 @@
+.icheckbox_square-green, .iradio_square-green {
+    background: url(images/steelblue.png) no-repeat
+}