ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

normalize box-shadow usage in css/sass/scss 

we were using a deprecated mixin syntax, and had broken calls in other
places. normalized all occurrences to just do plain old css, since the
mixin wasn't helping our browser support matrix and just inflated the size
of our css

test plan:
1. use canvas
2. ensure drop shadows appear where they should

Change-Id: I8feea097fc6855bff0e820dc3b790d49c1e1a9da
Reviewed-on: https://gerrit.instructure.com/10201
Tested-by: Hudson <hudson@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Jon Jensen 2012-04-20 12:52:16 -06:00
parent 808512fe1a
commit 38c8ea020b
15 changed files with 33 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/stylesheets/Calendar.sass
View File

@ -120,7 +120,7 @@
position: absolute
z-index: 1000
border: 1px solid #b0afaf
box-shadow: rgba(0,0,0, 0.6) 2px 2px 10px
box-shadow: 2px 2px 10px rgba(0,0,0, 0.6)
background-color: white
max-width: 500px
ul
@ -165,7 +165,7 @@
.calendar .fc-button
+unselectable
+vertical-gradient(#f3f3f3, #cecece)
+box-shadow(rgba(0, 0, 0, 0.5), 0px, 1px, 2px, 0)
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5)
border: 1px solid #bdbdbd
padding: 3px 15px
& ~ .fc-button

6
app/stylesheets/base/_#header.sass
View File

@ -62,7 +62,7 @@
margin-right: 22px
margin-bottom: 4px /*make room for the drop shadow*/
padding: 1px 11px
box-shadow: rgba(0,0,0, 0.2) 2px 2px 4px
box-shadow: 2px 2px 4px rgba(0,0,0, 0.2)
background-color: $identity_background_color
@ -145,7 +145,7 @@
.menu-item-drop
border: 1px solid $menu_border_color
+vertical-gradient($menu_background_color, $menu_background_color_bottom)
box-shadow: rgba(0, 0, 0, 0.25) 7px 7px 9px
box-shadow: 7px 7px 9px rgba(0, 0, 0, 0.25)
background:
color: $menu_background_color
repeat: repeat-x
@ -249,7 +249,7 @@
top: 10px
bottom: 10px
width: 270px
box-shadow: rgba(0,0,0, 0.2) 2px 2px 4px
box-shadow: 2px 2px 4px rgba(0,0,0, 0.2)
+transition(all 200ms ease)
+transform(scale(0.5))

2
app/stylesheets/base/_#right-side.sass
View File

@ -5,7 +5,7 @@
width: $right_side_width
margin-bottom: 1em
padding-bottom: 20px
box-shadow: #E8E8E8 -3px 3px 32px
box-shadow: -3px 3px 32px #E8E8E8
margin-left: 15px
background-color: #f3f4f5
border-left: 1px solid #ccc

2
app/stylesheets/base/_layout.sass
View File

@ -90,7 +90,7 @@ body
#breadcrumbs
border-bottom: 1px solid #ccc
background-color: #F9F9F9
box-shadow: #F2F2F2 0 0 36px
box-shadow: 0 0 36px #F2F2F2
ul
+reset-list
+clearfix

22
app/stylesheets/conversations.sass
View File

