@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/components/_lists.scss

@@ -0,0 +1,489 @@
+/* LISTS */
+
+ul {
+    list-style-type: disc;
+}
+
+/* Container */
+.list-container {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    z-index: 100;
+}
+
+/* Filters */
+.list-filters {
+    margin-bottom: 10px;
+
+    .btn-group {
+        margin-right: 5px;
+        margin-bottom: 5px;
+    }    
+
+    .i-checks label {
+        margin-bottom: 0;
+    }
+}
+
+.grouped-list-filters {
+    display: inline-block;
+    //width: calc(100% - 100px);
+}
+
+.grouped-clear {
+    width: 80px;
+}
+
+/* Results */
+.list-results {
+    margin-bottom: 20px;
+
+    &.bookings {
+        margin: 0px;
+    }
+}
+
+/* Item */
+.list-item {
+    overflow: hidden;
+    position: relative;
+    border-top: 1px solid $border-grey;
+    background-color: white;
+    display: block;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    @include shadow-sm;
+
+    .ibox .ibox-content .list-noshadow & {
+        @include no-shadow;
+        border: 1px solid $border-grey;
+        border-bottom: none;
+
+        &:last-of-type {
+            border-bottom: 1px solid $border-grey;
+        }
+    }
+
+    .ibox-rs .ibox-content & {
+        @include no-shadow;
+    }
+
+
+    &.no-link {
+        cursor: default;
+    }
+
+    &:hover {
+        background: $hover-grey;
+
+        .list-row-end {
+            background: $hover-grey;
+            -webkit-box-shadow: -4px 0 3px $hover-grey;
+            box-shadow: -4px 0 3px $hover-grey;
+            -webkit-box-shadow: -4px 0 3px $hover-grey,0 -3px 3px $hover-grey;
+            box-shadow: -4px 0 3px $hover-grey,0 -3px 3px $hover-grey;
+        }
+
+        .preview i {
+            color: $accent-color;
+        }
+    }
+
+    &.selected {
+        background: $light-accent-color;
+        border: $accent-color;
+
+        .list-row-end {
+            background: $light-accent-color;
+            -webkit-box-shadow: -4px 0 3px $light-accent-color;
+            box-shadow: -4px 0 3px $light-accent-color;
+            -webkit-box-shadow: -4px 0 3px $light-accent-color, 0 -3px 3px $light-accent-color;
+            box-shadow: -4px 0 3px $light-accent-color, 0 -3px 3px $light-accent-color;
+        }
+    }
+
+    &.opaque {
+        .list-summary {
+            opacity: 0.5;
+        }
+        .list-key {
+            opacity: 0.5;
+            text-decoration: line-through;
+        }
+
+        .list-row-end {
+            opacity: 0.5;
+
+            span.text-pink,
+            span.text-info {
+                text-decoration: line-through;
+            }
+        }
+    }
+
+    &.child {
+        margin-left: 36px;
+
+        .list-row-end {
+            background: white;
+        }
+
+        &:hover .list-row-end {
+            background: $hover-grey;
+        }
+
+        &.selected {
+            background: $light-accent-color;
+            border: $accent-color;
+
+            .list-row-end {
+                background: $light-accent-color;
+                -webkit-box-shadow: -4px 0 3px $light-accent-color;
+                box-shadow: -4px 0 3px $light-accent-color;
+                -webkit-box-shadow: -4px 0 3px $light-accent-color, 0 -3px 3px $light-accent-color;
+                box-shadow: -4px 0 3px $light-accent-color, 0 -3px 3px $light-accent-color;
+            }
+        }
+    }
+
+}
+
+    .list-item-new-active {
+        border-bottom-width: 2px !important;
+        border-bottom-color: $accent-color !important;
+    }
+
+    .list-item-new {
+        border-bottom: 2px solid #FFF !important;
+    }
+
+    .list-item-new:hover {
+        border-bottom-width: 2px;
+        border-bottom-color: $accent-color !important;
+        border-left: 1px solid #FFF !important;
+    }
+
+    .list-item-new:active {
+        border-bottom-width: 2px;
+        border-bottom-color: $accent-color !important;
+    }
+
+    .list-item-header {
+        .list-row div {
+            background: transparent;
+        }
+    }
+
+/* Row */
+.list-row {
+    margin: 12px;
+    min-height: 22px;
+
+    .initialsCircle {
+        margin-top: 4px;
+        margin-bottom: 4px;
+        margin-right: 5px;
+    }
+
+    h2 {
+        margin: 0;
+
+        span {
+            vertical-align: middle;
+            margin-left: 5px;
+            text-transform: uppercase;
+        }
+    }
+}
+
+.no-border > .list-results {
+    .list-item {
+        border: none;
+        border-bottom: 1px solid #E7EAEC !important;
+        background: none;
+        box-shadow: none !important;
+
+        .list-row {
+            margin: 12px !important;
+        }
+
+        &:hover {
+            background: #f7f7f7;
+        }
+    }
+}
+
+    /* Row end */
+    .list-row-end {
+        display: inline-block;
+        height: 100%;
+        min-height: 22px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin: 0;
+        padding: 12px 12px 12px 0;
+        -webkit-box-shadow: -4px 0 3px white;
+        box-shadow: -4px 0 3px white;
+        -webkit-box-shadow: -4px 0 3px white,0 -3px 3px white;
+        box-shadow: -4px 0 3px white,0 -3px 3px white;
+        background: white;     
+
+        span {
+            margin: 0 10px;
+        }
+
+        h3 {
+            display:inline;
+            color: $accent-color;
+        }
+
+        .preview {
+            margin: 0 0 0 10px;
+            display:inline;
+
+            i {
+                color: $light-grey;
+
+                &:hover {
+                    color: $accent-color;
+                }
+
+                &.current {
+                    color: $accent-color;
+                }
+            }
+
+            &.current i {
+                color: $accent-color;
+            }
+        }
+    }
+
+.list-child {
+    display: block;
+}
+
+.no-pointer {
+    cursor: default !important;
+}
+
+.list-key {
+    margin-right: 5px;
+    display: inline-block;
+    vertical-align: middle;
+    min-height: 22px;
+}
+
+.list-summary {
+    display: inline-block;
+    vertical-align: middle;
+    min-height: 22px;
+    overflow: hidden;
+
+    button {
+        margin-left: 5px;
+    }
+}
+
+.listing {
+    display: table-cell;
+    height: inherit;
+    vertical-align: top;
+    padding-bottom: 20px;
+}
+
+c-list-preview, .list-preview {
+    display: table-cell;
+    height: inherit;
+    vertical-align: top;
+    width: 45%;
+    padding-left: 20px;
+
+    hr {
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    h2 {
+        margin-top: 4px;
+        margin-bottom: 10px;
+        font-weight: 700;
+    }
+
+    .dropdown {
+        display: inline-block;
+    }
+}
+
+c-list-preview.hidden, .list-preview-hidden {
+    display: none;
+}
+
+.list-options {
+
+    width: 100%;
+    float: left;
+    display: block;
+
+    .btn-group {
+        margin-right: 5px;
+        margin-bottom: 5px;
+    }
+
+    .btn-group-count {
+        padding: 6px 0;
+        float: left;
+    }
+
+    h3 {
+        display: inline;
+    }
+
+    .pull-right {
+
+        .btn-group {
+            margin-left: 5px;
+            margin-right: 0;
+            margin-bottom: 5px;
+        }
+
+        h3 {
+            font-weight: 400;
+        }
+    }
+
+    @include if-direct-parent('#list-results') {
+        .btn-group {
+            margin-left: 15px;
+        }
+
+        margin-right: 15px;
+    }
+}
+
+/* CUSTOM: R&M requests */
+.list-item-request {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+
+    label { margin: 0; }
+
+    .list-summary {
+        width: 100%;
+        span:first-child { margin-bottom: 5px; }
+    }
+
+    .list-row-requests-status {
+        text-align: center;
+    }
+
+    .list-row-requests-submitted {
+        text-align: right;
+    }
+
+    .list-row-requests-progress {
+        label {
+            float: left;
+            clear: both;
+        }
+
+        .list-row-requests-progress--header {
+            display: none;
+            float: left;
+        }
+
+        span {
+            span { margin-right: 5px;}
+            span:last-child { margin-right: 0; }
+        }
+    }
+
+    .progress { margin-top: 10px; margin-bottom: 10px; clear: both; }
+}
+
+/* CUSTOM: R&M workorders */
+.list-item-workorder--createdDate {
+    text-align: right;
+}
+
+.list-item-workorder--urgency {
+    text-align: center;
+}
+
+.list-item-workorder--assignee {
+    small {
+        clear: both;
+        display: block;
+    }
+}
+
+.list-item-workorder--createdDate {
+    span, small {
+        display: block;
+        clear: both;
+    }
+}
+
+.log {
+    border-top: 1px solid $border-grey;
+    padding-top: 15px;
+    padding-bottom: 15px;
+
+    p {
+        margin-bottom: 5px;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.ibox-content .log:first-child {
+    border-top: 0 !important;
+    padding-top: 0 !important;
+}
+
+.ibox-content .log:last-child {
+    padding-bottom: 0 !important;
+}
+
+/* Verification of competency */
+
+.accounts_dates{
+    float:right;
+    text-align: right;
+    width:22%;
+    margin:20px 0;
+
+}
+
+.VEC_dates{
+    float:right;
+    text-align: right;
+    width:20%;
+    margin-top:10px;
+}
+
+.list-VEC{
+  width:60%;
+  float:left;
+
+}
+
+.VEC-badge{
+    float:left;
+    width:60px;
+
+}
+
+/* Basic list without bullet */
+ul.no-bullet {
+    list-style-type: none;
+    padding: 0;
+}
+

package/sass/components/_modals.scss

@@ -0,0 +1,260 @@
+/* MODALS */
+
+.modal-content {
+    .ibox {
+        padding: 0 15px;
+        box-shadow: none;
+        border-bottom: 1px solid $lighter-grey;
+
+        .ibox-content {
+            border-top: 0;
+            padding: 15px 15px 20px 15px;
+        }
+    }
+}
+
+.modal-header {
+    background: $accent-color;
+    color: white;
+    border: 0;
+    padding: 14px 15px;
+
+    .course & {
+        background: $booking-type-course;
+    }
+
+    .event & {
+        background: $booking-type-event;
+    }
+
+    .meeting & {
+        background: $booking-type-meeting;
+    }
+
+    .clinical & {
+        background: $booking-type-clinical;
+    }
+
+    a {
+        color: white;
+    }
+
+    a i {
+        font-size: 20px;
+        margin-left: 20px;
+    }
+
+    h1, h2 { 
+        margin-top: 80px; 
+        color: white;          
+            a {                
+                color: white;
+            }
+            a.text-muted,
+            span.text-muted {                
+                color: lighten($accent-color, 16%);
+            }
+    }
+
+    h3 { 
+        font-size: 18px;
+        display: inline;
+        color: white !important;
+    }
+
+    &.today-title h3 {
+        font-size: 20px;
+        font-weight: 700;
+    }
+
+    .dropdown-menu a {
+        color: $grey;
+
+         &:hover {
+            background-color: $lightest-grey;
+        }
+    }
+
+    &.profile-title {
+        padding: 15px 20px 0 20px;        
+        margin-top: 80px;
+        text-align: center;
+        @include shadow-md;
+
+        h1 {
+            margin-top: 50px;
+        }        
+    }
+
+    .nav-tabs {
+        margin-left: -20px;
+        margin-right: -20px;
+    }
+
+    &.today-title {
+        padding-bottom: 0;
+
+        h1 { margin-top: 10px; } 
+
+        a i {
+            margin-left: 0;
+            font-size: inherit;
+        }
+
+        .title {
+            font-size: 32px;            
+        }        
+
+        .nav-tabs {
+            margin-left: -15px;
+            margin-right: -15px;
+        }
+    }
+}
+
+.modal-subheader {
+    background: $hover-grey;
+    padding: 20px 30px 0 30px;
+    border-bottom: 1px solid $border-color;
+}
+
+.modal-body {
+    padding-bottom: 20px;
+
+    .form-group,
+    & > .form-group:last-child {
+        margin-bottom: 20px;
+    }
+
+    .col-xxs-12 {
+        //margin-bottom: 15px;
+    }
+
+}
+
+.modal-footer {
+    padding: 20px;
+    background-color: $hover-grey;
+
+    div.btn-group.pull-right > button:first-child {
+        margin-right: 10px;
+    }
+}
+
+.choices_other--text {
+    margin-left: 30px;    
+    margin-top: -25px;
+    margin-bottom: 20px;
+}
+.wizard-modal {
+    /*SOLVES ISSUE WITH SCROLL BAR DISSAPPEARING WHEN CHILD MODAL IS CLOSED*/
+    overflow-y: scroll;
+}
+
+@media (min-width: 768px){
+    .child-modal .modal-content, .child-modal .modal-dialog{
+        width: 400px;
+        left: 10%;
+        margin-top: 20px;
+    }
+}
+
+.child-modal:not(.in) .modal-dialog {
+    -webkit-transform: translate3d(25%, 0, 0);
+    transform: translate3d(25%, 0, 0);
+}
+
+.child-modal .modal-content .modal-body {
+    max-height: 700px;
+    overflow: auto;
+}
+
+.modal-arrow {
+    display: none;
+}
+
+
+.child-modal .modal-arrow {
+    content: "";
+    display: block; 
+    position: fixed;
+    top: 60px;
+    bottom: auto;
+    left: 7px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 25px 35px 25px 0;
+    border-color: transparent #ffffff transparent transparent;
+    -webkit-filter: drop-shadow(-2px 0px 1px rgba(0,0,0,.3));
+    -moz-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.3));
+    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
+    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
+    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.3));
+    z-index: -1;
+}
+
+
+.renew-course-modal {
+    .helper {
+        display: block;
+        margin-left: 20px;
+    }
+}
+
+
+.modal-edit-roles {
+    div.lh-sm {
+        line-height: 5px;
+        padding-top: 10px;
+    }
+}
+
+/*
+.child-modal .modal-arrow {
+    content: "";
+    display: block; 
+    position: fixed;
+    top: 60px;
+    left: calc(60% - 196px);
+    z-index: 3000;  
+    bottom: auto;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 25px 35px 25px 0;
+    border-color: transparent #ffffff transparent transparent;
+    -webkit-filter: drop-shadow(-2px 0px 1px rgba(0,0,0,.5));
+    -moz-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
+    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
+    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
+    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
+}
+*/
+
+
+/* .toggle-highlight {
+    background-color: #E5E7EF;
+    border: 1px dashed #D8D8D8 !important;
+}
+
+.form-group .toggle-highlight {
+    background-color: #E5E7EF;
+    border: 1px dashed #D8D8D8 !important;
+}
+
+.toggle-label-highlight {
+    color: #536296;
+}
+ */
+@media (max-width: 768px) {
+    .child-modal .modal-arrow {
+        display: none;
+    }
+
+    .child-modal .modal-content, .child-modal .modal-dialog{
+      width: 100%;
+      left: auto;
+      margin-top: 0px;
+    }
+}