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

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
{
"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;
}
}
.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;
}
&:hover {
.icon-chevron-down {
opacity: 1;
}
}
}
.btn:disabled {
.icon {
opacity:0.3;