Commit 66d234c5 authored by Pat Kira's avatar Pat Kira Committed by Robert Lyon

Bug 1637371 - Consilidating raw theme colours

- Amend Ocean theme implementation similar to other theme so new theme
  can inherit from it

- Ensure that all colour values in scss components are variables (except
  those that are more specific)

- Remove select2.scss as it is now part of raw theme for theme-ability
   - Also remove select2.css inclusion in PHP files
   - Add scss version of select2 styles and remove existing one
     (_select2.scss)
   - Create _mahara-select.scss for style override

behatnotneeded: styling only

Change-Id: I624b55ce34dd19ad525ba250877780bfbc0251b5
parent 6eb1dde2
This diff is collapsed.
This diff is collapsed.
......@@ -11,7 +11,7 @@
a {
@media (max-width: $screen-sm-min) {
background-color: transparent;
color: #bed8e1;
color: $brand-primary-light;
}
}
}
......
......@@ -9,7 +9,7 @@
*/
// Import our theme based variables (colors, fonts, padding, etc)
@import "utilities/brand-variables"; // Import our brand variables
@import "utilities/theme-variables"; // Import our brand variables
@import "utilities/bootstrap-variables"; // ...and our custom bootstrap variables file
@import "utilities/custom-variables"; // ...and our custom variables file
......
......@@ -56,7 +56,7 @@ $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%);
//** Background color for `<body>`.
$body-bg: #fff;
//** Global text color on `<body>`.
$text-color: $mahara-dark-grey;
$text-color: $theme-text-color;
//** Global textual link color.
$link-color: $brand-primary;
......@@ -393,7 +393,7 @@ $navbar-default-border: darken($navbar-default-bg, 6.5%);
// Navbar links
$navbar-default-link-color: #333;
$navbar-default-link-hover-color: $brand-primary-light;
$navbar-default-link-hover-color: $theme-accent-color;
$navbar-default-link-hover-bg: #F1F1F1;
$navbar-default-link-active-color: #555;
$navbar-default-link-active-bg: #FFFFFF;
......@@ -406,7 +406,7 @@ $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 1
$navbar-default-brand-hover-bg: transparent;
// Navbar toggle
$navbar-default-toggle-hover-bg: $brand-primary-mid;
$navbar-default-toggle-hover-bg: lighten($brand-primary, 22.5%);
$navbar-default-toggle-icon-bar-bg: #fff;
$navbar-default-toggle-border-color: #ddd;
......@@ -420,7 +420,7 @@ $navbar-inverse-border: darken($navbar-inverse-bg, 5%);
// Inverted navbar links
$navbar-inverse-link-color: $text-color;
$navbar-inverse-link-hover-color: $gray-dark;
$navbar-inverse-link-hover-bg: $brand-primary-light;
$navbar-inverse-link-hover-bg: $theme-accent-color;
$navbar-inverse-link-active-color: $gray-dark;
$navbar-inverse-link-active-bg: #fff;
$navbar-inverse-link-disabled-color: #444;
......@@ -890,4 +890,4 @@ $arrow-color: darken($brand-info, 10%);
$arrow-text-color: #fff;
$arrow-link-color: #fff;
$arrow-link-hover-color: $arrow-color;
$arrow-link-active-color: $arrow-color;
\ No newline at end of file
$arrow-link-active-color: $arrow-color;
/*
* Brand colours should be defined here, and (ideally) used only in the global variables file (bootstrap-variables)
*/
$mahara-green: #335804;
$mahara-green-light: #5C8727;
$mahara-green-lime: #B9CB2E;
$mahara-green-bright: darken(#93be42, 5%);
$mahara-blue: darken(#22C49C, 5%);
$mahara-dark-grey: #333;
$mahara-dark-brown: #211c00;
// custom color variables for theme based on $brand-primary (#20738F)
$brand-primary-dark: #629db0; // $brand-primary 70%
$brand-primary-mid: #93becc; // $brand-primary 50%
$brand-primary-light: #bed8e1; // $brand-primary 30%
$brand-primary-faint: #e9f2f5; // $brand-primary 10%
\ No newline at end of file
......@@ -14,4 +14,10 @@ $admin-title-color: #fff;
$admin-title-bg: $brand-primary;
$dashboard-widget-bg: darken(#f9f9f9, 2%);
$dashboard-widget-color: $brand-primary;
\ No newline at end of file
$dashboard-widget-color: $brand-primary;
// Ocean theme specific colours
$brand-primary-dark: #629db0; // $brand-primary 70%
$brand-primary-mid: #93becc; // $brand-primary 50%
$brand-primary-light: #bed8e1; // $brand-primary 30%
$brand-primary-faint: #e9f2f5; // $brand-primary 10%
/*
* Brand colours should be defined here, and (ideally) used only in the global variables file (bootstrap-variables)
*/
$theme-primary-color: #20738F;
$theme-primary-dark: #629db0;
$theme-text-color: #333;
$theme-text-midtone-color: #666;
$theme-text-lighttone-color: #888;
$theme-accent-color: #bed8e1;
......@@ -6,7 +6,7 @@
<h5 class="text-inline">{$item.name|str_shorten_text:60:true}</h5>
<span class="owner metadata inner-link text-small">
{str tag=by section=view}
<a href="{$item.ownerurl}" class="text-success text-small">
<a href="{$item.ownerurl}" class="text-link text-small">
{$item.ownername}
</a>
</span>
......
......@@ -50,12 +50,12 @@
.layoutthumb {
rect.layout1 {
fill: darken($panel-default-heading-bg, 10%);
stroke: #ccc;
stroke: $panel-default-border;
}
rect.layout0 {
fill: darken($panel-default-heading-bg, 15%);
stroke: #ccc;
stroke: $panel-default-border;
}
svg {
......@@ -195,10 +195,6 @@
display: inline-block;
}
.form-group .select2-container .select2-selection .select2-search input[type=search] {
width: 100% !important;
}
.progress-bar {
position: relative;
background-color: darken($brand-primary, 5%);
......@@ -303,7 +299,6 @@
// Editgroup membership modal
// see editgroupmemship.tpl
.editgroup-container {
border-bottom: 1px solid #f9f9f9;
padding-bottom: 20px;
margin-bottom: 20px;
&:last-child {
......@@ -336,7 +331,7 @@
position: relative;
top: -3px;
margin-left: 3px;
color: #888;
color: $gray-light;
}
.asc > a::after {
content: '\f0dd';
......@@ -349,7 +344,7 @@
}
.containobjectionable {
background-color: #FEE7E7;
background-color: $state-danger-bg;
}
.permissions-table {
......@@ -401,7 +396,7 @@
// Remove the link colour from a comment that has an attachement
@media (min-width: 992px) {
.viewfooter .comment-item .comment-attachment .panel.collapsible h4 a.collapsed {
color: #333;
color: $text-color;
}
}
......
......@@ -71,12 +71,12 @@
display: inline-block;
}
&:hover {
color: #222;
color: $gray-darker;
background: $gray-lighter;
text-decoration: none;
.icon {
color: #777;
color: $gray-light;
}
}
}
......@@ -201,9 +201,9 @@ td.action-list-copy {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
background: rgba(#ccc, 0.8);
background: lighten($btn-default-bg, 0.8);
&:hover {
background: rgba(#ddd, 1);
background: rgba($btn-default-bg, 1);
}
}
}
......@@ -269,14 +269,14 @@ td.action-list-copy {
}
&.last {
border-bottom-radius: 3px;
background-color: #F9F9F9
background-color: $btn-default-bg;
}
}
// To override btn-primary colour
.btn-primary {
color: $gray-dark;
background: darken($brand-default, 10%);
border-color: #adadad;
border-color: $btn-default-border;
}
}
label {
......
......@@ -3,9 +3,6 @@
margin: 0 auto;
.item {
display: block;
// &.inline {
// display: block;
// }
}
&.carousel-ready {
......@@ -56,7 +53,7 @@
a {
display: block;
padding: 3px;
color: #000;
color: $text-color;
opacity: .5;
&:hover,
&:focus {
......
......@@ -11,11 +11,11 @@
.cell {
min-width: 0;
float: left;
background-color: #f2f2f2;
border: 1px solid #ccc;
background-color: $gray-lighter;
border: 1px solid darken($gray-lighter, 5%);
margin: 2% 2% 0 0;
&.active {
background-color: darken(#f2f2f2, 10%);
background-color: darken($gray-lighter, 10%);
}
input {
display: inline;
......
......@@ -26,16 +26,16 @@
font-size: 1.2em;
cursor: pointer;
&.begun {
color: #5b9aa9;
color: $assessment-begun-color;
}
&.incomplete {
color: $brand-danger;
color: $assessment-incomplete-color;
}
&.partial {
color: $brand-warning;
color: $assessment-partial-color;
}
&.completed {
color: $brand-success;
color: $assessment-completed-color;
}
&.dot {
font-size: 0.8em;
......@@ -126,20 +126,20 @@
}
}
.assessment {
color: #333;
color: $gray-dark;
.assessmentfeedback {
&.begun {
color: #5b9aa9;
color: $assessment-begun-color;
}
&.incomplete {
color: $brand-danger;
color: $assessment-incomplete-color;
}
&.partial {
color: $brand-warning;
color: $assessment-partial-color;
}
&.completed {
color: $brand-success;
color: $assessment-completed-color;
}
}
}
......@@ -19,7 +19,7 @@
//dash
.collapse-indicator {
color: #aaa;
color: $navbar-default-link-color;
font-size: 13px;
display: block;
transition-duration: 0.3s;
......@@ -30,11 +30,11 @@
font-size: 11px;
}
.collapsed & {
color: #aaa;
color: $navbar-default-link-color;
}
a:hover &,
a:focus & {
color: #555;
color: $navbar-default-link-hover-color;
}
.collapsed ~ & {
transform: rotate(180deg);
......@@ -46,12 +46,12 @@
a[data-toggle="collapse"] {
&:hover .collapse-indicator,
&:focus .collapse-indicator{
color: #555;
color: $navbar-default-link-hover-color;
}
.collapse-indicator {
transform: rotate(-180deg);
transition-duration: 0.3s;
color: #aaa;
color: $navbar-default-link-color;
margin-top: 5px;
line-height: 13px;
height: auto;
......@@ -79,13 +79,13 @@ a[data-toggle="collapse"] {
[data-toggle="collapse"].outer-link {
&.collapsed {
~ .collapse-indicator {
color: #aaa;
color: $navbar-default-link-color;
}
}
&:hover,
&:focus {
~ .collapse-indicator {
color: #555;
color: $navbar-default-link-hover-color;
}
}
}
......@@ -2,7 +2,7 @@
display: inline-block;
margin-right: 5px;
&.label-default {
color: #333;
color: $gray-dark;
}
}
......@@ -12,4 +12,4 @@ a.label.label-default,
&:focus {
background-color:$theme-primary-color;
}
}
\ No newline at end of file
}
......@@ -6,15 +6,15 @@
padding: 7px 15px 15px;
font-size: 20px;
margin-bottom: 4px;
background-color: darken(#f5f5f5, 1%);
background-color: lighten($thumbnail-border, 7%);
&.thumbnail {
&:hover,
&.focus,
&.active {
background-color: darken(#f5f5f5, 7%);
color: #333;
background-color: lighten($thumbnail-border, 5%);
color: $text-color;
text-decoration: none;
border-color: #ccc;
border-color: $thumbnail-border;
}
}
.metadata {
......@@ -27,4 +27,4 @@
.list-inline .list-tile {
padding: 0;
}
\ No newline at end of file
}
......@@ -134,7 +134,7 @@ h4.list-group-item-heading {
}
.file-size {
float: right;
color: darken($brand-default, 40%);
color: $theme-text-lighttone-color;
}
}
......@@ -159,7 +159,7 @@ h4.list-group-item-heading {
@extend .list-group-item-warning;
}
&.published {
background: #fefefe;
background: lighten($panel-default-heading-bg, 1%);
}
&.flush {
padding: 10px 0;
......@@ -285,7 +285,7 @@ h4.list-group-item-heading {
}
.annotation-feedback {
border-top: 1px solid #ddd !important;
border-top: 1px solid $list-group-border !important;
}
.feedback.modal {
......
......@@ -184,7 +184,7 @@ $width-sm: 90%;
padding: 10px 4px 9px 3px;
}
.times {
color: #555;
color: $theme-text-midtone-color;
opacity:0.4;
}
&:hover,
......
......@@ -30,7 +30,7 @@ $indicator-total-width: $indicator-size + ($indicator-horizontal-margin * 2);
&:focus {
+ .switch-label {
@include tab-focus;
outline-color: #66afe9;
outline-color: $brand-info;
.switch-inner:before,
.switch-inner:after {
background-color: darken($brand-default, 5%);
......
......@@ -26,7 +26,7 @@
color: $gray;
.badge {
border: 1px solid transparent;
color: #ffffff;
color: #fff;
background-color: $gray;
}
}
......@@ -36,19 +36,19 @@
}
.tag-filters {
@extend .clearfix;
background-color: #f5f5f5;
background-color: darken($panel-default-heading-bg, 1%);
padding: 10px 15px;
}
//Edit tag page
.tag-action-description {
color: $gray-light;
font-style: italic;
font-size: $font-size-base - 1;
max-width: 90%;
display: block;
padding-top: 10px;
margin-top: 25px;
margin-left: 30px;
margin-bottom: 15px;
color: $theme-text-lighttone-color;
font-style: italic;
font-size: $font-size-base - 1;
max-width: 90%;
display: block;
padding-top: 10px;
margin-top: 25px;
margin-left: 30px;
margin-bottom: 15px;
}
......@@ -9,13 +9,13 @@
display:block;
content:"";
height:20px;
border-right:1px solid #ccc;
border-left:1px solid rgb(255, 255, 255);
border-right:1px solid $navbar-default-toggle-border-color;
border-left:1px solid #fff;
}
}
.search-toggle {
color: rgb(119, 119, 119);
color: $navbar-default-toggle-icon-bar-bg;
line-height: 13px;
height: 34px;
margin-right: 0;
......@@ -49,13 +49,13 @@
color: lighten($navbar-inverse-bg, 35%);
}
.icon {
color: #555;
color: $navbar-default-link-hover-color;
}
}
.icon {
transform: rotate(-180deg);
transition-duration: 0.3s;
color: #aaa;
color: $navbar-default-link-color;
}
&.collapsed {
background-color: transparent;
......@@ -65,4 +65,4 @@
transition-duration: 0.3s;
}
}
}
\ No newline at end of file
}
.user-icon {
border-radius: 3px;
background-color:#fff;
background-color: #fff;
padding: 5px;
display: table;
border: 1px solid $panel-default-border;
border: 1px solid $thumbnail-border;
overflow: hidden;
position: relative;
......@@ -98,7 +98,7 @@ a.user-icon, a .user-icon {
&:hover,
&:focus {
opacity:1;
background-color: darken(#f5f5f5, 1%);
background-color: lighten($thumbnail-border, 10%);
img {
opacity: 1;
......
......@@ -73,7 +73,7 @@
.collapse & {
&:first-child {
// To override panel listgroup no top border on first-child
border-top: 1px solid #ddd !important;
border-top: 1px solid $list-group-border !important;
border-bottom: 0;
}
}
......@@ -107,4 +107,4 @@
border-top-width: 1px;
width: 100%;
}
}
\ No newline at end of file
}
......@@ -33,7 +33,7 @@ $logged-in-height-mobile: 100px;
p {
margin: 0;
font-size: $font-size-small;
color: #555;
color: $gray;
}
a {
color: $link-color;
......@@ -176,5 +176,5 @@ $logged-in-height-mobile: 100px;
.dashboard-editable {
margin-top: $grid-gutter-width;
padding: ($grid-gutter-width - 10) 0;
border-top: 1px solid #ccc;
border-top: 1px solid $btn-default-border;
}
.fileupload {
padding: 20px;
border: 1px solid $gray-lighter;
background-color: #ffffff;
background-color: #fff;
.intro {
font-weight: bold;
}
......
......@@ -19,7 +19,7 @@
.forum-post-btns {
a {
color: #333;
color: $theme-text-color;
margin-left: 20px;
}
}
......@@ -36,7 +36,7 @@
.collapsible a {
&:focus,
&:hover {
background: #f9f9f9 !important;
background: darken($panel-default-heading-bg, 1%) !important;
}
}
}
......@@ -45,7 +45,7 @@
margin-top: 0;
font-style: italic;
padding: 5px 10px;
color: #666;
background: #F4F4F4;
color: $theme-text-midtone-color;
background: $gray-lighter;
border-radius: 5px;
}
\ No newline at end of file
}
......@@ -48,12 +48,12 @@
padding-bottom:10px;
margin-bottom: 21px;
margin-bottom: 21px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $panel-default-border;
}
.date,
.recipients,
.subject {
color: #555;
color: $gray;
font-size: 0.9em;
}
}
......@@ -7,7 +7,7 @@
}
.option-alt-divider {
color: #999;
color: $theme-text-lighttone-color;
background: #fff;
text-transform: uppercase;
font-size: 1.2em;
......
......@@ -61,7 +61,7 @@
table {
border-spacing: 0;
border-color: $gray-light;
border-color: $table-border-color;
border-width: 1px;
}
......
......@@ -21,7 +21,7 @@
>thead>tr>th {
color: inherit;
vertical-align: bottom;