Skip to content

Commit

Permalink
fix icons.less for button and li
Browse files Browse the repository at this point in the history
  • Loading branch information
olton committed Nov 12, 2012
1 parent 9d2b966 commit 7da08f3
Showing 5 changed files with 146 additions and 143 deletions.
111 changes: 52 additions & 59 deletions css/modern.css
Original file line number Diff line number Diff line change
@@ -817,6 +817,9 @@ License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/
content: attr(data-icon);
speak: none;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
@@ -826,8 +829,31 @@ License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/
font-style: normal;
speak: none;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
}
.icon-large:before {
vertical-align: middle;
font-size: 1.3333333333333332em;
margin-top: -8px;
}
button [class^="icon-"],
.button [class^="icon-"],
button [class*=" icon-"],
.button [class*=" icon-"] {
font-size: 1em;
}
li [class^="icon-"],
li [class*=" icon-"] {
display: inline-block;
width: 1.25em;
text-align: center;
}
li .icon-large:before,
li .icon-large:before {
width: 1.875em;
}
.icon-home:before {
content: "\21";
}
@@ -2705,6 +2731,10 @@ button:focus,
outline: 0;
border: 1px #353535 dotted;
}
a.button:hover,
a.button:active {
color: inherit;
}
button.mini,
.button.mini,
.tool-button.mini {
@@ -2720,15 +2750,6 @@ button.big,
height: 48px;
font-size: 1.2em;
}
button.big [class*=icon-],
.button.big [class*=icon-],
.tool-button.big [class*=icon-] {
margin-top: 6px;
zoom: 1;
}
.tool-button [class*=icon-] {
margin-top: 2px !important;
}
.tool-button.mini {
min-width: 22px;
width: 22px;
@@ -2737,10 +2758,6 @@ button.big [class*=icon-],
min-width: 48px;
width: 48px;
}
.tool-button.big [class*=icon-] {
margin-top: 2px !important;
margin-left: 15px !important;
}
.command-button {
width: 330px;
text-align: left;
@@ -2794,6 +2811,10 @@ button.big [class*=icon-],
position: relative;
padding: 0;
}
.tool-button [class^="icon-"],
.tool-button [class*=" icon-"] {
font-size: 1em;
}
.tool-button.standart {
min-width: 90px;
min-height: 32px;
@@ -2828,10 +2849,6 @@ button.big [class*=icon-],
height: 48px;
font-size: 1.2em;
}
.tool-button.big [class*=icon-] {
margin-top: 6px;
zoom: 1;
}
.tool-button img {
width: 16px;
height: 16px;
@@ -2884,15 +2901,6 @@ button.big [class*=icon-],
height: 48px;
font-size: 1.2em;
}
.toolbar a.big [class*=icon-],
.toolbar button.big [class*=icon-] {
margin-top: 6px;
zoom: 1;
}
.toolbar a [class*=icon-],
.toolbar button [class*=icon-] {
margin-top: 2px !important;
}
.toolbar a.mini,
.toolbar button.mini {
min-width: 22px;
@@ -2903,10 +2911,11 @@ button.big [class*=icon-],
min-width: 48px;
width: 48px;
}
.toolbar a.big [class*=icon-],
.toolbar button.big [class*=icon-] {
margin-top: 2px !important;
margin-left: 15px !important;
.toolbar a [class^="icon-"],
.toolbar button [class^="icon-"],
.toolbar a [class*=" icon-"],
.toolbar button [class*=" icon-"] {
font-size: 1em;
}
.toolbar a.standart,
.toolbar button.standart {
@@ -2951,11 +2960,6 @@ button.big [class*=icon-],
height: 48px;
font-size: 1.2em;
}
.toolbar a.big [class*=icon-],
.toolbar button.big [class*=icon-] {
margin-top: 6px;
zoom: 1;
}
.toolbar a img,
.toolbar button img {
width: 16px;
@@ -3028,15 +3032,6 @@ button.big [class*=icon-],
height: 48px;
font-size: 1.2em;
}
.toolbar-vertical a.big [class*=icon-],
.toolbar-vertical button.big [class*=icon-] {
margin-top: 6px;
zoom: 1;
}
.toolbar-vertical a [class*=icon-],
.toolbar-vertical button [class*=icon-] {
margin-top: 2px !important;
}
.toolbar-vertical a.mini,
.toolbar-vertical button.mini {
min-width: 22px;
@@ -3047,10 +3042,11 @@ button.big [class*=icon-],
min-width: 48px;
width: 48px;
}
.toolbar-vertical a.big [class*=icon-],
.toolbar-vertical button.big [class*=icon-] {
margin-top: 2px !important;
margin-left: 15px !important;
.toolbar-vertical a [class^="icon-"],
.toolbar-vertical button [class^="icon-"],
.toolbar-vertical a [class*=" icon-"],
.toolbar-vertical button [class*=" icon-"] {
font-size: 1em;
}
.toolbar-vertical a.standart,
.toolbar-vertical button.standart {
@@ -3095,11 +3091,6 @@ button.big [class*=icon-],
height: 48px;
font-size: 1.2em;
}
.toolbar-vertical a.big [class*=icon-],
.toolbar-vertical button.big [class*=icon-] {
margin-top: 6px;
zoom: 1;
}
.toolbar-vertical a img,
.toolbar-vertical button img {
width: 16px;
@@ -5205,6 +5196,14 @@ input[type=submit] {
position: relative;
border-radius: 0;
}
input[type=button] [class^="icon-"],
input[type=reset] [class^="icon-"],
input[type=submit] [class^="icon-"],
input[type=button] [class*=" icon-"],
input[type=reset] [class*=" icon-"],
input[type=submit] [class*=" icon-"] {
font-size: 1em;
}
input[type=button].standart,
input[type=reset].standart,
input[type=submit].standart {
@@ -5257,12 +5256,6 @@ input[type=submit].big {
height: 48px;
font-size: 1.2em;
}
input[type=button].big [class*=icon-],
input[type=reset].big [class*=icon-],
input[type=submit].big [class*=icon-] {
margin-top: 6px;
zoom: 1;
}
input[type=submit] {
background-color: #008287;
color: #fff;
26 changes: 4 additions & 22 deletions less/buttons.less
Original file line number Diff line number Diff line change
@@ -64,8 +64,6 @@ button, .button {
}

&:active, &.default:active {
//background-color: #000;
//color: #fff;
top: 1px;
left: 1px;
}
@@ -85,10 +83,12 @@ button, .button {
outline: 0;
border: 1px #353535 dotted;
}
}

&:hover {
a.button {
&:hover, &:active {
color: inherit;
}

}

button, .button, .tool-button {
@@ -98,28 +98,15 @@ button, .button, .tool-button {
min-width: 24px;
height: 26px;
font-size: .8em;

[class*=icon-] {

}
}
&.big {
min-height: 48px;
height: 48px;
font-size: 1.2em;

[class*=icon-] {
margin-top: 6px;
zoom: 1;
}
}
}

.tool-button {
[class*=icon-] {
margin-top: 2px !important;
}

&.mini {
min-width: 22px;
width: 22px;
@@ -128,11 +115,6 @@ button, .button, .tool-button {
&.big {
min-width: 48px;
width: 48px;

[class*=icon-] {
margin-top: 2px !important;
margin-left: 15px !important;
}
}
}

33 changes: 33 additions & 0 deletions less/icons.less
Original file line number Diff line number Diff line change
@@ -28,6 +28,9 @@ License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/
content: attr(data-icon);
speak: none;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
}

@@ -37,9 +40,39 @@ License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/
font-style: normal;
speak: none;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
}

.icon-large:before {
vertical-align: middle;
font-size: 4/3em;
margin-top: -8px;
}

button, .button {
[class^="icon-"],
[class*=" icon-"] {
font-size: 3/2em;
}
}

.tool-btn {
}

li {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 1.25em;
text-align: center;
}
.icon-large:before,
.icon-large:before {
width: 1.5*1.25em;
}
}

.icon-home:before { content: "\21";}
.icon-newspaper:before { content: "\23";}
8 changes: 5 additions & 3 deletions public/buttons.php
Original file line number Diff line number Diff line change
@@ -123,7 +123,9 @@
<button></button>
</div>
<div class="toolbar-group">
<button class="big"></button>
<button class="big">
<i class="icon-home"></i>
</button>
<button class="big"></button>
<button class="big"></button>
</div>
@@ -221,8 +223,8 @@
</div>
<div>
<button class="big">Big button</button>
<button class="big"><i class="icon-mail"></i> Big button</button>
<button class="big">Big button <i class="icon-mail"></i></button>
<button class="big"><i class="icon-home icon-large"></i> Big button</button>
<button class="big">Big button <i class="icon-mail icon-large"></i></button>
</div>
<pre class="prettyprint linenums">
&lt;button class="mini"&gt; Caption &lt;/button&gt;
Loading

0 comments on commit 7da08f3

Please sign in to comment.