Commit 71f286e7 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon

Changes to default and primaryschool themes by Evonne

Change-Id: I218c04d0ad60481edf486202f1e74adf311afdaf
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent 87e768a8
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
// Polyfill so we don't need >= node 0.12
require('es6-promise').polyfill();
// Include plugins
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var path = require('path');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('autoprefixer-core');
var autoprefixer = require('gulp-autoprefixer');
var bless = require('gulp-bless');
// Turn sass into css
// Turn sass into css, prefix, minify and bless
gulp.task('sass', function () {
return gulp.src('sass/**/*.scss')
.pipe(sass({
paths: [ path.join(__dirname, 'sass', 'includes') ]
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 4 version'],
cascade: false
}))
.on('error', function(err){
console.log(err); // catch and log the error, don't kill the process
this.emit('end');
})
.pipe(gulp.dest('style/'));
});
// Prefix and minify css files
// this will first run the 'sass' task above, then this one
gulp.task('css', ['sass'], function () {
return gulp.src('style/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 4 version'] }) ]))
.on('error', function(err){
console.log(err); // catch and log the error, don't kill the process
this.emit('end');
})
.pipe(minifyCSS())
.pipe(bless())
.pipe(gulp.dest('style/'));
});
// Watch Files For Changes
// Watch files for changes
gulp.task('watch', function() {
gulp.watch(['sass/**/*.scss', '../raw/sass/**/*.scss'], ['css']);
gulp.watch('sass/**/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['watch']);
// Default task (recompile on init before watching)
gulp.task('default', ['sass', 'watch']);
......@@ -4,15 +4,15 @@
"description": "Mahara's default theme",
"main": "gulpfile.js",
"dependencies": {
"es6-promise": "^3.0.2",
"gulp": "^3.9.0",
"gulp-postcss": "^5.1.8",
"gulp-autoprefixer": "^3.0.1",
"gulp-bless": "^3.0.1",
"gulp-minify-css": "^1.1.6",
"autoprefixer-core": "^5.2.0",
"gulp-sass": "^2.0.1",
"path": "^0.11.14"
"gulp-sass": "^2.0.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
......@@ -12,4 +12,8 @@
.form-group .errmsg {
margin-left: 0;
}
}
.progress-bar {
background-color: #84a421;
}
\ No newline at end of file
//
// Extenstion to Button groups so we can use them in forms
// --------------------------------------------------
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn > .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
}
}
.btn-group.form-group,
.pieform.form-as-button > .btn,
.pieform .btn.form-group.button {
padding: 0;
border: 0;
margin:0;
}
.btn-group .form-as-button:first-child:not(.last) {
.btn {
@include border-right-radius(0);
border-right:0;
}
}
.btn-group .form-as-button ~ .form-as-button {
.btn {
@include border-left-radius(0);
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn > .btn,
.btn-group + .btn > .btn {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
> .btn > .btn {
margin-left: 5px;
}
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child > .btn {
margin-left: 0;
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child) > .btn {
@include border-left-radius(0);
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn > .btn {
border-radius: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn > .btn { @extend .btn-xs; }
.btn-group-sm > .btn > .btn { @extend .btn-sm; }
.btn-group-lg > .btn > .btn { @extend .btn-lg; }
// Vertical button groups
// ----------------------
.btn-group-vertical {
> .btn > .btn ,
> .btn-group > .btn > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
@include clearfix;
> .btn > .btn {
float: none;
}
}
> .btn + .btn > .btn ,
> .btn-group + .btn > .btn {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
&:first-child:not(:last-child) > .btn.btn.btn,
&:first-child:not(:last-child):not(.dropdown-toggle) > .btn.btn {
border-top-right-radius: $border-radius-base;
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) > .btn{
border-bottom-left-radius: $border-radius-base;
@include border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child > .btn {
@include border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child > .btn {
@include border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
> .btn > .btn {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn > .btn {
width: 100%;
}
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"] {
> .btn > .btn,
> .btn-group > .btn > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}
}
}
.btn {
vertical-align: baseline;
.customrow & {
margin-top: 25px; // layout builder button alignment
}
input {
margin-top: 0;
}
&.checkbox input.checkbox {
width: auto;
display: inline-block;
float: right;
}
}
.btn-link-danger {
color: $brand-danger;
}
.btn-text {
color: inherit;
padding:0;
}
h1 + div > .btn-top-right,
.page-header + div.btn-top-right {
float: none;
margin-bottom: 0;
@media (min-width: $screen-xs-min) {
margin-top: -53px;
.page-header + & {
margin-top: -43px;
}
}
form {
margin: 0 !important;
display: inline-block;
.form-group-inline {
padding: 0;
}
}
}
.btn-toggle.panel-footer {
padding:0;
> .btn {
border-radius: 0;
width: 50%;
float: left;
height: 42px;
line-height: 30px;
&:first-child {
border-radius: 0 0 0 3px;
border-right: 1px solid $panel-default-border;
}
&:last-child {
border-radius: 0 0 3px 0;
}
.btn {
padding: 0;
margin: 0;
color: inherit;
&:hover {
text-decoration: none;
}
}
form {
display: inline-block;
}
&:hover {
color: #222;
background: $gray-lighter;
text-decoration: none;
.icon {
color: #777;
}
}
}
}
h1 ~ div > .btn-group-top,
.page-header ~ div.btn-group-top,
.page-header + .btn-action-list .btn-group-top,
.nav-tabs + div.btn-group-top {
margin-top: -20px;
float: right;
position: relative;
z-index: 1;
.btn {
@include border-top-radius(0);
border-top: 0;
font-size: $font-size-small;
}
.btn-group-top {
margin: 0;
}
}
.nav-tabs + div.btn-group-top{
margin-top: 0;
}
td.btn-group {
min-width: 300px;
}
.form-as-button {
display: inline-block;
}
.btn-group div.form-button-group {
display: inline-block;
margin: 0;
......@@ -128,182 +10,33 @@ td.btn-group {
}
}
.list-group,
.panel-heading {
.btn-group {
@include clearfix;
text-align: right;
float: right;
margin-top: -11px;
margin-bottom:11px;
@media (min-width: $screen-xs-max ) {
@include clearfix;
&.btn-group-top .btn {
@include border-top-radius(0);
}
}
@media (max-width: $screen-xs-max ) {
margin-top: 10px;
}
.btn {
@extend .btn-sm;
}
.hide-small {
@extend .sr-only;
}
.btn-top-right {
margin: 0; // negate nested margin
}
}
.btn-action-list{
float:right;
width:100%;
}
}
.panel-secondary .blockinstance-controls .btn-group-top {
position: absolute;
top: 11px;
right: 10px;
.btn {
background: rgba(#ccc, 0.8);
&:hover {
background: rgba(#ddd, 1);
}
}
}
.btn-header {
width:100%;
&.btn-two .btn {
width: 25%;
&:first-child {
width:75%
}
}
&.btn-three .btn {
width: 50%;
&:first-child,
&:last-child {
width:25%;
}
}
}
.btn.text-left {
text-align:left;
}
.btn.text-right {
text-align:right;
}
.btn label {
min-width: 0;
}
.btn-group-vertical {
.indicator {
margin-left: -4px;
font-size: 9px;
&.icon-arrows {
vertical-align: middle;
margin-left: -7px;
}
}
.block-icon {
vertical-align: middle;
margin-left:-2px;
font-size: 14px;
.col-collapsed & {
margin-left: 2px;
font-size: 18px;
}
}
&.btn-accordion {
.btn {
font-size: 13px;
margin-bottom: -1px;
max-width: 100%;
overflow: hidden;
width:100%;
&.ui-accordion-header {
margin-bottom: -3px;
}
&.last {
border-bottom-radius: 3px;
}
}
}
label {
font-size: 12px;
white-space: normal;
vertical-align: middle;
padding: 0;
padding-right: 5px;
padding-top: 3px;
width: auto;
max-width: 90%;
margin-left: 2px;
}
}
.btn-accordion.ui-accordion .ui-accordion-content {
@include box-sizing(border-box);
border-radius: 0;
margin-top: 10px;
margin-bottom:15px;
padding: 0;
max-width:100%;
border:0;
.btn-group-vertical {
@include box-sizing(border-box);
max-width: 100%;
width: 100%;
.btn {
border-radius: 0;
display:block;
margin: 0;
&:not(:last-child) {
border-bottom: 0;
&:hover {
+.btn {
border-top-color: darken($btn-default-border, 12%);
}
}
}
}
}
}
.btn-group .form-as-button.last + script + .btn {
margin-left: -1px;
}
.btn {
.icon-chevron-down {
opacity: 0.5;
}
// Lime buttons
.btn,
.btn-default {
@include gradient-vertical($start-color: #FFFFFF, $end-color: #ececec, $start-percent: 10%, $end-percent: 100%);
border-color: #dddddd;
color: #676767;
&:focus,
&:hover {
.icon-chevron-down {
opacity: 1;
}
border-color: #a6a6a6;
color: #333333;
}
}
.btn:disabled {
.icon {
opacity:0.3;
// Green buttons
.btn-success,
.btn-primary {
@include gradient-vertical($start-color: #99b92d, $end-color: #66860f, $start-percent: 0%, $end-percent: 100%);
border-color: #66860f;
color: #FFFFFF;
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 0;
font-weight: normal;
&:focus,
&:hover {
border-color: #202c01;
color: #FFFFFF;
}
}
.btn-with-heading {
float: right;
margin-top:-75px;
}
}
\ No newline at end of file
.carousel {
.item {
display: block;
}
&.carousel-ready {
.item {
display: none;
&.active,
&.next {
display: block;
}
}
}
// Overriding bootstrap carousel styles
.carousel-caption {
text-align: left;
background-color:rgba(0,0,0,0.6);
left: 0;
right: 0;
bottom: 0;
}
.carousel-control {
color: #000;
top: 50%;
bottom: 50%;
~ .icon {
vertical-align: middle;
}
}
}
.modal .cell-radios > .form-group.radio > div.radio {
display: none;
}
.cell-chooser {
.cell-row {
min-width: 0;
width: 150px;
overflow: hidden;
.cell {
min-width: 0;
float: left;
background-color: #f2f2f2;
border: 1px solid #ccc;
margin: 2% 2% 0 0;
&.active {
background-color: darken(#f2f2f2, 10%);
}
input {
display: inline;
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
min-width: 0;
}
}
.pseudolabel {
@extend .sr-only;
}
}
}
// using bootstrap popover to style the help content
span.help {
font-size: $font-size-base + 5;
vertical-align: top;
padding-left:10px;
display: inline-block;
.icon {
color: $help-icon-color;
font-size: 20px;
opacity: 0.8;