fix tables.less, upd buttons.less (add new button types)

pm7 · Oct 14, 2012 · f33b9cd · f33b9cd
1 parent 0d9cd3f
commit f33b9cd
Show file tree

Hide file tree

Showing 13 changed files with 297 additions and 67 deletions.
diff --git a/css/modern.css b/css/modern.css
@@ -1521,18 +1521,21 @@ button,
   font-size: 9pt;
   min-width: 90px;
   min-height: 32px;
+  height: 32px;
   background-color: #ccc;
   border: 1px transparent solid;
   color: #353535;
   margin-right: 10px;
   margin-bottom: 10px;
   border-raduis: 0;
+  text-align: center;
+  vertical-align: middle;
 }
 button:active,
 .button:active,
 button.default:active,
 .button.default:active {
-  background-color: #000;
+  background-color: #000 !important;
   color: #fff;
 }
 button:disabled,
@@ -1581,17 +1584,82 @@ button:focus,
   min-height: 32px;
   width: 32px;
   height: 32px;
-  padding-top: 3px;
+  text-align: center;
+  position: relative;
+  padding: 0;
 }
 .tool-button img {
   width: 16px;
   height: 16px;
-  margin: 0;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.toolbar button {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  position: relative;
   padding: 0;
-  display: inline;
-  float: none;
+  margin-right: 5px;
+}
+.toolbar button img {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.toolbar-vertical {
+  width: 33px;
+  float: left;
+  margin-right: 10px;
+  *zoom: 1;
+}
+.toolbar-vertical button {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  position: relative;
+  padding: 0;
+}
+.toolbar-vertical button img {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.toolbar-vertical:before,
+.toolbar-vertical:after {
+  display: table;
+  content: "";
+}
+.toolbar-vertical:after {
   clear: both;
 }
+.image-button {
+  position: relative;
+  border: 0;
+  padding-right: 38px;
+}
+.image-button img,
+.image-button:active img {
+  position: absolute;
+  right: 0;
+  margin-left: 32px;
+  padding: 5px;
+  height: 100%;
+  top: 0px;
+  margin-left: 0px;
+  box-sizing: border-box;
+  border: 1px transparent solid;
+  z-index: 1001;
+}
 .button-set button {
   margin-right: 0;
 }
@@ -1610,9 +1678,11 @@ button:focus,
 table {
   width: 100%;
   border-collapse: separate;
-  margin: 20px 0;
+  margin: 0 0 20px;
 }
-table thead tr th {
+table thead tr th,
+table thead tr td {
+  display: table-cell;
   vertical-align: bottom;
   padding-bottom: 5px;
   padding-top: 10px;
@@ -1629,14 +1699,17 @@ table thead tr th {
   color: rgba(0, 0, 0, 0.6);
   text-align: left;
 }
-table thead tr th.right {
+table thead tr th.right,
+table thead tr td.right {
   text-align: right;
   padding-right: 10px;
 }
-table thead tr th.last {
+table thead tr th.last,
+table thead tr td.last {
   border-right: 1px transparent solid;
 }
-table thead tr th:last-child {
+table thead tr th:last-child,
+table thead tr td:last-child {
   border-right: 1px transparent solid;
 }
 table tbody tr {
@@ -1696,7 +1769,8 @@ table.striped tbody tr:nth-child(odd) {
 table.hovered {
   border-collapse: separate !important;
 }
-table.hovered thead tr th:hover {
+table.hovered thead tr th:hover,
+table.hovered thead tr td:hover {
   border: 1px #1c98cc solid;
   background: rgba(28, 183, 236, 0.1);
 }
@@ -3325,12 +3399,15 @@ input[type=submit] {
   font-size: 9pt;
   min-width: 90px;
   min-height: 32px;
+  height: 32px;
   background-color: #ccc;
   border: 1px transparent solid;
   color: #353535;
   margin-right: 10px;
   margin-bottom: 10px;
   border-raduis: 0;
+  text-align: center;
+  vertical-align: middle;
   border-radius: 0;
 }
 input[type=button]:active,
@@ -3339,7 +3416,7 @@ input[type=submit]:active,
 input[type=button].default:active,
 input[type=reset].default:active,
 input[type=submit].default:active {
-  background-color: #000;
+  background-color: #000 !important;
   color: #fff;
 }
 input[type=button]:disabled,
@@ -3660,7 +3737,6 @@ pre {
   display: block;
   padding: 10px;
   margin: 0;
-  font-size: 10pt;
   line-height: 14pt;
   word-break: break-all;
   word-wrap: break-word;

diff --git a/css/theme-dark.css b/css/theme-dark.css
@@ -6,6 +6,9 @@
  * Threme-dark.less
  *
  */
+body {
+  background: #1d1d1d;
+}
 .text-rest-state {
   color: #ffffff;
 }

diff --git a/less/buttons.less b/less/buttons.less
@@ -44,15 +44,18 @@ button, .button {
     #font > .control;
     min-width: 90px;
     min-height: 32px;
+    height: 32px;
     background-color: #ccc;
     border: 1px transparent solid;
     color: #353535;
     margin-right: 10px;
     margin-bottom: 10px;
     border-raduis: 0;
+    text-align: center;
+    vertical-align: middle;
 
     &:active, &.default:active {
-        background-color: #000;
+        background-color: #000 !important;
         color: #fff;
     }
 
@@ -100,16 +103,52 @@ button, .button {
     min-height: 32px;
     width: 32px;
     height: 32px;
-    padding-top: 3px;
+    text-align: center;
+    position: relative;
+    padding: 0;
 
     img {
         width: 16px;
         height: 16px;
-        margin: 0;
-        padding: 0;
-        display: inline;
-        float: none;
-        clear: both;
+        position: absolute;
+        top: 8px;
+        left: 0px;
+    }
+}
+
+.toolbar {
+    button {
+        .tool-button;
+        margin-right: 5px;
+    }
+}
+.toolbar-vertical {
+    width: 33px;
+    float: left;
+    margin-right: 10px;
+
+    button {
+        .tool-button;
+    }
+    .clearfix;
+}
+
+.image-button {
+    position: relative;
+    border: 0;
+    padding-right: 38px;
+
+    img, &:active img {
+        position: absolute;
+        right: 0;
+        margin-left: 32px;
+        padding: 5px;
+        height: 100%;
+        top: 0px;
+        margin-left: 0px;
+        box-sizing: border-box;
+        border: 1px transparent solid;
+        z-index: 1001;
     }
 }
 

diff --git a/less/code.less b/less/code.less
@@ -26,7 +26,6 @@ pre {
     display: block;
     padding: 10px;
     margin: 0;
-    font-size: 10pt;
     line-height: 14pt;
     word-break: break-all;
     word-wrap: break-word;

diff --git a/less/grid.less b/less/grid.less
@@ -70,7 +70,6 @@
     }
 }
 
-
 .grid {
     margin: 0 0 20px;
 

diff --git a/less/tables.less b/less/tables.less
@@ -10,11 +10,12 @@
 table {
     width: 100%;
     border-collapse: separate;
-    margin: 20px 0;
+    margin: 0 0 20px;
 
     thead {
         tr {
-            th {
+            th, td {
+                display: table-cell;
                 vertical-align: bottom;
                 padding-bottom: @subunit;
                 padding-top: @subunit * 2;
@@ -112,7 +113,7 @@ table {
         border-collapse: separate !important;
         thead {
             tr {
-                th {
+                th,td {
                     &:hover {
                         border: 1px #1c98cc solid;
                         background: rgba(28, 183, 236, 0.10);

diff --git a/less/theme-dark.less b/less/theme-dark.less
@@ -7,6 +7,10 @@
  *
  */
 
+body {
+    background: #1d1d1d;
+}
+
 .text-rest-state       {color: rgba(255, 255, 255, 1.0);}
 .text-rest2-state      {color: rgba(255, 255, 255, 0.6);}
 .text-hover-state      {color: rgba(255, 255, 255, 0.8);}

diff --git a/public/buttons.php b/public/buttons.php
@@ -84,6 +84,56 @@
                         </div>
                     </div>
 
+                    <div class="row">
+                        <div class="span10">
+                            <h2>Toolbar</h2>
+                            <div class="toolbar">
+                                <button>1</button>
+                                <button>2</button>
+                                <button>3</button>
+                                <button>4</button>
+                                <button>5</button>
+                            </div>
+<pre class="prettyprint linenums">
+    &lt;div class="toolbar"&gt;
+        &lt;button /&gt;
+        ...
+        &lt;button /&gt;
+    &lt;/div&gt;
+</pre>
+                            <h2>Toolbar Vertical</h2>
+                            <div class="clearfix">
+                                <div class="toolbar-vertical">
+                                    <button>1</button>
+                                    <button>2</button>
+                                    <button>3</button>
+                                    <button>4</button>
+                                    <button>5</button>
+                                </div>
+                            </div>
+<pre class="prettyprint linenums">
+    &lt;div class="toolbar-vertical"&gt;
+        &lt;button /&gt;
+        ...
+        &lt;button /&gt;
+    &lt;/div&gt;
+</pre>
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="span10">
+                            <h2>Image button</h2>
+                            <button class="image-button bg-color-darken fg-color-white">Download source<img class="bg-color-green" src="images/download-32.png"/></button>
+                            <button class="image-button bg-color-pink fg-color-white">Armor you computer<img class="bg-color-red" src="images/armor.png"/></button>
+<pre class="prettyprint linenums">
+    &lt;button class="image-button"&gt; Caption &lt;img/&gt; &lt;/button&gt;
+    ===================
+    &lt;button class="image-button bg-color-darken fg-color-white"&gt;Download&lt;img src="images/down.png"/&gt;&lt;/button&gt;
+</pre>
+                        </div>
+                    </div>
+
                     <div class="row">
                         <div class="span10">
                             <h2>Button set</h2>
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,7 +70,6 @@ @@
         }
     }
     .grid {
         margin: 0 0 20px;
@@ Expand Down @@