diff --git a/Gruntfile.js b/Gruntfile.js index 56eb997..e98073f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -47,7 +47,6 @@ module.exports = function(grunt) { files: { '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss', '<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss', - '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss', '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss', '<%= meta.distPath %>android-theme.css': '<%= meta.srcPath %>sass/theme-android.scss' } diff --git a/dist/ratchet.css b/dist/ratchet.css index 2dfe40e..0a44cec 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -252,6 +252,9 @@ a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } +a:active { + color: #3071a9; +} strong { font-weight: 500; @@ -328,6 +331,130 @@ p { color: #777; } +.btn { + position: relative; + display: inline-block; + padding: 5px 8px; + margin: 0; + font-size: 12px; + font-weight: 400; + line-height: 1.15; + color: #333; + text-align: center; + vertical-align: top; + cursor: pointer; + background-color: white; + border: 1px solid #ccc; + border-radius: 3px; +} +.btn:active, .btn.active { + color: inherit; + background-color: #ccc; +} +.btn:disabled, .btn.disabled { + opacity: .6; +} + +.btn-primary { + color: #fff; + border: 1px solid #428bca; + background-color: #428bca; +} +.btn-primary:active, .btn-primary.active { + border: 1px solid #3071a9; + background-color: #3071a9; +} + +.btn-positive { + color: #fff; + border: 1px solid #5cb85c; + background-color: #5cb85c; +} +.btn-positive:active, .btn-positive.active { + border: 1px solid #449d44; + background-color: #449d44; +} + +.btn-negative { + color: #fff; + border: 1px solid #d9534f; + background-color: #d9534f; +} +.btn-negative:active, .btn-negative.active { + border: 1px solid #c9302c; + background-color: #c9302c; +} + +.btn-outlined { + background-color: transparent; +} +.btn-outlined.btn-primary { + color: #428bca; +} +.btn-outlined.btn-positive { + color: #5cb85c; +} +.btn-outlined.btn-negative { + color: #d9534f; +} +.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { + color: #fff; +} + +.btn-link { + padding-top: 6px; + padding-bottom: 6px; + color: #428bca; + background-color: transparent; + border: none; +} +.btn-link:active, .btn-link.active { + color: #3071a9; + background-color: transparent; +} + +.btn-block { + display: block; + padding: 15px 0; + margin-bottom: 10px; + font-size: 18px; +} + +input[type="submit"], +input[type="reset"], +input[type="button"] { + width: 100%; +} + +.btn .badge { + font-size: 12px; + padding-top: 2px; + padding-bottom: 2px; + margin: -2px -4px -2px 4px; + background-color: rgba(0, 0, 0, 0.15); +} + +.btn .badge-inverted, +.btn:active .badge-inverted { + background-color: transparent; +} + +.btn-primary:active .badge-inverted, +.btn-positive:active .badge-inverted, +.btn-negative:active .badge-inverted { + color: #fff; +} + +.btn-block .badge { + position: absolute; + right: 0; + margin-right: 10px; +} + +.btn .icon { + font-size: inherit; +} + .bar { position: fixed; right: 0; @@ -493,6 +620,44 @@ p { margin-right: -3px; } +.badge { + display: inline-block; + padding: 2px 9px; + font-size: 13px; + line-height: 1; + color: #333; + background-color: rgba(0, 0, 0, 0.15); + border-radius: 100px; +} +.badge.badge-inverted { + padding: 0 5px 0 0; + background-color: transparent; +} + +.badge-primary { + color: #fff; + background-color: #428bca; +} +.badge-primary.badge-inverted { + color: #428bca; +} + +.badge-positive { + color: #fff; + background-color: #5cb85c; +} +.badge-positive.badge-inverted { + color: #5cb85c; +} + +.badge-negative { + color: #fff; + background-color: #d9534f; +} +.badge-negative.badge-inverted { + color: #d9534f; +} + .card { width: auto; overflow: hidden; @@ -714,167 +879,6 @@ select { border: 0; } -.btn { - position: relative; - display: inline-block; - padding: 5px 8px; - margin: 0; - font-size: 12px; - font-weight: 400; - line-height: 1.15; - color: #333; - text-align: center; - vertical-align: top; - cursor: pointer; - background-color: white; - border: 1px solid #ccc; - border-radius: 3px; -} -.btn:active, .btn.active { - background-color: #ccc; -} -.btn:disabled, .btn.disabled { - opacity: .6; -} - -.btn-primary { - color: #fff; - border: 1px solid #428bca; - background-color: #428bca; -} -.btn-primary:active, .btn-primary.active { - border: 1px solid #3071a9; - background-color: #3071a9; -} - -.btn-positive { - color: #fff; - border: 1px solid #5cb85c; - background-color: #5cb85c; -} -.btn-positive:active, .btn-positive.active { - border: 1px solid #449d44; - background-color: #449d44; -} - -.btn-negative { - color: #fff; - border: 1px solid #d9534f; - background-color: #d9534f; -} -.btn-negative:active, .btn-negative.active { - border: 1px solid #c9302c; - background-color: #c9302c; -} - -.btn-outlined { - background-color: transparent; -} -.btn-outlined.btn-primary { - color: #428bca; -} -.btn-outlined.btn-positive { - color: #5cb85c; -} -.btn-outlined.btn-negative { - color: #d9534f; -} -.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { - color: #fff; -} - -.btn-link { - padding-top: 6px; - padding-bottom: 6px; - color: #428bca; - background-color: transparent; - border: none; -} -.btn-link:active, .btn-link.active { - color: #3071a9; - background-color: transparent; -} - -.btn-block { - display: block; - padding: 15px 0; - margin-bottom: 10px; - font-size: 18px; -} - -input[type="submit"], -input[type="reset"], -input[type="button"] { - width: 100%; -} - -.btn .badge { - font-size: 12px; - padding-top: 2px; - padding-bottom: 2px; - margin: -2px -4px -2px 4px; - background-color: rgba(0, 0, 0, 0.15); -} - -.btn .badge-inverted, -.btn:active .badge-inverted { - background-color: transparent; -} - -.btn-primary:active .badge-inverted, -.btn-positive:active .badge-inverted, -.btn-negative:active .badge-inverted { - color: #fff; -} - -.btn-block .badge { - position: absolute; - right: 0; - margin-right: 10px; -} - -.btn .icon { - font-size: inherit; -} - -.badge { - display: inline-block; - padding: 2px 9px; - font-size: 13px; - line-height: 1; - color: #333; - background-color: rgba(0, 0, 0, 0.15); - border-radius: 100px; -} -.badge.badge-inverted { - padding: 0 5px 0 0; - background-color: transparent; -} - -.badge-primary { - color: #fff; - background-color: #428bca; -} -.badge-primary.badge-inverted { - color: #428bca; -} - -.badge-positive { - color: #fff; - background-color: #5cb85c; -} -.badge-positive.badge-inverted { - color: #5cb85c; -} - -.badge-negative { - color: #fff; - background-color: #d9534f; -} -.badge-negative.badge-inverted { - color: #d9534f; -} - .segmented-control { position: relative; display: table; diff --git a/lib/sass/base.scss b/lib/sass/base.scss index 1c5e1e6..dfdf23a 100644 --- a/lib/sass/base.scss +++ b/lib/sass/base.scss @@ -23,6 +23,10 @@ a { color: $primary-color; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links + + &:active { + color: darken($primary-color, 10%); + } } strong { font-weight: $font-weight; diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index e4d5f50..b5edf62 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -21,6 +21,7 @@ // Active & filled button styles &:active, &.active { + color: inherit; background-color: #ccc; } diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss index 7c9073d..806f6d0 100644 --- a/lib/sass/ratchet.scss +++ b/lib/sass/ratchet.scss @@ -11,12 +11,12 @@ @import "type.scss"; // Components +@import "buttons.scss"; @import "bars.scss"; +@import "badges.scss"; @import "cards.scss"; @import "table-views.scss"; @import "forms.scss"; -@import "buttons.scss"; -@import "badges.scss"; @import "segmented-controls.scss"; @import "popovers.scss";