-
-
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Go somewhere
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
Last updated 3 mins ago
+
+
+
+
+
+
Card title
+
This card has supporting text below as a natural lead-in to additional content.
+
Last updated 3 mins ago
+
+
+
+
+
+
Card title
+
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.
+
Last updated 3 mins ago
+
diff --git a/src/scss/argon.scss b/src/scss/argon.scss
index aadf799..67a7d4f 100644
--- a/src/scss/argon.scss
+++ b/src/scss/argon.scss
@@ -1,14 +1,26 @@
-@import "~bootstrap/scss/functions";
+
+// Bootstrap functions
+@import '~bootstrap/scss/functions';
+
+// Argon varialbes
@import "argon/variables";
@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-
+// 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";
\ No newline at end of file
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/utilities";
+
+// Argon components
+@import 'argon/custom/buttons';
+@import 'argon/custom/cards';
+
diff --git a/src/scss/argon/_variables.scss b/src/scss/argon/_variables.scss
index 30cdcfa..446ae8d 100644
--- a/src/scss/argon/_variables.scss
+++ b/src/scss/argon/_variables.scss
@@ -1,63 +1,222 @@
-// Cards
-// $card-spacer-y: .75rem !default;
-// $card-spacer-x: 1.25rem !default;
-// $card-border-width: $border-width !default;
-// $card-border-radius: $border-radius !default;
-// $card-border-color: rgba($black, .125) !default;
-// $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
-// $card-cap-bg: rgba($black, .03) !default;
-// $card-cap-color: null !default;
-// $card-height: null !default;
-// $card-color: null !default;
-// $card-bg: $white !default;
+// Color system
+$white: #fff !default;
+$gray-100: #f6f9fc !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #8898aa !default; // Line footer color
+$gray-700: #525f7f !default; // Line p color
+$gray-800: #32325d !default; // Line heading color
+$gray-900: #212529 !default;
+$black: #000 !default;
-// $card-img-overlay-padding: 1.25rem !default;
+$blue: #5e72e4 !default;
+$indigo: #5603ad !default;
+$purple: #8965e0 !default;
+$pink: #f3a4b5 !default;
+$red: #f5365c !default;
+$orange: #fb6340 !default;
+$yellow: #ffd600 !default;
+$green: #2dce89 !default;
+$teal: #11cdef !default;
+$cyan: #2bffc6 !default;
-// $card-group-margin: $grid-gutter-width / 2 !default;
-// $card-deck-margin: $card-group-margin !default;
+$colors: () !default;
+$colors: map-merge((
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "white": $white,
+ "gray": $gray-600,
+ "light": $gray-400,
+ "lighter": $gray-200,
+ "gray-dark": $gray-800
+), $colors);
-// $card-columns-count: 3 !default;
-// $card-columns-gap: 1.25rem !default;
-// $card-columns-margin: $card-spacer-y !default;
+$default: #172b4d !default;
+$primary: #5e72e4 !default;
+$secondary: #f4f5f7 !default;
+$success: $green !default;
+$info: $teal !default;
+$warning: $orange !default;
+$danger: $red !default;
+$light: $gray-500 !default;
+$dark: $gray-900 !default;
+$darker: darken($gray-900, 15%) !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+ "default": $default,
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "white": $white,
+ "neutral": $white,
+ "dark": $dark,
+ "darker": $darker
+), $theme-colors);
+
+
+// Options
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: true !default; ///
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-prefers-reduced-motion-media-query: true !default;
+$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes: true !default;
+$enable-pointer-cursor-for-buttons: true !default;
+$enable-print-styles: true !default;
+$enable-responsive-font-sizes: false !default;
+$enable-validation-icons: true !default;
+$enable-deprecation-messages: true !default;
+
+
+// Grid columns
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+$grid-row-columns: 6 !default;
+
+
+// Components
+
+$line-height-lg: 1.5 !default;
+$line-height-sm: 1.5 !default;
+
+$border-width: 1px !default;
+$border-color: $gray-300 !default;
+
+$border-radius: .25rem !default; /// Adjust
+$border-radius-xl: .35rem !default; /// New
+$border-radius-lg: .3rem !default; /// Adjust
+$border-radius-sm: .2rem !default; /// Adjust
+
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+
+$component-active-color: $white !default;
+$component-active-bg: theme-color("primary") !default;
+
+$transition-base: all .15s ease !default;
+$transition-fade: opacity .15s linear !default;
+$transition-collapse: height .35s ease !default;
+
+
+// Typography
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-base: 1rem !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+$font-size-sm: $font-size-base * .875 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: 1.5 !default;
+
+
+// Buttons + Forms
+
+$input-btn-padding-y: .375rem !default;
+$input-btn-padding-x: .75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: .2rem !default;
+$input-btn-focus-color: rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: .25rem !default;
+$input-btn-padding-x-sm: .5rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+$input-btn-line-height-sm: $line-height-sm !default;
+
+$input-btn-padding-y-lg: .5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+
+$input-btn-border-width: $border-width !default;
+
+
+// Buttons
+
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+$btn-line-height-sm: $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+
+$btn-text-transform: none !default; /// New
+$btn-letter-spacing: .025em !default; /// New
+$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !default;
+$btn-focus-box-shadow: $btn-hover-box-shadow !default;
/// Cards
-$card-spacer-y: 1.25rem !default;
-$card-spacer-x: 1.5rem !default;
-// $card-border-width: $border-width !default;
-// $card-border-radius: $border-radius !default;
-// $card-border-color: rgba($black, .05) !default;
-// $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
-// $card-cap-bg: rgba($black, .03) !default;
-// $card-cap-color: null !default;
-// $card-height: null !default;
-// $card-color: null !default;
-// $card-bg: $white !default;
-
-// $card-img-overlay-padding: 1.25rem !default;
-
-// $card-group-margin: $grid-gutter-width / 2 !default;
-// $card-deck-margin: $card-group-margin !default;
-
-// $card-columns-count: 3 !default;
-// $card-columns-gap: 1.25rem !default;
-// $card-columns-margin: $card-spacer-y !default;
-
-
-// $card-spacer-y: 1.25rem !default;
-// $card-spacer-x: 1.5rem !default;
-// $card-border-width: $border-width !default;
-// $card-border-radius: $border-radius !default;
-// $card-border-color: rgba($black, .05) !default;
-// $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
-// $card-cap-bg: $white !default;
-// $card-bg: $white !default;
-// $card-box-shadow: $box-shadow !default;
-
-// $card-img-overlay-padding: 1.25rem !default;
-
-// $card-columns-count: 3 !default;
-// $card-columns-gap: 1.25rem !default;
-// $card-columns-margin: $card-spacer-y !default;
+$card-spacer-y: 1.25rem !default; /// Adjust
+$card-spacer-x: 1.5rem !default; /// Adjust
+$card-border-width: $border-width !default;
+$card-border-radius: $border-radius !default;
+$card-border-color: rgba($black, .05) !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-bg: rgba($black, .03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $white !default;
+
+$card-img-overlay-padding: 1.25rem !default;
+
+$card-group-margin: $grid-gutter-width / 2 !default;
+$card-deck-margin: $card-group-margin !default;
+
+$card-columns-count: 3 !default;
+$card-columns-gap: 1.25rem !default;
+$card-columns-margin: $card-spacer-y !default;
+
+$card-box-shadow: $box-shadow !default; /// New
diff --git a/src/scss/argon/custom/_buttons.scss b/src/scss/argon/custom/_buttons.scss
new file mode 100644
index 0000000..f50fa12
--- /dev/null
+++ b/src/scss/argon/custom/_buttons.scss
@@ -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%);
+}
diff --git a/src/scss/argon/custom/_cards.scss b/src/scss/argon/custom/_cards.scss
new file mode 100644
index 0000000..be8e066
--- /dev/null
+++ b/src/scss/argon/custom/_cards.scss
@@ -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;
+ }
+}