@ -90,7 +90,7 @@ body
background-color: #e6e7e9
border: 1px solid #b0afaf
+border-radius(10px)
+box-shadow( rgba(0,0,0,0.1), 0, 0, 6px, 3px)
box-shadow: 0 0 6px 3px rgba(0,0,0,0.1)
padding: 8px 0
ul
list-style: none
@ -207,7 +207,7 @@ ul.messages, ul.conversations, div.conversations > ul
display: none
position: absolute
+border-radius(10px)
+box-shadow( rgba(0,0,0,0.2), 0, 3px, 6px, 0)
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2)
ul
padding: 0
margin: 0
@ -269,12 +269,12 @@ div.conversations > ul
#messages > ul.messages
display: none
> li
+box-shadow( rgba(0,0,0,0.25), 0, 3px, 6px, 3px)
box-shadow: 0 3px 6px 3px rgba(0,0,0,0.25)
> li.selected
background-color: #e5f3ff
> li.generated
line-height: 1
+box-shadow( none )
box-shadow: none
background: transparent
padding: 0
font-size: 0.9em
@ -413,7 +413,7 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
width: 100%
background-color: #edeef2
z-index: 3
+box-shadow( rgba(0,0,0,0.25), 0, 0, 6px, 3px)
box-shadow: 0 0 6px 3px rgba(0,0,0,0.25)
a
background-image: url(/images/messages/message-action-sprites.png)
background-repeat: no-repeat
@ -459,7 +459,7 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
position: relative
z-index: 2
float: left
+box-shadow( rgba(0,0,0,0.25), 0, 0, 6px, 3px)
box-shadow: 0 0 6px 3px rgba(0,0,0,0.25)
#no_messages
position: absolute
top: 44px
@ -628,8 +628,6 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
span
padding: 0 15px 0 4px
input
-webkit-box-shadow: none
-moz-box-shadow: none
box-shadow: none
float: left
border: 0
@ -641,7 +639,7 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
background-position: 0 -36px
.token_input.active
box-shadow: #68B4DF 0 0 3px 2px
box-shadow: 0 0 3px 2px #68B4DF
.autocomplete_menu
position: absolute
@ -653,7 +651,7 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
background: #ebebeb
border: 1px solid #999999
+border-radius(0 0 10px 10px)
+box-shadow( rgba(0,0,0,0.15), 0, 0, 12px, 3px)
box-shadow: 0 0 12px 3px rgba(0,0,0,0.15)
overflow: hidden
width: 341px
> div // gets shifted left/right as menu slides
@ -684,7 +682,7 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
background: #fff
position: relative
z-index: 1
+box-shadow( rgba(0,0,0,0.1), 0, 0, 4px, 2px)
box-shadow: 0 0 4px 2px rgba(0,0,0,0.1)
li.message
line-height: 32px
text-align: center
@ -839,7 +837,7 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
border: 0
padding: 0 0 5px 0
margin: 0
+box-shadow( rgba(0,0,0,0.25), 0, 0, 6px, 3px)
box-shadow: 0 0 6px 3px rgba(0,0,0,0.25)
#create_message_form.new
.audience
display: block

6
app/stylesheets/discussions.sass
View File

@ -28,7 +28,7 @@
.discussion_entry
margin: 5px 0
box-shadow: rgba(0,0,0, 0.2) 0px 1px 2px
box-shadow: 0px 1px 2px rgba(0,0,0, 0.2)
.new-and-total-badge
float: right
margin-top: 10px
@ -199,7 +199,7 @@
width: 258px
text-decoration: none !important
border: 1px solid
box-shadow: 1px, 1px, 1px rgba(0, 0, 0, 0.15)
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15)
background: url(/images/button_bg.png) 0px 0px repeat-x !important
color: #555 !important
border-color: #b6b6b6
@ -207,7 +207,7 @@
font-weight: normal
+text-shadow(0px, 1px, 0px, rgba(255, 255, 255, 0.8))
&.ui-state-hover, &.ui-state-active, &.ui-selectmenu-menu-dropdown
box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)
a
color: inherit
&.ui-selectmenu-menu-dropdown

2
app/stylesheets/g_instructure.sass
View File

@ -1452,7 +1452,7 @@ form.user_content_post_form
text-decoration: none !important
&:hover
border-color: #165A92
+box-shadow(rgba(0,0,0,0.5), 0px, 1px, 2px, 0)
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5)
font-size: 12px
border: 1px solid #1e7eca

10
app/stylesheets/g_util_buttons.sass
View File

@ -50,7 +50,7 @@ button.button, a.button
overflow: visible
+border-radius(3px)
border: 1px solid
box-shadow: 1px, 1px, 1px rgba(0, 0, 0, 0.15)
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15)
background: url(/images/button_bg.png) 0px 0px repeat-x !important
color: #555 !important
border-color: #b6b6b6
@ -79,7 +79,7 @@ button.button-icons-only
background: url(/images/button_bg.png) 0px 0px repeat-x !important
color: #313131
border-color: #9d9d9d
box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)
&:active
background: url(/images/button_bg.png) 0px bottom repeat-x !important
color: #4f4f4f
@ -198,8 +198,7 @@ button.disabled, a.disabled
border-right: 1px solid #bbb
border-bottom: 1px solid #bfbfbf
cursor: default
-webkit-box-shadow: none
-moz-box-shadow: none
box-shadow: none
a.button-secondary,
button.button-secondary
&, &:hover, &:active, &:focus
@ -212,8 +211,7 @@ button.button-secondary
display: inline-block
cursor: pointer
color: #D15545 !important
-webkit-box-shadow: none
-moz-box-shadow: none
box-shadow: none
+border-radius(0)
&:hover, &:active, &:focus

2
app/stylesheets/g_util_ui_listview.scss
View File

