From f76abd97ae308e5385a0f01f03c007acb358c5fe Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Sun, 14 Dec 2014 17:33:25 +0000 Subject: [PATCH] Refactor the admin CSS. --- app/assets/stylesheets/admin/admin.css.sass | 17 ++++++--------- app/assets/stylesheets/admin/flash.css.sass | 3 --- app/assets/stylesheets/admin/menu.css.sass | 21 +++++++------------ app/assets/stylesheets/admin/photos.css.sass | 7 ++----- .../stylesheets/admin/simple_form.css.sass | 20 +++++++----------- app/assets/stylesheets/application.css | 10 --------- app/assets/stylesheets/application.css.sass | 6 ++++++ app/assets/stylesheets/includes/_button.sass | 6 +++--- 8 files changed, 33 insertions(+), 57 deletions(-) delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/application.css.sass diff --git a/app/assets/stylesheets/admin/admin.css.sass b/app/assets/stylesheets/admin/admin.css.sass index 90de02e..ed8d4fd 100644 --- a/app/assets/stylesheets/admin/admin.css.sass +++ b/app/assets/stylesheets/admin/admin.css.sass @@ -4,11 +4,6 @@ //= depend_on_asset "admin/logo.svg" -@import "../includes/v_linear_grad" -@import "../includes/round_corners" -@import "../includes/transition" -@import "../includes/box_shadow" - body background-color: #999 color: #333 @@ -22,7 +17,7 @@ body background: #fafafa padding: 1em 2em 3em border-bottom: 1px solid #666 - @include box-shadow("0 1px 4px rgba(0, 0, 0, 0.3)") + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) #login width: 40em @@ -57,7 +52,7 @@ header margin-bottom: 0.5em position: relative z-index: 1 - @include box-shadow("0 1px 2px rgba(0, 0, 0, 0.3)") + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) h2 margin-top: 1.2em @@ -88,8 +83,8 @@ div table border: 1px solid #bbb border-spacing: 0 - @include box-shadow("0 2px 2px rgba(0, 0, 0, 0.2)") - @include round-corners(5px) + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) + border-radius: 5px td, th border-bottom: 1px solid #bbb tr:nth-child(even) td @@ -131,8 +126,8 @@ table form ul.taxonomies border: 1px solid #ccc - @include round-corners(3px) - @include box-shadow("inset 2px 2px 4px rgba(0, 0, 0, 0.1)") + border-radius: 3px + box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1) margin-top: 1em padding: 1em width: 25% diff --git a/app/assets/stylesheets/admin/flash.css.sass b/app/assets/stylesheets/admin/flash.css.sass index 3525615..1defa18 100644 --- a/app/assets/stylesheets/admin/flash.css.sass +++ b/app/assets/stylesheets/admin/flash.css.sass @@ -1,6 +1,3 @@ -@import "../includes/round_corners" -@import "../includes/box_shadow" - .alert, .notice position: relative font-size: 1em diff --git a/app/assets/stylesheets/admin/menu.css.sass b/app/assets/stylesheets/admin/menu.css.sass index b37d0d2..6210ebe 100644 --- a/app/assets/stylesheets/admin/menu.css.sass +++ b/app/assets/stylesheets/admin/menu.css.sass @@ -1,14 +1,9 @@ -@import "../includes/v_linear_grad" -@import "../includes/round_corners" -@import "../includes/transition" -@import "../includes/box_shadow" - header nav ul font-size: 1em - @include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) - @include box-shadow("0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.5)") + @include linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)) + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.5) background-color: #DDD border-style: solid border-width: 0 0 1px 0 @@ -21,8 +16,8 @@ header position: relative z-index: 100 li a - @include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) - @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5)") + @include linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)) + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5) background-color: #DDD color: #444 text-decoration: none @@ -33,16 +28,16 @@ header text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) @include transition(background 0.15s 0s ease) &:hover, &:focus - @include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) - @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5)") + @include linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)) + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5) text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) color: #444 background-color: white &:active background-color: #ccc &.selected - @include v-linear-grad(rgba(0,0,0,0.4), rgba(0,0,0,0)) - @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.2), inset 0 0 6px rgba(0, 0, 0, 0.4)") + @include linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0)) + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.2), inset 0 0 6px rgba(0, 0, 0, 0.4) text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) background-color: #999 color: white diff --git a/app/assets/stylesheets/admin/photos.css.sass b/app/assets/stylesheets/admin/photos.css.sass index 13d41c6..e34466f 100644 --- a/app/assets/stylesheets/admin/photos.css.sass +++ b/app/assets/stylesheets/admin/photos.css.sass @@ -1,6 +1,3 @@ -@import "../includes/round_corners" -@import "../includes/box_shadow" - .photos .photo float: left @@ -14,8 +11,8 @@ ul.categories list-style: none border: 1px solid #ccc - @include round-corners(3px) - @include box-shadow("inset 2px 2px 4px rgba(0, 0, 0, 0.1)") + border-radius: 3px + box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1) margin-top: 1em padding: 1em width: 25% diff --git a/app/assets/stylesheets/admin/simple_form.css.sass b/app/assets/stylesheets/admin/simple_form.css.sass index 8772ed7..c54a279 100644 --- a/app/assets/stylesheets/admin/simple_form.css.sass +++ b/app/assets/stylesheets/admin/simple_form.css.sass @@ -1,7 +1,3 @@ -@import "../includes/v_linear_grad" -@import "../includes/round_corners" -@import "../includes/transition" -@import "../includes/box_shadow" @import "../includes/button" form.simple_form @@ -9,14 +5,14 @@ form.simple_form border: 1px solid #ccc margin: 0 0 1em padding: 0 1em - @include box-shadow("0 2px 2px rgba(0, 0, 0, 0.05)") + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05) label text-align: right margin-right: 1em .required label font-weight: bold - @include round-corners(5px) + border-radius: 5px .input margin-bottom: 0em margin-top: 0em @@ -40,11 +36,11 @@ form.simple_form border-style: solid border-color: #999 #DDD #DDD #999 padding: 0.3em - @include round-corners(2px) - @include box-shadow("inset 1px 1px 4px rgba(0, 0, 0, 0.1)") + border-radius: 2px + box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1) &:focus border-color: #67A #9AF #9AF #67A - @include box-shadow("0 0 4px rgba(0, 128, 255, 0.5), inset 1px 1px 4px rgba(0, 0, 0, 0.1)") + box-shadow: 0 0 4px rgba(0, 128, 255, 0.5), inset 1px 1px 4px rgba(0, 0, 0, 0.1) &[type=text], &[type=email], &[type=url] width: 15em &[type=number] @@ -68,7 +64,7 @@ form.simple_form border-color: #370 color: white text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) - @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)") + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3) &:hover, &:focus background-color: #8B6 @@ -102,7 +98,7 @@ form.simple_form padding: 1em 0 border-bottom: 1px solid #ccc fieldset.actions - padding: 1.5em 0 1em + padding: 1.5em 0 1em 14em .string, .email, .password, .text input, textarea width: 40% @@ -122,6 +118,6 @@ a.button.new border-color: #047 color: white text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) - @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)") + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3) &:hover, &:focus background-color: #69B diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index ab54d3a..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,10 +0,0 @@ -/* - * This is a manifest file that'll automatically include all the stylesheets available in this directory - * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at - * the top of the compiled file, but it's generally better to create a new file per style scope. - *= require_self - *= require squaregrid - *= require photos - *= require fancybox - *= require scrollbars - */ diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass new file mode 100644 index 0000000..d7afeb3 --- /dev/null +++ b/app/assets/stylesheets/application.css.sass @@ -0,0 +1,6 @@ +@import 'bourbon' + +@import 'squaregrid' +@import 'photos' +@import 'fancybox' +@import 'scrollbars' diff --git a/app/assets/stylesheets/includes/_button.sass b/app/assets/stylesheets/includes/_button.sass index 8119f55..753e8b2 100644 --- a/app/assets/stylesheets/includes/_button.sass +++ b/app/assets/stylesheets/includes/_button.sass @@ -5,8 +5,8 @@ font-size: 1em text-decoration: none padding: 0.3em 1em - @include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) - @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.5), inset 1px 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)") + @include linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)) + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.5), inset 1px 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3) border-width: 1px border-style: solid border-color: #888 @@ -16,7 +16,7 @@ font-weight: bold cursor: pointer @include transition(background 0.15s 0s ease) - @include round-corners(3px) + border-radius: 3px &:hover, &:focus background-color: #eee color: #555