Adding in the mahara theme - work done by Evonne

behatnotneeded

Change-Id: I59225b90eaab72dcf087c9c11d427354d6cbe8c2
Signed-off-by: Robert Lyon <robertl@learn-design.catalyst.net.nz>

htdocs/theme/mahara/package.json

+{
+  "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"
+  }
+}

htdocs/theme/mahara/sass/_custom.scss

+// Generic custom css (anything longer than a screen view should have its own component file)

htdocs/theme/mahara/sass/_shame.scss

+// *
+// * 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.
+// *
+// *

htdocs/theme/mahara/sass/components/_arrow-bar.scss

+.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

htdocs/theme/mahara/sass/components/_btn-group.scss

+//
+// 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;
+    }
+  }
+}

htdocs/theme/mahara/sass/components/_btn.scss

+.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;