nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added box-shadow and border-radius mixins. changed _mixins.sass to _mixins.scss

Browse source
This commit is contained in:
danielgrippi 2011-03-22 12:02:19 -07:00
parent 5570182e69
commit cb533c8675
4 changed files with 84 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/stylesheets/sass/_mixins.sass
View file

@ -1,6 +0,0 @@
@mixin mobile-box
:margin 10px
:padding 0 15px
:border 1px #999 solid
:'-moz-border-radius' 15px
:border-radius 15px

19
public/stylesheets/sass/_mixins.scss Normal file
View file

@ -0,0 +1,19 @@
@mixin mobile-box {
margin: 10px;
padding: 0 15px;
border: 1px #999 solid;
-moz-border-radius: 15px;
border-radius: 15px;
}
@mixin border-radius($radius){
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($left, $top, $blur, $color:#000){
-webkit-box-shadow: $left $top $blur $color;
-moz-box-shadow: $left $top $blur $color;
box-shadow: $left $top $blur $color;
}

191
public/stylesheets/sass/application.sass
View file

@ -2,6 +2,7 @@
// licensed under the Affero General Public License version 3 or later. See // licensed under the Affero General Public License version 3 or later. See
// the COPYRIGHT file. // the COPYRIGHT file.
@import 'mixins'
$blue: #3F8FBA $blue: #3F8FBA
$red: #FF0000 $red: #FF0000
@ -62,6 +63,7 @@ form
#flash_notice, #flash_notice,
#flash_error, #flash_error,
#flash_alert #flash_alert
@include box-shadow(0, 1px, 2px, #333)
:z-index 100 :z-index 100
:position fixed :position fixed
:color #fff :color #fff
@ -70,13 +72,8 @@ form
:left 0 :left 0
:width 100% :width 100%
:padding 1em :padding 1em
:-moz-box-shadow 0 1px 2px #333
:-webkit-box-shadow 0 1px 2px #333
:box-shadow 0 1px 2px #333
:font :font
:weight bold :weight bold
@ -127,6 +124,8 @@ form
:margin 0 :margin 0
header header
@include box-shadow(0,1px,3px,#222)
:z-index 50 :z-index 50
:position relative :position relative
@ -137,11 +136,6 @@ header
:background -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(20,20,20,0.85)), to(rgba(20,20,20,1))) :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(20,20,20,0.85)), to(rgba(20,20,20,1)))
:background -moz-linear-gradient(top, rgba(20,20,20,0.85), rgba(20,20,20,0.98)) :background -moz-linear-gradient(top, rgba(20,20,20,0.85), rgba(20,20,20,0.98))
:-webkit-box-shadow 0 1px 3px #111
:-moz-box-shadow 0 1px 2px #111
:box-shadow 0 1px 3px #222
:padding 0 :padding 0
:top 2px :top 2px
:color #CCC :color #CCC
@ -164,6 +158,8 @@ header
:height 40px :height 40px
ul#user_menu ul#user_menu
@include border-radius(5px)
:overflow hidden :overflow hidden
:white-space nowrap :white-space nowrap
:text-overflow ellipsis :text-overflow ellipsis
@ -184,10 +180,6 @@ header
:background :background
:color #000 :color #000
:-webkit-border-radius 5px
:-moz-border-radius 5px
:border-radius 5px
:position absolute :position absolute
:display inline :display inline
@ -221,6 +213,8 @@ header
:color #fff :color #fff
&.active &.active
@include box-shadow(0,1px,2px,#333)
:margin :margin
:top -3px :top -3px
:right -6px :right -6px
@ -228,10 +222,6 @@ header
:color #000 :color #000
:border 1px solid #999 :border 1px solid #999
:box-shadow 0 1px 2px #333
:-webkit-box-shadow 0 1px 2px #333
:-moz-box-shadow 0 1px 2px #333
li li
:display block :display block
@ -445,13 +435,10 @@ header
.right .reshare_pane .reshare_button .right .reshare_pane .reshare_button
:padding 2px :padding 2px
&.active &.active
@include border-radius(5px)
:background :background
:color #333 :color #333
:-webkit-border-radius 5px 5px 0 0
:-moz-border-radius 5px 5px 0 0
:border-radius 5px 5px 0 0
a a
:color #fff :color #fff
:text-shadow none :text-shadow none
@ -674,13 +661,11 @@ div.dislikes
.profile_photo .profile_photo
img img
@include box-shadow(0,2px,2px,#333)
:height 300px :height 300px
:width 300px :width 300px
:-webkit-box-shadow 0 2px 2px #333
:-moz-box-shadow 0 2px 2px #333
:box-shadow 0 2px 2px #333
#profile #profile
h3 h3
:margin :margin
@ -789,6 +774,8 @@ a.paginate, #infscr-loading
input:not([type='submit']), input:not([type='submit']),
textarea textarea
@include border-radius(3px)
:font :font
:family 'Arial', 'Helvetica', sans-serif :family 'Arial', 'Helvetica', sans-serif
:size 14px :size 14px
@ -798,10 +785,6 @@ textarea
:border 1px solid #ccc :border 1px solid #ccc
:height auto :height auto
:-webkit-border-radius 3px
:-moz-border-radius 3px
:border-radius 3px
input[type='checkbox'] input[type='checkbox']
:width auto :width auto
@ -947,16 +930,14 @@ label
:left 0px :left 0px
#file-upload #file-upload
@include border-radius(3px)
:z-index 10 :z-index 10
:float right :float right
:height 42px :height 42px
:width 103px :width 103px
:margin 0 :margin 0
:-webkit-border-radius 3px
:-moz-border-radius 3px
:border-radius 3px
:border 2px solid #ccc :border 2px solid #ccc
:background :background
:color #fafafa :color #fafafa
@ -1022,6 +1003,8 @@ label
img img
:width 50px :width 50px
.circle .circle
@include border-radius(20px)
:display none :display none
:z-index 1 :z-index 1
:position absolute :position absolute
@ -1037,10 +1020,6 @@ label
:border 1px solid #fff :border 1px solid #fff
:-webkit-border-radius 20px
:-moz-border-radius 20px
:border-radius 20px
.x .x
:display none :display none
:z-index 2 :z-index 2
@ -1112,15 +1091,13 @@ ul#aspect_nav
:decoration none :decoration none
> li > li
@include border-radius(2px)
:display inline :display inline
:padding 1px 8px :padding 1px 8px
:margin 0 :margin 0
:right 2px :right 2px
:-webkit-border-radius 2px
:-moz-border-radius 2px
:border-radius 2px
:text-shadow 0 1px 0 #444 :text-shadow 0 1px 0 #444
:color #999 :color #999
@ -1182,6 +1159,8 @@ ul#aspect_nav
:display inline :display inline
input input
@include box-shadow(0,1px,2px,#666)
:display inline :display inline
:background-color #ccc :background-color #ccc
:border :border
@ -1190,10 +1169,6 @@ ul#aspect_nav
:font :font
:size 12px :size 12px
:-webkit-box-shadow 0 1px #666
:-moz-box-shadow 0 1px #666
:box-shadow 0 1px #666
:border 1px solid #000 :border 1px solid #000
&:hover &:hover
@ -1249,15 +1224,13 @@ ul#aspect_nav
:cursor default :cursor default
:text-shadow 0 1px #fff :text-shadow 0 1px #fff
ul.dropzone ul.dropzone
@include border-radius(10px)
:position relative :position relative
:min-height 65px :min-height 65px
:margin 0 :margin 0
:bottom 25px :bottom 25px
:-webkit-border-radius 10px
:-moz-border-radius 10px
:border-radius 10px
:padding 15px :padding 15px
:border 2px dashed #ccc :border 2px dashed #ccc
@ -1286,17 +1259,11 @@ ul#aspect_nav
:color #eee :color #eee
img img
@include border-radius(5px)
:height 50px :height 50px
:width 50px :width 50px
:-webkit-box-shadow 0 1px 2px #999
:-moz-box-shadow 0 1px 2px #999
:box-shadow 0 1px 2px #999
:-webkit-border-radius 5px
:-moz-border-radius 5px
:border-radius 5px
a:hover a:hover
:cursor move :cursor move
@ -1307,9 +1274,7 @@ ul#aspect_nav
&:active &:active
:z-index 20 :z-index 20
img img
:-webkit-box-shadow 0 1px 3px #000 @include box-shadow(0,1px,3px,#000)
:-moz-box-shadow 0 2px 4px #000
:box-shadow 0 2px 4px #000
.delete .delete
:display none :display none
@ -1322,6 +1287,9 @@ ul#aspect_nav
:left -8px :left -8px
.circle .circle
@include border-radius(20px)
@include box-shadow(0,1px,3px,#000)
:z-index 1 :z-index 1
:position absolute :position absolute
:background :background
@ -1334,14 +1302,6 @@ ul#aspect_nav
:border 1px solid #fff :border 1px solid #fff
:-webkit-border-radius 20px
:-moz-border-radius 20px
:border-radius 20px
:-webkit-box-shadow 0 1px 3px #000
:-moz-box-shadow 0 1px 3px #000
:box-shadow 0 1px 3px #000
.x .x
:z-index 2 :z-index 2
:position absolute :position absolute
@ -1552,15 +1512,13 @@ ul.aspects
:right 12px :right 12px
.delete .delete
@include border-radius(10px)
:background :background
:color #eee :color #eee
:width 20px :width 20px
:height 20px :height 20px
:-webkit-border-radius 10px
:-moz-border-radius 10px
:border-radius 10px
:line-height 16px :line-height 16px
:text-indent 6px :text-indent 6px
:font-size 16px :font-size 16px
@ -1569,6 +1527,8 @@ ul.aspects
:display inline :display inline
.floating .floating
@include box-shadow(0,1px,3px,#333)
:position relative :position relative
:padding 12px :padding 12px
:margin :margin
@ -1576,10 +1536,6 @@ ul.aspects
:background :background
:color rgb(255,255,255) :color rgb(255,255,255)
:-webkit-box-shadow 0 1px 3px #333
:-moz-box-shadow 0 1px 3px #333
:box-shadow 0 1px 3px #333
:border :border
:bottom 1px solid #ccc :bottom 1px solid #ccc
:top 1px solid #fff :top 1px solid #fff
@ -1617,9 +1573,7 @@ ul.aspects
#user_photo_uploader #user_photo_uploader
.avatar .avatar
:-webkit-border-radius 5px @include border-radius(5px)
:-moz-border-radius 5px
:border-radius 5px
:height 100px :height 100px
:width 100px :width 100px
@ -1637,19 +1591,14 @@ ul.aspects
:top 5px :top 5px
:min-height 100px :min-height 100px
img img
@include border-radius(5px)
@include box-shadow(0,1px,2px,#666)
:position absolute :position absolute
:left 0 :left 0
:height 100px :height 100px
:width 100px :width 100px
:-webkit-border-radius 5px
:-moz-border-radius 5px
:border-radius 5px
:-webkit-box-shadow 0 1px 2px #666
:-moz-box-shadow 0 1px 2px #666
:box-shadow 0 1px 2px #666
:padding :padding
:left 120px :left 120px
@ -1657,6 +1606,9 @@ h3 span.current_gs_step
:color #22C910 :color #22C910
#notification #notification
@include border-radius(5px)
@include box-shadow(0,2px,3px,#333)
:z-index 10 :z-index 10
:display none :display none
:position fixed :position fixed
@ -1667,14 +1619,6 @@ h3 span.current_gs_step
:color rgb(30,30,30) :color rgb(30,30,30)
:color rgba(30,30,30,0.9) :color rgba(30,30,30,0.9)
:-webkit-box-shadow 0 2px 3px #333
:-moz-box-shadow 0 2px 3px #333
:box-shadow 0 2px 3px #333
:-webkit-border-radius 5px
:border-radius 5px
:-moz-border-radius 5px
:min-width 200px :min-width 200px
:padding 12px :padding 12px
:color #fff :color #fff
@ -1697,15 +1641,13 @@ h3 span.current_gs_step
:bottom 10px :bottom 10px
a a
@include border-radius(10px)
:color #fafafa :color #fafafa
:background :background
:color $blue :color $blue
:padding 8px :padding 8px
:-webkit-border-radius 10px
:-moz-border-radius 10px
:border-radius 10px
&:hover &:hover
:background :background
:color #22AAE0 :color #22AAE0
@ -1743,6 +1685,8 @@ h3 span.current_gs_step
:top 2px :top 2px
.badge_count .badge_count
@include border-radius(2px)
:z-index 3 :z-index 3
:position absolute :position absolute
:top -10px :top -10px
@ -1751,7 +1695,6 @@ h3 span.current_gs_step
:bottom 1px :bottom 1px
:background :background
:color #A40802 :color #A40802
:border-radius 2px
:line :line
:height 12px :height 12px
@ -1799,6 +1742,7 @@ h3 span.current_gs_step
:text-shadow none :text-shadow none
a:first-child a:first-child
@include border-radius(2px)
:-webkit-border-radius 6px 0 0 6px :-webkit-border-radius 6px 0 0 6px
:-moz-border-radius 6px 0 0 6px :-moz-border-radius 6px 0 0 6px
:border-radius 6px 0 0 6px :border-radius 6px 0 0 6px
@ -1842,10 +1786,6 @@ ul#request_result
:height 50px :height 50px
:width 50px :width 50px
:-webkit-box-shadow 0 1px #fff
:-moz-box-shadow 0 1px #fff
:box-shadow 0 1px #fff
:-webkit-border-radius 0 0 5px 5px :-webkit-border-radius 0 0 5px 5px
:-moz-border-radius 0 0 5px 5px :-moz-border-radius 0 0 5px 5px
:border-radius 0 0 5px 5px :border-radius 0 0 5px 5px
@ -1959,11 +1899,10 @@ ul#landing_nav
:color $blue :color $blue
&.login &.login
:padding 5px 8px @include border-radius(5px)
@include box-shadow(0,1px,1px,#666)
:-webkit-border-radius 5px :padding 5px 8px
:-moz-border-radius 5px
:border-radius 5px
:background :background
:color #000 :color #000
@ -1971,10 +1910,6 @@ ul#landing_nav
:border :border
:top 1px solid #000 :top 1px solid #000
:-webkit-box-shadow 0 1px 1px #666
:-moz-box-shadow 0 1px 1px #666
:box-shadow 0 1px 1px #666
&:hover &:hover
:background :background
:color #222 :color #222
@ -2070,13 +2005,10 @@ ul#landing_nav
:text-shadow 0 1px 3px #999 :text-shadow 0 1px 3px #999
p p
@include box-shadow(0,1px,3px,#ccc)
:padding 12px :padding 12px
:background :background
:color #fff :color #fff
:-webkit-box-shadow 0 1px 3px #ccc
:-moz-box-shadow 0 1px 3px #ccc
:box-shadow 0 1px 3px #ccc
#login_field #login_field
:text :text
@ -2130,9 +2062,7 @@ h3,h4
:bottom 5px :bottom 5px
#edit_aspect_pane #edit_aspect_pane
:-webkit-box-shadow 0 4px 8px #333 @include box-shadow(0,4px,8px,#333)
:-moz-box-shadow 0 4px 8px #333
:box-shadow 0 4px 8px #333
:display none :display none
@ -2175,6 +2105,8 @@ h3,h4
:weight bold :weight bold
.aspect_badge .aspect_badge
@include border-radius(3px)
:color #fff :color #fff
:line-height auto :line-height auto
:padding 0 4px :padding 0 4px
@ -2187,10 +2119,6 @@ h3,h4
a a
:color #fff :color #fff
:-webkit-border-radius 3px
:-moz-border-radius 3px
:border-radius 3px
:display inline-block :display inline-block
:font :font
@ -2351,6 +2279,8 @@ div.dislikes
:width 400px :width 400px
.person_tiles .person_tiles
.tile .tile
@include border-radius(2px)
:padding 6px :padding 6px
:left 65px :left 65px
:margin 3px :margin 3px
@ -2360,7 +2290,6 @@ div.dislikes
:height 50px :height 50px
:border 1px solid #eee :border 1px solid #eee
:border-radius 2px
:position relative :position relative
@ -2540,9 +2469,7 @@ div.dislikes
.share_with .share_with
.add_aspect .add_aspect
:-webkit-border-radius 5px @include border-radius(5px)
:-moz-border-radius 5px
:border-radius 5px
:margin :margin
:top 0.5em :top 0.5em
@ -2621,6 +2548,7 @@ div.dislikes
:-webkit-box-shadow 0 3px 3px -3px #333 :-webkit-box-shadow 0 3px 3px -3px #333
:-moz-box-shadow 0 3px 3px -3px #333 :-moz-box-shadow 0 3px 3px -3px #333
:box-shadow 0 3px 3px -3px #333
h3 h3
:margin 0 :margin 0
@ -2674,6 +2602,8 @@ div.dislikes
:min-height 0px :min-height 0px
.message_count .message_count
@include border-radius(5px)
:right 10px :right 10px
:background :background
:color #999 :color #999
@ -2683,9 +2613,6 @@ div.dislikes
:font :font
:size 12px :size 12px
:weight normal :weight normal
:-webkit-border-radius 3px
:-moz-border-radius 3px
:border-radius 3px
.participant_count .participant_count
:font :font

19
public/stylesheets/sass/ui.sass
View file

@ -2,10 +2,13 @@
// licensed under the Affero General Public License version 3 or later. See // licensed under the Affero General Public License version 3 or later. See
// the COPYRIGHT file. // the COPYRIGHT file.
@import 'mixins'
.ui-autocomplete .ui-autocomplete
:left -11px :left -11px
.button, .button_set .button, .button_set
@include border-radius(3px)
:font :font
:style normal :style normal
:weight bold :weight bold
@ -31,10 +34,6 @@
:top 1px solid #ccc :top 1px solid #ccc
:bottom 1px solid #666 :bottom 1px solid #666
:-webkit-border-radius 3px
:-moz-border-radius 3px
:border-radius 3px
:cursor pointer :cursor pointer
:color #4a4a4a :color #4a4a4a
@ -105,23 +104,17 @@ ul.button_set
:right 0 :right 0
.contextual_pane .contextual_pane
@include border-radius(3px)
@include box-shadow(0,0,0,10,#000)
:z-index 20 :z-index 20
:position absolute :position absolute
:display none :display none
:background :background
:color #fff :color #fff
:border 4px solid #000 :border 4px solid #000
:border-radius 3px
:-moz-border-radius 3px
:-webkit-border-radius 3px
:box-shadow 0 0 5px #000
:-webkit-box-shadow 0 0 10px #000
:padding 2em :padding 2em