diff --git a/dist/android-theme.css b/dist/android-theme.css
index 1a2687d..26b49c3 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -218,12 +218,12 @@ a:active {
}
.bar .btn {
- margin-top: 7px;
+ top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
- margin-top: 0;
+ top: 0;
padding: 0;
color: #33b5e5;
font-size: 18px;
@@ -236,6 +236,9 @@ a:active {
top: 2px;
padding: 0;
}
+.bar .btn-block {
+ top: 4px;
+}
.bar .segmented-control {
top: 7px;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 9b9e0ad..e3ff990 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -358,7 +358,7 @@ p {
.btn {
position: relative;
display: inline-block;
- padding: 5px 8px;
+ padding: 6px 8px 7px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
@@ -455,8 +455,6 @@ input[type="button"] {
.btn .badge {
font-size: 12px;
- padding-top: 2px;
- padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15);
}
@@ -574,9 +572,10 @@ input[type="button"] {
.bar .btn {
position: relative;
+ top: 7px;
z-index: 20;
padding: 6px 12px 7px;
- margin-top: 8px;
+ margin-top: 0;
font-weight: 400;
}
.bar .btn.pull-right {
@@ -587,7 +586,7 @@ input[type="button"] {
}
.bar .btn-link {
- margin-top: 0;
+ top: 0;
padding: 0;
font-size: 16px;
color: #428bca;
@@ -599,8 +598,8 @@ input[type="button"] {
}
.bar .btn-block {
- padding: 7px 0 6px;
- margin-top: 5px;
+ top: 6px;
+ padding: 7px 0;
margin-bottom: 0;
font-size: 16px;
}
@@ -643,14 +642,14 @@ input[type="button"] {
}
.bar .segmented-control {
- top: 8px;
+ top: 7px;
margin: 0 auto;
}
.badge {
display: inline-block;
- padding: 2px 9px;
- font-size: 13px;
+ padding: 2px 9px 3px;
+ font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0, 0, 0, 0.15);
@@ -863,6 +862,10 @@ select {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
+.input-group {
+ background-color: #fff;
+}
+
.input-group input,
.input-group textarea {
margin-bottom: 0;
@@ -1147,7 +1150,7 @@ select {
top: 3px;
right: 11px;
color: #999;
- font-size: 14px;
+ font-size: 13px;
text-transform: uppercase;
content: "Off";
}
@@ -1178,7 +1181,7 @@ select {
.content.fade.in {
opacity: 1;
}
-.content.slide {
+.content.sliding {
z-index: 2;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -webkit-transform 0.4s;
@@ -1187,13 +1190,13 @@ select {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
-.content.slide.left {
+.content.sliding.left {
z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
-.content.slide.right {
+.content.sliding.right {
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
diff --git a/dist/ratchet.js b/dist/ratchet.js
index df015ac..77b5c3d 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -396,8 +396,8 @@
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
- swap.classList.add('slide');
- container.classList.add('slide');
+ swap.classList.add('sliding');
+ container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
@@ -434,7 +434,7 @@
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
- swap.classList.remove('slide', 'sliding-in');
+ swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index e652743..575b4d9 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -1 +1 @@
-
+
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0fc9335..35e9311 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -92,7 +92,7 @@ body {
z-index: 20;
overflow: hidden;
height: 0;
- background-color: rgba(0, 0, 0, 0.95);
+ background-color: rgba(0, 0, 0, 0.9);
opacity: 0;
}
.docs-nav .docs-nav-group.active {
@@ -342,6 +342,7 @@ body {
margin-bottom: 15px;
font-size: 24px;
font-weight: 300;
+ line-height: 34px;
}
.component-description {
@@ -368,19 +369,56 @@ body {
position: relative;
}
-.component-example-fullbleed,
-.highlight {
- margin-left: -15px;
- margin-right: -15px;
+.component-example .bar {
+ border-top: 1px solid #dddddd;
+ border-bottom: 1px solid #dddddd;
+}
+.component-example .bar.bar-header-secondary {
+ top: 0 !important;
+ border-top: 0;
}
-.component-example .table-view.inset {
- margin-left: 0;
- margin-right: 0;
+.component-example > .content-padded {
+ margin: 15px;
}
-.component-example .bar-header-secondary {
- top: 0;
+.component-example > .card {
+ margin: 15px 0 0;
+}
+.component-example > .card .control-content {
+ padding: 15px;
+}
+
+.component-example > .btn,
+.component-example > .toggle {
+ margin-bottom: 10px;
+}
+
+.component-example .slider {
+ height: 200px;
+}
+
+.component-example .slide img {
+ width: 100%;
+ height: 200px;
+}
+
+.component-example .slide-text {
+ position: absolute;
+ top: 45%;
+ left: 0;
+ width: 100%;
+ color: #fff;
+ text-align: center;
+ font-size: 24px;
+ font-weight: 300;
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.component-example-fullbleed,
+.highlight {
+ margin-left: -15px;
+ margin-right: -15px;
}
.bar-nav ~ .content {
@@ -400,6 +438,16 @@ body {
word-wrap: normal;
}
+#modals .modal {
+ left: 0;
+ z-index: 50;
+}
+
+#push .component-example {
+ height: 150px;
+ overflow: hidden;
+}
+
#buttonsInDevice .btn,
#buttonsBadgesInDevice .btn {
margin-top: 10px;
@@ -1568,12 +1616,12 @@ hr {
text-align: left;
}
.platform-android .bar .btn {
- margin-top: 7px;
+ top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.platform-android .bar .btn-link {
- margin-top: 0;
+ top: 0;
padding: 0;
color: #33b5e5;
font-size: 18px;
@@ -1586,6 +1634,9 @@ hr {
top: 2px;
padding: 0;
}
+.platform-android .bar .btn-block {
+ top: 4px;
+}
.platform-android .bar .segmented-control {
top: 7px;
}
diff --git a/docs/components.html b/docs/components.html
index 541aafb..eb6806f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -289,12 +289,6 @@ title: Components · Ratchet
-
-
-
-
{% highlight html %}
@@ -1011,9 +1005,6 @@ title: Components · Ratchet
-
{% highlight html %}
@@ -1040,24 +1031,6 @@ document
Popovers
-
-
-
-
- - Item1
- - Item2
- - Item3
- - Item4
- - Item5
- - Item6
- - Item7
- - Item8
-
-
-
-
{% highlight html %}
diff --git a/docs/dist/android-theme.css b/docs/dist/android-theme.css
index 1a2687d..26b49c3 100644
--- a/docs/dist/android-theme.css
+++ b/docs/dist/android-theme.css
@@ -218,12 +218,12 @@ a:active {
}
.bar .btn {
- margin-top: 7px;
+ top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
- margin-top: 0;
+ top: 0;
padding: 0;
color: #33b5e5;
font-size: 18px;
@@ -236,6 +236,9 @@ a:active {
top: 2px;
padding: 0;
}
+.bar .btn-block {
+ top: 4px;
+}
.bar .segmented-control {
top: 7px;
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css
index 9b9e0ad..e3ff990 100644
--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@@ -358,7 +358,7 @@ p {
.btn {
position: relative;
display: inline-block;
- padding: 5px 8px;
+ padding: 6px 8px 7px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
@@ -455,8 +455,6 @@ input[type="button"] {
.btn .badge {
font-size: 12px;
- padding-top: 2px;
- padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15);
}
@@ -574,9 +572,10 @@ input[type="button"] {
.bar .btn {
position: relative;
+ top: 7px;
z-index: 20;
padding: 6px 12px 7px;
- margin-top: 8px;
+ margin-top: 0;
font-weight: 400;
}
.bar .btn.pull-right {
@@ -587,7 +586,7 @@ input[type="button"] {
}
.bar .btn-link {
- margin-top: 0;
+ top: 0;
padding: 0;
font-size: 16px;
color: #428bca;
@@ -599,8 +598,8 @@ input[type="button"] {
}
.bar .btn-block {
- padding: 7px 0 6px;
- margin-top: 5px;
+ top: 6px;
+ padding: 7px 0;
margin-bottom: 0;
font-size: 16px;
}
@@ -643,14 +642,14 @@ input[type="button"] {
}
.bar .segmented-control {
- top: 8px;
+ top: 7px;
margin: 0 auto;
}
.badge {
display: inline-block;
- padding: 2px 9px;
- font-size: 13px;
+ padding: 2px 9px 3px;
+ font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0, 0, 0, 0.15);
@@ -863,6 +862,10 @@ select {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
+.input-group {
+ background-color: #fff;
+}
+
.input-group input,
.input-group textarea {
margin-bottom: 0;
@@ -1147,7 +1150,7 @@ select {
top: 3px;
right: 11px;
color: #999;
- font-size: 14px;
+ font-size: 13px;
text-transform: uppercase;
content: "Off";
}
@@ -1178,7 +1181,7 @@ select {
.content.fade.in {
opacity: 1;
}
-.content.slide {
+.content.sliding {
z-index: 2;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -webkit-transform 0.4s;
@@ -1187,13 +1190,13 @@ select {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
-.content.slide.left {
+.content.sliding.left {
z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
-.content.slide.right {
+.content.sliding.right {
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
diff --git a/docs/dist/ratchet.js b/docs/dist/ratchet.js
index 9664f90..d5ca79a 100644
--- a/docs/dist/ratchet.js
+++ b/docs/dist/ratchet.js
@@ -405,8 +405,8 @@
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
- swap.classList.add('slide');
- container.classList.add('slide');
+ swap.classList.add('sliding');
+ container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
@@ -443,7 +443,7 @@
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
- swap.classList.remove('slide', 'sliding-in');
+ swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
diff --git a/js/push.js b/js/push.js
index b044a52..f052f93 100644
--- a/js/push.js
+++ b/js/push.js
@@ -287,8 +287,8 @@
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
- swap.classList.add('slide');
- container.classList.add('slide');
+ swap.classList.add('sliding');
+ container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
@@ -325,7 +325,7 @@
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
- swap.classList.remove('slide', 'sliding-in');
+ swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
diff --git a/sass/badges.scss b/sass/badges.scss
index 8b5143d..c76d7ab 100644
--- a/sass/badges.scss
+++ b/sass/badges.scss
@@ -4,8 +4,8 @@
.badge {
display: inline-block;
- padding: 2px 9px;
- font-size: 13px;
+ padding: 2px 9px 3px;
+ font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0,0,0,.15);
diff --git a/sass/bars.scss b/sass/bars.scss
index 9e45f08..e431292 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -124,9 +124,10 @@
.bar .btn {
position: relative;
+ top: 7px;
z-index: 20; // Position the buttons on top of .title
padding: 6px 12px 7px;
- margin-top: 8px;
+ margin-top: 0;
font-weight: $font-weight-light;
// Give buttons that are floated left and right side margin
@@ -140,7 +141,7 @@
// Bars with link buttons (Line the text up with content)
.bar .btn-link {
- margin-top: 0;
+ top: 0;
padding: 0;
font-size: 16px;
color: $primary-color;
@@ -157,8 +158,8 @@
//
// Add proper padding
.bar .btn-block {
- padding: 7px 0 6px;
- margin-top: 5px;
+ top: 6px;
+ padding: 7px 0;
margin-bottom: 0;
font-size: 16px; // Scale down font size to fit in bar.
}
@@ -230,6 +231,6 @@
// Position the control correctly inside a bar.
.bar .segmented-control {
- top: 8px;
+ top: 7px;
margin: 0 auto;
}
diff --git a/sass/buttons.scss b/sass/buttons.scss
index e13370d..00c2373 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -5,7 +5,7 @@
.btn {
position: relative;
display: inline-block;
- padding: 5px 8px;
+ padding: 6px 8px 7px;
margin-bottom: 0; // For input.btn
font-size: $button-font-size;
font-weight: $font-weight-light;
@@ -139,8 +139,6 @@ input[type="button"] {
// Generic styles for all badges within default buttons
.btn .badge {
font-size: 12px;
- padding-top: 2px;
- padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0,0,0,.15);
}
diff --git a/sass/docs.scss b/sass/docs.scss
index 319cd55..bc83c98 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -90,7 +90,7 @@ body {
z-index: 20;
overflow: hidden;
height: 0;
- background-color: rgba(0,0,0,.95);
+ background-color: rgba(0,0,0,.9);
opacity: 0;
&.active {
@@ -342,6 +342,7 @@ body {
margin-bottom: 15px;
font-size: 24px;
font-weight: 300;
+ line-height: 34px;
}
.component-description {
margin-bottom: 15px;
@@ -365,18 +366,52 @@ body {
.component-example .content {
position: relative;
}
+.component-example .bar {
+ border-top: $border-default;
+ border-bottom: $border-default;
+
+ &.bar-header-secondary {
+ top: 0 !important;
+ border-top: 0;
+ }
+}
+.component-example > .content-padded {
+ margin: 15px;
+}
+.component-example > .card {
+ margin: 15px 0 0;
+
+ .control-content {
+ padding: 15px;
+ }
+}
+.component-example > .btn,
+.component-example > .toggle {
+ margin-bottom: 10px;
+}
+.component-example .slider {
+ height: 200px;
+}
+.component-example .slide img {
+ width: 100%;
+ height: 200px;
+}
+.component-example .slide-text {
+ position: absolute;
+ top: 45%;
+ left: 0;
+ width: 100%;
+ color: #fff;
+ text-align: center;
+ font-size: 24px;
+ font-weight: 300;
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
.component-example-fullbleed,
.highlight {
margin-left: -15px;
margin-right: -15px;
}
-.component-example .table-view.inset {
- margin-left: 0;
- margin-right: 0;
-}
-.component-example .bar-header-secondary {
- top: 0;
-}
.bar-nav ~ .content {
padding: 0;
}
@@ -392,6 +427,16 @@ body {
white-space: pre;
word-wrap: normal;
}
+// Modals
+#modals .modal {
+ left: 0;
+ z-index: 50;
+}
+// Push
+#push .component-example {
+ height: 150px;
+ overflow: hidden;
+}
// Buttons
#buttonsInDevice,
diff --git a/sass/forms.scss b/sass/forms.scss
index 069e630..ad978e0 100644
--- a/sass/forms.scss
+++ b/sass/forms.scss
@@ -69,6 +69,9 @@ select {
// -------------------------------------------------------------------
// Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
+.input-group {
+ background-color: #fff;
+}
.input-group input,
.input-group textarea {
margin-bottom: 0;
diff --git a/sass/push.scss b/sass/push.scss
index bc6da86..6083826 100644
--- a/sass/push.scss
+++ b/sass/push.scss
@@ -14,7 +14,7 @@
}
// Slide animation
- &.slide {
+ &.sliding {
z-index: 2;
@include transition(-webkit-transform .4s);
@include transform(translate3d(0, 0, 0));
diff --git a/sass/theme-android.scss b/sass/theme-android.scss
index b33a4c0..9de299d 100644
--- a/sass/theme-android.scss
+++ b/sass/theme-android.scss
@@ -300,12 +300,12 @@ a {
// Bars with buttons
.bar {
.btn {
- margin-top: 7px;
+ top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.btn-link {
- margin-top: 0;
+ top: 0;
padding: 0;
color: $primary-color;
font-size: $font-size-default;
@@ -322,6 +322,9 @@ a {
padding: 0;
}
}
+ .btn-block {
+ top: 4px;
+ }
}
// Bars with segmented-controls
diff --git a/sass/toggles.scss b/sass/toggles.scss
index c87a528..a5908d9 100644
--- a/sass/toggles.scss
+++ b/sass/toggles.scss
@@ -32,7 +32,7 @@
top: 3px;
right: 11px;
color: #999;
- font-size: 14px;
+ font-size: 13px;
text-transform: uppercase;
content: "Off";
}