Update button style.
This commit is contained in:
Bryan
parent
d33d343a4a
commit
42feab641f
8 changed files with 28405 additions and 9 deletions
27
.gitignore 2
Normal file
27
.gitignore 2
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Misc
|
||||
coverage/*
|
||||
junit.xml
|
||||
19
README 2.md
Normal file
19
README 2.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# fmg-funnel-2021
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
5
babel.config 2.js
Normal file
5
babel.config 2.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
52
package 2.json
Normal file
52
package 2.json
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "Safelite",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.1.1",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/prettier"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-vars": "off"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
28264
package-lock 2.json
Normal file
28264
package-lock 2.json
Normal file
File diff suppressed because it is too large
Load diff
19
src/assets/scss/components/_buttons.scss
Normal file
19
src/assets/scss/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.btn {
|
||||
&.btn-secondary {
|
||||
position: relative;//Required for :after pseduo to position correctly
|
||||
margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
|
||||
border-radius: 8px;//To match Figma border radius
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: calc(100% + 12px);
|
||||
height: calc(100% + 12px);
|
||||
border: 3px solid $secondary;
|
||||
background-color: $white;
|
||||
border-radius: 12px;
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,3 +18,4 @@
|
|||
|
||||
//Custom Components CSS
|
||||
@import "./components/_navbar";
|
||||
@import "./components/_buttons";
|
||||
|
|
|
|||
|
|
@ -16,16 +16,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-3">Buttons</h4>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h4 class="mt-3">Buttons</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue