BobsonLin
/
custom-bootstrap4
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

2020.12.10 sass

Browse Source 
1.新增變數
2.新增forms,pagination
pull/1/head
Ron.wang 3 years ago
parent a0879cb8d9
commit 2f5e9f08c7
5 changed files with 381 additions and 3 deletions
Show Stats Download Patch File Download Diff File

147
src/index.html
Unescape Escape View File

@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/argon-theme.css">
</head>
<body>
@ -47,7 +48,149 @@
</div>
</div>
</div>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<i class="fa fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</body>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Regular" class="form-control" disabled />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
</div>
<input class="form-control" placeholder="Search" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group mb-4">
<input class="form-control" placeholder="Birthday" type="text">
<div class="input-group-append">
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group has-success">
<input type="text" placeholder="Success" class="form-control is-valid" />
</div>
</div>
<div class="col-md-6">
<div class="form-group has-danger">
<input type="email" placeholder="Error Input" class="form-control is-invalid" />
</div>
</div>
</div>
</form>
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Job Position</th>
<th>Since</th>
<th class="text-right">Salary</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Andrew Mike</td>
<td>Develop</td>
<td>2013</td>
<td class="text-right">&euro; 99,225</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>John Doe</td>
<td>Design</td>
<td>2012</td>
<td class="text-right">&euro; 89,241</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Alex Mike</td>
<td>Design</td>
<td>2010</td>
<td class="text-right">&euro; 92,144</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm btn-simple" data-original-title="" title="">
<i class="ni ni-circle-08 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm btn-simple" data-original-title="" title="">
<i class="ni ni-settings-gear-65 pt-1"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm btn-simple" data-original-title="" title="">
<i class="ni ni-fat-remove pt-1"></i>
</button>
</td>
</tr>
</tbody>
</table>
</body>
<style>
html{
font-family: ;
}
</style>
</html>

9
src/scss/argon-theme.scss
Unescape Escape View File

@ -19,8 +19,17 @@
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/card";
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/pagination";
@import "../../node_modules/bootstrap/scss/forms";
@import "../../node_modules/bootstrap/scss/tables";
// Argon components
@import 'argon/custom/forms';
@import 'argon/custom/table';
@import 'argon/custom/pagination';
@import 'argon/custom/buttons';
@import 'argon/custom/cards';

47
src/scss/argon/_variables.scss
Unescape Escape View File

@ -25,6 +25,24 @@ $teal: #11cdef;
$cyan: #2bffc6;
$default: #172b4d ;
$primary: #5e72e4 ;
$secondary: #f4f5f7 ;
$success: $green ;
$info: $teal ;
$warning: $orange ;
$danger: $red ;
$light: $gray-500 ;
$dark: $gray-900 ;
$darker: darken($gray-900, 15%) ;
$theme-colors: (
"default": $default,
) ;
// Options
$enable-shadows: true; /// Adjust
@ -44,6 +62,11 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, .175);
$transition-base: all .15s ease; /// Adjust
// Buttons
$btn-text-transform: none; /// New
@ -56,5 +79,27 @@ $btn-focus-box-shadow: $btn-hover-box-shadow;
$card-spacer-y: 1.25rem; /// Adjust
$card-spacer-x: 1.5rem; /// Adjust
$card-box-shadow: $box-shadow; /// New
// Pagination
$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
$pagination-active-box-shadow: $btn-hover-box-shadow ;
// Form
$input-focus-placeholder-color: $gray-500 ;
$input-muted-bg: #EDF0F5 ;
$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
$form-feedback-valid-bg: lighten($success, 15%);
$form-feedback-valid-color: theme-color("success") ;
$form-feedback-invalid-bg: lighten($warning, 15%);
$form-feedback-invalid-color: theme-color("warning") ;
// font-family
// $headings-font-family: DFKai-sb;
// $font-family-base:DFKai-sb;

141
src/scss/argon/custom/_forms.scss
Unescape Escape View File

@ -0,0 +1,141 @@
/* Form controls */
label {
font-size: $font-size-sm;
}
.form-control {
font-size: $input-btn-font-size;
transition: $transition-base;
&:focus {
&::placeholder {
color: $input-focus-placeholder-color;
}
}
&.is-valid,
&.is-invalid {
background-image: none;
}
}
/* Textareas */
textarea[resize="none"] {
resize: none!important;
}
textarea[resize="both"] {
resize: both!important;
}
textarea[resize="vertical"] {
resize: vertical!important;
}
textarea[resize="horizontal"] {
resize: horizontal!important;
}
/* Alternative styles */
.form-control-muted {
background-color: $input-muted-bg;
border-color: $input-muted-bg;
box-shadow: none;
&:focus {
background-color: $input-muted-bg;
}
}
.form-control-alternative {
box-shadow: $input-alternative-box-shadow;
border: 0;
transition: box-shadow .15s ease;
&:focus {
box-shadow: $input-focus-alternative-box-shadow;
}
}
// Sizes
.form-control-lg {
font-size: $font-size-base;
}
// Validation
.has-success,
.has-danger {
position: relative;
&:after {
width: 19px;
height: 19px;
line-height: 19px;
text-align: center;
font-family: 'NucleoIcons';
display: inline-block;
position: absolute;
right: 15px;
top: 2px;
transform: translateY(50%);
border-radius: 50%;
font-size: 9px;
opacity: 1;
}
.form-control-alternative {
&.is-valid,
&.is-invalid {
&:focus {
box-shadow: $input-focus-alternative-box-shadow !important;
}
}
}
}
.has-success {
&:after {
content: "\ea26";
color: daken($form-feedback-valid-color, 18%);
background-color: $form-feedback-valid-bg;
}
.form-control {
background-color: $input-focus-bg;
&:focus {
border-color: $input-focus-border-color;
}
// Placeholder
&::placeholder {
color: $form-feedback-valid-color;
}
}
}
.has-danger {
&:after {
content: "\ea53";
color: daken($form-feedback-invalid-color, 18%);
background-color: $form-feedback-invalid-bg;
}
.form-control {
background-color: $input-focus-bg;
&:focus {
border-color: $input-focus-border-color;
}
// Placeholder
&::placeholder {
color: $form-feedback-invalid-color;
}
}
}

40
src/scss/argon/custom/_pagination.scss
Unescape Escape View File

@ -0,0 +1,40 @@
.page-item {
&.active .page-link {
box-shadow: $pagination-active-box-shadow;
}
.page-link,
span {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0 3px;
border-radius: 20% !important;
width: 36px;
height: 36px;
font-size: $font-size-sm;
}
}
// .pagination-lg {
// .page-item {
// .page-link,
// span {
// width: 46px;
// height: 46px;
// line-height: 46px;
// }
// }
// }
// .pagination-sm {
// .page-item {
// .page-link,
// span {
// width: 30px;
// height: 30px;
// line-height: 30px;
// }
// }
// }
Write Preview
Loading…
Cancel
Save