diff --git a/src/index.html b/src/index.html index ec3f604..6fb6463 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,8 @@ Document - + + @@ -47,7 +48,149 @@ + - +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#NameJob PositionSinceSalaryActions
1Andrew MikeDevelop2013€ 99,225 + + + +
2John DoeDesign2012€ 89,241 + + + +
3Alex MikeDesign2010€ 92,144 + + + +
+ + + \ No newline at end of file diff --git a/src/scss/argon-theme.scss b/src/scss/argon-theme.scss index 9a11a16..98b43fd 100644 --- a/src/scss/argon-theme.scss +++ b/src/scss/argon-theme.scss @@ -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'; diff --git a/src/scss/argon/_variables.scss b/src/scss/argon/_variables.scss index 139f5d7..0570a00 100644 --- a/src/scss/argon/_variables.scss +++ b/src/scss/argon/_variables.scss @@ -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; diff --git a/src/scss/argon/custom/_forms.scss b/src/scss/argon/custom/_forms.scss new file mode 100644 index 0000000..06ef67d --- /dev/null +++ b/src/scss/argon/custom/_forms.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/scss/argon/custom/_pagination.scss b/src/scss/argon/custom/_pagination.scss new file mode 100644 index 0000000..3826dd4 --- /dev/null +++ b/src/scss/argon/custom/_pagination.scss @@ -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; +// } +// } +// } \ No newline at end of file