From 0ba0343f11aefaff89c6beb073cc6fe67c3be9ef Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 9 Sep 2013 11:59:00 -0500 Subject: [PATCH] Button bars and default styles for header buttons Added a new segmented button bar that stretches, also set the default styles for header buttons. --- dist/ionic.css | 322 ++++++++++++++++-------- example/headers.html | 9 +- scss/ionic/structure/_button-group.scss | 30 +++ scss/ionic/structure/_button.scss | 6 - scss/ionic/theme/_bar.scss | 60 ++++- scss/ionic/theme/_button.scss | 56 +++-- 6 files changed, 333 insertions(+), 150 deletions(-) diff --git a/dist/ionic.css b/dist/ionic.css index 7cf8c82683..62eac31902 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -170,10 +170,6 @@ ul { .button.button-block { margin: 0 0 10px 0; display: block; } - .button.button-clear { - background: none; - border: none; - padding: 10px 0px; } .button-group { position: relative; @@ -237,6 +233,32 @@ ul { -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; } +.button-bar { + display: -webkit-box; + display: box; + box-flex: 1; + -webkit-box-flex: 1; + -moz-box-flex: 1; + box-orient: horizontal; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; } + +.button-bar > .button { + box-flex: 1; + -webkit-box-flex: 1; + -moz-box-flex: 1; + width: 0; + line-height: 8px; + border-radius: 0; + overflow: hidden; + text-align: center; + white-space: nowrap; + display: block; + text-overflow: ellipsis; + border-width: 1px 0px 1px 1px; } + .button-bar > .button:last-child { + border-right-width: 1px; } + form { margin: 0 0 1.42857; } @@ -1359,13 +1381,7 @@ main { .bar { background-color: white; border-style: solid; - border-width: 0; - /* - Disabled temporarily because it's annoying for testing. - @media screen and (orientation : landscape) { - padding: $barPaddingLandscape; - } - */ } + border-width: 0; } .bar.bar-header { border-bottom-width: 1px; } .bar.bar-footer { @@ -1419,112 +1435,204 @@ main { .bar.bar-dark .tab-item a { color: white; } +.bar-default .button { + color: #333333; + background-color: white; + border-color: #dddddd; } + .bar-default .button:hover { + color: #333333; + text-decoration: none; } + .bar-default .button.active, .bar-default .button:active { + background-color: #ebebeb; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #c4c4c4; } + +.bar-secondary .button { + color: #333333; + background-color: whitesmoke; + border-color: #cccccc; } + .bar-secondary .button:hover { + color: #333333; + text-decoration: none; } + .bar-secondary .button.active, .bar-secondary .button:active { + background-color: #e1e1e1; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #b3b3b3; } + +.bar-primary .button { + color: white; + background-color: #6999e9; + border-color: #5981c5; } + .bar-primary .button:hover { + color: white; + text-decoration: none; } + .bar-primary .button.active, .bar-primary .button:active { + background-color: #4581e4; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #3d67ae; } + +.bar-info .button { + color: white; + background-color: #60d2e6; + border-color: #51b3c4; } + .bar-info .button:hover { + color: white; + text-decoration: none; } + .bar-info .button.active, .bar-info .button:active { + background-color: #3dc8e0; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #3998a9; } + +.bar-success .button { + color: white; + background-color: #89c163; + border-color: #71a052; } + .bar-success .button:hover { + color: white; + text-decoration: none; } + .bar-success .button.active, .bar-success .button:active { + background-color: #73b447; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #597e41; } + +.bar-warning .button { + color: white; + background-color: #f0b840; + border-color: #cf9a29; } + .bar-warning .button:hover { + color: white; + text-decoration: none; } + .bar-warning .button.active, .bar-warning .button:active { + background-color: #edaa1a; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #a47a21; } + +.bar-danger .button { + color: white; + background-color: #de5645; + border-color: #bc4435; } + .bar-danger .button:hover { + color: white; + text-decoration: none; } + .bar-danger .button.active, .bar-danger .button:active { + background-color: #d43926; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #94362a; } + +.bar-dark .button { + color: white; + background-color: #444444; + border-color: #111111; } + .bar-dark .button:hover { + color: white; + text-decoration: none; } + .bar-dark .button.active, .bar-dark .button:active { + background-color: #303030; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: black; } + .button { color: #222222; border-radius: 2px; border-width: 1px; border-style: solid; padding: 10px 15px; } + .button.button-default { + color: #333333; + background-color: white; + border-color: #dddddd; } + .button.button-default:hover { + color: #333333; + text-decoration: none; } + .button.button-default.active, .button.button-default:active { + background-color: #ebebeb; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #c4c4c4; } + .button.button-secondary { + color: #333333; + background-color: whitesmoke; + border-color: #cccccc; } + .button.button-secondary:hover { + color: #333333; + text-decoration: none; } + .button.button-secondary.active, .button.button-secondary:active { + background-color: #e1e1e1; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #b3b3b3; } + .button.button-primary { + color: white; + background-color: #6999e9; + border-color: #5981c5; } + .button.button-primary:hover { + color: white; + text-decoration: none; } + .button.button-primary.active, .button.button-primary:active { + background-color: #4581e4; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #3d67ae; } + .button.button-info { + color: white; + background-color: #60d2e6; + border-color: #51b3c4; } + .button.button-info:hover { + color: white; + text-decoration: none; } + .button.button-info.active, .button.button-info:active { + background-color: #3dc8e0; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #3998a9; } + .button.button-success { + color: white; + background-color: #89c163; + border-color: #71a052; } + .button.button-success:hover { + color: white; + text-decoration: none; } + .button.button-success.active, .button.button-success:active { + background-color: #73b447; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #597e41; } + .button.button-warning { + color: white; + background-color: #f0b840; + border-color: #cf9a29; } + .button.button-warning:hover { + color: white; + text-decoration: none; } + .button.button-warning.active, .button.button-warning:active { + background-color: #edaa1a; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #a47a21; } + .button.button-danger { + color: white; + background-color: #de5645; + border-color: #bc4435; } + .button.button-danger:hover { + color: white; + text-decoration: none; } + .button.button-danger.active, .button.button-danger:active { + background-color: #d43926; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: #94362a; } + .button.button-dark { + color: white; + background-color: #444444; + border-color: #111111; } + .button.button-dark:hover { + color: white; + text-decoration: none; } + .button.button-dark.active, .button.button-dark:active { + background-color: #303030; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); + border-color: black; } + .button.button-clear { + background: none; + border: none; + padding: 10px 0px; } a.button { text-decoration: none; } -.button-default { - color: #333333; - background-color: white; - border-color: #dddddd; } - .button-default:hover { - color: #333333; - text-decoration: none; } - .button-default.active, .button-default:active { - background-color: #ebebeb; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #c4c4c4; } - -.button-secondary { - color: #333333; - background-color: whitesmoke; - border-color: #cccccc; } - .button-secondary:hover { - color: #333333; - text-decoration: none; } - .button-secondary.active, .button-secondary:active { - background-color: #e1e1e1; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #b3b3b3; } - -.button-primary { - color: white; - background-color: #6999e9; - border-color: #5981c5; } - .button-primary:hover { - color: white; - text-decoration: none; } - .button-primary.active, .button-primary:active { - background-color: #4581e4; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #3d67ae; } - -.button-info { - color: white; - background-color: #60d2e6; - border-color: #51b3c4; } - .button-info:hover { - color: white; - text-decoration: none; } - .button-info.active, .button-info:active { - background-color: #3dc8e0; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #3998a9; } - -.button-success { - color: white; - background-color: #89c163; - border-color: #71a052; } - .button-success:hover { - color: white; - text-decoration: none; } - .button-success.active, .button-success:active { - background-color: #73b447; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #597e41; } - -.button-warning { - color: white; - background-color: #f0b840; - border-color: #cf9a29; } - .button-warning:hover { - color: white; - text-decoration: none; } - .button-warning.active, .button-warning:active { - background-color: #edaa1a; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #a47a21; } - -.button-danger { - color: white; - background-color: #de5645; - border-color: #bc4435; } - .button-danger:hover { - color: white; - text-decoration: none; } - .button-danger.active, .button-danger:active { - background-color: #d43926; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: #94362a; } - -.button-dark { - color: white; - background-color: #444444; - border-color: #111111; } - .button-dark:hover { - color: white; - text-decoration: none; } - .button-dark.active, .button-dark:active { - background-color: #303030; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); - border-color: black; } - .button-transparent { background: transparent; } diff --git a/example/headers.html b/example/headers.html index d94a17b8db..93d8d4610d 100644 --- a/example/headers.html +++ b/example/headers.html @@ -24,11 +24,10 @@
-
- Success - Warning - Danger - Dark +
+ Success + Warning + Danger
diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/structure/_button-group.scss index d2e72c1cff..f601dec10d 100644 --- a/scss/ionic/structure/_button-group.scss +++ b/scss/ionic/structure/_button-group.scss @@ -62,3 +62,33 @@ .button-group > .button-group:last-child > .button:first-child { @include border-left-radius(0); } + +.button-bar { + display: -webkit-box; + display: box; + + @include box-flex(1); + @include box-orient(horizontal); + +} + +.button-bar > .button { + @include box-flex(1); + // Fix for box-flex width issue + width: 0; + + line-height: 8px; + border-radius: 0; + + overflow: hidden; + text-align: center; + white-space: nowrap; + display: block; + text-overflow: ellipsis; + + border-width: 1px 0px 1px 1px; + + &:last-child { + border-right-width: 1px; + } +} diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss index 02267f4a70..3d285ddb88 100644 --- a/scss/ionic/structure/_button.scss +++ b/scss/ionic/structure/_button.scss @@ -10,10 +10,4 @@ margin: $buttonBlockMargin; display: block; } - - &.button-clear { - background: none; - border: none; - padding: $buttonClearPadding; - } } diff --git a/scss/ionic/theme/_bar.scss b/scss/ionic/theme/_bar.scss index ca07156cdf..5077f4d41b 100644 --- a/scss/ionic/theme/_bar.scss +++ b/scss/ionic/theme/_bar.scss @@ -18,6 +18,7 @@ color: $darkColor; } } + &.bar-secondary { background-color: $barSecondaryBackground; border-color: $barSecondaryBorderColor; @@ -77,11 +78,56 @@ } } - /* - Disabled temporarily because it's annoying for testing. - @media screen and (orientation : landscape) { - padding: $barPaddingLandscape; - } - */ - + // + //Disabled temporarily because it's annoying for testing. + //@media screen and (orientation : landscape) { + //padding: $barPaddingLandscape; + //} } + +// Default styles for buttons inside of styled bars + +.bar-default { + .button { + @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor); + } +} + +.bar-secondary { + .button { + @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor); + } +} + +.bar-primary { + .button { + @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor); + } +} +.bar-info { + .button { + @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor); + } +} +.bar-success { + .button { + @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor); + } +} +.bar-warning { + .button { + @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor); + } +} +.bar-danger { + .button { + @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor); + } +} +.bar-dark { + // A default style for buttons + .button { + @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor); + } +} + diff --git a/scss/ionic/theme/_button.scss b/scss/ionic/theme/_button.scss index 0d22f3104d..b3f6ca55ed 100644 --- a/scss/ionic/theme/_button.scss +++ b/scss/ionic/theme/_button.scss @@ -4,40 +4,46 @@ border-width: $buttonBorderWidth; border-style: solid; padding: $buttonPadding; + + &.button-default { + @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor); + } + &.button-secondary { + @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor); + } + &.button-primary { + @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor); + } + &.button-info { + @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor); + } + &.button-success { + @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor); + } + &.button-warning { + @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor); + } + &.button-danger { + @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor); + } + &.button-dark { + @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor); + } + &.button-clear { + background: none; + border: none; + padding: $buttonClearPadding; + } } a.button { text-decoration: none; } -.button-default { - @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor); -} -.button-secondary { - @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor); -} -.button-primary { - @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor); -} -.button-info { - @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor); -} -.button-success { - @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor); -} -.button-warning { - @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor); -} -.button-danger { - @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor); -} -.button-dark { - @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor); -} .button-transparent { background: transparent; } .button-borderless [class^="icon-"] { font-size: 24px; -} \ No newline at end of file +}