@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/components/_navigation.scss

@@ -0,0 +1,596 @@
+.nav > li > a {
+  color: desaturate($accent-color, 25%);
+  padding: 14px 20px 15px 20px;
+  font-weight: 500;
+
+    &.user-element {
+        padding: 4px 15px;
+    }
+}
+
+.nav-second-level {
+
+    & > li > a {
+        padding: 8px 20px 8px 55px !important;
+        background: $dark-navyblue;
+    }
+
+    & > li:last-child {
+        margin: 0px;
+    }
+}
+
+.nav-label {
+  font-size: $font-std*1.2;
+}
+
+.navbar {
+    //min-height: 58px;
+}
+
+.navbar .dropdown-menu {
+  margin-top: -6px;
+  
+    .indicator {
+        left: auto !important;
+        right: 30px !important;        
+    }
+}
+
+.navbar-right {
+    float: right!important;
+    margin-right: 0;
+
+    li > a {
+        color: #999c9e;
+    }
+
+    .dropdown-menu {
+        right: 20px;
+        left: auto;
+    }
+}
+
+.nav>li>a i {
+    font-size: $font-std*1.2;
+}
+
+.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {
+  background-color: $dark-navyblue;
+}
+
+
+.navbar-header {
+    width: 63px;
+}
+
+.navbar-search {
+    width: auto;
+    overflow: hidden;
+    position: relative;   
+
+    label {
+        position: absolute;
+        left: 28px;
+        top: 16px;
+        font-size: 18px;
+        color: darken($gray, 25%);
+    }
+
+    .search-clear {
+        text-decoration: none;
+        position: absolute;
+        font-size: 18px;
+        right: 28px;
+        top: 16px;
+        color: $accent-color;
+    }
+}
+
+.navbar-form-custom {
+    float: none;
+    height: 50px;
+    padding: 0;
+    display: inline;
+
+    .form-group {
+        padding: 10px 15px;
+        margin-bottom: 0;
+    }
+}
+
+.navbar-form-custom .form-control {
+    background-color: darken($gray, 4%);
+    border-radius: 2px;
+    border: medium none;
+    font-size: $font-std;
+    height: 38px;
+    margin: 0;
+    z-index: 2000;
+    padding: 1px 45px; 
+}
+
+.navbar-links {
+    float: right;
+    width: 200px;
+}
+
+.navbar-top-links li {
+    &.dropdown {
+        margin-top: 23px;
+    }
+
+    a.count-info {
+        padding: 23px 14px 17px 10px;
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &.guest-item {
+        padding: 0;
+        vertical-align: top;
+        padding: 6px 10px 6px 10px;
+        line-height: 2.2;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        float: left;        
+
+        a {
+            font-weight: bold;
+            font-size: $font-std;
+            padding: 12px 20px 12px 10px;
+            cursor: pointer !important;
+        }        
+    }
+
+    &.profile-dropdown {
+        cursor: pointer;
+        padding: 0;
+        vertical-align: top;
+        padding: 4px 25px 0px 10px;
+        //line-height: 2.2;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+
+        .dropdown-toggle {
+            cursor: pointer;
+        }
+
+        a {
+            padding: 12px 20px;
+            cursor: pointer !important;
+        }
+
+        .profile-name {
+            padding: 0;
+            color: $accent-color;
+        }        
+
+        .initialsCircle {
+            padding: 0;
+            color: $grey;
+        }
+
+        .sub-heading {
+            line-height: 6px;
+            margin-top: 7px;
+        }
+
+        span.ellipsis {
+            display: inline-block;
+            color: $accent-color;
+            font-size: 16px;
+            font-weight: bold;
+            margin-right: 0px;
+            margin-top: 2px;
+            width: 270px;
+            max-width: 270px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: right;
+
+            a {
+                padding: 0;
+                font-weight: 500;
+            }
+        }
+
+    }
+
+}
+
+.nav.navbar-top-links a {
+  font-size: $font-std;
+}
+
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+    background: $gray;
+}
+
+.count-info .label {
+    top: -8px;
+    right: 2px;
+}
+
+.navbar-top-links .dropdown-alerts {
+    margin-left: auto;
+}
+
+.navbar-top-links .dropdown-alerts {
+    margin-left: auto;
+    right: -70px;
+}
+
+.navbar-top-links .dropdown-user {
+    right: 0;
+    left: auto;
+}
+
+.nav-header {
+    background: $nav-bg;
+
+    .orphan & {
+        background: transparent !important;        
+    }
+
+    .full_height & {
+        background: transparent;
+        .logo {
+            color: $grey;
+        }
+    }
+}
+
+
+#side-menu .nav > li.active, 
+.nav > li.current,  {
+    border-left: 4px solid $accent-color;
+    background: $dark-navyblue;
+
+    a {
+        padding-left: 18px;
+    } 
+}
+
+#side-menu .nav > li.active > ul.nav-second-level > li.active,
+.nav > li.active > ul.nav-second-level > li.active  {
+    border-left: 0 !important;
+}
+
+
+#side-menu .nav > li.website, .nav > li.website {
+    border-top: 2px solid $dark-navyblue;    
+    i {
+        margin-left: 3px;
+        margin-right: 9px;
+    }
+}
+
+.nav-second-level {
+    
+    & > li.active > a {
+        background: darken($dark-navyblue, 10%);
+
+        &:hover {
+            background: darken($dark-navyblue, 10%);
+        }
+    }
+
+    .mini-navbar .nav & {
+        padding: 0px;
+    }
+}
+
+body.mini-navbar {
+    .navbar-default .nav > li > .nav-second-level {
+        background: $dark-navyblue;
+    }
+
+    .navbar-default .nav > li > .nav-second-level li {
+        background: $dark-navyblue;
+    }
+
+    .navbar-default .nav > li > .nav-second-level li a {
+        font-size: 15px;
+        padding: 15px 25px 15px 15px !important;
+        border-radius: 0px;
+    }
+}
+
+
+.navbar-form-custom {
+    display: inline;
+}
+
+.canvas-menu.mini-navbar .nav-second-level {
+    background: darken($nav-bg, 5%);
+}
+
+.navbar-fixed-top, .navbar-static-top {
+    background: $gray;
+    @include shadow-md;
+}
+
+body.mini-navbar .profile-element, body.mini-navbar .logo, body.mini-navbar .nav-label, body.mini-navbar .navbar-default .nav li a span {
+  display: none;
+}
+
+body.mini-navbar .nav-header {
+  background-color: $darker-navyblue;
+}
+
+.minimalize-styl-2 {
+    margin: 10px 5px 10px 15px;
+}
+
+.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+  color: $accent-color !important;
+}
+
+
+/* Tabs 
+.tabs-container {
+
+    .nav-tabs { 
+        border-bottom: 0; 
+
+        .tabs-container-home & {
+            border-bottom: 1px solid $lighter-grey;
+        }
+
+        & > {
+            li {
+                margin-bottom: 0;
+
+
+                a {
+                    border: 0; 
+                    color: #666;
+                    opacity: 0.6;
+                    line-height: 48px;
+                    padding: 0 15px;            
+
+                    border-radius: 0;
+                    margin: 0;   
+
+                    .tabs-container-home & {
+                        border-bottom: 1px solid transparent;
+                    }
+                }
+
+                &.active > a,
+                &.active > a:hover,
+                &.active > a:active,
+                &.active > a:focus {
+                    border-width: 0;       
+                    opacity: 1;             
+
+                    .tabs-container-home & {
+                        border-bottom: 1px solid $navy;
+                    }
+                }
+
+
+
+                &.active > a,
+                & > a:hover {
+                    border: 0; 
+                    color: $navy; 
+                    background: transparent !important;                 
+                }
+
+                & > a:active {
+                    padding-bottom: 2px;
+                    margin-bottom: -2px;
+                    background-color: darken($navy, 1%) !important;
+                    outline: none;                    
+                }
+                //When you select a tab, the background slightly becomes darker
+
+                &.active > a:hover {
+                    margin-bottom: 0;
+                    padding-bottom: 0;                    
+                }
+                //So that when you select an active tab, the border doesn't disappear
+
+            }
+
+
+        }        
+
+    }
+
+    .tab-pane { 
+        padding: 15px 0; 
+    }
+    
+    .nav li {
+        border-border: 0;
+
+        &.active {
+            border: 0;
+            background: none;
+        }
+    }
+
+    .text-center {
+        li {
+        float:none;
+        display: inline-block;
+        }
+    }  
+
+}*/
+
+#resource-filters .nav-tabs {
+    @extend .b-b;
+    a:active  {
+    background: none !important;
+    }
+    .active {
+        border-bottom: 1px solid $navy;
+    }
+}
+
+
+#my-courses-filters {
+    .tabs-container {
+        //margin-bottom: -17px;
+        .nav-tabs > li {
+            float: left !important;
+        }
+    }
+
+    .nav-tabs {
+        border-bottom: 0px;
+
+        a { color: #EFEFEF; }
+
+        .active {
+            a { color: #FFF; }
+        }
+    }
+}
+
+
+@media (min-width: 992px) {
+    #my-courses-filters {
+        .tabs-container {
+            border-bottom: 0px;
+            margin-left: 5px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+.ibox-content .tabs-container {
+    .nav-tabs {
+        li {
+            border-bottom: 2px solid transparent;
+            margin-bottom: 1px;
+            
+            &.active {
+                border-bottom: 2px solid $navy;
+                
+                a,
+                a:hover {
+                    color: $navy;
+                }
+            }
+        }        
+    }
+}
+
+.modal-header .tabs-container {
+
+    .nav-tabs {
+        li {
+            //border-bottom: 2px solid transparent;
+            
+            &.active {
+                //border-bottom: 2px solid white;
+                
+                a,
+                a:hover {
+                    color: white;
+                }
+            }
+        }
+
+        li a {
+            color: rgba(255,255,255,.7);
+            transition: color .2s;
+            border-radius: 0 0 0 0;
+            border: 0;
+            box-shadow: none;
+            &:hover {
+                border: 0;
+                color: rgba(255,255,255,1);
+                transition: color .2s;
+            }
+        }
+
+        li.active a,
+        li.active a:hover {
+            color: white;
+            border: 0;
+        }
+
+        .notification i {
+            position: absolute;
+            font-size: 8px;
+            margin-top: -27px;
+            margin-left: 42px;
+            color: shade($red, 15%);
+        }
+    }
+}
+
+.tab-title-row {
+    background-color: $accent-color;
+    padding: 18px 10px 0px 10px;
+    color: #fff;
+
+    .centered-content {
+        margin-bottom: 0;
+    }
+
+    a {
+        color: #fff;
+    }
+}
+
+
+.tab-title-row .tabs-container {
+    .nav-tabs {
+        li {
+            border-bottom: 2px solid transparent;
+            
+            &.active {
+                border-bottom: 2px solid white;
+                
+                a,
+                a:hover {
+                    color: white;
+                }
+            }
+        }
+
+        li a {
+            color: rgba(255,255,255,.7);
+            transition: color .2s;
+
+            &:hover {
+                border: 0;
+                color: rgba(255,255,255,1);
+                transition: color .2s;
+            }
+        }
+
+        li.active a,
+        li.active a:hover {
+            color: white;
+        }
+
+        .notification i {
+            position: absolute;
+            font-size: 8px;
+            margin-top: -27px;
+            margin-left: 42px;
+            color: shade($red, 15%);
+        }
+    }
+}

package/sass/components/_photo_upload.scss

@@ -0,0 +1,39 @@
+/* PHOTO UPLOAD */
+
+.photo-container {
+    position: relative;
+    display: inline-block; /* added */
+    overflow: hidden; /* added */
+    width: 100%;
+
+    &:hover div {
+        opacity: 1; /* added */
+        top: 0; /* added */
+        z-index: 500;
+    
+        i {
+            top: 45%;
+            position: absolute;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+            background-color: rgba(0, 0, 0, 0.7);
+            width: 40px;
+            line-height: 40px;
+            border-radius: 50%;
+        }
+    }
+
+    div {
+        role: button;
+        display: block;
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        text-align: center;
+        color: inherit;        
+    }
+}

package/sass/components/_progress_bars.scss

@@ -0,0 +1,90 @@
+/* Progress Bars */
+.progress {
+    background-color: #E2E2E2;
+}
+
+.progress-room-timeline {
+    background-color: #FFFFFF;
+
+    .progress-bar-yellow {
+        background-color: $dark-gray;
+    }
+
+    .progress-bar-grey {
+        background-color: #FFFFFF;
+    }
+}
+
+.progress-bar,
+.progress-bar-success,
+.progress-bar-green {
+    background-color: $green;
+    min-width: 25px;
+}
+
+.progress-bar-yellow,
+.progress-bar-mustard {
+    background-color:$mustard;
+}
+
+.progress-bar-red,
+.progress-bar-danger {
+    background-color: $red;
+}
+
+.progress-bar-accent-color {
+    background-color: $accent-color;
+}
+
+.progress-bar-purple {
+    background-color: $purple;
+}
+
+.progress-bar-pink {
+    background-color: $pink;
+}
+
+.progress-bar-info {
+    background-color: $info;
+}
+
+.progress-bar-grey {
+    background-color: $light-grey;
+}
+
+.progress-bar-darkBlue {
+    background-color: $accent-color;
+}
+
+.progress-bar-teal {
+    background-color: $teal;
+}
+
+.progress-bar-orange {
+    background-color: $orange;
+}
+
+
+/* Modifiers */
+.alert-success .progress,
+.alert-green .progress {
+    background-color: #B8E0C5;
+    margin: 10px 0 0 0;
+}
+
+.alert-grey .progress .progress-bar {
+    background-color: $grey;
+}
+
+
+/* Mini progress bars */
+.progress-mini .progress-bar {
+    min-width: 0;
+}
+
+
+/* Flat progress bars */
+
+.progress-flat {
+    height: 5px;
+}