150 lines
2.7 KiB
SCSS
150 lines
2.7 KiB
SCSS
$fg-column: 70px;
|
|
$fg-gutter: 26px;
|
|
$fg-max-columns: 12;
|
|
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
$sans-serif: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
|
$body-font-size: 14px;
|
|
$body-line-height: 20px;
|
|
|
|
$light-blue: #f0f7fd;
|
|
$dark-blue: #50545c;
|
|
$bright-blue: #3c8ebf;
|
|
$orange: #f96e5b;
|
|
$yellow: #fff8af;
|
|
$cream: #F6EFD4;
|
|
$border-color: #ddd;
|
|
|
|
// edX colors
|
|
$blue: rgb(29,157,217);
|
|
$pink: rgb(182,37,104);
|
|
|
|
@mixin hide-text {
|
|
background-color: transparent;
|
|
border: 0;
|
|
color: transparent;
|
|
font: 0/0 a;
|
|
text-shadow: none;
|
|
}
|
|
|
|
// Base html styles
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #888;
|
|
@include transition;
|
|
|
|
&:hover {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
input {
|
|
font-family: $body-font-family;
|
|
}
|
|
|
|
button, input[type="submit"], .button {
|
|
background-color: $orange;
|
|
border: 1px solid darken($orange, 15%);
|
|
@include border-radius(4px);
|
|
@include box-shadow(inset 0 0 0 1px adjust-hue($orange, 20%), 0 1px 0 #fff);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
@include linear-gradient(adjust-hue($orange, 8%), $orange);
|
|
padding: 6px 20px;
|
|
text-shadow: 0 1px 0 darken($orange, 10%);
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
&:hover, &:focus {
|
|
@include box-shadow(inset 0 0 6px 1px adjust-hue($orange, 30%));
|
|
}
|
|
}
|
|
|
|
#{$all-text-inputs}, textarea {
|
|
border: 1px solid $dark-blue;
|
|
@include box-shadow(inset 0 3px 6px $light-blue);
|
|
color: lighten($dark-blue, 30%);
|
|
font: $body-font-size $body-font-family;
|
|
outline: none;
|
|
padding: 4px 6px;
|
|
|
|
&:hover {
|
|
background: lighten($yellow, 13%);
|
|
color: $dark-blue;
|
|
}
|
|
|
|
&:focus {
|
|
@include box-shadow(inset 0 3px 6px $light-blue, 0 0 3px lighten($bright-blue, 10%));
|
|
color: $dark-blue;
|
|
background: lighten($yellow, 13%);
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
@include box-sizing(border-box);
|
|
display: block;
|
|
line-height: lh();
|
|
padding: 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
// Extends
|
|
.new-module {
|
|
position: relative;
|
|
|
|
a {
|
|
padding: 6px;
|
|
display: block;
|
|
}
|
|
|
|
ul.new-dropdown {
|
|
list-style: none;
|
|
position: absolute;
|
|
|
|
li {
|
|
display: none;
|
|
padding: 6px;
|
|
}
|
|
|
|
}
|
|
|
|
&:hover {
|
|
ul.new-dropdown {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.draggable {
|
|
background: url('../img/drag-handle.png') no-repeat center;
|
|
text-indent: -9999px;
|
|
display: block;
|
|
cursor: move;
|
|
height: 100%;
|
|
padding: 0;
|
|
@include position(absolute, 0px 0px 0 0);
|
|
width: 30px;
|
|
z-index: 99;
|
|
}
|
|
|
|
.editable {
|
|
&:hover {
|
|
background: lighten($yellow, 10%);
|
|
}
|
|
|
|
button {
|
|
padding: 4px 10px;
|
|
}
|
|
}
|
|
|
|
// .wip {
|
|
// outline: 1px solid #f00 !important;
|
|
// position: relative;
|
|
// }
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|