dvla_internal_frontend_toolkit 0.2.1

data/vendor/assets/stylesheets/dvla-internal-elements-styles.scss

@@ -0,0 +1,2 @@
+@import "dvla-internal-elements";
+@import "../../../app/assets/sass/styleguide";

data/vendor/assets/stylesheets/elements/_buttons.scss

@@ -0,0 +1,148 @@
+@mixin button() {
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    border-style: solid;
+    text-decoration: none;
+    line-height: normal;
+
+    &:active, &:focus {
+        outline: 3px solid $focus-colour;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+
+        &:hover {
+            cursor: not-allowed;
+        }
+    }
+}
+
+.btn {
+    @include button();
+    font-size: 15px;
+    padding: 8px 14px;
+}
+
+.btn-sml {
+    @include button();
+    font-size: 14px;
+    padding: 6.5px 12px;
+}
+
+.btn-lrg {
+    @include button();
+    font-size: 16px;
+    padding: 10px 16px;
+}
+
+.btn-primary {
+    color: white;
+    background: $primary;
+    border-bottom: 2px solid $primary-darkest;
+    cursor: pointer;
+
+    &:hover, &:focus {
+        background: $primary-dark;
+        color: white;
+
+        &:disabled {
+            background: $primary;
+        }
+    }
+
+    &:visited {
+        color: white;
+    }
+
+}
+
+.btn-secondary {
+    color: $primary;
+    background: $grey-4;
+    border: 1px solid $grey-2;
+    border-bottom-width: 2px;
+    cursor: pointer;
+
+    &:hover, &:focus {
+        background: $grey-3;
+        color: $primary;
+
+        &:disabled {
+            background: $grey-3;
+        }
+    }
+
+    &:visited {
+        color: $primary;
+    }
+}
+
+.btn-refresh {
+    position: relative;
+    padding-left: 47.3px;
+    padding-top: 10.6px;
+    padding-bottom: 11.4px;
+    
+    &:before {
+        font-family: $icon-font;
+        content: "\e906";
+        font-size: 16px;
+        position: absolute;
+        left: 16px;
+        top: 12px;
+        width: 16px;
+        height: 16px;
+    }
+}
+
+.btn-spacer-right{
+    margin-right: 32px;
+}
+
+.btn-spacer-left{
+    margin-left: 32px;
+}
+.btn-spacer-top{
+    margin-top: 32px;
+}
+
+.btn-spacer-bottom{
+    margin-bottom: 32px;
+}
+
+.btn-back{
+    padding-left: 16px;
+    color: $text-primary-colour;
+    display: inline-block;
+    margin-top: 16px;
+    position: relative;
+    border-bottom: 1px solid $text-primary-colour;
+    text-decoration: none;
+    
+    &::before{
+        content: '';
+        display: block;
+        width: 0;
+        height: 0;
+        border-top: 5px solid rgba(0, 0, 0, 0);
+        border-right: 6px solid $text-primary-colour;
+        border-bottom: 5px solid rgba(0, 0, 0, 0);
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -6px;
+
+    }
+
+    &:hover{
+        cursor: pointer;
+        color: $text-primary-colour;
+    }
+    &:visited{
+        color: $text-primary-colour;
+    }
+    
+    
+}

data/vendor/assets/stylesheets/elements/_forms.scss

@@ -0,0 +1,50 @@
+.form-control {
+    width: 100%;
+    border-radius: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &::-ms-expand{
+        display: none;
+    }
+
+    &.form-control-1-2 {
+        width: 50%;
+    }
+}
+
+
+select {
+    height: 40px;
+    border: 2px solid $grey-2;
+    font-size: inherit;
+    border-radius: 0px;
+    background-image: url('/images/triangle-caret-down.svg');
+    background-repeat: no-repeat;
+    background-size: 28px 12px;
+    background-position: right center;
+    padding-left: 16px;
+}
+
+textarea{
+    resize: none;
+    height: 144px;
+    border: 2px solid $grey-2;
+    margin-bottom: 24px;
+}
+
+.textarea-title{
+    font-weight: bold;    
+    margin-bottom: 8px;
+}
+
+.textarea-playback-date{
+    text-align: right;
+}
+
+.textarea-playback{
+    background-color: #f7f7f7;
+    height: 120px;
+    padding: 24px 24px;
+}

