Vue buefy
This commit is contained in:
parent
0c031101ae
commit
83cb509d80
871
form/res-judicata/package-lock.json
generated
871
form/res-judicata/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -8,6 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"buefy": "^0.9.0",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0"
|
||||
@ -20,6 +21,9 @@
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"node-sass": "^4.9.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
"vue-cli-plugin-buefy": "~0.3.8",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
152
form/res-judicata/src/assets/scss/_variables.scss
Normal file
152
form/res-judicata/src/assets/scss/_variables.scss
Normal file
@ -0,0 +1,152 @@
|
||||
// Included below are all the defined variables from Bulma
|
||||
// Modify as needed, removing the !default attribute.
|
||||
|
||||
// Colors
|
||||
|
||||
$black: hsl(0, 0%, 4%) !default;
|
||||
$black-bis: hsl(0, 0%, 7%) !default;
|
||||
$black-ter: hsl(0, 0%, 14%) !default;
|
||||
|
||||
$grey-darker: hsl(0, 0%, 21%) !default;
|
||||
$grey-dark: hsl(0, 0%, 29%) !default;
|
||||
$grey: hsl(0, 0%, 48%) !default;
|
||||
$grey-light: hsl(0, 0%, 71%) !default;
|
||||
$grey-lighter: hsl(0, 0%, 86%) !default;
|
||||
|
||||
$white-ter: hsl(0, 0%, 96%) !default;
|
||||
$white-bis: hsl(0, 0%, 98%) !default;
|
||||
$white: hsl(0, 0%, 100%) !default;
|
||||
|
||||
$orange: hsl(14, 100%, 53%) !default;
|
||||
$yellow: hsl(48, 100%, 67%) !default;
|
||||
$green: hsl(141, 71%, 48%) !default;
|
||||
$turquoise: hsl(171, 100%, 41%) !default;
|
||||
$cyan: hsl(204, 86%, 53%) !default;
|
||||
$blue: hsl(217, 71%, 53%) !default;
|
||||
$purple: hsl(271, 100%, 71%) !default;
|
||||
$red: hsl(348, 100%, 61%) !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
|
||||
$family-monospace: monospace !default;
|
||||
$render-mode: optimizeLegibility !default;
|
||||
|
||||
$size-1: 3rem !default;
|
||||
$size-2: 2.5rem !default;
|
||||
$size-3: 2rem !default;
|
||||
$size-4: 1.5rem !default;
|
||||
$size-5: 1.25rem !default;
|
||||
$size-6: 1rem !default;
|
||||
$size-7: 0.75rem !default;
|
||||
|
||||
$weight-light: 300 !default;
|
||||
$weight-normal: 400 !default;
|
||||
$weight-medium: 500 !default;
|
||||
$weight-semibold: 600 !default;
|
||||
$weight-bold: 700 !default;
|
||||
|
||||
// Responsiveness
|
||||
|
||||
// The container horizontal gap, which acts as the offset for breakpoints
|
||||
$gap: 32px !default;
|
||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||
$tablet: 769px !default;
|
||||
// 960px container + 4rem
|
||||
$desktop: 960px + (2 * $gap) !default;
|
||||
// 1152px container + 4rem
|
||||
$widescreen: 1152px + (2 * $gap) !default;
|
||||
// 1344px container + 4rem;
|
||||
$fullhd: 1344px + (2 * $gap) !default;
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
$easing: ease-out !default;
|
||||
$radius-small: 2px !default;
|
||||
$radius: 3px !default;
|
||||
$radius-large: 5px !default;
|
||||
$radius-rounded: 290486px !default;
|
||||
$speed: 86ms !default;
|
||||
|
||||
// Flags
|
||||
|
||||
$variable-columns: true !default;
|
||||
|
||||
|
||||
// The default Bulma derived variables are declared below
|
||||
|
||||
$primary: $turquoise !default;
|
||||
|
||||
$info: $cyan !default;
|
||||
$success: $green !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
|
||||
$light: $white-ter !default;
|
||||
$dark: $grey-darker !default;
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default;
|
||||
$yellow-invert: findColorInvert($yellow) !default;
|
||||
$green-invert: findColorInvert($green) !default;
|
||||
$turquoise-invert: findColorInvert($turquoise) !default;
|
||||
$cyan-invert: findColorInvert($cyan) !default;
|
||||
$blue-invert: findColorInvert($blue) !default;
|
||||
$purple-invert: findColorInvert($purple) !default;
|
||||
$red-invert: findColorInvert($red) !default;
|
||||
|
||||
$primary-invert: $turquoise-invert !default;
|
||||
$info-invert: $cyan-invert !default;
|
||||
$success-invert: $green-invert !default;
|
||||
$warning-invert: $yellow-invert !default;
|
||||
$danger-invert: $red-invert !default;
|
||||
$light-invert: $dark !default;
|
||||
$dark-invert: $light !default;
|
||||
|
||||
// General colors
|
||||
|
||||
$background: $white-ter !default;
|
||||
|
||||
$border: $grey-lighter !default;
|
||||
$border-hover: $grey-light !default;
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: $grey-dark !default;
|
||||
$text-invert: findColorInvert($text) !default;
|
||||
$text-light: $grey !default;
|
||||
$text-strong: $grey-darker !default;
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: $red !default;
|
||||
$code-background: $background !default;
|
||||
|
||||
$pre: $text !default;
|
||||
$pre-background: $background !default;
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: $blue !default;
|
||||
$link-invert: $blue-invert !default;
|
||||
$link-visited: $purple !default;
|
||||
|
||||
$link-hover: $grey-darker !default;
|
||||
$link-hover-border: $grey-light !default;
|
||||
|
||||
$link-focus: $grey-darker !default;
|
||||
$link-focus-border: $blue !default;
|
||||
|
||||
$link-active: $grey-darker !default;
|
||||
$link-active-border: $grey-dark !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: $family-sans-serif !default;
|
||||
$family-code: $family-monospace !default;
|
||||
|
||||
$size-small: $size-7 !default;
|
||||
$size-normal: $size-6 !default;
|
||||
$size-medium: $size-5 !default;
|
||||
$size-large: $size-4 !default;
|
||||
28
form/res-judicata/src/assets/scss/app.scss
Normal file
28
form/res-judicata/src/assets/scss/app.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import "~bulma/sass/utilities/initial-variables";
|
||||
@import "~bulma/sass/utilities/functions";
|
||||
// 1. Set your own initial variables and derived
|
||||
// variables in _variables.scss
|
||||
@import "variables";
|
||||
|
||||
// 2. Setup your Custom Colors
|
||||
$linkedin: #0077b5;
|
||||
$linkedin-invert: findColorInvert($linkedin);
|
||||
$twitter: #55acee;
|
||||
$twitter-invert: findColorInvert($twitter);
|
||||
$github: #333;
|
||||
$github-invert: findColorInvert($github);
|
||||
|
||||
@import "~bulma/sass/utilities/derived-variables";
|
||||
|
||||
// 3. Add new color variables to the color map.
|
||||
$addColors: (
|
||||
"twitter":($twitter, $twitter-invert),
|
||||
"linkedin": ($linkedin, $linkedin-invert),
|
||||
"github": ($github, $github-invert)
|
||||
);
|
||||
$colors: map-merge($colors, $addColors);
|
||||
|
||||
@import "~bulma";
|
||||
@import "~buefy/src/scss/buefy";
|
||||
|
||||
// 4. Provide custom buefy overrides and site styles here
|
||||
@ -1,6 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import Buefy from 'buefy'
|
||||
import './assets/scss/app.scss'
|
||||
|
||||
Vue.use(Buefy)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user