Skip to content

C
course-discovery
Commit d7cf29c3 by Roderick Morales Committed by Roderick Morales
Options

Refactoring sass so that it is easy to customize.

parent 69b03e63
Showing with 652 additions and 207 deletions
course_discovery/static/sass/_build.scss
...@@ -22,6 +22,14 @@ ...@@ -22,6 +22,14 @@
// #EXTENSIONS // #EXTENSIONS
// ------------------------------ // ------------------------------
@import "base"; @import "base";
@import "publisher/lib";
@import 'publisher/color-palette';
@import 'publisher/typography';
@import 'publisher/buttons-links';
@import 'publisher/navigations';
@import 'publisher/tabs';
@import 'publisher/tables';
@import 'publisher/forms';
@import 'publisher/course_form'; @import 'publisher/course_form';
@import 'publisher/publisher'; @import 'publisher/publisher';
@import 'publisher/dashboard'; @import 'publisher/dashboard';
course_discovery/static/sass/publisher/buttons-links.scss 0 → 100644
.course-breadcrumb{
padding-bottom: 20px;
a {
text-decoration: underline;
}
}
.btn-cancel {
@include padding-right(10px);
@include padding-left(10px);
color: #25A1D8;
}
.btn-save {
background-color: #169BD5;
border-color: #169BD5;
border-radius: 5px;
padding: 10px;
}
.btn-course-edit, .btn-courserun-edit {
@include padding(2px, 20px, 3px, 20px);
@include float(right);
background-color: #169bd5;
border-color: #169bd5;
font-weight: 400;
font-size: 14px;
border-radius: 5px;
}
.btn-course-add {
@include padding(4px, 20px, 4px, 20px);
@include margin-left(12px);
background-color: #169bd5;
border-color: #169bd5;
border-radius: 5px;
}
.btn-courserun-add {
@include padding(3px, 16px, 3px, 16px);
@include margin-left(10px);
background-color: #169bd5;
border-color: #169bd5;
border-radius: 5px;
}
course_discovery/static/sass/publisher/dashboard.scss
...@@ -14,211 +14,5 @@ ...@@ -14,211 +14,5 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.tabs {
@include padding(0, 0, 0, 0);
@include margin(0, 0, 0, 0);
list-style: none;
display: block !important;
.tab {
@include padding(12px, 20px, 12px, 20px);
@include margin-right(1px);
@include float(left);
background: #f2f2f2;
margin-bottom: 0 !important;
position: relative;
text-align: center;
font-weight: 600;
font-size: 15px;
color: #949494;
text-transform: capitalize;
text-decoration: none;
z-index: 999;
border: {
width: 2px;
style: solid;
color: #f2f2f2;
bottom-width: 0;
}
span {
display: block;
margin-bottom: 8px;
font-size: 22px;
}
&.is-active {
cursor: default;
background: white;
color: #169bd5;
z-index: 1001;
border: {
width: 2px;
style: solid;
color: #169bd5;
bottom-width: 0;
}
&:after {
@include right(0);
@include left(0);
content: '';
height: 2px;
background: white;
position: absolute;
bottom: -2px;
z-index: 1;
}
}
&:hover {
border-color: #eee;
background: #eee;
color: #757575;
cursor: pointer;
&.is-active {
cursor: default;
border-color: #169bd5;
background: white;
color: #169bd5;
}
}
}
&:before,
&:after {
content: '';
display: table;
clear: both;
}
}
.tab-panel {
@include padding(20px, 20px, 20px, 20px);
display: none;
border: 2px solid #169bd5;
background-color: #fff;
margin-bottom: 50px;
outline: none;
.title {
margin-top: 0;
}
p {
margin-top: 0;
}
table {
thead {
tr {
td {
@include text-align(left);
}
}
}
tr {
td {
@include text-align(left);
}
.dataTables_empty {
text-align: center;
}
}
}
.form-group {
@include margin(0, 0, 0, 0);
input {
@include padding-left(6px);
@include padding-right(6px);
padding-top: 0;
padding-bottom: 0;
height: 25px;
border-radius: 0;
border: 1px solid #bebebe;
width: 50%;
box-shadow: inset 0 1px #666;
}
.btn-inline {
@include padding(3px, 20px, 3px, 20px);
@include margin-left(6px);
background: #169bd5;
border-radius: 4px;
border: none;
height: 25px;
color: white;
&:hover {
cursor: pointer;
background: #0e8dc4;
}
}
}
.table-view {
display: table;
width: 100%;
border: 0;
.table-row {
@include text-align(center);
display: table-row;
.table-col {
@include padding(10px, 5px, 10px, 5px);
display: table-cell;
vertical-align: middle;
color: #333;
font-size: 14px;
border: {
width: 1px 0 0 1px;
style: solid;
color: #797979;
}
&:first-child {
@include text-align(left);
}
}
&.table-head {
.table-col {
background: #ccc !important;
font-weight: bold;
&:first-child {
@include text-align(center);
}
}
}
}
&.table-striped {
.table-row {
&:nth-child(odd) {
.table-col {
background: #f2f2f2;
}
}
}
}
}
&.is-active {
display: block;
}
}
} }
course_discovery/static/sass/publisher/forms.scss 0 → 100644
input,
select {
max-width: 100%;
}
.required {
color: red;
font-size: 12px;
}
.optional {
font-weight: normal;
}
.checkbox-inline {
ul {
@include margin-left(0);
list-style: none;
margin-bottom: 15px;
li {
display: inline-block;
@include margin-right(10px);
&:last-child {
@include margin-right(0);
}
}
}
}
course_discovery/static/sass/publisher/lib.scss 0 → 100644
.clearfix {
&:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
.margin-top20 {
margin-top: 20px;
}
.hidden {
display: none;
}
.border-left {
@include border-left(1px solid);
}
.border-top {
border-top: 1px solid;
}
.actions {
margin-top: 30px;
}
course_discovery/static/sass/publisher/navigations.scss 0 → 100644
// --------
// MAIN NAV
// --------
.menu-list {
.item {
border-bottom: 2px solid $white;
margin-bottom: 0;
padding-bottom: 0;
a {
width: 100%;
height: 100%;
background: $light-gray;
border: 0;
border-radius: 0;
text-decoration: none;
&.active {
background: palette(primary, accent);
color: $white;
}
}
}
}
// --------------
// MAIN NAV (END)
// --------------
// ---------------------------------------------------
// DROPDOWN NAVIGATION FOR SIGN IN/OUT ADN PREFERENCES
// ---------------------------------------------------
.nav-account {
@include padding(35px, 0px, 35px, 0px);
@include margin-right(20px);
@include float(right);
width: auto;
display: inline-block;
position: relative;
vertical-align: middle;
ol {
margin-bottom: 0;
}
.wrapper-nav-sub {
@include right(0);
display: none;
opacity: 1.0;
pointer-events: auto;
overflow: visible;
height: auto;
position: absolute;
width: 340px;
z-index: 10000;
&.is-shown {
display: block;
}
.nav-sub {
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
position: relative;
width: 100%;
border: 1px solid #ccc;
background: #fff;
&:before {
@include right(20px);
@include margin-right(-11px);
border-color: rgba(178,178,178,0);
border-bottom-color: #ccc;
border-width: 11px;
bottom: 100%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
@include right(20px);
border-color: rgba(255,255,255,0);
border-bottom-color: #fff;
border-width: 10px;
bottom: 100%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
@include margin-right(-10px);
}
.nav-menu-item {
@include padding(20px, 20px, 20px, 20px);
}
.nav-account-signout {
border-top: 1px solid #ccc;
a {
@include text-align(center);
text-decoration: none;
width: 100%;
}
}
.on-off-text {
@include text-align(left);
}
.nav-email-notification {
.email-switch-label {
@include margin-right(60px);
}
.switch {
@include margin-right(10px);
position: relative;
display: inline-block;
width: 36px;
height: 20px;
vertical-align: middle;
}
.switch input {
display:none;
}
.slider {
@include left(0);
@include right(0);
position: absolute;
cursor: pointer;
top: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 20px;
}
.slider:before {
@include left(2px);
position: absolute;
content: "";
height: 16px;
width: 16px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #333;
}
input:focus + .slider {
box-shadow: 0 0 1px #333;
}
input:checked + .slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
}
}
}
.nav-account-user {
.title.is-selected {
box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1);
border-color: #ccc;
}
}
.nav-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
.title {
@include padding(5px, 10px, 5px, 10px);
color: #666;
margin-bottom: 0;
border: 1px solid transparent;
border-radius: 4px;
max-width: 150px;
.fa-caret-down {
opacity: 0.25;
}
&:hover {
cursor: pointer;
color: #065683;
border-color: #ccc;
.label {
a {
color: #065683;
}
}
.fa-caret-down {
opacity: 1.0;
color: #065683;
}
}
.label {
a {
color: #666;
font-weight: 800;
font-size: 18px;
vertical-align: baseline;
text-decoration: none;
}
}
}
}
}//nav-account (END)
// ---------------------------------------------------------
// DROPDOWN NAVIGATION FOR SIGN IN/OUT ADN PREFERENCES (END)
// ---------------------------------------------------------
// -----------
// BREADCRUMBS
// -----------
.breadcrumb {
@include padding(8px, 5px, 8px, 5px);
@include margin(0, 0, 0, 0);
list-style: none;
background: white;
border-radius: 3px;
> li {
display: inline-block;
a {
display: inline-block;
border-bottom: 1px solid transparent;
color: #337ab7;
text-decoration: none;
-webkit-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s;
-moz-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s;
transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s;
}
+ li:before {
@include padding(0px, 5px, 0px, 5px);
content: "\f054";
color: #666;
font-family: fontawesome;
}
}
}
// -----------------
// BREADCRUMBS (END)
// -----------------
// -----------------------------------------------------------------
// ADMINISTRATION NAV
// Used for filtering the data between jira, salesforce, studio, etc
// -----------------------------------------------------------------
.administration-nav {
font-size: 18px;
font-weight: 600;
display: inline-block;
@include margin(5px, 0px, 5px, 0px);
.tab-container {
button {
@include padding(5px, 5px, 5px, 5px);
@include margin(5px, 5px, 5px, 5px);
@include float(left);
display: block;
color: #0ea6ec;
border: none;
background-color: transparent;
&.selected {
border-bottom: 4px solid #0ea6ec;
color: black;
}
}
}
}
// ------------------------
// ADMINISTRATION NAV (END)
// ------------------------
course_discovery/static/sass/publisher/tables.scss 0 → 100644
.coursesTable {
@include padding(20px, 20px, 20px, 20px);
border: 2px solid #169bd5;
}
table {
thead {
tr {
td {
@include text-align(left);
}
}
}
tr {
td {
@include text-align(left);
}
.dataTables_empty {
text-align: center;
}
}
}
.table-view {
display: table;
width: 100%;
border: 0;
.table-row {
@include text-align(center);
display: table-row;
.table-col {
@include padding(10px, 5px, 10px, 5px);
display: table-cell;
vertical-align: middle;
color: #333;
font-size: 14px;
border: {
width: 1px 0 0 1px;
style: solid;
color: #797979;
}
&:first-child {
@include text-align(left);
}
}
&.table-head {
.table-col {
background: #ccc !important;
font-weight: bold;
&:first-child {
@include text-align(center);
}
}
}
}
&.table-striped {
.table-row {
&:nth-child(odd) {
.table-col {
background: #f2f2f2;
}
}
}
}
}
course_discovery/static/sass/publisher/tabs.scss 0 → 100644
//I don't know what this is below
.tabs {
@include margin-left(0);
width: 100%;
display: inline-block;
}
.tabs {
@include padding(0, 0, 0, 0);
@include margin(0, 0, 0, 0);
list-style: none;
display: block !important;
.tab {
@include padding(12px, 20px, 12px, 20px);
@include margin-right(1px);
@include float(left);
background: #f2f2f2;
margin-bottom: 0 !important;
position: relative;
text-align: center;
font-weight: 600;
font-size: 15px;
color: #949494;
text-transform: capitalize;
text-decoration: none;
z-index: 999;
border: {
width: 2px;
style: solid;
color: #f2f2f2;
bottom-width: 0;
}
span {
display: block;
margin-bottom: 8px;
font-size: 22px;
}
&.is-active {
cursor: default;
background: white;
color: #169bd5;
z-index: 1001;
border: {
width: 2px;
style: solid;
color: #169bd5;
bottom-width: 0;
}
&:after {
@include right(0);
@include left(0);
content: '';
height: 2px;
background: white;
position: absolute;
bottom: -2px;
z-index: 1;
}
}
&:hover {
border-color: #eee;
background: #eee;
color: #757575;
cursor: pointer;
&.is-active {
cursor: default;
border-color: #169bd5;
background: white;
color: #169bd5;
}
}
}
&:before,
&:after {
content: '';
display: table;
clear: both;
}
}
.tab-panel {
@include padding(20px, 20px, 20px, 20px);
display: none;
border: 2px solid #169bd5;
background-color: #fff;
margin-bottom: 50px;
outline: none;
.title {
margin-top: 0;
}
p {
margin-top: 0;
}
.form-group {
@include margin(0, 0, 0, 0);
input {
@include padding-left(6px);
@include padding-right(6px);
padding-top: 0;
padding-bottom: 0;
height: 25px;
border-radius: 0;
border: 1px solid #bebebe;
width: 50%;
box-shadow: inset 0 1px #666;
}
.btn-inline {
@include padding(3px, 20px, 3px, 20px);
@include margin-left(6px);
background: #169bd5;
border-radius: 4px;
border: none;
height: 25px;
color: white;
&:hover {
cursor: pointer;
background: #0e8dc4;
}
}
}
&.is-active {
display: block;
}
}
\ No newline at end of file
course_discovery/static/sass/publisher/typography.scss 0 → 100644
.hd-3 {
color: #646262;
font-size: 24px;
font-weight: 400;
margin-bottom: 10px;
}
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