refactor(tabs): apply blur design

m4ttls · Feb 19, 2016 · b712b34 · b712b34
1 parent cb65c52
commit b712b34
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 89 deletions.
diff --git a/src/app/pages/ui/tabs/mainTabs.html b/src/app/pages/ui/tabs/mainTabs.html
@@ -1,4 +1,4 @@
-<uib-tabset class="panel medium-panel horizontal-tabs">
+<uib-tabset>
   <uib-tab heading="Start">
     <p>
       Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain,

diff --git a/src/app/pages/ui/tabs/sideTabs.html b/src/app/pages/ui/tabs/sideTabs.html
@@ -1,65 +1,77 @@
-<uib-tabset class="tabs-left panel xsmall-panel">
-  <uib-tab heading="Start">
-    <p class="text-center">
-      Take up one idea.
-    </p>
-    <div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
-    <p>
-      People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
-      way to succeed. </p>
-  </uib-tab>
-  <uib-tab heading="Get it done">
-    <p>
-      You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that
-      the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma,
-      whatever. This approach has never let me down, and it has made all the difference in my life.
-    </p>
+<div ba-panel
+     ba-panel-class="tabs-panel xsmall-panel with-scroll">
+  <uib-tabset class="tabs-left">
+    <uib-tab heading="Start">
+      <p class="text-center">
+        Take up one idea.
+      </p>
 
-    <p>
-      The reason most people never reach their goals is that they don't define them, or ever seriously consider them as
-      believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who
-      will be sharing the adventure with them.
-    </p>
-  </uib-tab>
-  <uib-tab heading="Achieve">
-    <p>
-      Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
-      benefit others.
-    </p>
+      <div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
+      <p>
+        People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
+        way to succeed. </p>
+    </uib-tab>
+    <uib-tab heading="Get it done">
+      <p>
+        You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust
+        that
+        the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma,
+        whatever. This approach has never let me down, and it has made all the difference in my life.
+      </p>
 
-    <p>Failure is the condiment that gives success its flavor.</p>
-  </uib-tab>
-</uib-tabset>
+      <p>
+        The reason most people never reach their goals is that they don't define them, or ever seriously consider them
+        as
+        believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who
+        will be sharing the adventure with them.
+      </p>
+    </uib-tab>
+    <uib-tab heading="Achieve">
+      <p>
+        Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
+        benefit others.
+      </p>
 
-<uib-tabset class="tabs-right panel xsmall-panel">
-  <uib-tab heading="Start">
-    <p class="text-center">
-      Take up one idea.
-    </p>
-    <div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
-    <p>
-      People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
-      way to succeed. </p>
-  </uib-tab>
-  <uib-tab heading="Get it done">
-    <p>
-      You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that
-      the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma,
-      whatever. This approach has never let me down, and it has made all the difference in my life.
-    </p>
+      <p>Failure is the condiment that gives success its flavor.</p>
+    </uib-tab>
+  </uib-tabset>
+</div>
 
-    <p>
-      The reason most people never reach their goals is that they don't define them, or ever seriously consider them as
-      believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who
-      will be sharing the adventure with them.
-    </p>
-  </uib-tab>
-  <uib-tab heading="Achieve">
-    <p>
-      Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
-      benefit others.
-    </p>
+<div ba-panel
+     ba-panel-class="tabs-panel xsmall-panel with-scroll">
+  <uib-tabset class="tabs-right">
+    <uib-tab heading="Start">
+      <p class="text-center">
+        Take up one idea.
+      </p>
 
-    <p>Failure is the condiment that gives success its flavor.</p>
-  </uib-tab>
-</uib-tabset>
+      <div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
+      <p>
+        People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
+        way to succeed. </p>
+    </uib-tab>
+    <uib-tab heading="Get it done">
+      <p>
+        You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust
+        that
+        the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma,
+        whatever. This approach has never let me down, and it has made all the difference in my life.
+      </p>
+
+      <p>
+        The reason most people never reach their goals is that they don't define them, or ever seriously consider them
+        as
+        believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who
+        will be sharing the adventure with them.
+      </p>
+    </uib-tab>
+    <uib-tab heading="Achieve">
+      <p>
+        Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
+        benefit others.
+      </p>
+
+      <p>Failure is the condiment that gives success its flavor.</p>
+    </uib-tab>
+  </uib-tabset>
+</div>
diff --git a/src/app/pages/ui/tabs/tabs.html b/src/app/pages/ui/tabs/tabs.html
@@ -1,6 +1,12 @@
 <div>
   <div class="row">
-    <div class="col-md-6" ng-include="'app/pages/ui/tabs/mainTabs.html'"></div>
+    <div class="col-md-6">
+      <div
+          ba-panel
+          ba-panel-class="with-scroll horizontal-tabs tabs-panel medium-panel">
+        <div ng-include="'app/pages/ui/tabs/mainTabs.html'"></div>
+      </div>
+    </div>
     <div class="col-md-6 tabset-group" ng-include="'app/pages/ui/tabs/sideTabs.html'"></div>
   </div>
   <div class="row accordions-row">