data/vendor/assets/stylesheets/elements/_layout.scss

@@ -0,0 +1,250 @@
+html {
+    font-family: $primary-font;
+}
+
+body {
+    width: 100%;
+    margin: 0 auto;
+    background: $grey-4;
+    height:100%;
+}
+
+
+#global-header {
+     display: block;
+     position: sticky;
+     left: 0;
+     top: 0;
+     width: 100%;
+     z-index: 10;
+     background: white;
+
+     #global-header-bar {
+        width: 944px;
+        max-width: calc(100% - 32px);
+        height: 8px;
+        margin: 0 auto;
+        background: $primary-lighter;
+    }
+
+    #global-header-tabs{
+        display: block;
+        width: 100%;
+        background-color: $grey-4;
+        line-height: 48px;
+        margin: 0 auto;
+        border: 1px solid $grey-2;
+        
+        li{
+            display: inline-block;
+            padding: 0 32px;
+            list-style: none;
+            font-weight: bold;
+
+            &:hover{
+                cursor: pointer;
+            }
+
+            &:active, &.active{
+                color: $primary;
+                border-bottom: 2px solid $primary;
+            }
+        }
+    }
+}
+
+#header-wrapper {
+    padding: 0.5em 0 0.5em 0;
+    display: block;
+    width: 100%;
+    background: $primary;
+    color: white;
+    height: 2em;
+    box-sizing: content-box;
+
+    #header-contents {
+        clear: both;
+        margin: 0 auto;
+        width: 944px;
+        max-width: calc(100% - 32px);
+
+        // @media screen and (max-width: 1023px) {
+        //     width: 960px;
+        //     // max-width: calc(100% - 32px);
+        // }
+
+        @media screen and (min-width: 1024px) {
+            width: 100%;
+            padding: 0 40px;
+        }
+    }
+}
+
+#header-float-left {
+    // position: absolute;
+    // left: 2.5em;
+    float: left;
+}
+
+#header-float-right {
+    // position: absolute;
+    // right: 2.5em;
+    float: right;
+}
+
+#header-logo {
+
+    #coat-of-arms {
+        float: left;
+        margin-right: 1.5em;
+        background-image: url('/images/coat-of-arms-logo.svg');
+        background-repeat: no-repeat; 
+        width: 36px;
+        height: 32px;
+        float: left;
+    }
+
+    a {
+        text-decoration: none;
+        
+        .name {
+            float: left;
+            font-size: 28px;
+            line-height: 32px;
+            letter-spacing: 0.8;
+            color: white;
+            font-weight: bold;
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &:visited {
+                color: white;
+            }
+        }
+    }
+}
+
+#user-account {
+    #user-account-email {
+        line-height: 32px;
+        font-size: 16px;
+        float: right;
+
+        &:after {
+            content: ':';
+        }
+    }
+
+    #logout {
+        margin-left: 24px;
+        line-height: 32px;
+        font-size: 16px;
+        float: right;
+        
+        a {
+            color: white;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            &:visited {
+                color: white;
+            }
+        }
+    }
+}
+
+*, *::before, *::after {
+    box-sizing: inherit;
+}
+
+div {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+#content {
+    margin: 0 auto;
+    padding-bottom: 2em;
+    // margin-top: 3em; 
+    background: white;
+
+    &.has-bar{
+        // margin-top: 3.5em;
+    }
+}
+
+@mixin container() {
+    box-sizing: border-box;
+    max-width: calc(100% - 16px);
+    margin: 0 auto;
+    // padding: 0 8px;
+    width: 960px;
+    min-height: 1px;
+}
+
+.container {
+    @include container();
+}
+
+.container-fluid {
+    @include container();
+
+    @media screen and (min-width: 1024px) {
+        width: 100%;
+        padding: 0 32px;
+    }
+}
+
+.container-dialog{
+    box-sizing: border-box;
+    background: $grey-4;
+    min-height: calc(100% - 3.5em);
+    width: 100%;
+    padding-top: 3.5em;
+
+    @media screen and (max-width: 672px) {
+        padding-top: 0.5em;
+    }
+
+    .dialog{
+        padding: 32px;
+        width: calc(100% - 32px);
+        max-width: 640px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 4px;
+        box-shadow: 0px 1px 3px 2px $grey-3;
+        margin-bottom: -2em;
+    }
+}
+
+.row {
+    // margin: 0 -8px;
+    //clear: both;
+    box-sizing: border-box;
+    font-size: 0;
+}
+
+@mixin col($ratio) {
+    width: percentage($ratio);
+    position: relative;
+    min-height: 1px;
+    padding: 0 8px;
+    display: inline-block;
+    vertical-align: top;
+    font-size: $normal-font-size;
+}
+
+@for $i from 1 through 12 {
+    .col-#{$i} {
+        @include col($i / 12);
+    }
+}

