Commit 5cce365f authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon

Adding in the mahara theme - work done by Evonne

behatnotneeded

Change-Id: I59225b90eaab72dcf087c9c11d427354d6cbe8c2
Signed-off-by: default avatarRobert Lyon <robertl@learn-design.catalyst.net.nz>
parent fb51a0d1
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// Include gulp
var gulp = require('gulp');
// Include Our 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');
// Turn sass into css
gulp.task('sass', function () {
return gulp.src('sass/**/*.scss')
.pipe(sass({
paths: [ path.join(__dirname, 'sass', 'includes') ]
}))
.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(gulp.dest('style/'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch(['sass/**/*.scss', '../raw/sass/**/*.scss'], ['css']);
});
// Default Task
gulp.task('default', ['watch']);
{
"name": "mahara",
"version": "1.0.0",
"description": "Mahara's Mahara theme",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.0",
"gulp-postcss": "^5.1.8",
"gulp-minify-css": "^1.1.6",
"autoprefixer-core": "^5.2.0",
"gulp-sass": "^2.0.1",
"path": "^0.11.14"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
// Generic custom css (anything longer than a screen view should have its own component file)
// *
// * 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.
// *
// *
.arrow-bar {
border-radius: $border-radius-base;
overflow: hidden;
margin-top: 10px;
margin-bottom: $grid-gutter-width;
line-height: 46px;
display: block;
width: 100%;
background-color: lighten($arrow-color, 5%);
.right-text,
.arrow {
padding: 5px 15px;
position: relative;
display: block;
}
.arrow {
float: left;
position: relative;
display: block;
background-color: $arrow-color;
width: 25%;
@media (max-width: $screen-md-min) {
width: 20%;
}
&:after {
border-bottom: 29px solid transparent;
border-left: 14px solid $arrow-color;
border-top: 30px solid transparent;
content: "";
height: 40px;
position: absolute;
right: -40px;
top: -2px;
width: 40px;
}
.text {
@include ellipsis(true);
display: block;
color: $arrow-text-color;
font-weight: 700;
}
}
.right-text {
float: right;
text-align: right;
@media (max-width: $screen-sm-min) {
float: none;
text-align: center;
}
}
}
.nav-inpage {
&.nav > li {
> a, button {
@include transition-duration(0.3s);
border-radius: $border-radius-base;
padding: 0 8px;
line-height: 2em;
margin-top: 9px;
color: $arrow-link-color;
font-size: $font-size-small;
@media (max-width: $screen-sm-min) {
margin-top: 2px;
margin-bottom: 2px;
}
&:hover,
&:focus {
@include transition-duration(0.3s);
background: #fff;
color: $arrow-link-hover-color;
}
}
&.active > a,
&.active > button, {
color: $arrow-link-active-color;
background: #fff;
&:hover,
&:focus {
color: $arrow-link-hover-color;
}
}
}
}
\ 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;
padding: 0;
.btn {
border-left:0;
display: inline-block;
border-bottom-radius: 0;
border-bottom-left-radius: 0;
}
}
.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;
}
}