diff --git a/src/sass/app/_tabsPage.scss b/src/sass/app/_tabsPage.scss
@@ -4,6 +4,23 @@
   }
 }
 
+
+.panel.tabs-panel{
+  .panel-body{
+    padding: 0;
+  }
+  .dropdown-menu{
+    min-width: 132px;
+    top: auto;
+    border: none;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  &.with-scroll .panel-body{
+    height: 100%;
+  }
+}
+
 .xsmall-panel {
   .nav-tabs, .tab-content{
     height: 100%;

diff --git a/src/sass/theme/bootstrap-overrides/_tabs.scss b/src/sass/theme/bootstrap-overrides/_tabs.scss
@@ -5,6 +5,23 @@
   }
 }
 
+.tabs-right, .tabs-left {
+  .nav-tabs {
+    min-width: 100px;
+  }
+  .tab-content {
+    width: calc(100% - 100px);
+  }
+}
+
+.tabs-right .tab-content {
+  margin-right: 100px;
+}
+
+.tabs-left .tab-content {
+  margin-left: 100px;
+}
+
 .tab-content > .tab-pane,
 .pill-content > .pill-pane {
   display: none;
@@ -17,31 +34,28 @@
 
 .tabs-below {
   > .nav-tabs {
-    border-top: 1px solid #ddd;
 
     > li {
       margin-top: -1px;
       margin-bottom: 0;
 
       > a {
         &:hover, &:focus {
-          border-top-color: #ddd;
-          border-bottom-color: transparent;
         }
       }
     }
     > .active a {
       &, &:hover, &:focus {
-        border-color: transparent #ddd #ddd #ddd;
       }
     }
   }
 }
 
 .tabs-left, .tabs-right {
+  height: 100%;
   > .nav-tabs > li {
     float: none;
-
+    margin-bottom: 0;
     > a {
       min-width: 74px;
       margin-right: 0;
@@ -52,39 +66,37 @@
 
 .tabs-left > .nav-tabs {
   float: left;
-
+  border-bottom-left-radius: 5px;
   > li > a {
     margin-right: -1px;
 
     &:hover, &:focus {
-      border-color: #eee #ddd #eee #eee;
     }
   }
 
   > .active a {
     &, &:hover, &:focus {
-      border-color: #ddd transparent #ddd #ddd;
-      *border-right-color: #fff;
     }
   }
 }
 
-.tabs-right > .nav-tabs {
+.tabs-right > .nav.nav-tabs {
   float: right;
-  border-left: 1px solid #ddd;
-
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 5px;
   > li > a {
     margin-left: -1px;
 
     &:hover, &:focus {
-      border-color: #eee #eee #eee #ddd;
     }
   }
 
+  & > li:first-of-type a {
+    border-top-left-radius: 0;
+  }
+
   > .active a {
     &, &:hover, &:focus {
-      border-color: #ddd #ddd #ddd transparent;
-      *border-left-color: #fff;
     }
   }
 }
@@ -105,31 +117,68 @@
 
 .tab-content {
   padding: 15px 15px 5px 15px;
-  background: #ffffff;
-  color: $default-text;
-  overflow-y: scroll;
-  .tab-pane p{
-    color: $default-text;
+  background: transparent;
+  color: $default;
+  .tab-pane p {
+    color: $default;
   }
 }
 
-.nav-tabs > li {
-  margin-bottom:  0;
-}
 .nav.nav-tabs {
-  border-bottom: none;
-  background-color: #ddd;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom: 1px solid rgba(0, 0, 0, .01);
+  background-color: rgba(0, 0, 0, .2);
+  a {
+    color: $default;
+    &:hover {
+      color: $default;
+    }
+  }
   & > li > a {
     margin-right: 0;
     margin-bottom: 0;
     border-radius: 0;
     border: none;
-    &:hover{
+    color: $default;
+    &:hover {
       border: none;
+      color: $default;
+      background-color: rgba(0, 0, 0, .1);
     }
   }
+  & > li.active > a {
+    color: $default;
+    background-color: rgba(0, 0, 0, .15);
+  }
+  > li:first-of-type a {
+    border-top-left-radius: 5px;
+  }
+  .dropdown-menu > li > a {
+    color: $default-text;
+  }
+}
+
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+  background-color: transparent;
 }
 
-.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
+.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
   border: none;
 }
+
+.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger, {
+  .panel-heading{
+    border-radius: 4px;
+  }
+
+  &.panel-open .panel-heading{
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .panel-heading + .panel-collapse > .panel-body {
+    border-top: none;
+  }
+}
+