Commit 203623e3 authored by Jen Zajac's avatar Jen Zajac Committed by Robert Lyon
Browse files

Theming major variable overhaul - more semantic

  behatnotneeded

  Bug 1465107

Change-Id: I8ba5c75daca61d83085a3f63f10a3e14453c0844
parent d5a672c9
......@@ -47,21 +47,20 @@ If you want more flexibility, and you are comfortable with Sass and Gulp (or are
* `package.json`
* `themeconfig.php`
* `sass/_custom.scss`
* `sass/_shame.scss`
* `sass/style.scss`
* `sass/utilities/_theme-variables.scss`
2. You need to ensure that you override the parent theme's CSS by making sure that `$theme->overrideparentcss` is set to `true` in your new copy of `themeconfig.php`.
2. You need to ensure that you override the parent theme's CSS by making sure that `$theme->overrideparentcss` is set to `true` in your new copy of `themeconfig.php`.
3. Customise the `displayname` to something more meaningful. This name is shown in the theme selection drop-down menu in the administration of your site as well as the user settings page if you allow your users to change their browse theme.
4. If you want to override variables (colours, fonts, etc), you should copy the following files from the __raw__ folder into you new theme (create the` utilities` directory in the `sass` folder to put them in):
* `sass/utilities/_bootstrap-variables.scss` - the original variables file from Bootstrap. Here you can assign your brand variables to Bootstrap's component-based variables.
* `sass/utilities/_brand-variables.scss` - for brand colour definitions.
4. You can quickly change the basic colouring of the site by editing the values of the variables in `sass/utilities/_theme-variables.scss`. If you want to override more variables than just the basic theme colours (specific element colours, fonts, etc), you should copy the following files from the __raw__ folder into you new theme (put them in the` utilities` directory in the `sass` folder):
* `sass/utilities/_bootstrap-variables.scss` - the original variables file from Bootstrap. Here you can assign your theme variables to Bootstrap's component-based variables.
* `sass/utilities/_custom-variables.scss` - like the Bootstrap's variables file but for custom components.
Now you need to edit your `sass/style.scss` to point at your theme's copies of these files. For any file that you have copied, you need to change the start of the path from `../../raw/sass/utilities/` to `utilities/`.
5. `_custom.scss` and `_shame.scss` are optional. See the comments at the top of them for what you might use them. If you don't want to use them, delete your new copies and remember to remove the reference to them from `style.scss`!
5. `_custom.scss` is optional. It is a place for any small bits of CSS that don't warrant creating a new file to include, or for custom overrides of the existing components. If you don't want to use it, delete your new copy and remember to remove the reference to it from `style.scss`!
6. You need to already have NodeJS set up to be able to complete this step. If you don't (or if you aren't sure that you do), follow the [NodeJS set-up](#nodejs) instructions in the [Mahara developers](#mahara-developer-guide) portion of this readme file first.
......@@ -145,7 +144,7 @@ If you haven't used Gulp before or don't have it installed, you'll need to globa
npm install -g gulp
Because we are installing globally you may need to use `sudo` in front of this command to have the right permissions.
Because we are installing globally you may need to use `sudo` in front of this command to have the right permissions.
From the terminal navigate to the theme you are working on (e.g):
......
// *
// * This file is for hotfixes, hacks, and anything that you don't have time to test
// * or implement properly. If you are unsure where to put something, it is ok to put it
// * here.
// *
// * Please comment your code to make it easier for someone to fix or hunt down later.
// *
// *
......@@ -6,7 +6,7 @@ span.help {
display: inline-block;
.icon {
color: $mahara-blue;
color: $help-icon-color;
font-size: 20px;
opacity: 0.8;
}
......
......@@ -25,11 +25,11 @@
font-size: 11px;
}
.collapsed & {
color: $mahara-green;
color: $theme-primary-color;
}
a:hover &,
a:focus & {
color: lighten($mahara-green, 5%);
color: lighten($theme-primary-color, 5%);
}
}
......@@ -50,14 +50,14 @@
[data-toggle="collapse"].outer-link {
&.collapsed {
~ .collapse-indicator {
color: $mahara-green;
color: $theme-primary-color;
margin-top: 3px;
}
}
&:hover,
&:focus {
~ .collapse-indicator {
color: lighten($mahara-green, 5%);
color: lighten($theme-primary-color, 5%);
}
}
}
.label {
display: inline-block;
&.label-default {
color: #333;
}
display: inline-block;
&.label-default {
color: #333;
}
}
a.label.label-default,
a.label.label-default,
.label.label-default a {
&:hover,
&:focus {
background-color:$mahara-green-bright;
}
&:hover,
&:focus {
background-color:$theme-primary-color-light;
}
}
\ No newline at end of file
......@@ -30,7 +30,7 @@ $logged-in-height-mobile: 125px;
h2 {
margin: 5px 0 3px;
text-align: center;
color: $mahara-dark-brown;
color: $theme-accent-color;
@media (max-width: $screen-sm-min ) {
font-size: 20px;
......
......@@ -25,7 +25,7 @@
padding-left: 15px;
li .icon {
color: $mahara-green;
color: $theme-primary-color;
}
}
}
......
......@@ -49,13 +49,13 @@
margin-top: 0;
}
a {
color: $mahara-green;
color: $theme-primary-color;
&:hover {
text-decoration: none;
color: darken($mahara-green, 5%);
color: darken($theme-primary-color, 5%);
}
&.narbar-brand {
color: $mahara-green;
color: $theme-primary-color;
}
}
}
......
......@@ -4,20 +4,20 @@
.main-nav {
padding-top: 30px;
border-bottom: 1px solid #dcdcdc;
@media (max-width: $screen-sm-min) {
padding-top: 0;
border-bottom: 0;
}
&.dropdown-adminnav {
background: none;
.nav > li > a {
padding: 10px 15px;
}
}
.container {
@media (max-width: $screen-sm-min) {
padding:0;
......@@ -54,18 +54,18 @@
width:100%;
font-style: italic;
font-size: $font-size-base;
@media (min-width: $screen-sm-min) {
width:auto;
margin-left:0;
}
.icon {
top:3px;
}
a {
color: $mahara-green !important;
color: $theme-primary-color !important;
}
}
......@@ -102,7 +102,7 @@
font-weight: normal;
&:hover, &:focus {
text-decoration:none;
background-color: $mahara-green;
background-color: $theme-primary-color;
color: #FFFFFF;
}
}
......@@ -111,18 +111,18 @@
// If this link is the current page or section
.active > a {
font-weight: bold;
background-color: $mahara-green;
background-color: $theme-primary-color;
color: #FFFFFF;
@media (min-width: $screen-sm-min) {
background-color: $mahara-green;
background-color: $theme-primary-color;
&:hover {
color: #FFFFFF;
}
}
&:hover, &:focus {
background-color: darken($mahara-green, 5%);
background-color: darken($theme-primary-color, 5%);
}
}
......
......@@ -7,7 +7,7 @@
border-bottom: 1px solid #dddddd;
&:hover {
color: darken($mahara-green, 5%);
color: darken($theme-primary-color, 5%);
}
}
.active > a {
......
......@@ -109,7 +109,7 @@ body:not(.admin) .navbar.minor-nav {
.nav-brand {
height: auto;
line-height: 20px;
color: $mahara-green;
color: $theme-primary-color;
font-size: 13px;
}
}
\ No newline at end of file
......@@ -28,7 +28,7 @@
}
&:hover {
background: transparent;
color: lighten($mahara-green, 8%);
color: lighten($theme-primary-color, 8%);
}
}
}
......
......@@ -17,7 +17,7 @@
border-bottom: 0;
> a.outer-link {
border-bottom: 2px solid $mahara-dark-brown;
border-bottom: 2px solid $theme-accent-color;
}
}
}
......
a.panel-footer {
text-align:center;
color: $mahara-green;
color: $theme-primary-color;
display: block;
&:hover {
color: #222;
......
......@@ -31,7 +31,7 @@
}
&.collapsed {
color: $mahara-green;
color: $theme-primary-color;
padding: 10px 15px;
.panel-secondary > & {
padding: 10px 8px;
......@@ -82,11 +82,11 @@
.panel-default > .panel-heading {
border-bottom: 0;
background-color: $mahara-green;
background-color: $theme-primary-color;
color: #FFFFFF;
.help a .icon {
color: $mahara-green-lime;
color: $theme-primary-color-light;
}
a {
......
......@@ -12,7 +12,7 @@
font-size: $font-size-large;
}
> .panel-heading, .panel-heading-nested {
border-bottom: 2px solid $mahara-dark-brown;
border-bottom: 2px solid $theme-accent-color;
padding-left: 8px;
padding-right: 8px;
......
......@@ -9,9 +9,13 @@
*/
// Import our theme based variables (colors, fonts, padding, etc)
@import "utilities/brand-variables"; // Import our brand variables
@import "utilities/theme-variables"; // Import our theme variables
@import "utilities/bootstrap-variables"; // ...and our custom bootstrap variables file
@import "utilities/custom-variables"; // ...and our custom variables file
@import "../../raw/sass/utilities/bootstrap-index"; // bootstrap scss dependency file
@import "utilities/index"; // raw sass files (if you want heavier customisation you can copy this file and replace partials with your own sass)
//@import "../../raw/sass/utilities/index"; // raw sass files
@import "utilities/index"; // custom components / layout / forms / features
// Keep these files last to override all other style sheets
@import "custom";
......@@ -21,7 +21,7 @@ $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-default: #ECECEC;
$brand-primary: $mahara-green;
$brand-primary: $theme-primary-color;
$brand-success: #449D44 !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
......@@ -56,10 +56,10 @@ $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !
// $body-bg: #fff !default;
$body-bg: #fff;
//** Global text color on `<body>`.
$text-color: $mahara-dark-grey;
$text-color: $theme-text-color;
//** Global textual link color.
$link-color: $mahara-green;
$link-color: $theme-primary-color;
//** Link hover color set via `darken()` or `lighten()` function.
$link-hover-color: lighten($link-color, 15%);
//** Link hover decoration.
......@@ -97,7 +97,7 @@ $line-height-computed: floor(($font-size-base * $line-height-base)) !default;
$headings-font-family: $font-family-serif !default;
$headings-font-weight: 300 !default;
$headings-line-height: 1.3 !default;
$headings-color: $mahara-dark-brown !default;
$headings-color: $theme-accent-color !default;
//== Iconography
......@@ -185,8 +185,8 @@ $btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
$btn-success-color: #fff !default;
$btn-success-bg: $mahara-green !default;
$btn-success-border: darken($mahara-green, 5%) !default;
$btn-success-bg: $theme-primary-color !default;
$btn-success-border: darken($theme-primary-color, 5%) !default;
$btn-info-color: $state-info-text !default;
$btn-info-bg: $state-info-bg !default;
......@@ -391,7 +391,7 @@ $navbar-default-bg: #F1F1F1 !default;
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
// Navbar links
$navbar-default-link-color: $mahara-green !default;
$navbar-default-link-color: $theme-primary-color !default;
$navbar-default-link-hover-color: #FFF !default;
$navbar-default-link-hover-bg: #6e9142 !default;
$navbar-default-link-active-color: #555 !default;
......@@ -412,23 +412,23 @@ $navbar-default-toggle-border-color: #ddd !default;
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color: #555 !default;
$navbar-inverse-bg: #FFFFFF !default;
$navbar-inverse-border: #FFFFFF !default;
$navbar-inverse-color: #fff !default;
$navbar-inverse-bg: #F1F1F1 !default;
$navbar-inverse-border: darken($navbar-inverse-bg, 5%) !default;
// Inverted navbar links
$navbar-inverse-link-color: $text-color !default;
$navbar-inverse-link-hover-color: #777 !default;
$navbar-inverse-link-hover-bg: #F1F1F1 !default;
$navbar-inverse-link-active-color: $mahara-green !default;
$navbar-inverse-link-active-bg: $mahara-green-light !default;
$navbar-inverse-link-hover-color: $link-hover-color !default;
$navbar-inverse-link-hover-bg: rgba(darken($navbar-inverse-bg, 7%), 0.5) !default;
$navbar-inverse-link-active-color: $text-color !default;
$navbar-inverse-link-active-bg: #fff !default;
$navbar-inverse-link-disabled-color: #444 !default;
$navbar-inverse-link-disabled-bg: transparent !default;
// Inverted navbar brand label
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
$navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color !default;
$navbar-inverse-brand-hover-bg: $navbar-inverse-link-hover-bg !default;
$navbar-inverse-brand-hover-bg: transparent !default;
// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg: #333 !default;
......
/*
* Brand colours should be defined here, and (ideally) used only in the global variables file (bootstrap-variables)
*/
$mahara-green: #5c8727;
$mahara-green-light: lighten(#5C8727, 1%);
$mahara-green-lime: #B9CB2E;
$mahara-green-bright: darken(#93be42, 5%);
$mahara-blue: #5b8fc8;
$mahara-dark-grey: #231f20;
$mahara-dark-brown: #474220;
......@@ -14,4 +14,6 @@ $admin-title-color: #fff;
$admin-title-bg: $brand-primary;
$dashboard-widget-bg: #eef3e9;
$dashboard-widget-color: #5c8727;
\ No newline at end of file
$dashboard-widget-color: #5c8727;
$help-icon-color: #5b8fc8;
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