Merge branch 'try-argon'

master
Bobson Lin 3 years ago
commit 1b32023fd7

@ -0,0 +1,28 @@
## 使用 Webpack 5 打包
#### 初始專案(沒有 node_modules 資料夾)
```
yarn install
```
#### 開發專案
```
yarn watch
```
or
```
yarn build:dev
```
## 編譯 sass/scss 檔案
```
yarn compile:sass
```

@ -1,7 +1,8 @@
{
"scripts": {
"compile:sass": "node-sass src/scss/custom.scss css/style.css",
"build": "webpack --mode development"
"compile:sass": "node-sass src/scss/argon-theme.scss css/argon.css",
"build:dev": "webpack --mode=development",
"watch": "webpack --mode=development --watch"
},
"dependencies": {
"bootstrap": "^4.5.3"

@ -5,15 +5,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<h1 class="text-primary">Hello</h1>
<h2 class="text-success">World</h2>
<div class="mt-2">
<button type="button" class="btn btn-default">Default</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-info">Info</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>
</div>
<button class="btn btn-primary">Test</button>
<div class="mt-2 card-deck">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</body>

@ -1 +1 @@
import './scss/all.scss';
import './scss/argon.scss';

@ -0,0 +1,27 @@
// Bootstrap functions
@import '../../node_modules/bootstrap/scss/functions';
// Argon varialbes
@import "../../node_modules/bootstrap/scss/variables";
// @import "argon/variables";
@import "argon/argon_variables";
// Argon mixins
// @import "argon/mixins";
@import "../../node_modules/bootstrap/scss/mixins";
// Bootstrap components
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/card";
@import "../../node_modules/bootstrap/scss/utilities";
// Argon components
@import 'argon/custom/buttons';
@import 'argon/custom/cards';

@ -0,0 +1,25 @@
// Bootstrap functions
@import '~bootstrap/scss/functions';
// Argon varialbes
@import "argon/variables";
@import "~bootstrap/scss/variables";
// Argon mixins
// @import "argon/mixins";
@import "~bootstrap/scss/mixins";
// Bootstrap components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/utilities";
// Argon components
@import 'argon/custom/buttons';
@import 'argon/custom/cards';

@ -0,0 +1,60 @@
// Color system
$white: #fff;
$gray-100: #f6f9fc;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #8898aa; // Line footer color
$gray-700: #525f7f; // Line p color
$gray-800: #32325d; // Line heading color
$gray-900: #212529;
$black: #000;
$blue: #5e72e4;
$indigo: #5603ad;
$purple: #8965e0;
$pink: #f3a4b5;
$red: #f5365c;
$orange: #fb6340;
$yellow: #ffd600;
$green: #2dce89;
$teal: #11cdef;
$cyan: #2bffc6;
// Options
$enable-shadows: true; /// Adjust
// Components
$border-radius: .25rem; /// Adjust
$border-radius-xl: .35rem; /// New
$border-radius-lg: .3rem; /// Adjust
$border-radius-sm: .2rem; /// Adjust
$box-shadow: 0 .5rem 1rem rgba($black, .15);
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
$transition-base: all .15s ease; /// Adjust
// Buttons
$btn-text-transform: none; /// New
$btn-letter-spacing: .025em; /// New
$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
$btn-focus-box-shadow: $btn-hover-box-shadow;
/// Cards
$card-spacer-y: 1.25rem; /// Adjust
$card-spacer-x: 1.5rem; /// Adjust
$card-box-shadow: $box-shadow; /// New

@ -0,0 +1,28 @@
// General
.btn {
position: relative;
text-transform: $btn-text-transform;
transition: $transition-base;
will-change: transform;
letter-spacing: $btn-letter-spacing;
font-size: $input-btn-font-size;
&:hover {
@include box-shadow($btn-hover-box-shadow);
transform: translateY(-1px);
}
&:disabled {
cursor: not-allowed;
}
&:not(:last-child) {
margin-right: .5rem;
}
}
// Fix
.btn-outline-secondary {
color: darken(theme-color("secondary"), 50%);
}

@ -0,0 +1,28 @@
.card {
margin-bottom: $grid-gutter-width;
@if $enable-shadows {
box-shadow: $card-box-shadow;
border: 0;
}
}
// Animated cards
.card-lift--hover {
cursor: pointer;
&:hover {
transform: translateY(-8px);
@include transition($transition-base);
}
}
// Card with shdadow
.card {
&.shadow {
border: 0 !important;
}
}
Loading…
Cancel
Save