@ -1,8 +1,6 @@
@import "environment.sass";
.ui-listview {
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3);
box-shadow: 0px 1px 4px rgba(0,0,0,.3);
padding: 0;
list-style: none;

2
app/stylesheets/gradebook2.sass
View File

@ -245,8 +245,6 @@ $cell_height: 33px
border: 1px solid #35a5e5
background-color: #fff
box-shadow: 0 0 5px rgba(81, 203, 238, 1)
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1)
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1)
.gradebook-cell
.grade
border: none

2
app/stylesheets/jquery-ui-button.scss
View File

@ -43,7 +43,7 @@ $button-text-color: #525252;
}
.ui-button {
@include border-radius(10px);
@include box-shadow(rgba(0,0,0,0.5), 0px, 1px, 2px, 0);
box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.5);
border: 1px solid #bdbdbd;
&.ui-state-hover {
@include vertical-gradient(#ffffff, #dfdfdf);

2
app/stylesheets/jquery-ui-menu.scss
View File

@ -93,7 +93,7 @@ $kyle-menu-border-radius: 8px;
position: absolute; // take it out of the "flow" so that it pops on top and doesnt push things down
z-index: 9999;
@include border-radius($kyle-menu-border-radius);
box-shadow: rgba(0,0,0,.4) 0px 2px 4px -1px;
box-shadow: 0px 2px 4px -1px rgba(0,0,0,.4);
a { color: #525252}
.ui-menu-item {

2
app/stylesheets/slideshow.sass
View File

@ -3,7 +3,7 @@
border: none !important
background: transparent !important
+border-radius(30px)
+box-shadow( rgba(0,0,0,0.2), 0, 0, 6px, 3px)
box-shadow: 0 0 6px 3px rgba(0,0,0,0.2)
.ui-dialog-titlebar
display: none
.ui-dialog-content

2
app/stylesheets/utilities/_admin_links.scss
View File

@ -53,7 +53,7 @@ sample markup:
.al-options {
background-color: transparent;
border: none;
box-shadow: rgba(0,0,0, 0.8) 0px 3px 5px 0px;
box-shadow: 0px 3px 5px 0px rgba(0,0,0, 0.8);
.ui-menu-item a {
background-color: black; /* ie<=8 */
background-color: rgba(0,0,0, 0.7);

6
public/stylesheets/static/jquery-ui-theme.css
View File

@ -327,7 +327,7 @@
/* Autocomplete
----------------------------------*/
.ui-autocomplete { position: absolute; cursor: default; background: #FFFFFF; border: 0px none !important; padding: 0px !important; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.ui-autocomplete { position: absolute; cursor: default; background: #FFFFFF; border: 0px none !important; padding: 0px !important; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.ui-autocomplete-loading { background: white url('/images/ajax-reload-animated.gif') right center no-repeat; }
.ui-autocomplete .ui-state-hover {font-weight: normal; }
@ -376,7 +376,7 @@
/* Dialog
----------------------------------*/
.ui-dialog { position: absolute; padding: 0; width: 300px; overflow: hidden; background: #FFFFFF; -moz-box-shadow: 0px 5px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0px 5px 8px rgba(0,0,0,0.8); box-shadow: 0px 5px 8px rgba(0,0,0,0.8); }
.ui-dialog { position: absolute; padding: 0; width: 300px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 5px 8px rgba(0,0,0,0.8); }
.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; border-width: 0px 0px 1px 0px; border-color: #979797; background: url(/images/jqueryui/the_gradient.gif) 0px 0px repeat-x; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; font-size: 13px; color: #000000; text-shadow: 0px 1px 0px rgba(255,255,255,0.8); }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 6px; top: 50%; width: 16px; margin: -9px 0 0 0; height: 16px;
@ -431,7 +431,7 @@
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; background: #FFFFFF url(/images/jqueryui/datepicker.gif) left top repeat-x; -moz-box-shadow: 0px 5px 10px rgba(0,0,0,0.8); -webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.8); box-shadow: 0px 5px 10px rgba(0,0,0,0.8); line-height: 1em; }
.ui-datepicker { width: 17em; padding: .2em .2em 0; background: #FFFFFF url(/images/jqueryui/datepicker.gif) left top repeat-x; box-shadow: 0px 5px 10px rgba(0,0,0,0.8); line-height: 1em; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:2px 0px 6px 0px; background: transparent; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; border: 0px none; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 6px; width: 16px; height: 16px; border: 0px none; cursor: pointer; }
.ui-datepicker .ui-datepicker-prev { left:2px; }