Commit 9e6bd10e authored by Danny SMc's avatar Danny SMc

Fixed issues

parent 123f3bea
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
\ No newline at end of file
File mode changed from 100644 to 100755
/*
Core Style Sheet
----------------
Developers:
-> Danny SMc <danny@auctionmarketer.co.uk>
*/
// Import core files
@import 'core/mixins';
@import 'core/layout';
// Import components
@import 'components/header-container';
@import 'components/menu-sidebar';
// Import views
@import 'views/error';
@import 'views/index';
\ No newline at end of file
/*===== COMPONENTS/HEADER-CONTAINER =====*/
.header-container {
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #433450;
text-align: center;
.header-left {
float: left;
text-align: center;
.left-section-holder {
.menu-toggle {
width: 45px;
height: 35px;
border: 1px solid white;
margin: 10px;
border-radius: 5px;
cursor: pointer;
.line {
background-color: #fff;
height: 1px;
width: 33px;
display: block;
margin-left: 5px;
margin-top: 7px;
@include prefix(transition, all 0.2s ease-in-out 0s);
&.line-1{
margin-top: 8px;
}
}
&.active {
.line-1 {
@include prefix(transform, rotate(26deg));
@include prefix(transform-origin, 0 0);
width: 37px;
}
.line-2 {
visibility: hidden;
}
.line-3 {
@include prefix(transform, rotate(-26deg));
@include prefix(transform-origin, 0 0);
width: 37px;
}
}
&:hover {
background-color: white;
.line {
background-color: #433450;
}
}
}
}
}
.header-middle {
width: auto;
.nuxt-link-active {
color: #fff;
text-transform: uppercase;
font-family: monospace;
font-weight: 400;
font-size: 30px;
text-decoration: none;
display: block;
width: auto;
margin-top: 8px;
}
}
.header-right {
width: auto;
float: right;
}
}
\ No newline at end of file
/*===== COMPONENTS/MENU-SIDEBAR =====*/
.menu-sidebar-container {
position: absolute;
top: 55px;
left: -250px;
width: 250px;
height: 100%;
background-color: #59595a;
z-index: -1;
box-shadow: inset -15px 0px 10px -15px #000;
@include prefix(transition, all 0.5s ease-in-out 0s);
margin-top: -55px;
padding-top: 55px;
overflow-y: auto;
.menu-section {
float: left;
width: 100%;
&.menu-title {
.title {
width: 100%;
display: block;
font-family: monospace;
font-size: 18px;
background-color: #1a2226;
color: #cccdce;
padding: 5px 8px;
margin: 0;
line-height: 18px;
}
}
&.menu-items {
.nav-items {
padding: 0;
margin: 0;
.nav-item {
list-style: none;
text-align: left;
a {
cursor: pointer;
color: white;
padding: 5px 15px;
font-family: monospace;
font-size: 16px;
font-weight: normal;
text-decoration: none;
display: block;
&:hover, &.active {
background-color: #a7a7a9;
}
}
}
}
}
&.language-selector {
.language-holder {
position: relative;
select {
cursor: pointer;
-webkit-appearance: none;
border: 1px solid white;
border-radius: 0;
width: 90%;
padding: 8px;
margin-top: 10px;
color: white;
background-color: transparent;
position: relative;
cursor: pointer;
}
.down-arrow {
pointer-events: none;
position: absolute;
top: 4px;
font-size: 30px;
display: block;
right: 7%;
color: white;
}
}
}
&.mini-profile {
padding: 20px 10px;
.left-profile {
float: left;
width: 35%;
padding-right: 10px;
.picture {
border-radius: 50%;
width: 100%;
}
}
.right-profile {
float: left;
width: 65%;
margin-top: 14px;
padding-left: 10px;
.about-name {
color: white;
font-family: monospace;
text-align: left;
font-weight: normal;
font-size: 14px;
border-bottom: 1px solid #4d4d4d;
padding-bottom: 6px;
}
.about-company {
color: white;
font-family: monospace;
text-align: left;
font-weight: normal;
font-size: 14px;
padding-top: 4px;
}
}
}
}
}
\ No newline at end of file
/*===== CORE/PAGE =====*/
html {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
}
.main-page-container {
overflow-x: hidden;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
.page-container {
z-index: 0;
min-height: 100vh;
padding-top: 55px;
position: relative;
@include prefix(transition, all 0.5s ease-in-out 0s);
left: 0;
&.active {
left: 250px;
}
}
\ No newline at end of file
/*===== MIXINS ======*/
/*
Output font size using rem and fallback
`@include font-size(10px);`
*/
@mixin font-size($font-size) {
font-size: $font-size;
font-size: ($font-size / $base-font-size)*1rem;
}
/*
Output font size using rem and colour
`@include font-size-colour (10px, ffffff);`
*/
@mixin font-size-colour($font-size, $font-colour) {
font-size: $font-size;
font-size: ($font-size / $base-font-size)*1rem;
color: $font-colour;
}
/*
color the elements placeholder
`@include place-holder-color (#007190);`
*/
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
/*
Output uppercase with some letter spacing
`@include uppercase(0.1em);`
*/
@mixin uppercase($spacing: 0.1em) {
text-transform: uppercase;
letter-spacing: $spacing;
}
/*
Output vendor-prefixed rules
`@include prefix(border-radius, 4px);`
*/
@mixin prefix($property, $value...) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-ms-#{$property}: $value;
-o-#{$property}: $value;
#{$property}: $value;
}
/*
Allows you to style placeholder content for input boxes etc
`@include placeholder { ... };`
*/
/*
Output clearfix rules
`@include clearfix();`
*/
@mixin clearfix {
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
zoom: 1;
}
@mixin placeholder {
&::-webkit-input-placeholder {@content};
&:-moz-placeholder {@content};
&::-moz-placeholder {@content};
&:-ms-input-placeholder {@content} ;
}
/*
Output media query block
`@include media-query(min, 640px){}`
*/
@mixin media-query($type, $breakpoint: $lap-start) {
@if $type == "min" {
@media screen and (min-width: $breakpoint) { @content }
}
@else if $type == "max" {
@media screen and (max-width: $breakpoint - 1px) { @content }
}
@else if $type == "palm" {
@media screen and (max-width: $lap-start - 1px) { @content }
}
@else if $type == "lap" {
@media screen and (min-width: $lap-start) { @content }
}
@else if $type == "desk" {
@media screen and (min-width: $desk-start) { @content }
}
@else if $type == "wide" {
@media screen and (min-width: $wide-start) { @content }
}
}
/*
Output media query block
`@include media-query-height(min, 640px) { ... }`
*/
@mixin media-query-height($type, $breakpoint: $lap-start) {
@if $type == "min" {
@media screen and (min-height: $breakpoint) { @content }
}
@else if $type == "max" {
@media screen and (max-height: $breakpoint - 1px) { @content }
}
@else if $type == "palm" {
@media screen and (max-height: $lap-start - 1px) { @content }
}
@else if $type == "lap" {
@media screen and (min-height: $lap-start) { @content }
}
@else if $type == "desk" {
@media screen and (min-height: $desk-start) { @content }
}
@else if $type == "wide" {
@media screen and (min-height: $wide-start) { @content }
}
}
/*
Output media query block with min and max limits
`@include media-query-bracket(640px, 960px){}`
*/
@mixin media-query-bracket($from: 0, $to: $lap-start) {
@if $to > $from {
@media screen and (min-width: $from) and (max-width: $to - 1px) { @content }
}
}
/*
Output rule for offscreen image replacement
`@include offscreen();`
*/
@mixin offscreen() {
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
display: block;
font-size: 0;
text-align: start;
}
/*
Output color using rgba and fallback
`@include alpha(border-color, rgba(black,0.1), white);`
*/
@mixin alpha($attribute, $color, $background) {
$percent: alpha($color) * 100%;
$opaque: opacify($color, 1);
$solid-color: mix($opaque, $background, $percent);
#{$attribute}: $solid-color;
#{$attribute}: $color;
}
/*
Output percentage using pixels (px)
`@include pxtopercent(500px, 1000px);`
*/
@mixin pxtopercent($child, $parent) {
width:round(($child / $parent) * 100%);
}
/*
Set the opacity for all browsers and provide a filter fallback for IE8.
`@include opacity(0.8);`
*/
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
/*
Center-align a block level element
`@include center-block;`
*/
@mixin center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
/*
Absolute Positioned
`@include abs-pos(10px, 10px, 5px, 15px);`
*/
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: absolute;
}
/*
Centre element within the parent
`@include centered();`
*/
@mixin centered {
margin: 0 auto;
max-width: $page-width;
padding: 0 10px;
}
/*
Full width element
`@include full-width();`
*/
@mixin full-width {
margin: 0 auto;
padding: 0 10px;
width: 100%;
}
/*
Input Box Mixin
`@include input-box();`
*/
@mixin input-box {
padding: 5px;
font-size: $base-font-size;
}
/*
Vertical Align anything
`@include vertical-align();`
*/
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*
Set float direction and width
`@include fl-width(left, 100%);`
*/
@mixin fl-width ($float: left, $width: 100%) {
float: $float;
width: $width;
}
/*
Set the alignment of text in an 'inline-block' element
`@include display-align(middle);`
*/
@mixin display-align ($align: middle) {
display: inline-block;
vertical-align: $align;
}
/*
Break the word if the containing div is too small
`@include word-wrap();`
*/
@mixin word-wrap {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
/*
Add ellipsis onto end of text if overflows the height of element
`@include ellipsis();`
*/
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
Targets specifically Internet Explorer 10 and 11.
`@include IE { ... };`
*/
@mixin IE {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @content }
}
/*
Targets browsers specifically.
`@include target-browser('Chrome') { ... };`
*/
@mixin target-browser($browser) {
@if $browser == "IE" {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @content }
}
@else if $browser == "FireFox" {
@-moz-document url-prefix() { @content }
}
@else if $browser == "Chrome" {
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { @content }
}
@else if $browser == "Safari" {
/* Safari 10.1+ (alternate method) */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
@content
}
/* Safari 6.1-10.0 [not 10.1+] */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@content
}
/* Safari 6.1-7.0 */
@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {
@content
}}
}
}
/*
Create default button setup
`@include button(white, #203963);` - This is a default button
`@include button(#203963, white, 'true');` - This is a inverse button, uses the text colour as border colour
*/
@mixin button($txtColour: white, $bgColour: #203963, $inverse: 'false') {
background-color: $bgColour;
border: 1px solid $bgColour;
@if $inverse == "true" { border: 1px solid $txtColour; }
border-radius: 0px;
color: $txtColour;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 300;
line-height: 1.25;
margin-bottom: 15px;
min-width: 120px;
max-width: none;
padding: 6px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: auto;
@include prefix(transition, background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s);
&:hover, &:active, &:focus {
background-color: $txtColour;
color: $bgColour;
text-decoration: none;
}
}
\ No newline at end of file
/*===== VIEWS/ERROR =====*/
.__nuxt-error-page {
padding: 1rem;
background: #f7f8fb;
color: #47494e;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-family: sans-serif;
font-weight: 100!important;
-ms-text-size-adjust