Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
All: Updated button and icon classes
Browse files Browse the repository at this point in the history 
Fixes gh-7664
  • Loading branch information
@jaspermdegroot
jaspermdegroot authored and Gabriel Schulhof committed Mar 18, 2015
1 parent 2157b69 commit aad5e06
Show file tree
Hide file tree
Showing 237 changed files with 2,774 additions and 2,919 deletions.
14 changes: 7 additions & 7 deletions css/structure/jquery.mobile.collapsible.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,24 @@
padding: 0;
position: relative;
}
.ui-collapsible-heading .ui-btn {
.ui-collapsible-heading .ui-button {
text-align: left;
margin: 0;
border-left-width: 0;
border-right-width: 0;
}
.ui-collapsible-heading .ui-btn-icon-top,
.ui-collapsible-heading .ui-btn-icon-bottom {
.ui-collapsible-heading .ui-icon-top,
.ui-collapsible-heading .ui-icon-bottom {
text-align: center;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
.ui-collapsible-inset .ui-collapsible-heading .ui-button {
border-right-width: 1px;
border-left-width: 1px;
}
.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-btn {
.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-button {
border-top-width: 0;
}
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-button {
border-top-width: 1px;
}
.ui-collapsible-heading-status {
Expand Down Expand Up @@ -65,7 +65,7 @@
border-radius: 0;
}
.ui-collapsible-heading,
.ui-collapsible-heading > .ui-btn {
.ui-collapsible-heading > .ui-button {
-webkit-border-radius: inherit;
border-radius: inherit;
}
Expand Down
44 changes: 22 additions & 22 deletions css/structure/jquery.mobile.controlgroup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@ fieldset.ui-controlgroup {
.ui-mini .ui-controlgroup-label {
font-size: 16px;
}
.ui-controlgroup.ui-mini .ui-btn-icon-notext,
.ui-controlgroup .ui-mini.ui-btn-icon-notext {
.ui-controlgroup.ui-mini .ui-button-icon-only,
.ui-controlgroup .ui-mini.ui-button-icon-only {
font-size: inherit;
}
.ui-controlgroup-controls .ui-btn,
.ui-controlgroup-controls .ui-button,
.ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-controls .ui-radio,
.ui-controlgroup-controls .ui-select {
margin: 0;
}
.ui-controlgroup-controls .ui-btn:focus,
.ui-controlgroup-controls .ui-btn.ui-focus {
.ui-controlgroup-controls .ui-button:focus,
.ui-controlgroup-controls .ui-button.ui-focus {
z-index: 1;
}
.ui-controlgroup-controls li {
Expand All @@ -39,40 +39,40 @@ fieldset.ui-controlgroup {
.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
clear: both;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-button,
.ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-button,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
float: left;
clear: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
.ui-controlgroup-controls .ui-btn-icon-notext {
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-button,
.ui-controlgroup-controls .ui-button-icon-only {
width: auto;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-icon-notext,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn-icon-notext {
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-button-icon-only,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-button-icon-only {
width: 1.5em;
}
.ui-controlgroup-controls .ui-btn-icon-notext {
.ui-controlgroup-controls .ui-button-icon-only {
height: auto;
padding: .7em 1em;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn {
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-button {
border-bottom-width: 0;
}
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child {
.ui-controlgroup-vertical .ui-controlgroup-controls .ui-button.ui-last-child {
border-bottom-width: 1px;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-button {
border-right-width: 0;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-button.ui-last-child {
border-right-width: 1px;
}
.ui-controlgroup-controls .ui-btn-corner-all,
.ui-controlgroup-controls .ui-btn.ui-corner-all {
.ui-controlgroup-controls .ui-button-corner-all,
.ui-controlgroup-controls .ui-button.ui-corner-all {
-webkit-border-radius: 0;
border-radius: 0;
}
Expand All @@ -84,25 +84,25 @@ fieldset.ui-controlgroup {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-controlgroup-vertical .ui-btn.ui-first-child {
.ui-controlgroup-vertical .ui-button.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.ui-controlgroup-vertical .ui-btn.ui-last-child {
.ui-controlgroup-vertical .ui-button.ui-last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.ui-controlgroup-horizontal .ui-btn.ui-first-child {
.ui-controlgroup-horizontal .ui-button.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-controlgroup-horizontal .ui-btn.ui-last-child {
.ui-controlgroup-horizontal .ui-button.ui-last-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
Expand Down
142 changes: 73 additions & 69 deletions css/structure/jquery.mobile.core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ div.ui-mobile-viewport {
}

/* Buttons and icons */
.ui-btn {
.ui-button {
font-size: 16px;
margin: .5em 0;
padding: .7em 1em;
Expand All @@ -239,9 +239,9 @@ div.ui-mobile-viewport {
-ms-user-select: none;
user-select: none;
}
.ui-btn-icon-notext,
.ui-header button.ui-btn.ui-btn-icon-notext,
.ui-footer button.ui-btn.ui-btn-icon-notext {
.ui-button-icon-only,
.ui-header button.ui-button.ui-button-icon-only,
.ui-footer button.ui-button.ui-button-icon-only {
padding: 0;
width: 1.75em;
height: 1.75em;
Expand All @@ -251,153 +251,157 @@ div.ui-mobile-viewport {
.ui-mini {
font-size: 12.5px;
}
.ui-mini .ui-btn {
.ui-mini .ui-button {
font-size: inherit;
}
/* Make buttons in toolbars default to mini and inline. */
.ui-header .ui-btn,
.ui-footer .ui-btn {
.ui-header .ui-button,
.ui-footer .ui-button {
font-size: 12.5px;
display: inline-block;
vertical-align: middle;
}
.ui-header .ui-controlgroup .ui-btn-icon-notext,
.ui-footer .ui-controlgroup .ui-btn-icon-notext {
.ui-header .ui-controlgroup .ui-button-icon-only,
.ui-footer .ui-controlgroup .ui-button-icon-only {
font-size: 12.5px;
}

/* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right {
/* To ensure same top and left/right position when ui-button-left/right are added to something other than buttons. */
.ui-header .ui-button-left,
.ui-header .ui-button-right {
font-size: 12.5px;
}
.ui-mini.ui-btn-icon-notext,
.ui-mini .ui-btn-icon-notext,
.ui-header .ui-btn-icon-notext,
.ui-footer .ui-btn-icon-notext {
.ui-mini.ui-button-icon-only,
.ui-mini .ui-button-icon-only,
.ui-header .ui-button-icon-only,
.ui-footer .ui-button-icon-only {
font-size: 16px;
padding: 0;
}
.ui-btn-inline {
.ui-button-inline {
display: inline-block;
vertical-align: middle;
margin-right: .625em;
}
.ui-btn-icon-left {
.ui-icon-beginning {
padding-left: 2.5em;
}
.ui-btn-icon-right {
.ui-icon-end {
padding-right: 2.5em;
}
.ui-btn-icon-top {
.ui-icon-top {
padding-top: 2.5em;
}
.ui-btn-icon-bottom {
.ui-icon-bottom {
padding-bottom: 2.5em;
}
.ui-header .ui-btn-icon-top,
.ui-footer .ui-btn-icon-top,
.ui-header .ui-btn-icon-bottom,
.ui-footer .ui-btn-icon-bottom {
.ui-header .ui-icon-top,
.ui-footer .ui-icon-top,
.ui-header .ui-icon-bottom,
.ui-footer .ui-icon-bottom {
padding-left: .3125em;
padding-right: .3125em;
}
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
content: "";
.ui-icon {
position: absolute;
display: block;
display: inline-block;
width: 22px;
height: 22px;
background-position: center;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-left:after,
.ui-btn-icon-right:after {
.ui-button.ui-button-icon-only .ui-icon,
.ui-button.ui-icon-beginning .ui-icon,
.ui-button.ui-icon-end .ui-icon {
top: 50%;
margin-top: -11px;
}
.ui-btn-icon-left:after {
.ui-icon-beginning .ui-icon {
left: .5625em;
}
.ui-btn-icon-right:after {
.ui-icon-end .ui-icon {
right: .5625em;
}
.ui-mini.ui-btn-icon-left:after,
.ui-mini .ui-btn-icon-left:after,
.ui-header .ui-btn-icon-left:after,
.ui-footer .ui-btn-icon-left:after {
.ui-mini.ui-icon-beginning .ui-icon,
.ui-mini .ui-icon-beginning .ui-icon,
.ui-header .ui-icon-beginning .ui-icon,
.ui-footer .ui-icon-beginning .ui-icon {
left: .37em;
}
.ui-mini.ui-btn-icon-right:after,
.ui-mini .ui-btn-icon-right:after,
.ui-header .ui-btn-icon-right:after,
.ui-footer .ui-btn-icon-right:after {
.ui-mini.ui-icon-end .ui-icon,
.ui-mini .ui-icon-end .ui-icon,
.ui-header .ui-icon-end .ui-icon,
.ui-footer .ui-icon-end .ui-icon {
right: .37em;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after {
.ui-button.ui-button-icon-only .ui-icon,
.ui-button.ui-icon-top .ui-icon,
.ui-button.ui-icon-bottom .ui-icon {
left: 50%;
margin-left: -11px;
}
.ui-btn-icon-top:after {
.ui-icon-top .ui-icon {
top: .5625em;
}
.ui-btn-icon-bottom:after {
.ui-icon-bottom .ui-icon {
top: auto;
bottom: .5625em;
}
/* Buttons in header position classes */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right,
.ui-btn-left > [class*="ui-"],
.ui-btn-right > [class*="ui-"] {
.ui-header .ui-button-left,
.ui-header .ui-button-right,
.ui-button-left > [class*="ui-"],
.ui-button-right > [class*="ui-"] {
margin: 0;
}
.ui-btn-left,
.ui-btn-right {
.ui-button-left,
.ui-button-right {
position: absolute;
top: .24em;
}
.ui-btn-left {
.ui-button-left {
left: .4em;
}
.ui-btn-right {
.ui-button-right {
right: .4em;
}
.ui-btn-icon-notext.ui-btn-left {
.ui-button-icon-only.ui-button-left {
top: .3125em;
left: .3125em;
}
.ui-btn-icon-notext.ui-btn-right {
.ui-button-icon-only.ui-button-right {
top: .3125em;
right: .3125em;
}

/* Button elements */
button.ui-btn,
.ui-controlgroup-controls button.ui-btn-icon-notext {
/* Button elements and input buttons */
button.ui-button,
input.ui-button,
.ui-controlgroup-controls button.ui-button-icon-only,
.ui-controlgroup-controls input.ui-button-icon-only {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
}
button.ui-btn-inline,
.ui-header button.ui-btn,
.ui-footer button.ui-btn {
button.ui-button-inline,
.ui-header button.ui-button,
.ui-footer button.ui-button {
width: auto;
}
/* Firefox adds a 1px border in a button element. We negate this to make sure they have the same height as other buttons in controlgroups. */
button.ui-btn::-moz-focus-inner {
button.ui-button::-moz-focus-inner {
border: 0;
}
button.ui-btn-icon-notext,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn {
button.ui-button-icon-only,
input.ui-button-icon-only,
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-button,
.ui-controlgroup-horizontal .ui-controlgroup-controls input.ui-button {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
Expand Down
Loading

0 comments on commit aad5e06

Please sign in to comment.