aboutsummaryrefslogtreecommitdiffstats
path: root/themes/base
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-01-22 12:02:32 -0500
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit02033262ee0fb1d9f33c361b3c2ddfa168604854 (patch)
tree645ed2427d14a598d02754b79e9eb8b889baf846 /themes/base
parent79d312f3f5cb5629d1bd7f9f899b41f304c388ef (diff)
downloadjquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.tar.gz
jquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.zip
Button: Initial commit of button re-factor
Move to using element stats rather then js class states remove ui-button-text spans. Removed button set
Diffstat (limited to 'themes/base')
-rw-r--r--themes/base/accordion.css12
-rw-r--r--themes/base/button.css89
-rw-r--r--themes/base/core.css15
-rw-r--r--themes/base/datepicker.css11
-rw-r--r--themes/base/theme.css33
5 files changed, 65 insertions, 95 deletions
diff --git a/themes/base/accordion.css b/themes/base/accordion.css
index edf368eca..baffce488 100644
--- a/themes/base/accordion.css
+++ b/themes/base/accordion.css
@@ -16,18 +16,6 @@
padding: .5em .5em .5em .7em;
font-size: 100%;
}
-.ui-accordion .ui-accordion-icons {
- padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-icons .ui-accordion-icons {
- padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
- position: absolute;
- left: .5em;
- top: 50%;
- margin-top: -8px;
-}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
diff --git a/themes/base/button.css b/themes/base/button.css
index 17dea198f..fcbcda7bb 100644
--- a/themes/base/button.css
+++ b/themes/base/button.css
@@ -9,16 +9,23 @@
* http://api.jqueryui.com/button/#theming
*/
.ui-button {
+ padding: .4em 1em;
display: inline-block;
position: relative;
- padding: 0;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
- overflow: visible; /* removes extra width in IE */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ /* Support: IE <= 11 */
+ overflow: visible;
}
+
.ui-button,
.ui-button:link,
.ui-button:visited,
@@ -26,87 +33,31 @@
.ui-button:active {
text-decoration: none;
}
+
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
- width: 2.2em;
-}
-/* button elements seem to need a little more width */
-button.ui-button-icon-only {
- width: 2.4em;
-}
-.ui-button-icons-only {
- width: 3.4em;
-}
-button.ui-button-icons-only {
- width: 3.7em;
+ width: 2em;
+ box-sizing: border-box;
+ text-indent: -9999px;
+ white-space: nowrap;
}
-/* button text element */
-.ui-button .ui-button-text {
- display: block;
- line-height: normal;
-}
-.ui-button-text-only .ui-button-text {
- padding: .4em 1em;
-}
-.ui-button-icon-only .ui-button-text,
-.ui-button-icons-only .ui-button-text {
- padding: 0;
- text-indent: -9999999px;
-}
-.ui-button-text-icon-primary .ui-button-text,
-.ui-button-text-icons .ui-button-text {
- padding: .4em 1em .4em 2.1em;
-}
-.ui-button-text-icon-secondary .ui-button-text,
-.ui-button-text-icons .ui-button-text {
- padding: .4em 2.1em .4em 1em;
-}
-.ui-button-text-icons .ui-button-text {
- padding-left: 2.1em;
- padding-right: 2.1em;
-}
-/* no icon support for input elements, provide padding by default */
-input.ui-button {
- padding: .4em 1em;
+/* no icon support for input elements */
+input.ui-button.ui-button-icon-only {
+ text-indent: 0;
}
/* button icon element(s) */
-.ui-button-icon-only .ui-icon,
-.ui-button-text-icon-primary .ui-icon,
-.ui-button-text-icon-secondary .ui-icon,
-.ui-button-text-icons .ui-icon,
-.ui-button-icons-only .ui-icon {
+.ui-button-icon-only .ui-icon {
position: absolute;
top: 50%;
- margin-top: -8px;
-}
-.ui-button-icon-only .ui-icon {
left: 50%;
+ margin-top: -8px;
margin-left: -8px;
}
-.ui-button-text-icon-primary .ui-button-icon-primary,
-.ui-button-text-icons .ui-button-icon-primary,
-.ui-button-icons-only .ui-button-icon-primary {
- left: .5em;
-}
-.ui-button-text-icon-secondary .ui-button-icon-secondary,
-.ui-button-text-icons .ui-button-icon-secondary,
-.ui-button-icons-only .ui-button-icon-secondary {
- right: .5em;
-}
-
-/* button sets */
-.ui-buttonset {
- margin-right: 7px;
-}
-.ui-buttonset .ui-button {
- margin-left: 0;
- margin-right: -.3em;
-}
/* workarounds */
-/* reset extra padding in Firefox, see h5bp.com/l */
+/* Support: FireFox >= 4 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
border: 0;
diff --git a/themes/base/core.css b/themes/base/core.css
index 4a39cd395..2f7521282 100644
--- a/themes/base/core.css
+++ b/themes/base/core.css
@@ -68,15 +68,18 @@
/* Icons
----------------------------------*/
-
-/* states and images */
.ui-icon {
- display: block;
- text-indent: -99999px;
- overflow: hidden;
- background-repeat: no-repeat;
+ display: inline-block;
+ vertical-align: middle;
+ margin-top: -.25em;
+ position: relative;
}
+.ui-widget-icon-block {
+ left: 50%;
+ margin-left: -8px;
+ display: block;
+}
/* Misc visuals
----------------------------------*/
diff --git a/themes/base/datepicker.css b/themes/base/datepicker.css
index a77eab7b2..ddb8c17dd 100644
--- a/themes/base/datepicker.css
+++ b/themes/base/datepicker.css
@@ -173,3 +173,14 @@
border-right-width: 0;
border-left-width: 1px;
}
+
+/* Icons */
+.ui-datepicker .ui-icon {
+ display: block;
+ text-indent: -99999px;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ left: .5em;
+ top: .3em;
+}
+
diff --git a/themes/base/theme.css b/themes/base/theme.css
index 0e0561dc1..eddbc8a0b 100644
--- a/themes/base/theme.css
+++ b/themes/base/theme.css
@@ -53,7 +53,10 @@
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
+.ui-widget-header .ui-state-default,
+.ui-button,
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
border: 1px solid #c5c5c5/*{borderColorDefault}*/;
background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
font-weight: normal/*{fwDefault}*/;
@@ -61,7 +64,11 @@
}
.ui-state-default a,
.ui-state-default a:link,
-.ui-state-default a:visited {
+.ui-state-default a:visited,
+a.ui-button,
+a:link.ui-button,
+a:visited.ui-button,
+.ui-button {
color: #454545/*{fcDefault}*/;
text-decoration: none;
}
@@ -70,7 +77,9 @@
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
+.ui-widget-header .ui-state-focus,
+.ui-button:hover,
+.ui-button:focus {
border: 1px solid #cccccc/*{borderColorHover}*/;
background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
font-weight: normal/*{fwDefault}*/;
@@ -83,13 +92,17 @@
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
-.ui-state-focus a:visited {
+.ui-state-focus a:visited,
+a.ui-button:hover,
+a.ui-button:focus {
color: #2b2b2b/*{fcHover}*/;
text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
+.ui-widget-header .ui-state-active,
+a.ui-button:active,
+.ui-button:active {
border: 1px solid #003eff/*{borderColorActive}*/;
background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
font-weight: normal/*{fwDefault}*/;
@@ -171,14 +184,18 @@
.ui-widget-header .ui-icon {
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
}
-.ui-state-default .ui-icon {
+.ui-state-default .ui-icon,
+.ui-button .ui-icon {
background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
}
.ui-state-hover .ui-icon,
-.ui-state-focus .ui-icon {
+.ui-state-focus .ui-icon,
+.ui-button:hover .ui-icon,
+.ui-button:focus .ui-icon {
background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
}
-.ui-state-active .ui-icon {
+.ui-state-active .ui-icon,
+.ui-button:active .ui-icon {
background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
}
.ui-state-highlight .ui-icon {