data/vendor/assets/stylesheets/elements/_lists.scss

@@ -0,0 +1,56 @@
+.list {
+    width: 100%;
+    color: $black;
+    margin-bottom: 40px;
+
+    .list-title-row {
+        border-bottom: 2px solid $grey-2;
+        box-sizing: border-box;
+        height: 40px;
+        display: flex;
+
+        .list-title {
+            font-weight: bold;
+            font-size: 20px;
+            flex: 1 1 50%;
+        }
+
+        .list-change {
+            flex: 1 1 50%;
+            text-align: right;
+            font-weight: bold;
+            color: $primary;
+
+            a {
+                &:visited {
+                    color: $primary;
+                }
+
+                &:hover {
+                    color: $primary-darker;
+                }
+            }
+        }
+
+    }
+
+    .list-row {
+        padding: 16px;
+        border-bottom: 1px solid $grey-2;
+        font-size: 16px;
+        display: flex;
+
+        .list-property {
+            min-height: 16px;
+            flex: 1 1 50%;
+        }
+
+        .list-data {
+            font-weight: bold;
+            min-height: 16px;
+            flex: 1 1 50%;
+        }
+        
+    }
+
+}

data/vendor/assets/stylesheets/elements/_navigation.scss

@@ -0,0 +1,72 @@
+.breadcrumbs {
+
+  ol {
+    list-style-type: none;
+    padding: 0 8px;
+
+    li {
+      display: inline-block;
+
+      &:first-child {
+        background-image: none;
+        margin-left: 0;
+        padding-left: 0;
+      }
+
+      background-image: url('/images/separator.png');
+      background-position: 0% 50%;
+      background-repeat: no-repeat;
+      margin-left: 1em;
+      padding-left: 1.5em;
+    }
+  }
+
+  a {
+    color: $black;
+    text-decoration: underline;
+
+    &:visited {
+      color: $black;
+    }
+
+    &:hover {
+      color: black;
+      text-decoration: none;
+    }
+  }
+}
+
+.side-bar{
+  position: fixed;
+  left: 0px;
+  top: 56px;
+  width: 208px;
+  height:100%;
+  background-color: $grey-4; 
+  border-right: 1px solid $grey-2; 
+  margin-top: -8px;
+
+  ul{
+    padding: 0px;
+
+    li{
+      list-style: none;
+      padding-left: 40px;
+      line-height: 40px;
+      font-weight: bold;
+
+      &:hover{
+        cursor: pointer;
+        background-color: $primary-lightest;
+        text-decoration: underline;
+      }
+
+      &:active, &.active{
+        color: $primary;
+        border-left: 8px solid $primary;
+        padding-left: 32px;
+        background-color: $primary-lightest;
+      }
+    }
+  }
+}