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 @@
}
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-weight: 700;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
......
cms/static/sass/_base.scss
......@@ -16,7 +16,7 @@ body {
a {
text-decoration: none;
color: $blue;
-webkit-transition: color .15s;
@include transition(color .15s);
&:hover {
color: #cb9c40;
......@@ -53,7 +53,7 @@ h1 {
background: #fff;
border: 1px solid $darkGrey;
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 {
......@@ -78,24 +78,27 @@ input[type="text"],
input[type="email"],
input[type="password"] {
padding: 6px 8px 8px;
box-sizing: border-box;
@include box-sizing(border-box);
border: 1px solid #b0b6c2;
border-radius: 2px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #3c3c3c;
outline: 0;
&::-webkit-input-placeholder {
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf;
}
}
input.search {
padding: 6px 15px 8px 30px;
box-sizing: border-box;
@include box-sizing(border-box);
border: 1px solid $darkGrey;
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
......@@ -116,10 +119,11 @@ label {
width: 100%;
min-height: 80px;
padding: 10px;
box-sizing: border-box;
@include box-sizing(border-box);
border: 1px solid #b0b6c2;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)) #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace;
}
......@@ -167,8 +171,9 @@ label {
padding: 6px 14px;
border-bottom: 1px solid #cbd1db;
border-radius: 3px 3px 0 0;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
font-size: 14px;
font-weight: 600;
}
......
cms/static/sass/_cms_mixins.scss
......@@ -13,11 +13,11 @@
padding: 4px 20px 6px;
font-size: 14px;
font-weight: 700;
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 box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
@include transition(background-color .15s, box-shadow .15s);
&: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 @@
@include button;
border: 1px solid #437fbf;
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;
&:hover {
......@@ -38,8 +39,9 @@
@include button;
border: 1px solid $darkGrey;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%) #dfe5eb;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%);
background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #5d6779;
&:hover {
......@@ -52,8 +54,9 @@
@include button;
border: 1px solid #bda046;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) #edbd3c;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
background-color: #edbd3c;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #3c3c3c;
&:hover {
......@@ -66,8 +69,9 @@
@include button;
border: 1px solid $darkGrey;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #d1dae3;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #6d788b;
&:hover {
......@@ -80,8 +84,9 @@
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #5597dd;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #5597dd;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
background-color: #5597dd;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
label {
color: #fff;
......@@ -165,10 +170,6 @@
.has-new-draft-item {
color: #9f7d10;
}
.item-actions {
// display: none;
}
}
a {
......
cms/static/sass/_courseware.scss
......@@ -22,7 +22,7 @@ input.courseware-unit-search-input {
border-radius: 3px;
margin: 10px 0;
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 {
margin-top: 0;
......@@ -90,7 +90,8 @@ input.courseware-unit-search-input {
}
.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;
}
......@@ -129,7 +130,7 @@ input.courseware-unit-search-input {
left: 110px;
z-index: 9999;
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 {
......
cms/static/sass/_dashboard.scss
......@@ -3,7 +3,7 @@
border-radius: 3px;
border: 1px solid $darkGrey;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
li {
border-bottom: 1px solid $mediumGrey;
......
cms/static/sass/_header.scss
......@@ -8,10 +8,10 @@ body.no-header {
width: 100%;
height: 36px;
border-bottom: 1px solid #2c2e33;
background: -webkit-linear-gradient(top, #686b76, #54565e);
@include linear-gradient(top, #686b76, #54565e);
font-size: 13px;
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 {
margin-left: 5px;
......@@ -38,15 +38,15 @@ body.no-header {
}
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 {
background: rgba(255, 255, 255, .1);
}
&.active {
background: -webkit-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 linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
@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 @@
height: 36px;
border-radius: 3px 3px 0 0;
border: 1px solid #2c2e33;
background: -webkit-linear-gradient(top, #686b76, #54565e);
@include linear-gradient(top, #686b76, #54565e);
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 {
margin: 5px 0;
......@@ -26,7 +26,7 @@
border-top-width: 0;
border-radius: 0 0 3px 3px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
}
label {
......
cms/static/sass/_modal.scss
......@@ -28,7 +28,8 @@
.modal-actions {
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 {
......
cms/static/sass/_unit.scss
......@@ -22,8 +22,9 @@
.breadcrumbs {
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #cbd1db;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
@include clearfix;
li {
......@@ -56,7 +57,7 @@
border: 1px solid #d1ddec;
border-radius: 3px;
background: #fff;
-webkit-transition: border-color .15s;
@include transition(border-color .15s);
&:hover {
border-color: #6696d7;
......@@ -94,7 +95,7 @@
position: absolute;
top: 4px;
right: 4px;
-webkit-transition: opacity .15s;
@include transition(opacity .15s);
}
.edit-button,
......@@ -107,7 +108,7 @@
background: #d1ddec;
font-size: 12px;
color: #fff;
-webkit-transition: all .15s;
@include transition(all .15s);
&:hover {
background-color: $blue;
......@@ -132,16 +133,17 @@
border: 1px solid #d1ddec;
background: url(../img/drag-handles.png) center no-repeat #d1ddec;
cursor: move;
-webkit-transition: all .15s;
@include transition(all .15s);
}
&.new-component-item {
padding: 0;
border: 1px solid #8891a1;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
-webkit-transition: background-color .15s, border-color .15s;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #d1dae3;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
@include transition(background-color .15s, border-color .15s);
&.adding {
background-color: $blue;
......@@ -182,8 +184,8 @@
line-height: 14px;
color: #fff;
text-align: center;
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 box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
@include transition(background-color .15s);
&:hover {
background-color: rgba(255, 255, 255, .2);
......@@ -195,7 +197,7 @@
left: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
@include box-sizing(border-box);
}
}
}
......@@ -225,7 +227,8 @@
display: none;
padding: 20px;
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;
.metadata_edit {
......@@ -360,7 +363,7 @@
.url {
width: 100%;
margin-bottom: 10px;
box-shadow: none;
@include box-shadow(none);
}
.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