Fix ui buttons page (akveo#465)

* fix(logo): hover color of logo is changed * fix(grid): fixed grid and styles on ui.buttons page
tapirus · Nov 24, 2016 · c48616a · c48616a
1 parent 130bcc3
commit c48616a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/app/pages/ui/components/buttons/buttons.html b/src/app/pages/ui/components/buttons/buttons.html
@@ -1,21 +1,21 @@
 <div class="widgets">
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Flat Buttons" baCardClass="with-scroll button-panel">
         <flat-buttons></flat-buttons>
       </ba-card>
     </div>
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Raised Buttons" baCardClass="with-scroll button-panel">
         <raised-buttons></raised-buttons>
       </ba-card>
     </div>
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Different Sizes" baCardClass="with-scroll button-panel df-size-button-panel">
         <sized-buttons></sized-buttons>
       </ba-card>
     </div>
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Disabled" baCardClass="with-scroll button-panel">
         <disabled-buttons></disabled-buttons>
       </ba-card>

diff --git a/src/app/pages/ui/components/buttons/buttons.scss b/src/app/pages/ui/components/buttons/buttons.scss
@@ -128,3 +128,7 @@ $btn-icon-size: 34px;
   text-align: center;
   margin: 5px 0;
 }
+
+.btn-group.flex-dropdown {
+  display: flex;
+}
diff --git a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
@@ -88,8 +88,8 @@
 <h5 class="panel-subtitle">Split button dropdowns</h5>
 
 <div class="row btns-row">
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-primary">Primary</button>
       <button type="button" class="btn btn-primary" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -103,8 +103,8 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-success">Success</button>
       <button type="button" class="btn btn-success" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -118,8 +118,8 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-info">Info</button>
       <button type="button" class="btn btn-info" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -133,8 +133,8 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-default">Default</button>
       <button type="button" class="btn btn-default" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -148,8 +148,8 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-warning">Warning</button>
       <button type="button" class="btn btn-warning" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -163,8 +163,8 @@ <h5 class="panel-subtitle">Split button dropdowns</h5>
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-danger">Danger</button>
       <button type="button" class="btn btn-danger" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>