-
Open modal
+
Open modal
-
+
Close
Modal
@@ -903,10 +903,10 @@ document
{% highlight html %}
-
Open modal
+
Open modal
-
+
Close
Modal
diff --git a/dist/android-theme.css b/dist/android-theme.css
index a41bb7f..c35c599 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -122,90 +122,90 @@ textarea,
background-image: none;
}
-[class*="button"] {
+.btn {
border: 1px solid #565656;
color: white;
background-color: #111111;
border-radius: 3px;
}
-[class*="button"]:active, [class*="button"].active {
+.btn:active, .btn.active {
color: #fff;
background-color: white;
}
-[class*="bar-"] [class*="button"] {
+[class*="bar-"] .btn {
padding-top: 9px;
padding-bottom: 9px;
}
-[class*="bar-"] .button-link {
+[class*="bar-"] .btn-link {
padding: 0;
color: #33b5e5;
line-height: 50px;
}
-[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active {
+[class*="bar-"] .btn-link:active, [class*="bar-"] .btn-link.active {
color: #1a9bcb;
}
-.button-primary {
+.btn-primary {
color: #fff;
border: 1px solid #33b5e5;
background-color: #33b5e5;
}
-.button-primary:active, .button-primary.active {
+.btn-primary:active, .btn-primary.active {
border: 1px solid #1a9bcb;
background-color: #1a9bcb;
}
-.button-positive {
+.btn-positive {
color: #fff;
border: 1px solid #81c700;
background-color: #81c700;
}
-.button-positive:active, .button-positive.active {
+.btn-positive:active, .btn-positive.active {
border: 1px solid #609400;
background-color: #609400;
}
-.button-negative {
+.btn-negative {
color: #fff;
border: 1px solid #f20754;
background-color: #f20754;
}
-.button-negative:active, .button-negative.active {
+.btn-negative:active, .btn-negative.active {
border: 1px solid #c00643;
background-color: #c00643;
}
-.button-outlined {
+.btn-outlined {
background-color: transparent;
}
-.button-outlined.button-primary {
+.btn-outlined.btn-primary {
color: #33b5e5;
}
-.button-outlined.button-positive {
+.btn-outlined.btn-positive {
color: #81c700;
}
-.button-outlined.button-negative {
+.btn-outlined.btn-negative {
color: #f20754;
}
-.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
}
-.button-link {
+.btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
}
-.button-link:active, .button-link.active {
+.btn-link:active, .btn-link.active {
color: #1a9bcb;
background-color: transparent;
}
-.bar-nav .button-link {
+.bar-nav .btn-link {
color: #33b5e5;
}
-.bar-nav .button-link:active {
+.bar-nav .btn-link:active {
color: #33b5e5;
opacity: .6;
}
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index be6c36c..fda7273 100644
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@@ -136,7 +136,7 @@ textarea,
background-image: none;
}
-[class*="button"] {
+.btn {
border: 1px solid #929292;
color: #929292;
background-color: rgba(247, 247, 247, 0.98);
@@ -147,71 +147,71 @@ textarea,
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
-[class*="button"]:active, [class*="button"].active {
+.btn:active, .btn.active {
color: #fff;
background-color: #929292;
}
-.button-primary {
+.btn-primary {
color: #fff;
border: 1px solid #007aff;
background-color: #007aff;
}
-.button-primary:active, .button-primary.active {
+.btn-primary:active, .btn-primary.active {
border: 1px solid #0062cc;
background-color: #0062cc;
}
-.button-positive {
+.btn-positive {
color: #fff;
border: 1px solid #4cd964;
background-color: #4cd964;
}
-.button-positive:active, .button-positive.active {
+.btn-positive:active, .btn-positive.active {
border: 1px solid #2ac845;
background-color: #2ac845;
}
-.button-negative {
+.btn-negative {
color: #fff;
border: 1px solid #dd524d;
background-color: #dd524d;
}
-.button-negative:active, .button-negative.active {
+.btn-negative:active, .btn-negative.active {
border: 1px solid #cf2d28;
background-color: #cf2d28;
}
-.button-outlined {
+.btn-outlined {
background-color: transparent;
}
-.button-outlined.button-primary {
+.btn-outlined.btn-primary {
color: #007aff;
}
-.button-outlined.button-positive {
+.btn-outlined.btn-positive {
color: #4cd964;
}
-.button-outlined.button-negative {
+.btn-outlined.btn-negative {
color: #dd524d;
}
-.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
}
-.button-link {
+.btn-link {
color: #007aff;
background-color: transparent;
border: none;
}
-.button-link:active, .button-link.active {
+.btn-link:active, .btn-link.active {
color: #0062cc;
background-color: transparent;
}
-.bar-nav .button-link {
+.bar-nav .btn-link {
color: #007aff;
}
-.bar-nav .button-link:active {
+.bar-nav .btn-link:active {
color: #007aff;
opacity: .6;
}
diff --git a/dist/ratchet-theme.css b/dist/ratchet-theme.css
index f633218..5e41fe1 100644
--- a/dist/ratchet-theme.css
+++ b/dist/ratchet-theme.css
@@ -41,57 +41,51 @@
color: white;
}
-[class*="button"] {
+.btn {
color: rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.3);
}
-[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
+.btn:active, .btn.active, .btn.btn-filled {
background-color: rgba(0, 0, 0, 0.3);
}
-.button-primary {
+.btn-primary {
color: #1eb0e9;
border-color: #1eb0e9;
}
-.button-primary:active, .button-primary.active, .button-primary.button-filled {
+.btn-primary:active, .btn-primary.active, .btn-primary.btn-filled {
background-color: #1eb0e9;
}
-.button-positive {
+.btn-positive {
color: #34ba15;
border-color: #34ba15;
}
-.button-positive:active, .button-positive.active, .button-positive.button-filled {
+.btn-positive:active, .btn-positive.active, .btn-positive.btn-filled {
background-color: #34ba15;
}
-.button-negative {
+.btn-negative {
color: #e71e1e;
border-color: #e71e1e;
}
-.button-negative:active, .button-negative.active, .button-negative.button-filled {
+.btn-negative:active, .btn-negative.active, .btn-negative.btn-filled {
background-color: #e71e1e;
}
-.bar-title [class*="button"] {
+.bar-title .btn {
color: #fff;
}
-.bar-title .button:active,
-.bar-title .button.active,
-.bar-title .button-prev:active,
-.bar-title .button-prev.active,
-.bar-title .button-next:active,
-.bar-title .button-next.active,
-.bar-title .button-primary:active,
-.bar-title .button-primary.active {
+.bar-title .btn:active,
+.bar-title .btn.active,
+.bar-title .btn-prev:active,
+.bar-title .btn-prev.active,
+.bar-title .btn-next:active,
+.bar-title .btn-next.active,
+.bar-title .btn-primary:active,
+.bar-title .btn-primary.active {
color: #fff;
}
-.bar-title .button-prev:before,
-.bar-title .button-prev:after,
-.bar-title .button-next:before,
-.bar-title .button-next:after {
- background-color: #fff;
-}
.segmented-controller {
border-color: #1eb0e9;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 39f182c..8f15391 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -405,14 +405,14 @@ strong {
.table-view .table-view-cell:last-child {
border-bottom: 0;
}
-.table-view .table-view-cell > a:not([class*="button"]) {
+.table-view .table-view-cell > a:not(.btn) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -12px -15px;
color: inherit;
}
-.table-view .table-view-cell > a:not([class*="button"]):active {
+.table-view .table-view-cell > a:not(.btn):active {
background-color: #eee;
}
.table-view .table-view-cell p {
@@ -438,7 +438,7 @@ strong {
border-radius: 0 0 6px 6px;
}
.table-view .chevron,
-.table-view [class*="button"],
+.table-view .btn,
.table-view [class*="badge"],
.table-view .toggle {
position: absolute;
@@ -454,7 +454,7 @@ strong {
.table-view .chevron + [class*="badge"] {
right: 30px;
}
-.table-view [class*="button"] {
+.table-view .btn {
left: auto;
margin-top: -12px;
}
@@ -466,11 +466,11 @@ strong {
padding-left: 59px;
background-position-x: 59px;
}
-.table-view-indented .table-view-cell > a:not([class*="button"]) {
+.table-view-indented .table-view-cell > a:not(.btn) {
margin-left: -59px;
}
.table-view-indented .table-view-cell > .pull-left,
-.table-view-indented .table-view-cell > a:not([class*="button"]) .pull-left {
+.table-view-indented .table-view-cell > a:not(.btn) .pull-left {
position: absolute;
left: 15px;
z-index: 1;
@@ -607,7 +607,7 @@ select {
margin: 6px 0;
}
-[class*="button"] {
+.btn {
position: relative;
display: inline-block;
padding: 5px 8px;
@@ -623,72 +623,72 @@ select {
border: 1px solid #ccc;
border-radius: 3px;
}
-[class*="button"]:active, [class*="button"].active {
+.btn:active, .btn.active {
background-color: #ccc;
}
-[class*="button"]:disabled, [class*="button"].disabled {
+.btn:disabled, .btn.disabled {
opacity: .6;
}
-.button-primary {
+.btn-primary {
color: #fff;
border: 1px solid #428bca;
background-color: #428bca;
}
-.button-primary:active, .button-primary.active {
+.btn-primary:active, .btn-primary.active {
border: 1px solid #3071a9;
background-color: #3071a9;
}
-.button-positive {
+.btn-positive {
color: #fff;
border: 1px solid #5cb85c;
background-color: #5cb85c;
}
-.button-positive:active, .button-positive.active {
+.btn-positive:active, .btn-positive.active {
border: 1px solid #449d44;
background-color: #449d44;
}
-.button-negative {
+.btn-negative {
color: #fff;
border: 1px solid #d9534f;
background-color: #d9534f;
}
-.button-negative:active, .button-negative.active {
+.btn-negative:active, .btn-negative.active {
border: 1px solid #c9302c;
background-color: #c9302c;
}
-.button-outlined {
+.btn-outlined {
background-color: transparent;
}
-.button-outlined.button-primary {
+.btn-outlined.btn-primary {
color: #428bca;
}
-.button-outlined.button-positive {
+.btn-outlined.btn-positive {
color: #5cb85c;
}
-.button-outlined.button-negative {
+.btn-outlined.btn-negative {
color: #d9534f;
}
-.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
}
-.button-link {
+.btn-link {
padding-top: 6px;
padding-bottom: 6px;
color: #428bca;
background-color: transparent;
border: none;
}
-.button-link:active, .button-link.active {
+.btn-link:active, .btn-link.active {
color: #3071a9;
background-color: transparent;
}
-.button-block {
+.btn-block {
display: block;
padding: 15px 0;
margin-bottom: 10px;
@@ -701,20 +701,20 @@ input[type="button"] {
width: 100%;
}
-.bar-nav [class*="button"] {
+.bar-nav .btn {
position: relative;
z-index: 10;
padding: 6px 12px;
margin-top: 8px;
font-weight: 400;
}
-.bar-nav [class*="button"].pull-right {
+.bar-nav .btn.pull-right {
margin-left: 10px;
}
-.bar-nav [class*="button"].pull-left {
+.bar-nav .btn.pull-left {
margin-right: 10px;
}
-.bar-nav .button-link {
+.bar-nav .btn-link {
padding: 0;
margin-top: 0;
font-size: 16px;
@@ -723,27 +723,27 @@ input[type="button"] {
background-color: transparent;
border: none;
}
-.bar-nav .button-link:active, .bar-nav .button-link.active {
+.bar-nav .btn-link:active, .bar-nav .btn-link.active {
color: #3071a9;
}
-[class*="bar"] .button-block {
+[class*="bar"] .btn-block {
padding: 7px 0;
margin-top: 4px;
margin-bottom: 5px;
font-size: 16px;
}
-.popover .button-block {
+.popover .btn-block {
margin-bottom: 5px;
}
-.popover .button-block:last-child {
+.popover .btn-block:last-child {
margin-bottom: 0;
}
-.popover .bar-nav .button-link.pull-left {
+.popover .bar-nav .btn-link.pull-left {
margin-left: 5px;
}
-.popover .bar-nav .button-link.pull-right {
+.popover .bar-nav .btn-link.pull-right {
margin-right: 5px;
}
@@ -808,7 +808,7 @@ input[type="button"] {
color: #d9534f;
}
-[class*="button"] [class*="badge"] {
+.btn [class*="badge"] {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
@@ -816,18 +816,18 @@ input[type="button"] {
background-color: rgba(0, 0, 0, 0.15);
}
-[class*="button"] .badge-inverted,
-[class*="button"]:active .badge-inverted {
+.btn .badge-inverted,
+.btn:active .badge-inverted {
background-color: transparent;
}
-.button-primary:active .badge-inverted,
-.button-positive:active .badge-inverted,
-.button-negative:active .badge-inverted {
+.btn-primary:active .badge-inverted,
+.btn-positive:active .badge-inverted,
+.btn-negative:active .badge-inverted {
color: #fff;
}
-.button-block [class*="badge"] {
+.btn-block [class*="badge"] {
position: absolute;
right: 0;
margin-right: 10px;
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index fcc315f..d1a6dee 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -63,7 +63,7 @@ body {
.docs-header-content {
padding: 50px 10px;
}
-.docs-header-content .button {
+.docs-header-content .btn {
display: block;
padding: 15px 30px 16px;
margin: 0 10px 10px;
@@ -73,26 +73,26 @@ body {
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
-.docs-header-content .button:hover {
+.docs-header-content .btn:hover {
color: #63e3ff;
border-color: #63e3ff;
}
-.docs-header-content .button:active {
+.docs-header-content .btn:active {
opacity: .5;
background-color: transparent;
}
-.docs-header-content .button-primary {
+.docs-header-content .btn-primary {
margin-bottom: 0;
color: #fff;
border-color: #00d1fe;
background-color: #00d1fe;
}
-.docs-header-content .button-primary:hover {
+.docs-header-content .btn-primary:hover {
color: #fff;
border-color: #63e3ff;
background-color: #63e3ff;
}
-.docs-header-content .button-primary:active {
+.docs-header-content .btn-primary:active {
background-color: #63e3ff;
}
@@ -182,13 +182,6 @@ body {
display: inline-block;
vertical-align: top;
}
-.social [class*="button"] {
- padding: 0;
- border: 0;
-}
-.social iframe {
- background-color: transparent;
-}
.social .twitter-follow-button {
margin-top: 5px;
}
@@ -388,14 +381,14 @@ body {
word-wrap: normal;
}
-#buttonsInDevice [class*="button"],
-#buttonsBadgesInDevice [class*="button"] {
+#buttonsInDevice .btn,
+#buttonsBadgesInDevice .btn {
margin-top: 10px;
margin-right: 100px;
margin-left: 10px;
}
-#blockButtonsInDevice .button-block {
+#blockButtonsInDevice .btn-block {
margin: 10px;
}
@@ -437,7 +430,7 @@ body {
content: '';
}
-#modalsInDevice #iwindow > .button {
+#modalsInDevice #iwindow > .btn {
margin: 10px;
}
#modalsInDevice .card p {
@@ -495,11 +488,11 @@ hr {
line-height: 60px;
}
- .docs-header-content .button {
+ .docs-header-content .btn {
display: inline-block;
margin: 0;
}
- .docs-header-content .button-primary {
+ .docs-header-content .btn-primary {
margin-left: 10px;
}
@@ -921,7 +914,7 @@ hr {
.platform-ios .input-row label + input {
background-image: none;
}
-.platform-ios [class*="button"] {
+.platform-ios .btn {
border: 1px solid #929292;
color: #929292;
background-color: rgba(247, 247, 247, 0.98);
@@ -932,65 +925,65 @@ hr {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
-.platform-ios [class*="button"]:active, .platform-ios [class*="button"].active {
+.platform-ios .btn:active, .platform-ios .btn.active {
color: #fff;
background-color: #929292;
}
-.platform-ios .button-primary {
+.platform-ios .btn-primary {
color: #fff;
border: 1px solid #007aff;
background-color: #007aff;
}
-.platform-ios .button-primary:active, .platform-ios .button-primary.active {
+.platform-ios .btn-primary:active, .platform-ios .btn-primary.active {
border: 1px solid #0062cc;
background-color: #0062cc;
}
-.platform-ios .button-positive {
+.platform-ios .btn-positive {
color: #fff;
border: 1px solid #4cd964;
background-color: #4cd964;
}
-.platform-ios .button-positive:active, .platform-ios .button-positive.active {
+.platform-ios .btn-positive:active, .platform-ios .btn-positive.active {
border: 1px solid #2ac845;
background-color: #2ac845;
}
-.platform-ios .button-negative {
+.platform-ios .btn-negative {
color: #fff;
border: 1px solid #dd524d;
background-color: #dd524d;
}
-.platform-ios .button-negative:active, .platform-ios .button-negative.active {
+.platform-ios .btn-negative:active, .platform-ios .btn-negative.active {
border: 1px solid #cf2d28;
background-color: #cf2d28;
}
-.platform-ios .button-outlined {
+.platform-ios .btn-outlined {
background-color: transparent;
}
-.platform-ios .button-outlined.button-primary {
+.platform-ios .btn-outlined.btn-primary {
color: #007aff;
}
-.platform-ios .button-outlined.button-positive {
+.platform-ios .btn-outlined.btn-positive {
color: #4cd964;
}
-.platform-ios .button-outlined.button-negative {
+.platform-ios .btn-outlined.btn-negative {
color: #dd524d;
}
-.platform-ios .button-outlined.button-primary:active, .platform-ios .button-outlined.button-positive:active, .platform-ios .button-outlined.button-negative:active {
+.platform-ios .btn-outlined.btn-primary:active, .platform-ios .btn-outlined.btn-positive:active, .platform-ios .btn-outlined.btn-negative:active {
color: #fff;
}
-.platform-ios .button-link {
+.platform-ios .btn-link {
color: #007aff;
background-color: transparent;
border: none;
}
-.platform-ios .button-link:active, .platform-ios .button-link.active {
+.platform-ios .btn-link:active, .platform-ios .btn-link.active {
color: #0062cc;
background-color: transparent;
}
-.platform-ios .bar-nav .button-link {
+.platform-ios .bar-nav .btn-link {
color: #007aff;
}
-.platform-ios .bar-nav .button-link:active {
+.platform-ios .bar-nav .btn-link:active {
color: #007aff;
opacity: .6;
}
@@ -1275,83 +1268,83 @@ hr {
.platform-android .input-row label + input {
background-image: none;
}
-.platform-android [class*="button"] {
+.platform-android .btn {
border: 1px solid #565656;
color: white;
background-color: #111111;
border-radius: 3px;
}
-.platform-android [class*="button"]:active, .platform-android [class*="button"].active {
+.platform-android .btn:active, .platform-android .btn.active {
color: #fff;
background-color: white;
}
-.platform-android [class*="bar-"] [class*="button"] {
+.platform-android [class*="bar-"] .btn {
padding-top: 9px;
padding-bottom: 9px;
}
-.platform-android [class*="bar-"] .button-link {
+.platform-android [class*="bar-"] .btn-link {
padding: 0;
color: #33b5e5;
line-height: 50px;
}
-.platform-android [class*="bar-"] .button-link:active, .platform-android [class*="bar-"] .button-link.active {
+.platform-android [class*="bar-"] .btn-link:active, .platform-android [class*="bar-"] .btn-link.active {
color: #1a9bcb;
}
-.platform-android .button-primary {
+.platform-android .btn-primary {
color: #fff;
border: 1px solid #33b5e5;
background-color: #33b5e5;
}
-.platform-android .button-primary:active, .platform-android .button-primary.active {
+.platform-android .btn-primary:active, .platform-android .btn-primary.active {
border: 1px solid #1a9bcb;
background-color: #1a9bcb;
}
-.platform-android .button-positive {
+.platform-android .btn-positive {
color: #fff;
border: 1px solid #81c700;
background-color: #81c700;
}
-.platform-android .button-positive:active, .platform-android .button-positive.active {
+.platform-android .btn-positive:active, .platform-android .btn-positive.active {
border: 1px solid #609400;
background-color: #609400;
}
-.platform-android .button-negative {
+.platform-android .btn-negative {
color: #fff;
border: 1px solid #f20754;
background-color: #f20754;
}
-.platform-android .button-negative:active, .platform-android .button-negative.active {
+.platform-android .btn-negative:active, .platform-android .btn-negative.active {
border: 1px solid #c00643;
background-color: #c00643;
}
-.platform-android .button-outlined {
+.platform-android .btn-outlined {
background-color: transparent;
}
-.platform-android .button-outlined.button-primary {
+.platform-android .btn-outlined.btn-primary {
color: #33b5e5;
}
-.platform-android .button-outlined.button-positive {
+.platform-android .btn-outlined.btn-positive {
color: #81c700;
}
-.platform-android .button-outlined.button-negative {
+.platform-android .btn-outlined.btn-negative {
color: #f20754;
}
-.platform-android .button-outlined.button-primary:active, .platform-android .button-outlined.button-positive:active, .platform-android .button-outlined.button-negative:active {
+.platform-android .btn-outlined.btn-primary:active, .platform-android .btn-outlined.btn-positive:active, .platform-android .btn-outlined.btn-negative:active {
color: #fff;
}
-.platform-android .button-link {
+.platform-android .btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
}
-.platform-android .button-link:active, .platform-android .button-link.active {
+.platform-android .btn-link:active, .platform-android .btn-link.active {
color: #1a9bcb;
background-color: transparent;
}
-.platform-android .bar-nav .button-link {
+.platform-android .bar-nav .btn-link {
color: #33b5e5;
}
-.platform-android .bar-nav .button-link:active {
+.platform-android .bar-nav .btn-link:active {
color: #33b5e5;
opacity: .6;
}
diff --git a/examples/app-default/choose-theater.html b/examples/app-default/choose-theater.html
index d0d54d4..93414f2 100644
--- a/examples/app-default/choose-theater.html
+++ b/examples/app-default/choose-theater.html
@@ -19,7 +19,7 @@
diff --git a/examples/app-default/css/app.css b/examples/app-default/css/app.css
index 6b33597..78db69d 100644
--- a/examples/app-default/css/app.css
+++ b/examples/app-default/css/app.css
@@ -11,6 +11,6 @@
padding: 10px 0;
}
-.form-wrapper [class*="button"] {
+.form-wrapper .btn {
margin: 0 10px;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index cf70e00..ba40b93 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@ base_url: "./"