rancher
/
dashboard
mirror of https://github.com/rancher/dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

start of theme. darren says make super dark

This commit is contained in:
lvuch 2019-08-23 21:41:48 -07:00
parent 62419b9a8c
commit aef5f32573
10 changed files with 175 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/styles/app.scss
View File

@ -6,6 +6,7 @@
@import "./base/helpers";
@import "./base/color";
@import "./base/basic";
@import "./base/typography";
@import "./fonts/fira";
@import "./fonts/dots";

150
assets/styles/base/_typography.scss Normal file
View File

@ -0,0 +1,150 @@
// -----------------------------------------------------------------------------
// This file contains typography styles.
// -----------------------------------------------------------------------------
//
HTML {
box-sizing: border-box;
height: 100%;
}
html, body {
font-size: 12px;
}
h1, h2, h3, h4, h5, h6 {
color: var(--body-text);
font-family: 'Fira Sans';
font-weight: 300;
}
h1 {
margin-bottom: 3rem;
font-family: Fira Sans;
font-size: 3.2382850718749987em;
line-height: 6rem;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
}
h2 {
margin-bottom: 3rem;
font-family: Fira Sans;
font-size: 2.815900062499999em;
line-height: 3rem;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
}
h3 {
margin-bottom: 3rem;
font-family: Fira Sans;
font-size: 2.448608749999999em;
line-height: 3rem;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
}
h4 {
margin-bottom: 3rem;
font-family: Fira Sans;
font-size: 2.1292249999999995em;
line-height: 3rem;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
}
h5 {
margin-bottom: 3rem;
font-family: Fira Sans;
font-size: 1.8514999999999995em;
line-height: 3rem;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
}
h6 {
margin-bottom: 3rem;
font-family: Fira Sans;
font-size: 1.25em;
line-height: 3rem;
font-weight: 300;
font-style: normal;
letter-spacing: .25em;
text-transform: uppercase;
}
p {
margin-bottom: 3rem;
font-family: Fira Sans;
font-size: 1.4em;
line-height: 3rem;
font-weight: 400;
font-style: normal;
letter-spacing: 0em;
}
@media screen and (max-width: 720px) {
h1 {
margin-bottom: 3rem;
font-size: 6.103515625em;
line-height: 9rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0em;
}
h2 {
margin-bottom: 3rem;
font-size: 4.8828125em;
line-height: 6rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0em;
}
h3 {
margin-bottom: 3rem;
font-size: 3.90625em;
line-height: 6rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0em;
}
h4 {
margin-bottom: 3rem;
font-size: 3.125em;
line-height: 6rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0em;
}
h5 {
margin-bottom: 3rem;
font-size: 2.5em;
line-height: 3rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0em;
}
h6 {
margin-bottom: 3rem;
font-size: 2em;
line-height: 3rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0em;
}
p {
margin-bottom: 3rem;
font-family: Lora;
font-size: 1.6em;
line-height: 3rem;
font-weight: 400;
font-style: normal;
letter-spacing: 0em;
}
}

2
assets/styles/base/_variables.scss
View File

@ -1,7 +1,7 @@
$max-width: 1440px !default;
$min-width: 75% !default;
$outline-width: 4px;
$outline-width: 0;
$z-indexes: (
default: 1,

4
assets/styles/global/_button.scss
View File

@ -20,7 +20,7 @@ button,
user-select: none;
border: 0 solid transparent;
padding: $btn-padding;
border-radius: 4px;
border-radius: $border-radius;
&:hover {
text-decoration: none;
@ -99,7 +99,7 @@ fieldset[disabled] .btn {
padding: 0;
overflow: hidden;
background: var(--input-bg);
border-radius: 4px;
border-radius: $border-radius;
border: 4px solid transparent;
.btn, .btn-xs, .btn-sm, .btn-lg {

4
assets/styles/global/_form.scss
View File

@ -13,7 +13,7 @@ TEXTAREA {
display: block;
box-sizing: border-box;
width: 100%;
padding: 9px 12px 8px;
padding: 8.5px;
color: var(--input-text);
background: var(--input-bg);
@ -23,7 +23,7 @@ TEXTAREA {
border-radius: $border-radius;
border-style: solid;
border-color: transparent;
font-size: 15px;
// font-size: 15px;
&::placeholder {
color: var(--input-placeholder);

8
assets/styles/themes/_dark.scss
View File

@ -1,8 +1,8 @@
.theme-dark {
// Local variables for reused colors
$secondary: #9c9fa4;
$disabled: #7c8084;
$link: #6cb4b9;
// $secondary: #9c9fa4;
// $disabled: #7c8084;
// $link: #6cb4b9;
//Contrast colors
$contrasted-dark: $lightest !default;
@ -30,7 +30,7 @@
--login-bg: #{$darkest};
--body-bg: #{$darker};
--body-text: white;
--header-bg: #{$dark};
--header-bg: #{$primary};
--box-bg: #{$darker};
--border: #{$darker};
--nav-select: #{$darker};

22
assets/styles/themes/_light.scss
View File

@ -4,24 +4,24 @@ $lighter: #BABFC5;
$light: #9B9FA5;
$medium: #7B8085;
$dark: #5B6064;
$darker: #3C4044;
$darkest: #2D3033;
$darker: #1F1D25;
$darkest: #131217;
$contrasted-dark: $darkest !default;
$contrasted-light: $lightest !default;
$primary: #12BE72;
$primary: #3D98D3;
$secondary: $darkest;
$link: #6cb4b9;
$link: $primary;
$disabled: $medium;
$success: #9ebb85;
$info: #d7c25a;
$warning: #d7c25a;
$error: #de5347;
$success: #96BD7F;
$info: #16A085;
$warning: #DAC342;
$error: #EF5A53;
$selected: rgba($primary, .5);
$border-radius: 4px;
$border-radius: 3px;
:root {
// Colors that will have text- and bg- helper classes created
@ -48,8 +48,8 @@ $border-radius: 4px;
--body-bg: white;
--body-text: black;
--disabled-bg: #{$disabled};
--header-bg: #f1f2f3;
--nav-bg: #f1f2f3;
--header-bg: $primary;
--nav-bg: $primary;
--nav-bg2: #e1e2e3;
--nav-bg3: #d1d2d3;
--footer-bg: #f1f2f3;

2
components/Accordion.vue
View File

@ -49,7 +49,7 @@ export default {
<style lang="scss" scoped>
.header {
background-color: var(--nav-pkg);
//background-color: var(--nav-pkg);
border-bottom: solid thin var(--border);
font-size: 14px;
padding: 10px;

2
layouts/default.vue
View File

@ -83,7 +83,7 @@ export default {
<nav>
<div v-for="pkg in packages" :key="pkg.name" class="package">
<h4>{{ pkg.label }}</h4>
<h6>{{ pkg.label }}</h6>
<hr />
<Accordion
v-for="group in pkg.groups"

3
static/fonts/icons/demo-files/demo.css
View File

@ -1,4 +1,4 @@
body {
/*body {
padding: 0;
margin: 0;
font-family: sans-serif;
@ -150,3 +150,4 @@ p {
font-size: 32px;
}
*/