Skip to content

Commit

Permalink
update buttons.less, add toolbar buttons group
Browse files Browse the repository at this point in the history
  • Loading branch information
olton committed Oct 15, 2012
1 parent f33b9cd commit a87ad75
Showing 4 changed files with 414 additions and 9 deletions.
152 changes: 151 additions & 1 deletion css/modern.css
Original file line number Diff line number Diff line change
@@ -1528,6 +1528,7 @@ button,
margin-right: 10px;
margin-bottom: 10px;
border-raduis: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
}
@@ -1553,6 +1554,9 @@ button:focus,
outline: 0;
border: 1px #353535 dotted;
}
a.button {
padding: 5px 0;
}
.command-button {
width: 330px;
text-align: left;
@@ -1580,6 +1584,21 @@ button:focus,
color: #ccc;
}
.tool-button {
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 400;
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;
display: inline-block;
text-align: center;
vertical-align: middle;
min-width: 32px;
min-height: 32px;
width: 32px;
@@ -1588,52 +1607,170 @@ button:focus,
position: relative;
padding: 0;
}
.tool-button:active,
.tool-button.default:active {
background-color: #000 !important;
color: #fff;
}
.tool-button:disabled {
background-color: #eaeaea;
color: #bebebe;
}
.tool-button.default {
background-color: #008287;
color: #fff;
}
.tool-button:focus {
outline: 0;
border: 1px #353535 dotted;
}
.tool-button img {
width: 16px;
height: 16px;
position: absolute;
top: 8px;
left: 8px;
}
.toolbar {
*zoom: 1;
}
.toolbar a,
.toolbar button {
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 400;
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;
display: inline-block;
text-align: center;
vertical-align: middle;
min-width: 32px;
min-height: 32px;
width: 32px;
height: 32px;
text-align: center;
position: relative;
padding: 0;
margin-right: 5px;
margin-right: 0px;
}
.toolbar a:active,
.toolbar button:active,
.toolbar a.default:active,
.toolbar button.default:active {
background-color: #000 !important;
color: #fff;
}
.toolbar a:disabled,
.toolbar button:disabled {
background-color: #eaeaea;
color: #bebebe;
}
.toolbar a.default,
.toolbar button.default {
background-color: #008287;
color: #fff;
}
.toolbar a:focus,
.toolbar button:focus {
outline: 0;
border: 1px #353535 dotted;
}
.toolbar a img,
.toolbar button img {
width: 16px;
height: 16px;
position: absolute;
top: 8px;
left: 8px;
}
.toolbar a {
padding: 5px 0;
}
.toolbar:before,
.toolbar:after {
display: table;
content: "";
}
.toolbar:after {
clear: both;
}
.toolbar .toolbar-group {
margin-right: 20px;
margin-bottom: 10px;
float: left;
}
.toolbar-vertical {
width: 33px;
float: left;
margin-right: 10px;
*zoom: 1;
}
.toolbar-vertical a,
.toolbar-vertical button {
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 400;
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;
display: inline-block;
text-align: center;
vertical-align: middle;
min-width: 32px;
min-height: 32px;
width: 32px;
height: 32px;
text-align: center;
position: relative;
padding: 0;
margin-bottom: 5px;
}
.toolbar-vertical a:active,
.toolbar-vertical button:active,
.toolbar-vertical a.default:active,
.toolbar-vertical button.default:active {
background-color: #000 !important;
color: #fff;
}
.toolbar-vertical a:disabled,
.toolbar-vertical button:disabled {
background-color: #eaeaea;
color: #bebebe;
}
.toolbar-vertical a.default,
.toolbar-vertical button.default {
background-color: #008287;
color: #fff;
}
.toolbar-vertical a:focus,
.toolbar-vertical button:focus {
outline: 0;
border: 1px #353535 dotted;
}
.toolbar-vertical a img,
.toolbar-vertical button img {
width: 16px;
height: 16px;
position: absolute;
top: 8px;
left: 8px;
}
.toolbar-vertical a {
padding: 5px 0;
}
.toolbar-vertical:before,
.toolbar-vertical:after {
display: table;
@@ -1642,6 +1779,9 @@ button:focus,
.toolbar-vertical:after {
clear: both;
}
.toolbar-vertical .toolbar-group {
margin-bottom: 20px;
}
.image-button {
position: relative;
border: 0;
@@ -1660,8 +1800,17 @@ button:focus,
border: 1px transparent solid;
z-index: 1001;
}
.button-set a,
.button-set button {
margin-right: 0;
text-align: center;
}
.button-set a img,
.button-set button img {
background-color: transparent;
}
.button-set a {
padding: 5px 0;
}
.button-set button.active {
background-color: #008287;
@@ -3406,6 +3555,7 @@ input[type=submit] {
margin-right: 10px;
margin-bottom: 10px;
border-raduis: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
border-radius: 0;
44 changes: 39 additions & 5 deletions less/buttons.less
Original file line number Diff line number Diff line change
@@ -51,6 +51,7 @@ button, .button {
margin-right: 10px;
margin-bottom: 10px;
border-raduis: 0;
display: inline-block;
text-align: center;
vertical-align: middle;

@@ -75,6 +76,10 @@ button, .button {
}
}

a.button {
padding: 5px 0;
}

.command-button {
width: 330px;
text-align: left;
@@ -99,6 +104,7 @@ button, .button {
}

.tool-button {
.button;
min-width: 32px;
min-height: 32px;
width: 32px;
@@ -112,27 +118,48 @@ button, .button {
height: 16px;
position: absolute;
top: 8px;
left: 0px;
left: 8px;
}
}

.toolbar {
button {
a, button {
.tool-button;
margin-right: 5px;
margin-right: 0px;
}

a {
padding: 5px 0;
}
.clearfix;

.toolbar-group {
margin-right: 20px;
margin-bottom: 10px;
float: left;
}
}
.toolbar-vertical {
width: 33px;
float: left;
margin-right: 10px;

button {
a, button {
.tool-button;
margin-bottom: 5px;
}

a {
padding: 5px 0;
}
.clearfix;

.toolbar-group {
margin-bottom: 20px;
}
}


.image-button {
position: relative;
border: 0;
@@ -153,8 +180,15 @@ button, .button {
}

.button-set {
button {
a, button {
margin-right: 0;
text-align: center;
img {
background-color: transparent;
}
}
a {
padding: 5px 0;
}
button.active {
background-color: #008287;
Loading

0 comments on commit a87ad75

Please sign in to comment.