Skip to content

E
edx-platform
Commit 24247dc0 by Tom Giannattasio
Options

cross-browser css3

parent 580164e1
Showing with 69 additions and 56 deletions
cms/static/sass/_assets.scss
...@@ -28,7 +28,8 @@ ...@@ -28,7 +28,8 @@
} }
thead th { thead th {
background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db; @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
background-color: #ced2db;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5); text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
......
cms/static/sass/_base.scss
...@@ -16,7 +16,7 @@ body { ...@@ -16,7 +16,7 @@ body {
a { a {
text-decoration: none; text-decoration: none;
color: $blue; color: $blue;
-webkit-transition: color .15s; @include transition(color .15s);
&:hover { &:hover {
color: #cb9c40; color: #cb9c40;
...@@ -53,7 +53,7 @@ h1 { ...@@ -53,7 +53,7 @@ h1 {
background: #fff; background: #fff;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
} }
.sidebar { .sidebar {
...@@ -78,24 +78,27 @@ input[type="text"], ...@@ -78,24 +78,27 @@ input[type="text"],
input[type="email"], input[type="email"],
input[type="password"] { input[type="password"] {
padding: 6px 8px 8px; padding: 6px 8px 8px;
box-sizing: border-box; @include box-sizing(border-box);
border: 1px solid #b0b6c2; border: 1px solid #b0b6c2;
border-radius: 2px; border-radius: 2px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5; @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 11px; font-size: 11px;
color: #3c3c3c; color: #3c3c3c;
outline: 0; outline: 0;
&::-webkit-input-placeholder { &::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf; color: #979faf;
} }
} }
input.search { input.search {
padding: 6px 15px 8px 30px; padding: 6px 15px 8px 30px;
box-sizing: border-box; @include box-sizing(border-box);
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 20px; border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5; background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
...@@ -116,10 +119,11 @@ label { ...@@ -116,10 +119,11 @@ label {
width: 100%; width: 100%;
min-height: 80px; min-height: 80px;
padding: 10px; padding: 10px;
box-sizing: border-box; @include box-sizing(border-box);
border: 1px solid #b0b6c2; border: 1px solid #b0b6c2;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)) #edf1f5; @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace; font-family: Monaco, monospace;
} }
...@@ -167,8 +171,9 @@ label { ...@@ -167,8 +171,9 @@ label {
padding: 6px 14px; padding: 6px 14px;
border-bottom: 1px solid #cbd1db; border-bottom: 1px solid #cbd1db;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
......
cms/static/sass/_cms_mixins.scss
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
padding: 4px 20px 6px; padding: 4px 20px 6px;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0); @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
-webkit-transition: background-color .15s, box-shadow .15s; @include transition(background-color .15s, box-shadow .15s);
&:hover { &:hover {
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15); @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
} }
} }
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
@include button; @include button;
border: 1px solid #437fbf; border: 1px solid #437fbf;
border-radius: 3px; border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) $blue; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $blue;
color: #fff; color: #fff;
&:hover { &:hover {
...@@ -38,8 +39,9 @@ ...@@ -38,8 +39,9 @@
@include button; @include button;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%) #dfe5eb; @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%);
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #5d6779; color: #5d6779;
&:hover { &:hover {
...@@ -52,8 +54,9 @@ ...@@ -52,8 +54,9 @@
@include button; @include button;
border: 1px solid #bda046; border: 1px solid #bda046;
border-radius: 3px; border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) #edbd3c; @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; background-color: #edbd3c;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #3c3c3c; color: #3c3c3c;
&:hover { &:hover {
...@@ -66,8 +69,9 @@ ...@@ -66,8 +69,9 @@
@include button; @include button;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; background-color: #d1dae3;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #6d788b; color: #6d788b;
&:hover { &:hover {
...@@ -80,8 +84,9 @@ ...@@ -80,8 +84,9 @@
padding: 15px 20px; padding: 15px 20px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #5597dd; border: 1px solid #5597dd;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #5597dd; @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; background-color: #5597dd;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
label { label {
color: #fff; color: #fff;
...@@ -165,10 +170,6 @@ ...@@ -165,10 +170,6 @@
.has-new-draft-item { .has-new-draft-item {
color: #9f7d10; color: #9f7d10;
} }
.item-actions {
// display: none;
}
} }
a { a {
......
cms/static/sass/_courseware.scss
...@@ -22,7 +22,7 @@ input.courseware-unit-search-input { ...@@ -22,7 +22,7 @@ input.courseware-unit-search-input {
border-radius: 3px; border-radius: 3px;
margin: 10px 0; margin: 10px 0;
padding-bottom: 12px; padding-bottom: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
...@@ -90,7 +90,8 @@ input.courseware-unit-search-input { ...@@ -90,7 +90,8 @@ input.courseware-unit-search-input {
} }
.list-header { .list-header {
background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db; @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
background-color: #ced2db;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
...@@ -129,7 +130,7 @@ input.courseware-unit-search-input { ...@@ -129,7 +130,7 @@ input.courseware-unit-search-input {
left: 110px; left: 110px;
z-index: 9999; z-index: 9999;
border: 1px solid #3C3C3C; border: 1px solid #3C3C3C;
box-shadow: 0 1px 15px rgba(0, 0, 0, .2); @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
} }
.unit-name-input { .unit-name-input {
......
cms/static/sass/_dashboard.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
border-radius: 3px; border-radius: 3px;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
background: #fff; background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
li { li {
border-bottom: 1px solid $mediumGrey; border-bottom: 1px solid $mediumGrey;
......
cms/static/sass/_header.scss
...@@ -8,10 +8,10 @@ body.no-header { ...@@ -8,10 +8,10 @@ body.no-header {
width: 100%; width: 100%;
height: 36px; height: 36px;
border-bottom: 1px solid #2c2e33; border-bottom: 1px solid #2c2e33;
background: -webkit-linear-gradient(top, #686b76, #54565e); @include linear-gradient(top, #686b76, #54565e);
font-size: 13px; font-size: 13px;
color: #fff; color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset; @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
.drop-icon { .drop-icon {
margin-left: 5px; margin-left: 5px;
...@@ -38,15 +38,15 @@ body.no-header { ...@@ -38,15 +38,15 @@ body.no-header {
} }
a { a {
box-shadow: 1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44; @include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
&:hover { &:hover {
background: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1);
} }
&.active { &.active {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)); @include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
box-shadow: 0 2px 8px rgba(0, 0, 0, .7) inset; @include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
} }
} }
} }
\ No newline at end of file
cms/static/sass/_login.scss
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
height: 36px; height: 36px;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
border: 1px solid #2c2e33; border: 1px solid #2c2e33;
background: -webkit-linear-gradient(top, #686b76, #54565e); @include linear-gradient(top, #686b76, #54565e);
color: #fff; color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset; @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset);
h1 { h1 {
margin: 5px 0; margin: 5px 0;
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
border-top-width: 0; border-top-width: 0;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: #fff; background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
} }
label { label {
......
cms/static/sass/_modal.scss
...@@ -28,7 +28,8 @@ ...@@ -28,7 +28,8 @@
.modal-actions { .modal-actions {
height: 60px; height: 60px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #d1dae3; @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
background-color: #d1dae3;
} }
h2 { h2 {
......
cms/static/sass/_unit.scss
...@@ -22,8 +22,9 @@ ...@@ -22,8 +22,9 @@
.breadcrumbs { .breadcrumbs {
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
border-bottom: 1px solid #cbd1db; border-bottom: 1px solid #cbd1db;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
@include clearfix; @include clearfix;
li { li {
...@@ -56,7 +57,7 @@ ...@@ -56,7 +57,7 @@
border: 1px solid #d1ddec; border: 1px solid #d1ddec;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
-webkit-transition: border-color .15s; @include transition(border-color .15s);
&:hover { &:hover {
border-color: #6696d7; border-color: #6696d7;
...@@ -94,7 +95,7 @@ ...@@ -94,7 +95,7 @@
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 4px; right: 4px;
-webkit-transition: opacity .15s; @include transition(opacity .15s);
} }
.edit-button, .edit-button,
...@@ -107,7 +108,7 @@ ...@@ -107,7 +108,7 @@
background: #d1ddec; background: #d1ddec;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
-webkit-transition: all .15s; @include transition(all .15s);
&:hover { &:hover {
background-color: $blue; background-color: $blue;
...@@ -132,16 +133,17 @@ ...@@ -132,16 +133,17 @@
border: 1px solid #d1ddec; border: 1px solid #d1ddec;
background: url(../img/drag-handles.png) center no-repeat #d1ddec; background: url(../img/drag-handles.png) center no-repeat #d1ddec;
cursor: move; cursor: move;
-webkit-transition: all .15s; @include transition(all .15s);
} }
&.new-component-item { &.new-component-item {
padding: 0; padding: 0;
border: 1px solid #8891a1; border: 1px solid #8891a1;
border-radius: 3px; border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; background-color: #d1dae3;
-webkit-transition: background-color .15s, border-color .15s; @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
@include transition(background-color .15s, border-color .15s);
&.adding { &.adding {
background-color: $blue; background-color: $blue;
...@@ -182,8 +184,8 @@ ...@@ -182,8 +184,8 @@
line-height: 14px; line-height: 14px;
color: #fff; color: #fff;
text-align: center; text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset; @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
-webkit-transition: background-color .15s; @include transition(background-color .15s);
&:hover { &:hover {
background-color: rgba(255, 255, 255, .2); background-color: rgba(255, 255, 255, .2);
...@@ -195,7 +197,7 @@ ...@@ -195,7 +197,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
box-sizing: border-box; @include box-sizing(border-box);
} }
} }
} }
...@@ -225,7 +227,8 @@ ...@@ -225,7 +227,8 @@
display: none; display: none;
padding: 20px; padding: 20px;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue; @include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
background-color: $blue;
color: #fff; color: #fff;
.metadata_edit { .metadata_edit {
...@@ -360,7 +363,7 @@ ...@@ -360,7 +363,7 @@
.url { .url {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: none; @include box-shadow(none);
} }
.window-contents > ol { .window-contents > ol {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment