adapt-authoring-ui 0.0.1

package/app/core/less/app.less

@@ -0,0 +1,100 @@
+@import 'colours';
+
+html {
+  overflow-y: hidden;
+}
+
+body {
+  background-color:@ui-content-color;
+  color: @tertiary-color;
+}
+
+#app {
+	margin-top:60px;
+	margin-left:250px;
+}
+
+.app-inner {
+	position:relative;
+}
+
+span.error {
+  color: @alert-color;
+}
+
+// Loading overlay styling
+// =======================
+
+@loading-icon-size: 8px;
+
+.loading {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  text-align: center;
+  opacity:1;
+  transition: opacity 0.3s;
+  background-color: @ui-content-color;
+
+  &.fade-out {
+    opacity: 0;
+  }
+  &.cover-top-bar {
+    position:fixed;
+    z-index:50000;
+  }
+
+  .loading-inner {
+    margin-top: 25%;
+  }
+
+  .loading-logo {
+    margin-bottom: @loading-icon-size;
+    img {
+      height: 50px;
+    }
+  }
+
+  .loading-anim {
+    margin: 0 auto 15px auto;
+    text-align: center;
+
+    > div {
+      width: @loading-icon-size;
+      height: @loading-icon-size;
+      background-color: @tertiary-color;
+      margin: 0 @loading-icon-size/3 0 @loading-icon-size/3;
+
+      border-radius: 100%;
+      display: inline-block;
+      -webkit-animation: sk-bouncedelay 1.8s infinite ease-in-out both;
+      animation: sk-bouncedelay 1.8s infinite ease-in-out both;
+    }
+    .circle1 {
+      -webkit-animation-delay: -0.32s;
+      animation-delay: -0.32s;
+    }
+    .circle2 {
+      -webkit-animation-delay: -0.16s;
+      animation-delay: -0.16s;
+    }
+  }
+
+  @-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+  }
+
+  @keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    } 40% {
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+    }
+  }
+}

package/app/core/less/buttons.less

