mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
button updates
This commit is contained in:
Adam Bradley
99
dist/css/ionic-ios7.css
vendored
99
dist/css/ionic-ios7.css
vendored
@ -393,12 +393,36 @@ body, .ionic-body {
|
||||
.padded {
|
||||
padding: 10px; }
|
||||
|
||||
.padded-top {
|
||||
padding-top: 10px; }
|
||||
|
||||
.padded-right {
|
||||
padding-right: 10px; }
|
||||
|
||||
.padded-bottom {
|
||||
padding-bottom: 10px; }
|
||||
|
||||
.padded-left {
|
||||
padding-left: 10px; }
|
||||
|
||||
.padded-2 {
|
||||
padding: 20px; }
|
||||
|
||||
.inset {
|
||||
margin: 10px; }
|
||||
|
||||
.inset-top {
|
||||
margin-top: 10px; }
|
||||
|
||||
.inset-right {
|
||||
margin-right: 10px; }
|
||||
|
||||
.inset-bottom {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.inset-left {
|
||||
margin-left: 10px; }
|
||||
|
||||
.inset-2 {
|
||||
margin: 20px; }
|
||||
|
||||
@ -534,24 +558,24 @@ address {
|
||||
line-height: 1.42857; }
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none; }
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
background-color: white; }
|
||||
.bar.bar-header {
|
||||
border-bottom-width: 1px; }
|
||||
.bar.bar-footer {
|
||||
@ -606,31 +630,32 @@ address {
|
||||
color: white; }
|
||||
.bar .title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
line-height: 44px;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
margin: 0;
|
||||
min-width: 30px;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 17px; }
|
||||
font-size: 17px;
|
||||
line-height: 44px; }
|
||||
.bar .title a {
|
||||
color: inherit; }
|
||||
.bar .button {
|
||||
box-flex: 1;
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
background-color: transparent;
|
||||
line-height: 23px;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 4px 12px;
|
||||
z-index: 1; }
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
line-height: 23px; }
|
||||
.bar .button.button-clear {
|
||||
line-height: 34px;
|
||||
padding: 0 5px; }
|
||||
padding: 0 5px;
|
||||
line-height: 34px; }
|
||||
.bar .button-bar {
|
||||
line-height: 18px; }
|
||||
.bar .button-bar + .button, .bar .button + .button-bar {
|
||||
@ -780,8 +805,8 @@ address {
|
||||
font-size: 17px; }
|
||||
|
||||
.bar .button-icon {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 24px; }
|
||||
|
||||
.bar-header {
|
||||
@ -793,11 +818,11 @@ address {
|
||||
.bar-tabs {
|
||||
padding: 0; }
|
||||
|
||||
.bar-header-secondary {
|
||||
.bar-subheader {
|
||||
top: 44px;
|
||||
display: block; }
|
||||
|
||||
.bar-footer-secondary {
|
||||
.bar-subfooter {
|
||||
bottom: 44px;
|
||||
display: block; }
|
||||
|
||||
@ -1554,9 +1579,11 @@ input[type="checkbox"][readonly] {
|
||||
display: block;
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 8px 12px;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
color: #222222;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@ -1769,13 +1796,21 @@ input[type="checkbox"][readonly] {
|
||||
a.button {
|
||||
text-decoration: none; }
|
||||
|
||||
.inset .button,
|
||||
.padded .button {
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-radius: 2px; }
|
||||
|
||||
.button-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
.button-group > .button {
|
||||
position: relative;
|
||||
float: left; }
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: auto; }
|
||||
.button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
|
||||
z-index: 2; }
|
||||
.button-group > .button:focus {
|
||||
@ -1846,9 +1881,9 @@ a.button {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
display: block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 16px;
|
||||
width: 0;
|
||||
border-width: 1px 0px 1px 1px;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
||||
90
dist/css/ionic-scoped.css
vendored
90
dist/css/ionic-scoped.css
vendored
@ -1117,10 +1117,26 @@
|
||||
display: none !important; }
|
||||
.ionic .padded {
|
||||
padding: 10px; }
|
||||
.ionic .padded-top {
|
||||
padding-top: 10px; }
|
||||
.ionic .padded-right {
|
||||
padding-right: 10px; }
|
||||
.ionic .padded-bottom {
|
||||
padding-bottom: 10px; }
|
||||
.ionic .padded-left {
|
||||
padding-left: 10px; }
|
||||
.ionic .padded-2 {
|
||||
padding: 20px; }
|
||||
.ionic .inset {
|
||||
margin: 10px; }
|
||||
.ionic .inset-top {
|
||||
margin-top: 10px; }
|
||||
.ionic .inset-right {
|
||||
margin-right: 10px; }
|
||||
.ionic .inset-bottom {
|
||||
margin-bottom: 10px; }
|
||||
.ionic .inset-left {
|
||||
margin-left: 10px; }
|
||||
.ionic .inset-2 {
|
||||
margin: 20px; }
|
||||
.ionic .rounded {
|
||||
@ -1255,24 +1271,24 @@
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 10px; }
|
||||
.ionic .bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none; }
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
background-color: white; }
|
||||
.ionic .bar.bar-header {
|
||||
border-bottom-width: 1px; }
|
||||
.ionic .bar.bar-footer {
|
||||
@ -1327,31 +1343,32 @@
|
||||
color: white; }
|
||||
.ionic .bar .title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
line-height: 44px;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
margin: 0;
|
||||
min-width: 30px;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 17px; }
|
||||
font-size: 17px;
|
||||
line-height: 44px; }
|
||||
.ionic .bar .title a {
|
||||
color: inherit; }
|
||||
.ionic .bar .button {
|
||||
box-flex: 1;
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
background-color: transparent;
|
||||
line-height: 23px;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 4px 12px;
|
||||
z-index: 1; }
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
line-height: 23px; }
|
||||
.ionic .bar .button.button-clear {
|
||||
line-height: 34px;
|
||||
padding: 0 5px; }
|
||||
padding: 0 5px;
|
||||
line-height: 34px; }
|
||||
.ionic .bar .button-bar {
|
||||
line-height: 18px; }
|
||||
.ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar {
|
||||
@ -1492,8 +1509,8 @@
|
||||
box-shadow: none;
|
||||
font-size: 17px; }
|
||||
.ionic .bar .button-icon {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 24px; }
|
||||
.ionic .bar-header {
|
||||
top: 0; }
|
||||
@ -1501,10 +1518,10 @@
|
||||
bottom: 0; }
|
||||
.ionic .bar-tabs {
|
||||
padding: 0; }
|
||||
.ionic .bar-header-secondary {
|
||||
.ionic .bar-subheader {
|
||||
top: 44px;
|
||||
display: block; }
|
||||
.ionic .bar-footer-secondary {
|
||||
.ionic .bar-subfooter {
|
||||
bottom: 44px;
|
||||
display: block; }
|
||||
.ionic .tabs {
|
||||
@ -2189,9 +2206,11 @@
|
||||
display: block;
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 8px 12px;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
color: #222222;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@ -2402,13 +2421,20 @@
|
||||
margin: 10px 0 10px 0; }
|
||||
.ionic a.button {
|
||||
text-decoration: none; }
|
||||
.ionic .inset .button,
|
||||
.ionic .padded .button {
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-radius: 2px; }
|
||||
.ionic .button-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
.ionic .button-group > .button {
|
||||
position: relative;
|
||||
float: left; }
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: auto; }
|
||||
.ionic .button-group > .button:hover, .ionic .button-group > .button:focus, .ionic .button-group > .button:active, .ionic .button-group > .button.active {
|
||||
z-index: 2; }
|
||||
.ionic .button-group > .button:focus {
|
||||
@ -2469,9 +2495,9 @@
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
display: block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 16px;
|
||||
width: 0;
|
||||
border-width: 1px 0px 1px 1px;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
||||
99
dist/css/ionic.css
vendored
99
dist/css/ionic.css
vendored
@ -1450,12 +1450,36 @@ body, .ionic-body {
|
||||
.padded {
|
||||
padding: 10px; }
|
||||
|
||||
.padded-top {
|
||||
padding-top: 10px; }
|
||||
|
||||
.padded-right {
|
||||
padding-right: 10px; }
|
||||
|
||||
.padded-bottom {
|
||||
padding-bottom: 10px; }
|
||||
|
||||
.padded-left {
|
||||
padding-left: 10px; }
|
||||
|
||||
.padded-2 {
|
||||
padding: 20px; }
|
||||
|
||||
.inset {
|
||||
margin: 10px; }
|
||||
|
||||
.inset-top {
|
||||
margin-top: 10px; }
|
||||
|
||||
.inset-right {
|
||||
margin-right: 10px; }
|
||||
|
||||
.inset-bottom {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.inset-left {
|
||||
margin-left: 10px; }
|
||||
|
||||
.inset-2 {
|
||||
margin: 20px; }
|
||||
|
||||
@ -1621,24 +1645,24 @@ address {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none; }
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
background-color: white; }
|
||||
.bar.bar-header {
|
||||
border-bottom-width: 1px; }
|
||||
.bar.bar-footer {
|
||||
@ -1693,31 +1717,32 @@ address {
|
||||
color: white; }
|
||||
.bar .title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
line-height: 44px;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
margin: 0;
|
||||
min-width: 30px;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 17px; }
|
||||
font-size: 17px;
|
||||
line-height: 44px; }
|
||||
.bar .title a {
|
||||
color: inherit; }
|
||||
.bar .button {
|
||||
box-flex: 1;
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
background-color: transparent;
|
||||
line-height: 23px;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 4px 12px;
|
||||
z-index: 1; }
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
line-height: 23px; }
|
||||
.bar .button.button-clear {
|
||||
line-height: 34px;
|
||||
padding: 0 5px; }
|
||||
padding: 0 5px;
|
||||
line-height: 34px; }
|
||||
.bar .button-bar {
|
||||
line-height: 18px; }
|
||||
.bar .button-bar + .button, .bar .button + .button-bar {
|
||||
@ -1867,8 +1892,8 @@ address {
|
||||
font-size: 17px; }
|
||||
|
||||
.bar .button-icon {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 24px; }
|
||||
|
||||
.bar-header {
|
||||
@ -1880,11 +1905,11 @@ address {
|
||||
.bar-tabs {
|
||||
padding: 0; }
|
||||
|
||||
.bar-header-secondary {
|
||||
.bar-subheader {
|
||||
top: 44px;
|
||||
display: block; }
|
||||
|
||||
.bar-footer-secondary {
|
||||
.bar-subfooter {
|
||||
bottom: 44px;
|
||||
display: block; }
|
||||
|
||||
@ -2672,9 +2697,11 @@ input[type="checkbox"][readonly] {
|
||||
display: block;
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 8px 12px;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
color: #222222;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@ -2887,13 +2914,21 @@ input[type="checkbox"][readonly] {
|
||||
a.button {
|
||||
text-decoration: none; }
|
||||
|
||||
.inset .button,
|
||||
.padded .button {
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-radius: 2px; }
|
||||
|
||||
.button-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
.button-group > .button {
|
||||
position: relative;
|
||||
float: left; }
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: auto; }
|
||||
.button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
|
||||
z-index: 2; }
|
||||
.button-group > .button:focus {
|
||||
@ -2964,9 +2999,9 @@ a.button {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
display: block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 16px;
|
||||
width: 0;
|
||||
border-width: 1px 0px 1px 1px;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
.bar {
|
||||
|
||||
@include user-select(none);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
box-sizing: border-box;
|
||||
padding: $bar-padding-portrait;
|
||||
|
||||
width: 100%;
|
||||
height: $bar-height;
|
||||
padding: $bar-padding-portrait;
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
|
||||
background-color: $bar-bg;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
|
||||
@include user-select(none);
|
||||
|
||||
&.bar-header {
|
||||
border-bottom-width: 1px;
|
||||
@ -60,25 +60,25 @@
|
||||
// Title inside of a bar is centered
|
||||
.title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
line-height: $bar-height;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
|
||||
margin: 0;
|
||||
//padding: $barPaddingVertical 0px;
|
||||
|
||||
min-width: 30px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
// Go into ellipsis if too small
|
||||
text-overflow: ellipsis;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-size: $bar-title-font-size;
|
||||
|
||||
line-height: $bar-height;
|
||||
}
|
||||
|
||||
.title a {
|
||||
@ -87,15 +87,16 @@
|
||||
|
||||
.button {
|
||||
@include box-flex(0);
|
||||
background-color: transparent;
|
||||
line-height: $bar-button-line-height;
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 4px 12px;
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
line-height: $bar-button-line-height;
|
||||
|
||||
&.button-clear {
|
||||
line-height: $bar-button-clear-line-height;
|
||||
padding: 0 5px;
|
||||
line-height: $bar-button-clear-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@ -175,8 +176,8 @@
|
||||
}
|
||||
|
||||
.bar .button-icon {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@ -195,11 +196,11 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bar-header-secondary {
|
||||
.bar-subheader {
|
||||
top: $bar-height;
|
||||
display: block;
|
||||
}
|
||||
.bar-footer-secondary {
|
||||
.bar-subfooter {
|
||||
bottom: $bar-height;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
|
||||
> .button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: auto;
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -20,7 +22,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button-group {
|
||||
.button + .button,
|
||||
.button + .button-group,
|
||||
@ -64,25 +65,23 @@
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
|
||||
@include box-flex(1);
|
||||
@include box-orient(horizontal);
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
|
||||
}
|
||||
|
||||
.button-bar > .button {
|
||||
@include box-flex(1);
|
||||
display: block;
|
||||
|
||||
// Fix for unequal widths of buttons
|
||||
width: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: 8px 16px;
|
||||
|
||||
// Fix for unequal widths of buttons
|
||||
width: 0;
|
||||
|
||||
border-width: 1px 0px 1px 1px;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
margin: $button-block-margin;
|
||||
|
||||
padding: $button-padding;
|
||||
width: 100%;
|
||||
|
||||
border-width: $button-border-width;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-radius: $button-border-radius;
|
||||
border-top-width: $button-border-width;
|
||||
border-bottom-width: $button-border-width;
|
||||
|
||||
color: $button-color;
|
||||
|
||||
@ -116,3 +118,10 @@
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.inset .button,
|
||||
.padded .button {
|
||||
border-right-width: $button-border-width;
|
||||
border-left-width: $button-border-width;
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
|
||||
@ -3,22 +3,66 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
// Padded
|
||||
// -------------------------------
|
||||
|
||||
.padded {
|
||||
padding: $content-padding;
|
||||
}
|
||||
|
||||
.padded-top {
|
||||
padding-top: $content-padding;
|
||||
}
|
||||
|
||||
.padded-right {
|
||||
padding-right: $content-padding;
|
||||
}
|
||||
|
||||
.padded-bottom {
|
||||
padding-bottom: $content-padding;
|
||||
}
|
||||
|
||||
.padded-left {
|
||||
padding-left: $content-padding;
|
||||
}
|
||||
|
||||
.padded-2 {
|
||||
padding: $content-padding * 2;
|
||||
}
|
||||
|
||||
|
||||
// Inset
|
||||
// -------------------------------
|
||||
|
||||
.inset {
|
||||
margin: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-top {
|
||||
margin-top: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-right {
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-bottom {
|
||||
margin-bottom: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-left {
|
||||
margin-left: $inset-margin;
|
||||
}
|
||||
|
||||
.inset-2 {
|
||||
margin: $inset-margin * 2;
|
||||
}
|
||||
|
||||
|
||||
// Rounded
|
||||
// -------------------------------
|
||||
|
||||
.rounded {
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
@ -5,17 +5,15 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Button Group</h1>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<main class="content padded has-header">
|
||||
<p>
|
||||
<div class="button-group">
|
||||
@ -27,11 +25,7 @@
|
||||
</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -14,9 +14,11 @@
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<main class="content padded has-header">
|
||||
<main class="content has-header">
|
||||
|
||||
<h3>Default (Block)</h3>
|
||||
<div class="padded">
|
||||
|
||||
<h3>Default (Block w/ parent .padded)</h3>
|
||||
<p>
|
||||
<a class="button button-default">Default</a>
|
||||
<a class="button button-secondary">Secondary</a>
|
||||
@ -102,6 +104,32 @@
|
||||
<a class="button button-secondary" href="index.html">Homepage</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Default (Block w/out padded)</h3>
|
||||
<p>
|
||||
<a class="button button-default">Default</a>
|
||||
<a class="button button-secondary">Secondary</a>
|
||||
<a class="button button-primary">Primary</a>
|
||||
<a class="button button-info">Info</a>
|
||||
<a class="button button-success">Success</a>
|
||||
<a class="button button-warning">Warning</a>
|
||||
<a class="button button-danger">Danger</a>
|
||||
<a class="button button-dark">Dark</a>
|
||||
</p>
|
||||
|
||||
<h3>Default (Block w/out padded and parent .inset)</h3>
|
||||
<p class="inset">
|
||||
<a class="button button-default">Default</a>
|
||||
<a class="button button-secondary">Secondary</a>
|
||||
<a class="button button-primary">Primary</a>
|
||||
<a class="button button-info">Info</a>
|
||||
<a class="button button-success">Success</a>
|
||||
<a class="button button-warning">Warning</a>
|
||||
<a class="button button-danger">Danger</a>
|
||||
<a class="button button-dark">Dark</a>
|
||||
</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user