From d95a6526188f60562f8f7024592f5bbb85162fe6 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Thu, 1 May 2014 16:19:19 -0400 Subject: improve CSS --- .../stylesheets/application/bootstrapify.scss | 35 +++++++++++++--- app/assets/stylesheets/application/main.css.scss | 46 ++++++++++++--------- app/assets/stylesheets/tournaments.css.scss | 47 ---------------------- 3 files changed, 58 insertions(+), 70 deletions(-) diff --git a/app/assets/stylesheets/application/bootstrapify.scss b/app/assets/stylesheets/application/bootstrapify.scss index 0416b1e..08421f9 100644 --- a/app/assets/stylesheets/application/bootstrapify.scss +++ b/app/assets/stylesheets/application/bootstrapify.scss @@ -1,10 +1,16 @@ @import "bootstrap"; +// Connect Bootstrap classes to reasonable defaults + .btn { @extend .btn-default; } -a[role="button"], button, input[type="submit"] { +button, +a[role="button"], +input[type="submit"], +input[type="reset"], +input[type="button"] { @extend .btn; } @@ -20,21 +26,21 @@ a[role="button"], button, input[type="submit"] { } } form { + // This list of types is taken from the 2014-04-29 draft of + // the HTML5 spec: + // http://www.w3.org/TR/2014/CR-html5-20140429/forms.html#attr-input-type input[type="text"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="password"], - input[type="datetime"], input[type="date"], - input[type="month"], - input[type="week"], input[type="time"], input[type="number"], input[type="range"], input[type="color"], - select, textarea{ + select, textarea { @extend .form-control; } label { @@ -64,3 +70,22 @@ header nav { @extend .panel-title; } } + +// Connect built-in Rails classes to the Bootstrap classes. + +form { + .field { + @extend .form-group; + } + .field_with_errors { + @extend .has-error; + display: inline; + } +} + +#error_explanation { + @extend .panel-danger; + @extend .container; + padding-left: 0; + padding-right: 0; +} diff --git a/app/assets/stylesheets/application/main.css.scss b/app/assets/stylesheets/application/main.css.scss index 36e285b..655700d 100644 --- a/app/assets/stylesheets/application/main.css.scss +++ b/app/assets/stylesheets/application/main.css.scss @@ -26,9 +26,11 @@ $legend-border-color: #ccc; // matches the default $input-border and $btn-defaul where .input-group does. */ .simple-input-group { white-space: nowrap; + display: table; .btn, .form-control { display: table-cell; &:not(:last-child) { + float: left; @include border-right-radius(0); } &:not(:first-child) { @@ -47,16 +49,6 @@ $legend-border-color: #ccc; // matches the default $input-border and $btn-defaul text-align: center; } -#error_explanation { - @extend .panel-danger; - @extend .container; - padding-left: 0; - padding-right: 0; - ul { - list-style: disc outside none; - } -} - #alerts-ajax { display: none; } @@ -70,13 +62,35 @@ form#search { #user-actions { @extend .navbar-btn; @extend .navbar-left; - * { display: table-cell; } - div { - @extend .simple-input-group; + @extend .simple-input-group; + span { padding-right: .25em; } } +#error_explanation ul { + list-style: disc outside none; +} + +#players-needed { + text-align: center; + font-style: italic; +} + +#tournament-side-params { + background: none repeat scroll 0 0 rgba(0,0,0,0.5); + border-radius: 5px; + float: right; + font-size: 7px; + padding: 10px; + + p { + font-size: 10px; + margin-bottom: 5px; + } + +} + /* Classes **********************************************************/ /* @@ -98,12 +112,8 @@ form#search { } */ -.field_with_errors { - @extend .has-error; +form[role="button"] { display: inline; - label { - @extend .control-label; - } } /* Elements *********************************************************/ diff --git a/app/assets/stylesheets/tournaments.css.scss b/app/assets/stylesheets/tournaments.css.scss index 92ac3e1..e69de29 100644 --- a/app/assets/stylesheets/tournaments.css.scss +++ b/app/assets/stylesheets/tournaments.css.scss @@ -1,47 +0,0 @@ -// Place all the styles related to the tournaments controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -@import "colors"; - -#players-needed { - text-align: center; - font-style: italic; -} - -#tournament-side-params { - background: none repeat scroll 0 0 rgba(0,0,0,0.5); - border-radius: 5px; - float: right; - font-size: 7px; - padding: 10px; - - p { - font-size: 10px; - margin-bottom: 5px; - } - -} -/* -ul#tournament-users { - list-style: none; - padding: 0; - margin: 0; - li { - // Make the bullet green, but the text white - padding-left: 1em; - text-indent: -.7em; - &:before { - content: "• "; - color: #10A010; - } - color: white; - } -} -*/ -div.leave-buttons { - margin-top: 50px; - form { - display: inline; - } -} -- cgit v1.2.3