refactor(panels): use colors from vars

daemondev · May 13, 2016 · 5356ad1 · 5356ad1
1 parent 8a96c48
commit 5356ad1
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 52 deletions.
diff --git a/src/app/pages/ui/tabs/sampleAccordion.html b/src/app/pages/ui/tabs/sampleAccordion.html
@@ -1,15 +1,15 @@
 <uib-accordion>
-  <uib-accordion-group is-open="true" heading="Static Header, initially expanded" panel-class="bootstrap-panel accordion-panel">
+  <uib-accordion-group is-open="true" heading="Static Header, initially expanded" panel-class="bootstrap-panel accordion-panel panel-default">
     This content is straight in the template.
   </uib-accordion-group>
-  <uib-accordion-group heading="Dynamic Body Content" panel-class="bootstrap-panel accordion-panel">
+  <uib-accordion-group heading="Dynamic Body Content" panel-class="bootstrap-panel accordion-panel panel-default">
     <p>The body of the uib-accordion group grows to fit the contents</p>
     <button type="button" class="btn btn-primary btn-sm">Add Item</button>
   </uib-accordion-group>
-  <uib-accordion-group heading="Custom template" panel-class="bootstrap-panel accordion-panel">
+  <uib-accordion-group heading="Custom template" panel-class="bootstrap-panel accordion-panel panel-default">
     Hello
   </uib-accordion-group>
-  <uib-accordion-group panel-class="bootstrap-panel accordion-panel">
+  <uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default">
     <uib-accordion-heading>
       I can have markup, too! <i class="fa pull-right ion-settings"></i>
     </uib-accordion-heading>

diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panel.scss
@@ -47,93 +47,94 @@ $panel-heading-font-size: 16px;
   background-attachment: fixed;
 }
 
-.panel-white {
-  background-color: white;
-}
-
-.panel > .panel-body {
-  padding: 15px 22px;
-  height: 100%;
+.panel {
+  > .panel-body {
+    padding: 15px 22px;
+    height: 100%;
+  }
+  > .panel-heading {
+    color: $default-text;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  > .panel-footer {
+    color: $default-text;
+  }
 }
 
 .panel-heading, .panel-footer {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
   height: $panel-title-height;
   font-size: $panel-heading-font-size;
-
   $vertical-padding: ($panel-title-height - $panel-heading-font-size) / 2;
   padding: $vertical-padding 22px;
-
 }
 
 .panel-title {
   font-weight: $font-normal;
   text-transform: uppercase;
   opacity: 0.9;
-  //text-transform: uppercase;
 }
 
+.panel-default {
+  > .panel-heading {
+    color: $bootstrap-panel-text;
+  }
+  > .panel-footer {
+    color: $bootstrap-panel-text;
+  }
+}
+
+
 .panel-primary {
   > .panel-heading {
-    color: $primary;
     background-color: $primary-bg;
     border-color: $primary-bg;
   }
 }
 
 .panel-success {
   > .panel-heading {
-    color: $success;
     background-color: $success-bg;
     border-color: $success-bg;
   }
 }
 
 .panel-info {
   > .panel-heading {
-    color: $info;
     background-color: $info-bg;
     border-color: $info-bg;
   }
 }
 
 .panel-warning {
   > .panel-heading {
-    color: $warning;
     background-color: $warning-bg;
     border-color: $warning-bg;
   }
 }
 
 .panel-danger {
   > .panel-heading {
-    color: $danger;
     background-color: $danger-bg;
     border-color: $danger-bg;
   }
 }
 
-.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger {
-  .panel-heading {
-    color: rgba(255, 255, 255, 0.8);
+.bootstrap-panel{
+  background-color: $bootstrap-panel-bg;
+  .panel-body{
+    color: $bootstrap-panel-text;
   }
 }
 
-.panel.bootstrap-panel{
-  .panel-body, .panel-heading {
-    p, div, span {
-      color: $default-text;
-    }
-  }
-}
-
-.accordion-panel.panel.bootstrap-panel{
+.accordion-panel.panel {
   &.panel-primary,
   &.panel-success,
   &.panel-info,
   &.panel-warning,
-  &.panel-danger{
+  &.panel-danger {
     .panel-heading {
       p, div, span {
         color: rgba(255, 255, 255, 0.8);
@@ -142,8 +143,8 @@ $panel-heading-font-size: 16px;
   }
 }
 
-.panel-group .panel.accordion-panel{
-  .panel-heading{
+.panel-group .panel.accordion-panel {
+  .panel-heading {
     border-bottom: 0;
   }
 }
@@ -162,15 +163,14 @@ $panel-heading-font-size: 16px;
   height: 120px;
 }
 
-.footer-panel{
+.footer-panel {
   height: 142px;
 }
 
-.light-text{
+.light-text {
   font-weight: $font-light;
 }
 
-
 /*
 .panel-group .panel {
   border-radius: 0;

diff --git a/src/sass/theme/bootstrap-overrides/_tabs.scss b/src/sass/theme/bootstrap-overrides/_tabs.scss
@@ -168,9 +168,9 @@
   border: none;
 }
 
-.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger, {
+.accordion-panel  {
   .panel-heading {
-    border-radius: 4px;
+    border-radius: 3px;
   }
 
   &.panel-open .panel-heading {

diff --git a/src/sass/theme/conf/_colorScheme.scss b/src/sass/theme/conf/_colorScheme.scss
@@ -10,6 +10,8 @@ $input-border: $border;// shade
 $sidebar: rgba(#000000, 0.5);
 $sidebar-text: #ffffff;
 $dropdown-text: #7d7d7d;
+$bootstrap-panel-text: #7d7d7d;
+$bootstrap-panel-bg: #ffffff;
 
 $primary: #209e91 !default;
 $info: #2dacd1 !default;

diff --git a/src/sass/theme/dashboard/_timeline.scss b/src/sass/theme/dashboard/_timeline.scss
@@ -133,6 +133,19 @@
 @mixin cd-timeline-color($color) {
   background: $color;
 }
+
+@mixin cd-timeline-left-color($color) {
+  &:before {
+    border-left-color: $color;
+  }
+}
+
+@mixin cd-timeline-right-color($color) {
+  &::before {
+    border-right-color: $color;
+  }
+}
+
 .cd-timeline-content.warning {
   @include cd-timeline-color(rgba($warning, 0.2));
 }
@@ -147,18 +160,6 @@
   background-color: $border;
 }
 
-@mixin cd-timeline-left-color($color) {
-  &:before {
-    border-left-color: $color;
-  }
-}
-
-@mixin cd-timeline-right-color($color) {
-  &::before {
-    border-right-color: $color;
-  }
-}
-
 @media only screen and (min-width: $resXL) {
 
   #cd-timeline::before {