danbarber/danbarberphoto
1
0
Fork 0
mirror of https://github.com/danbee/danbarberphoto synced 2025-03-04 08:49:07 +00:00
Code Issues Releases Wiki Activity

Refactor the admin CSS.

Browse Source
This commit is contained in:
Dan Barber 2014-12-14 17:33:25 +00:00
parent ebecb060d8
commit f76abd97ae
8 changed files with 33 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/admin/admin.css.sass
View File

@ -4,11 +4,6 @@
//= depend_on_asset "admin/logo.svg" //= depend_on_asset "admin/logo.svg"
@import "../includes/v_linear_grad"
@import "../includes/round_corners"
@import "../includes/transition"
@import "../includes/box_shadow"
body body
background-color: #999 background-color: #999
color: #333 color: #333
@ -22,7 +17,7 @@ body
background: #fafafa background: #fafafa
padding: 1em 2em 3em padding: 1em 2em 3em
border-bottom: 1px solid #666 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 #login
width: 40em width: 40em
@ -57,7 +52,7 @@ header
margin-bottom: 0.5em margin-bottom: 0.5em
position: relative position: relative
z-index: 1 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 h2
margin-top: 1.2em margin-top: 1.2em
@ -88,8 +83,8 @@ div
table table
border: 1px solid #bbb border: 1px solid #bbb
border-spacing: 0 border-spacing: 0
@include box-shadow("0 2px 2px rgba(0, 0, 0, 0.2)") box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2)
@include round-corners(5px) border-radius: 5px
td, th td, th
border-bottom: 1px solid #bbb border-bottom: 1px solid #bbb
tr:nth-child(even) td tr:nth-child(even) td
@ -131,8 +126,8 @@ table
form ul.taxonomies form ul.taxonomies
border: 1px solid #ccc border: 1px solid #ccc
@include round-corners(3px) border-radius: 3px
@include box-shadow("inset 2px 2px 4px rgba(0, 0, 0, 0.1)") box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1)
margin-top: 1em margin-top: 1em
padding: 1em padding: 1em
width: 25% width: 25%

3
app/assets/stylesheets/admin/flash.css.sass
View File

@ -1,6 +1,3 @@
@import "../includes/round_corners"
@import "../includes/box_shadow"
.alert, .notice .alert, .notice
position: relative position: relative
font-size: 1em font-size: 1em

21
app/assets/stylesheets/admin/menu.css.sass
View File

@ -1,14 +1,9 @@
@import "../includes/v_linear_grad"
@import "../includes/round_corners"
@import "../includes/transition"
@import "../includes/box_shadow"
header header
nav nav
ul ul
font-size: 1em font-size: 1em
@include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) @include linear-gradient(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)") box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.5)
background-color: #DDD background-color: #DDD
border-style: solid border-style: solid
border-width: 0 0 1px 0 border-width: 0 0 1px 0
@ -21,8 +16,8 @@ header
position: relative position: relative
z-index: 100 z-index: 100
li a li a
@include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) @include linear-gradient(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)") box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5)
background-color: #DDD background-color: #DDD
color: #444 color: #444
text-decoration: none text-decoration: none
@ -33,16 +28,16 @@ header
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
@include transition(background 0.15s 0s ease) @include transition(background 0.15s 0s ease)
&:hover, &:focus &:hover, &:focus
@include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) @include linear-gradient(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)") 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) text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
color: #444 color: #444
background-color: white background-color: white
&:active &:active
background-color: #ccc background-color: #ccc
&.selected &.selected
@include v-linear-grad(rgba(0,0,0,0.4), rgba(0,0,0,0)) @include linear-gradient(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)") 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) text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5)
background-color: #999 background-color: #999
color: white color: white

7
app/assets/stylesheets/admin/photos.css.sass
View File

@ -1,6 +1,3 @@
@import "../includes/round_corners"
@import "../includes/box_shadow"
.photos .photos
.photo .photo
float: left float: left
@ -14,8 +11,8 @@
ul.categories ul.categories
list-style: none list-style: none
border: 1px solid #ccc border: 1px solid #ccc
@include round-corners(3px) border-radius: 3px
@include box-shadow("inset 2px 2px 4px rgba(0, 0, 0, 0.1)") box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1)
margin-top: 1em margin-top: 1em
padding: 1em padding: 1em
width: 25% width: 25%

20
app/assets/stylesheets/admin/simple_form.css.sass
View File

@ -1,7 +1,3 @@
@import "../includes/v_linear_grad"
@import "../includes/round_corners"
@import "../includes/transition"
@import "../includes/box_shadow"
@import "../includes/button" @import "../includes/button"
form.simple_form form.simple_form
@ -9,14 +5,14 @@ form.simple_form
border: 1px solid #ccc border: 1px solid #ccc
margin: 0 0 1em margin: 0 0 1em
padding: 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 label
text-align: right text-align: right
margin-right: 1em margin-right: 1em
.required .required
label label
font-weight: bold font-weight: bold
@include round-corners(5px) border-radius: 5px
.input .input
margin-bottom: 0em margin-bottom: 0em
margin-top: 0em margin-top: 0em
@ -40,11 +36,11 @@ form.simple_form
border-style: solid border-style: solid
border-color: #999 #DDD #DDD #999 border-color: #999 #DDD #DDD #999
padding: 0.3em padding: 0.3em
@include round-corners(2px) border-radius: 2px
@include box-shadow("inset 1px 1px 4px rgba(0, 0, 0, 0.1)") box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1)
&:focus &:focus
border-color: #67A #9AF #9AF #67A 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] &[type=text], &[type=email], &[type=url]
width: 15em width: 15em
&[type=number] &[type=number]
@ -68,7 +64,7 @@ form.simple_form
border-color: #370 border-color: #370
color: white color: white
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) 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 &:hover, &:focus
background-color: #8B6 background-color: #8B6
@ -102,7 +98,7 @@ form.simple_form
padding: 1em 0 padding: 1em 0
border-bottom: 1px solid #ccc border-bottom: 1px solid #ccc
fieldset.actions fieldset.actions
padding: 1.5em 0 1em padding: 1.5em 0 1em 14em
.string, .email, .password, .text .string, .email, .password, .text
input, textarea input, textarea
width: 40% width: 40%
@ -122,6 +118,6 @@ a.button.new
border-color: #047 border-color: #047
color: white color: white
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) 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 &:hover, &:focus
background-color: #69B background-color: #69B

10
app/assets/stylesheets/application.css
View File

@ -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
*/

6
app/assets/stylesheets/application.css.sass Normal file
View File

@ -0,0 +1,6 @@
@import 'bourbon'
@import 'squaregrid'
@import 'photos'
@import 'fancybox'
@import 'scrollbars'

6
app/assets/stylesheets/includes/_button.sass
View File

@ -5,8 +5,8 @@
font-size: 1em font-size: 1em
text-decoration: none text-decoration: none
padding: 0.3em 1em padding: 0.3em 1em
@include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2)) @include linear-gradient(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)") 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-width: 1px
border-style: solid border-style: solid
border-color: #888 border-color: #888
@ -16,7 +16,7 @@
font-weight: bold font-weight: bold
cursor: pointer cursor: pointer
@include transition(background 0.15s 0s ease) @include transition(background 0.15s 0s ease)
@include round-corners(3px) border-radius: 3px
&:hover, &:focus &:hover, &:focus
background-color: #eee background-color: #eee
color: #555 color: #555