@@ -0,0 +1,268 @@
+@import 'colours';
+
+button {
+    border:none;
+    background:none;
+    padding:10px 12px;
+    &:hover, &:focus {
+        outline:none;
+    }
+
+    &.warning-color {
+        background:@button-warning-color!important;
+        color:@button-warning-text-color!important;
+        &:hover {
+            background:@button-warning-hover-color!important;
+            color:@button-warning-hover-text-color!important; 
+        }
+    }
+
+    &.alert-color {
+        background:@button-alert-color!important;
+        color:@button-alert-text-color!important;
+        &:hover {
+            background:@button-alert-hover-color!important;
+            color:@button-alert-hover-text-color!important; 
+        }
+    }
+
+    &.disabled-color {
+        background:@button-disabled-color!important;
+        color:@button-disabled-text-color!important;
+        &:hover {
+            background:@button-disabled-color!important;
+            color:@button-disabled-text-color!important; 
+        }
+    }
+    &:disabled {
+        cursor: auto;
+        opacity: 0.5;
+        border-color:@button-disabled-color!important;
+        background:@button-disabled-color!important;
+        color:@button-disabled-text-color!important;
+        &:hover {
+            background:@button-disabled-color!important;
+            color:@button-disabled-text-color!important; 
+        }
+    }
+}
+
+.btn {
+    display:inline-block;
+    padding:10px 12px;
+    background:none;
+    border:@button-border;
+    border-radius:@button-radius;
+    font-weight: @font-weight-bold;
+    text-decoration: none;
+    transition:all 0.3s;
+
+    &:hover, &:focus {
+        outline:none;
+        color:@button-hover-text-color;
+        border:@button-hover-border;
+    }
+}
+
+.primary {
+    background-color:@button-primary-color;
+    color:@button-primary-text-color;
+    border-color: @button-primary-color;
+    i {
+        color:@button-primary-text-color;
+        &:hover, &:focus {
+            color:@button-primary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        background-color:@button-primary-hover-color;
+        color:@button-primary-hover-text-color;
+        border-color:@button-primary-hover-color;
+    }
+}
+
+.primary-hollow { 
+    background-color:@button-transparent;
+    color: @button-primary-color;
+    border-color:@button-primary-color;
+    i {
+        color:@button-primary-text-color;
+        &:hover, &:focus {
+            color:@button-primary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        color: @button-primary-text-color;
+        background-color: @button-primary-color;
+        border-color:@button-primary-color;
+    }        
+}
+
+.secondary {
+    background-color:@button-secondary-color;
+    color:@button-secondary-text-color;
+    border-color:@button-secondary-color;
+    i {
+        color:@button-secondary-text-color;
+        &:hover, &:focus {
+            color:@button-secondary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        background-color:@button-secondary-hover-color;
+        color:@button-secondary-hover-text-color;
+        border-color:@button-secondary-hover-color;
+    }
+}
+
+.secondary-hollow { 
+    background-color:@button-transparent;
+    color: @button-secondary-color;
+    border-color:@button-secondary-color;
+    i {
+        color:@button-secondary-text-color;
+        &:hover, &:focus {
+            color:@button-secondary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        color: @button-secondary-text-color;
+        background-color: @button-secondary-color;
+        border-color:@button-secondary-color;
+    }        
+}
+
+.tertiary {
+    background-color:@button-tertiary-color;
+    color:@button-tertiary-text-color;
+    border-color:@button-tertiary-color;
+    i {
+        color:@button-tertiary-text-color;
+        &:hover, &:focus {
+            color:@button-tertiary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        background-color:@button-tertiary-hover-color;
+        color:@button-tertiary-hover-text-color;
+        border-color:@button-tertiary-hover-color;
+    }
+}
+
+.tertiary-hollow { 
+    background-color:@button-transparent;
+    color:@button-tertiary-color;
+    border-color:@button-tertiary-color;
+    i {
+        color:@button-tertiary-text-color;
+        &:hover, &:focus {
+            color:@button-tertiary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        color: @button-tertiary-text-color;
+        background-color: @button-tertiary-color;
+        border-color:@button-tertiary-color;
+    }        
+}    
+
+.quaternary {
+    background-color:@button-quaternary-color;
+    color:@button-quaternary-text-color;
+    border-color:@button-quaternary-color;
+    i {
+        color:@button-quaternary-text-color;
+        &:hover, &:focus {
+            color:@button-quaternary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        background-color:@button-quaternary-hover-color;
+        color:@button-quaternary-hover-text-color;
+        border-color:@button-quaternary-hover-color;
+    }
+}
+
+.quaternary-hollow { 
+    background-color:@button-transparent;
+    color:@button-quaternary-color;
+    border-color:@button-quaternary-color;
+    i {
+        color:@button-quaternary-text-color;
+        &:hover, &:focus {
+            color:@button-quaternary-hover-text-color;
+        }
+    }
+    &:hover, &:focus {
+        color:@button-quaternary-text-color;
+        background-color:@button-quaternary-color;
+        border-color:@button-quaternary-color;
+    }        
+}
+
+.white-hollow {
+    background-color:@button-transparent;
+    color:@button-white-hollow-text-color;
+    border-color:@button-white-hollow-text-color;
+    &:hover, &:focus {
+        color:@button-white-hollow-hover-text-color;
+        background-color:@button-white-hollow-hover-color;
+        border-color:@button-white-hollow-hover-color;
+    }
+}
+
+/*
+* Action buttons
+*/
+// Use these attributes to easily configure the sidebar buttons
+&.action-primary {
+    .secondary;
+}
+&.action-secondary {
+    .primary-hollow;
+}
+&.action-tertiary {
+    .primary;
+}
+
+.warning {
+    background-color:@button-warning-color;
+    color:@button-warning-text-color;
+    border-color:@button-warning-color;
+    &:hover, &:focus {
+        background-color:@button-warning-hover-color;
+        color:@button-warning-text-color;
+        border-color:@button-warning-hover-color;
+    }
+}
+
+.alert {
+    background-color:@button-alert-color;
+    color:@button-alert-text-color;
+    border-color:@button-alert-color;
+    &:hover, &:focus {
+        background-color:@button-alert-hover-color;
+        color:@button-alert-hover-text-color;
+        border-color:@button-alert-hover-color;
+    }
+}
+
+.btn-social {
+  width: 160px;
+  position: relative;
+  overflow: hidden;
+  text-align: left;
+  padding-left: 56px;
+}
+
+.btn-social > :first-child {
+  position: absolute;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  width: 18px;
+  line-height: 34px;
+  font-size: 1.6em;
+  text-align: center;
+  border-right: 1px solid rgba(0,0,0,0.2);
+}

package/app/core/less/colourLabels.less

@@ -0,0 +1,14 @@
+@colorlabel-1: #616161;
+@colorlabel-2: #BDBDBD;
+@colorlabel-3: #D32F2F;
+@colorlabel-4: #EF9A9A;
+@colorlabel-5: #7B1FA2;
+@colorlabel-6: #CE93D8;
+@colorlabel-7: #1976D2;
+@colorlabel-8: #90CAF9;
+@colorlabel-9: #388E3C;
+@colorlabel-10: #A5D6A7;
+@colorlabel-11: #F57C00;
+@colorlabel-12: #FFCC80;
+@colorlabel-13: #5D4037;
+@colorlabel-14: #BCAAA4;

package/app/core/less/colours.less

@@ -0,0 +1,132 @@
+// Use this file to change the feel of the interface
+
+/*///////////
+// Colors
+/////////*/
+
+/*///////////
+// Default adapt variables. (please don't touch!) If you don't like us then comment us out and edit the colors below!
+/////////*/
+@adapt-primary-color:#34bee0; // light blue (used in most places such as buttons)
+@adapt-secondary-color:#00dd95; // green (used as a secondary button)
+@adapt-tertiary-color:#263944; // dark blue (used in sidebar)
+@adapt-quaternary-color:#36cde8; //
+@adapt-white:#fff;
+////////////
+
+/*///////////
+// Editable variables
+//
+// Changes you make here will pull through the whole of the Authoring Tool.
+/////////*/
+@primary-color:@adapt-primary-color;
+@secondary-color:@adapt-secondary-color;
+@tertiary-color:@adapt-tertiary-color;
+@quaternary-color:@adapt-quaternary-color;
+@white:@adapt-white;
+///////////
+
+
+@ui-content-header-color:#e0e8f7;
+@ui-content-color:#f3fcfe;
+
+@alert-color: #ff5567;
+@warning-color: #ffa08d;
+@info-color: lighten(@primary-color, 10%);
+@success-color: @secondary-color;
+
+@disabled-color: #454545;
+
+/*///////////
+// Layout colors
+/////////*/
+
+@appHeader-text-color: @white;
+@appHeader-hover-text-color: darken(@appHeader-text-color, 2%);
+
+@sidebar-title-text-color: @white;
+@sidebar-color: @tertiary-color;
+@sidebar-text-color: @primary-color;
+@sidebar-item-hover-color: lighten(@tertiary-color, 10%);
+@sidebar-item-hover-text-color: @white;
+@sidebar-input-text-color: @white;
+@sidebar-input-placeholder-color: #9fa8ad;
+@sidebar-input-color: #627178;
+@sidebar-input-border-color: lighten(@sidebar-input-color, 10%);
+@sidebar-input-button-color: @sidebar-input-text-color;
+
+@contentHeader-title:#000;
+@contentHeader-background-color:@white;
+
+@option-color: @primary-color;
+@option-hover-color: darken(@option-color, 10%);
+@option-selected-color: darken(@option-color, 20%);
+
+/*///////////
+// Buttons
+/////////*/
+
+// Default button
+@button-hover-text-color:#000000;
+@button-hover-color:@white;
+@button-radius: 3px;
+@button-border:1px solid #000000;
+@button-hover-border: 1px solid #000000;
+
+@button-transparent:transparent;
+
+// Primary button
+@button-primary-color:@primary-color;
+@button-primary-hover-color:darken(@primary-color, 5%);
+
+@button-primary-text-color:@white;
+@button-primary-hover-text-color:@white;
+
+// Secondary button
+@button-secondary-color:@secondary-color;
+@button-secondary-hover-color:darken(@secondary-color, 3%);
+
+@button-secondary-text-color:@white;
+@button-secondary-hover-text-color:@white;
+
+// tertiary button
+@button-tertiary-color:@tertiary-color;
+@button-tertiary-hover-color:darken(@tertiary-color, 5%);
+
+@button-tertiary-text-color:@white;
+@button-tertiary-hover-text-color:@white;
+
+// quaternary button
+@button-quaternary-color:@quaternary-color;
+@button-quaternary-hover-color:darken(@quaternary-color, 5%);
+
+@button-quaternary-text-color:@white;
+@button-quaternary-hover-text-color:@white;
+
+// white hollow button
+@button-white-hollow-hover-color:@white;
+
+@button-white-hollow-text-color:@white;
+@button-white-hollow-hover-text-color:@primary-color;
+
+// Warning button
+@button-warning-color:@warning-color;
+@button-warning-hover-color:darken(@button-warning-color, 15%);
+
+@button-warning-text-color:@white;
+@button-warning-hover-text-color:@white;
+
+// Alert button
+@button-alert-color:@alert-color;
+@button-alert-hover-color:darken(@alert-color, 10%);
+
+@button-alert-text-color:@white;
+@button-alert-hover-text-color:@white;
+
+// Disabled button
+@button-disabled-color:@disabled-color;
+@button-disabled-text-color:@white;
+
+// Tag colors
+@tag-background-color:@button-primary-color;
+@tag-title-color:@white;

package/app/core/less/columns.less

@@ -0,0 +1,190 @@
+/* Contains styling for columns */
+.col-row {
+    zoom: 1;
+    display: flex;
+    align-items: center;
+    &:before, &:after {
+        content: "\0020"; display: block; height: 0; overflow: hidden;
+    }
+    &:after {
+        clear: both;
+    }
+
+    .col-centered {
+        text-align:center;
+    }
+
+    /*Two column layout*/
+    .col-1-2 {
+        float:left;
+        width:0%;
+        min-height:1px;
+    }
+    .col-2-2 {
+        float:left;
+        width:50%;
+        min-height:1px;
+    }
+    /*Three column layout*/
+    .col-1-3 {
+        float:left;
+        width:0%;
+        min-height:1px;
+    }
+    .col-2-3 {
+        float:left;
+        width:33.3%;
+        min-height:1px;
+    }
+    .col-3-3 {
+        float:left;
+        width:66.6%;
+        min-height:1px;
+    }
+    /*Four column layout*/
+    .col-1-4,
+    .col-2-4,
+    .col-3-4,
+    .col-4-4 {
+        float:left;
+        width:25%;
+        min-height:1px;
+    }
+
+    /*Five column layout*/
+    .col-1-5,
+    .col-2-5,
+    .col-3-5,
+    .col-4-5,
+    .col-5-5 {
+        float:left;
+        width:20%;
+        min-height:1px;
+    }
+
+    /*Six column layout*/
+    @col-6:16.6%;
+    .col-1-6 {
+        float:left;
+        width:@col-6;
+        min-height:1px;
+    }
+    .col-2-6 {
+        float:left;
+        width:(@col-6 * 2);
+        min-height:1px;
+    }
+    .col-3-6 {
+        float:left;
+        width:(@col-6 * 3);
+        min-height:1px;
+    }
+    .col-4-6 {
+        float:left;
+        width:(@col-6 * 4);
+        min-height:1px;
+    }
+    .col-5-6 {
+        float:left;
+        width:(@col-6 * 5);
+        min-height:1px;
+    }
+    .col-6-6 {
+        float:left;
+        width:(@col-6 * 6);
+        min-height:1px;
+    }
+
+    /*Adjustable widths*/
+
+    .col-100 {
+        float:left;
+        width:100%;
+        min-height:1px;
+    }
+
+    .col-90 {
+        float:left;
+        width:90%;
+        min-height:1px;
+    }
+
+    .col-80 {
+        float:left;
+        width:80%;
+        min-height:1px;
+    }
+
+    .col-70 {
+        float:left;
+        width:70%;
+        min-height:1px;
+    }
+
+    .col-60 {
+        float:left;
+        width:60%;
+        min-height:1px;
+    }
+
+    .col-50 {
+        float:left;
+        width:50%;
+        min-height:1px;
+    }
+
+    .col-40 {
+        float:left;
+        width:40%;
+        min-height:1px;
+    }
+
+    .col-30 {
+        float:left;
+        width:30%;
+        min-height:1px;
+    }
+
+    .col-20 {
+        float:left;
+        width:20%;
+        min-height:1px;
+    }
+
+    .col-10 {
+        float:left;
+        width:10%;
+        min-height:1px;
+    }
+
+    .col-25 {
+        float:left;
+        width:25%;
+        min-height:1px;
+    }
+
+    .col-75 {
+        float:left;
+        width:75%;
+        min-height:1px;
+    }
+
+    .col-6th {
+        float:left;
+        width:@col-6;
+        min-height:1px;
+    }
+
+    .col-5 {
+        float:left;
+        width:5%;
+        min-height:1px;
+    }
+
+    .col-15 {
+        float:left;
+        width:15%;
+        min-height:1px;
+    }
+
+}