├── .env ├── src ├── assets │ ├── scss │ │ ├── argon-design-system │ │ │ ├── content.scss │ │ │ ├── accordion.scss │ │ │ ├── carousel.scss │ │ │ ├── grid.scss │ │ │ ├── utilities │ │ │ │ ├── sizing.scss │ │ │ │ ├── transform.scss │ │ │ │ ├── position.scss │ │ │ │ ├── shadows.scss │ │ │ │ ├── floating.scss │ │ │ │ ├── backgrounds.scss │ │ │ │ ├── helper.scss │ │ │ │ ├── text.scss │ │ │ │ └── spacing.scss │ │ │ ├── vendors.scss │ │ │ ├── mixins │ │ │ │ ├── icon.scss │ │ │ │ ├── alert.scss │ │ │ │ ├── badge.scss │ │ │ │ ├── modals.scss │ │ │ │ ├── popover.scss │ │ │ │ ├── background-variant.scss │ │ │ │ ├── forms.scss │ │ │ │ └── buttons.scss │ │ │ ├── reboot.scss │ │ │ ├── mixins.scss │ │ │ ├── docs.scss │ │ │ ├── popover.scss │ │ │ ├── utilities.scss │ │ │ ├── docs │ │ │ │ ├── variables.scss │ │ │ │ ├── footer.scss │ │ │ │ ├── clipboard-js.scss │ │ │ │ ├── nav.scss │ │ │ │ ├── prism.scss │ │ │ │ └── sidebar.scss │ │ │ ├── modal.scss │ │ │ ├── vendor │ │ │ │ ├── headroom.scss │ │ │ │ └── scrollbar.scss │ │ │ ├── functions.scss │ │ │ ├── close.scss │ │ │ ├── list-group.scss │ │ │ ├── pagination.scss │ │ │ ├── avatar.scss │ │ │ ├── kit-free.scss │ │ │ ├── badge.scss │ │ │ ├── dropdown.scss │ │ │ ├── input-group.scss │ │ │ ├── theme.scss │ │ │ ├── progress.scss │ │ │ ├── type.scss │ │ │ ├── alert.scss │ │ │ ├── nav.scss │ │ │ ├── icons.scss │ │ │ ├── footer.scss │ │ │ ├── card.scss │ │ │ ├── forms.scss │ │ │ ├── separator.scss │ │ │ ├── buttons.scss │ │ │ ├── global.scss │ │ │ └── custom-forms.scss │ │ ├── react │ │ │ ├── custom │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _separator.scss │ │ │ │ ├── _navbar.scss │ │ │ │ ├── _popover.scss │ │ │ │ └── _dropdown.scss │ │ │ └── react-differences.scss │ │ └── argon-design-system-react.scss │ ├── img │ │ ├── brand │ │ │ ├── blue.png │ │ │ ├── white.png │ │ │ ├── favicon.png │ │ │ ├── argon-react.png │ │ │ ├── argon-react-white.png │ │ │ └── creativetim-white-slim.png │ │ ├── theme │ │ │ ├── landing.jpg │ │ │ ├── profile.jpg │ │ │ ├── promo-1.png │ │ │ ├── img-1-1200x1000.jpg │ │ │ ├── img-2-1200x1000.jpg │ │ │ ├── team-1-800x800.jpg │ │ │ ├── team-2-800x800.jpg │ │ │ ├── team-3-800x800.jpg │ │ │ └── team-4-800x800.jpg │ │ └── icons │ │ │ └── common │ │ │ ├── github.svg │ │ │ └── google.svg │ └── vendor │ │ ├── nucleo │ │ ├── fonts │ │ │ ├── nucleo-icons.eot │ │ │ ├── nucleo-icons.ttf │ │ │ ├── nucleo-icons.woff │ │ │ └── nucleo-icons.woff2 │ │ └── css │ │ │ └── nucleo-svg.css │ │ └── font-awesome │ │ └── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 ├── views │ ├── IndexSections │ │ ├── Labels.js │ │ ├── Progress.js │ │ ├── Alerts.js │ │ ├── Carousel.js │ │ ├── Pills.js │ │ ├── Icons.js │ │ ├── Pagination.js │ │ ├── Hero.js │ │ ├── TooltipPopover.js │ │ ├── Datepicker.js │ │ ├── Download.js │ │ ├── Buttons.js │ │ └── Inputs.js │ ├── Index.js │ └── examples │ │ ├── Profile.js │ │ └── Login.js ├── index.js └── components │ └── Footers │ ├── SimpleFooter.js │ └── CardsFooter.js ├── .gitignore ├── .npmrc ├── public ├── favicon.ico ├── apple-icon.png ├── manifest.json └── index.html ├── jsconfig.json ├── ISSUE_TEMPLATE.md ├── genezio.yaml ├── LICENSE ├── .github └── workflows │ └── main.yml ├── package.json └── CHANGELOG.md /.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/content.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/accordion.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | /node_modules 3 | package-lock.json 4 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/carousel.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap carousel 2 | -------------------------------------------------------------------------------- /src/assets/scss/react/custom/_mixins.scss: -------------------------------------------------------------------------------- 1 | :focus { 2 | outline: none; 3 | } 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /src/assets/scss/react/custom/_separator.scss: -------------------------------------------------------------------------------- 1 | .separator { 2 | z-index: unset; 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/scss/react/custom/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar .collapsing .navbar-toggler{ 2 | pointer-events: none; 3 | } 4 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/public/apple-icon.png -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/grid.scss: -------------------------------------------------------------------------------- 1 | @include media-breakpoint-up(lg) { 2 | .container-lg { 3 | max-width: 1160px; 4 | } 5 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/img/brand/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/brand/blue.png -------------------------------------------------------------------------------- /src/assets/img/brand/white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/brand/white.png -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/sizing.scss: -------------------------------------------------------------------------------- 1 | // Height values in vh 2 | 3 | .h-100vh { 4 | height: 100vh !important; 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/img/brand/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/brand/favicon.png -------------------------------------------------------------------------------- /src/assets/img/theme/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/landing.jpg -------------------------------------------------------------------------------- /src/assets/img/theme/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/profile.jpg -------------------------------------------------------------------------------- /src/assets/img/theme/promo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/promo-1.png -------------------------------------------------------------------------------- /src/assets/img/brand/argon-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/brand/argon-react.png -------------------------------------------------------------------------------- /src/assets/img/theme/img-1-1200x1000.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/img-1-1200x1000.jpg -------------------------------------------------------------------------------- /src/assets/img/theme/img-2-1200x1000.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/img-2-1200x1000.jpg -------------------------------------------------------------------------------- /src/assets/img/theme/team-1-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/team-1-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/theme/team-2-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/team-2-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/theme/team-3-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/team-3-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/theme/team-4-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/theme/team-4-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/brand/argon-react-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/brand/argon-react-white.png -------------------------------------------------------------------------------- /src/assets/img/brand/creativetim-white-slim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/img/brand/creativetim-white-slim.png -------------------------------------------------------------------------------- /src/assets/vendor/nucleo/fonts/nucleo-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/nucleo/fonts/nucleo-icons.eot -------------------------------------------------------------------------------- /src/assets/vendor/nucleo/fonts/nucleo-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/nucleo/fonts/nucleo-icons.ttf -------------------------------------------------------------------------------- /src/assets/vendor/nucleo/fonts/nucleo-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/nucleo/fonts/nucleo-icons.woff -------------------------------------------------------------------------------- /src/assets/vendor/nucleo/fonts/nucleo-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/nucleo/fonts/nucleo-icons.woff2 -------------------------------------------------------------------------------- /src/assets/vendor/font-awesome/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/font-awesome/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/vendor/font-awesome/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/font-awesome/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/vendor/font-awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/font-awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/vendors.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "vendor/datetimepicker"; 3 | @import "vendor/_bootstrap-datepicker"; 4 | @import "vendor/nouislider"; 5 | 6 | 7 | @import "vendor/headroom"; 8 | -------------------------------------------------------------------------------- /src/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/argon-design-system-react/HEAD/src/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/icon.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-shape-variant($color) { 2 | color: saturate(darken($color, 10%), 10); 3 | background-color: transparentize(lighten($color, 10%), .5); 4 | } -------------------------------------------------------------------------------- /src/assets/scss/react/custom/_popover.scss: -------------------------------------------------------------------------------- 1 | // Alternative colors 2 | @each $color, $value in $theme-colors { 3 | .popover-#{$color} .popover { 4 | @include popover-variant($value); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/reboot.scss: -------------------------------------------------------------------------------- 1 | iframe { 2 | border: 0; 3 | } 4 | 5 | figcaption, 6 | figure, 7 | main { 8 | display: block; 9 | } 10 | 11 | main { 12 | overflow: hidden; 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/alert"; 2 | @import "mixins/badge"; 3 | @import "mixins/background-variant"; 4 | @import "mixins/buttons"; 5 | @import "mixins/forms"; 6 | @import "mixins/icon"; 7 | @import "mixins/modals"; 8 | @import "mixins/popover"; 9 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/docs.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "docs/variables"; 3 | @import "docs/clipboard-js"; 4 | @import "docs/component-examples"; 5 | @import "docs/content"; 6 | @import "docs/footer"; 7 | @import "docs/nav"; 8 | @import "docs/prism"; 9 | @import "docs/sidebar"; 10 | -------------------------------------------------------------------------------- /src/assets/scss/react/custom/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @include media-breakpoint-down(md) { 2 | .dropdown-menu.show{ 3 | position: static !important; 4 | will-change: unset !important; 5 | top: 100% !important; 6 | left: 0px !important; 7 | transform: unset !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/popover.scss: -------------------------------------------------------------------------------- 1 | .popover { 2 | border: 0; 3 | } 4 | 5 | .popover-header { 6 | font-weight: $font-weight-bold; 7 | } 8 | 9 | // Alternative colors 10 | @each $color, $value in $theme-colors { 11 | .popover-#{$color} { 12 | @include popover-variant($value); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/backgrounds"; 2 | @import "utilities/floating"; 3 | @import "utilities/helper"; 4 | @import "utilities/position"; 5 | @import "utilities/sizing"; 6 | @import "utilities/spacing"; 7 | @import "utilities/shadows"; 8 | @import "utilities/text"; 9 | @import "utilities/transform"; 10 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/transform.scss: -------------------------------------------------------------------------------- 1 | @include media-breakpoint-up(lg) { 2 | .transform-perspective-right { 3 | transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); 4 | } 5 | .transform-perspective-left{ 6 | transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: color-yiq($background); 3 | @include gradient-bg($background); 4 | border-color: $border; 5 | 6 | hr { 7 | border-top-color: darken($border, 5%); 8 | } 9 | 10 | .alert-link { 11 | color: darken($color, 10%); 12 | } 13 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/position.scss: -------------------------------------------------------------------------------- 1 | @each $size, $value in $spacers { 2 | .top-#{$size} { 3 | top: $value; 4 | } 5 | .right-#{$size} { 6 | right: $value; 7 | } 8 | .bottom-#{$size} { 9 | bottom: $value; 10 | } 11 | .left-#{$size} { 12 | left: $value; 13 | } 14 | } 15 | 16 | .center { 17 | left: 50%; 18 | transform: translateX(-50%); 19 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/badge.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: saturate(darken($bg, 10%), 10); 3 | background-color: transparentize(lighten($bg, 25%), .5); 4 | 5 | &[href] { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | text-decoration: none; 9 | background-color: darken($bg, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Argon Design System React", 3 | "name": "Argon Design System React by Creative Tim", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/shadows.scss: -------------------------------------------------------------------------------- 1 | [class*="shadow"] { 2 | @if $enable-transitions { 3 | transition: $transition-base; 4 | } 5 | } 6 | 7 | .shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; } 8 | .shadow--hover:hover { box-shadow: $box-shadow !important; } 9 | .shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; } 10 | .shadow-none--hover:hover { box-shadow: none !important; } 11 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/modals.scss: -------------------------------------------------------------------------------- 1 | @mixin modal-variant($background) { 2 | .modal-title { 3 | color: color-yiq($background); 4 | } 5 | .modal-header, 6 | .modal-footer { 7 | border-color: rgba(color-yiq($background), .075); 8 | } 9 | .modal-content { 10 | background-color: $background; 11 | color: color-yiq($background); 12 | 13 | .heading { 14 | color: color-yiq($background); 15 | } 16 | } 17 | 18 | .close { 19 | &>span:not(.sr-only) { 20 | color: $white; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/docs/variables.scss: -------------------------------------------------------------------------------- 1 | // Local docs variables 2 | $ct-primary: theme-color("primary") !default; 3 | $ct-primary-bright: lighten(saturate($ct-primary, 5%), 15%) !default; 4 | $ct-primary-light: rgba(255, 255, 255, .9) !default; 5 | $ct-dark: #2a2730 !default; 6 | $ct-download: #ffe484 !default; 7 | $ct-info: #5bc0de !default; 8 | $ct-warning: #f0ad4e !default; 9 | $ct-danger: #d9534f !default; 10 | 11 | $ct-sidebar-bg: #f5f7f9; 12 | $ct-sidebar-border-color: #e6ecf1; 13 | 14 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/modal.scss: -------------------------------------------------------------------------------- 1 | .modal-content { 2 | border: 0; 3 | @if $enable-rounded { 4 | border-radius: $modal-content-border-radius; 5 | } @else { 6 | border-radius: 0; 7 | } 8 | } 9 | 10 | 11 | .modal-fluid { 12 | .modal-dialog { 13 | margin-top: 0; 14 | margin-bottom: 0; 15 | } 16 | .modal-content { 17 | border-radius: 0; 18 | } 19 | } 20 | 21 | @each $color, $value in $theme-colors { 22 | .modal-#{$color} { 23 | @include modal-variant($value); 24 | } 25 | } 26 | 27 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/vendor/headroom.scss: -------------------------------------------------------------------------------- 1 | .headroom { 2 | will-change: transform; 3 | background-color: inherit; 4 | @include transition($transition-base); 5 | } 6 | .headroom--pinned { 7 | @extend .position-fixed; 8 | transform: translateY(0%); 9 | } 10 | .headroom--unpinned { 11 | @extend .position-fixed; 12 | transform: translateY(-100%); 13 | } 14 | 15 | .headroom--not-top { 16 | padding-top: .5rem; 17 | padding-bottom: .5rem; 18 | background-color: theme-color("default") !important; 19 | box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1); 20 | } 21 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: argon-design-system-react 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: build 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | - npm run build 16 | yamlVersion: 2 17 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/functions.scss: -------------------------------------------------------------------------------- 1 | // Retrieve color Sass maps 2 | 3 | @function section-color($key: "primary") { 4 | @return map-get($section-colors, $key); 5 | } 6 | 7 | // Lines colors 8 | 9 | @function shapes-primary-color($key: "step-1-gradient-bg") { 10 | @return map-get($shapes-primary-colors, $key); 11 | } 12 | 13 | @function shapes-default-color($key: "step-1-gradient-bg") { 14 | @return map-get($shapes-default-colors, $key); 15 | } 16 | 17 | @function lines-light-color($key: "step-1-gradient-bg") { 18 | @return map-get($shapes-light-colors, $key); 19 | } 20 | 21 | @function shapes-dark-color($key: "step-1-gradient-bg") { 22 | @return map-get($shapes-dark-colors, $key); 23 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/vendor/scrollbar.scss: -------------------------------------------------------------------------------- 1 | .scrollbar-inner { 2 | height: 100%; 3 | 4 | &:not(:hover) .scroll-element { 5 | opacity: 0; 6 | } 7 | 8 | .scroll-element { 9 | transition: opacity 300ms; 10 | margin-right: 2px; 11 | 12 | .scroll-bar, 13 | .scroll-element_track { 14 | transition: background-color 300ms; 15 | } 16 | 17 | .scroll-element_track { 18 | background-color: transparent; 19 | } 20 | } 21 | 22 | .scroll-element.scroll-y { 23 | width: 3px; 24 | right: 0; 25 | } 26 | 27 | .scroll-element.scroll-x { 28 | height: 3px; 29 | bottom: 0; 30 | } 31 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/docs/footer.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Footer 3 | // 4 | .ct-footer { 5 | font-size: 85%; 6 | text-align: center; 7 | background-color: #f7f7f7; 8 | 9 | a { 10 | font-weight: 500; 11 | color: $gray-700; 12 | 13 | &:hover, 14 | &:focus { 15 | color: $link-color; 16 | } 17 | } 18 | 19 | p { 20 | margin-bottom: 0; 21 | } 22 | 23 | @include media-breakpoint-up(sm) { 24 | text-align: left; 25 | } 26 | } 27 | 28 | .ct-footer-links { 29 | padding-left: 0; 30 | margin-bottom: 1rem; 31 | 32 | li { 33 | display: inline-block; 34 | 35 | +li { 36 | margin-left: 1rem; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/popover.scss: -------------------------------------------------------------------------------- 1 | @mixin popover-variant($background) { 2 | 3 | background-color: $background; 4 | 5 | .popover-header { 6 | background-color: $background; 7 | color: color-yiq($background); 8 | } 9 | 10 | .popover-body { 11 | color: color-yiq($background); 12 | } 13 | .popover-header{ 14 | border-color: rgba(color-yiq($background), .2); 15 | } 16 | &.bs-popover-top { 17 | .arrow::after { 18 | border-top-color: $background; 19 | } 20 | } 21 | &.bs-popover-right { 22 | .arrow::after { 23 | border-right-color: $background; 24 | } 25 | } 26 | &.bs-popover-bottom { 27 | .arrow::after { 28 | border-bottom-color: $background; 29 | } 30 | } 31 | &.bs-popover-left { 32 | .arrow::after { 33 | border-left-color: $background; 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/close.scss: -------------------------------------------------------------------------------- 1 | .close { 2 | @if $enable-transitions { 3 | transition: $transition-base; 4 | } 5 | &>span:not(.sr-only) { 6 | background-color: $close-bg; 7 | color: $close-color; 8 | line-height: 17px; 9 | height: 1.25rem; 10 | width: 1.25rem; 11 | border-radius: 50%; 12 | font-size: 1.25rem; 13 | display: block; 14 | @if $enable-transitions { 15 | transition: $transition-base; 16 | } 17 | } 18 | 19 | &:hover, 20 | &:focus { 21 | background-color: $close-hover-bg; 22 | color: $close-hover-color; 23 | outline: none; 24 | 25 | span:not(.sr-only) { 26 | background-color: $close-hover-bg; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/docs/clipboard-js.scss: -------------------------------------------------------------------------------- 1 | // clipboard.js 2 | // 3 | // JS-based `Copy` buttons for code snippets. 4 | 5 | .ct-clipboard { 6 | position: relative; 7 | display: none; 8 | float: right; 9 | 10 | + .highlight { 11 | margin-top: 0; 12 | } 13 | } 14 | 15 | .btn-clipboard { 16 | position: absolute; 17 | top: 1rem; 18 | right: 1rem; 19 | z-index: 10; 20 | display: block; 21 | padding: .25rem .5rem; 22 | font-size: 75%; 23 | cursor: pointer; 24 | background-color: transparent; 25 | border: 0; 26 | border-radius: .25rem; 27 | color: #fff; 28 | background-color: $ct-primary; 29 | 30 | &:hover { 31 | color: #fff; 32 | background-color: darken($ct-primary, 10%); 33 | } 34 | } 35 | 36 | @media (min-width: 768px) { 37 | .ct-clipboard { 38 | display: block; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/list-group.scss: -------------------------------------------------------------------------------- 1 | // Space list items 2 | 3 | .list-group-space { 4 | .list-group-item { 5 | margin-bottom: 1.5rem; 6 | @include border-radius($list-group-border-radius); 7 | } 8 | } 9 | 10 | 11 | // List group components 12 | 13 | .list-group-img { 14 | width: 3rem; 15 | height: 3rem; 16 | border-radius: 50%; 17 | vertical-align: top; 18 | margin: -.1rem 1.2rem 0 -.2rem; 19 | } 20 | .list-group-content { 21 | -webkit-box-flex: 1; 22 | -ms-flex: 1; 23 | flex: 1; 24 | min-width: 0; 25 | } 26 | .list-group-content > p { 27 | color: $gray-500; 28 | line-height: 1.5; 29 | margin: .2rem 0 0; 30 | } 31 | .list-group-heading { 32 | font-size: $font-size-base; 33 | color: $gray-800; 34 | } 35 | .list-group-heading > small { 36 | float: right; 37 | color: $gray-500; 38 | font-weight: 500; 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/pagination.scss: -------------------------------------------------------------------------------- 1 | .page-item { 2 | &.active .page-link { 3 | box-shadow: $pagination-active-box-shadow; 4 | } 5 | 6 | .page-link, 7 | span { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | padding: 0; 12 | margin: 0 3px; 13 | border-radius: 50% !important; 14 | width: 36px; 15 | height: 36px; 16 | font-size: $font-size-sm; 17 | } 18 | } 19 | 20 | .pagination-lg { 21 | .page-item { 22 | .page-link, 23 | span { 24 | width: 46px; 25 | height: 46px; 26 | line-height: 46px; 27 | } 28 | } 29 | } 30 | 31 | .pagination-sm { 32 | .page-item { 33 | .page-link, 34 | span { 35 | width: 30px; 36 | height: 30px; 37 | line-height: 30px; 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/avatar.scss: -------------------------------------------------------------------------------- 1 | .avatar { 2 | color: $white; 3 | background-color: $gray-500; 4 | display: inline-flex; 5 | align-items: center; 6 | justify-content: center; 7 | font-size: 1rem; 8 | border-radius: 50%; 9 | height: 48px; 10 | width: 48px; 11 | } 12 | 13 | .avatar img { 14 | width: 100%; 15 | border-radius: 50%; 16 | } 17 | 18 | .avatar + .avatar-content { 19 | display: inline-block; 20 | margin-left: .75rem; 21 | } 22 | .avatar-lg { 23 | width: 58px; 24 | height: 58px; 25 | font-size: $font-size-sm; 26 | } 27 | 28 | .avatar-sm { 29 | width: 38px; 30 | height: 38px; 31 | font-size: $font-size-sm; 32 | } 33 | 34 | // Overlapped avatars 35 | 36 | .avatar-group { 37 | .avatar { 38 | position: relative; 39 | z-index: 2; 40 | border: 2px solid $card-bg; 41 | 42 | &:hover { 43 | z-index: 3; 44 | } 45 | } 46 | 47 | .avatar + .avatar { 48 | margin-left: -1rem; 49 | 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/kit-free.scss: -------------------------------------------------------------------------------- 1 | // @import "accordion.scss"; 2 | // @import "alerts.scss"; 3 | // @import "avatars.scss"; 4 | // @import "badge.scss"; 5 | // @import "buttons.scss"; 6 | // @import "card.scss"; 7 | // @import "carousel.scss"; 8 | // @import "close.scss"; 9 | // @import "custom-forms.scss"; 10 | // @import "dropdown.scss"; 11 | // @import "footer.scss"; 12 | // @import "forms.scss"; 13 | // @import "grid.scss"; 14 | // @import "icons.scss"; 15 | // @import "input-group.scss"; 16 | // @import "list-group.scss"; 17 | // @import "modal.scss"; 18 | // @import "nav.scss"; 19 | // @import "navbar.scss"; 20 | // @import "pagination.scss"; 21 | // @import "popover.scss"; 22 | // @import "progress.scss"; 23 | // @import "section.scss"; 24 | // @import "type.scss"; 25 | // 26 | // // Vendor 27 | // 28 | // @import "vendor/bootstrap-datepicker.scss"; 29 | // @import "vendor/headroom.scss"; 30 | // @import "vendor/nouislider.scss"; 31 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | @mixin bg-variant($parent, $color) { 3 | #{$parent} { 4 | background-color: $color !important; 5 | } 6 | a#{$parent}, 7 | button#{$parent} { 8 | @include hover-focus { 9 | background-color: darken($color, 10%) !important; 10 | } 11 | } 12 | } 13 | 14 | @mixin bg-gradient-variant($parent, $color) { 15 | #{$parent} { 16 | background: linear-gradient(35deg, $color 0, adjust-hue($color, 25%) 100%) !important; 17 | } 18 | } 19 | 20 | @mixin bg-translucent-variant($parent, $color) { 21 | #{$parent} { 22 | background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important; 23 | } 24 | a#{$parent}, 25 | button#{$parent} { 26 | @include hover-focus { 27 | background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/assets/scss/react/react-differences.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 based on Argon Design System - v1.0.1 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by www.creative-tim.com 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Custom components 20 | 21 | @import "custom/dropdown.scss"; 22 | @import "custom/mixins.scss"; 23 | @import "custom/navbar.scss"; 24 | @import "custom/popover.scss"; 25 | @import "custom/separator.scss"; 26 | 27 | // Vendor 28 | 29 | @import "custom/vendor/react-datetime.scss"; 30 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/floating.scss: -------------------------------------------------------------------------------- 1 | .floating { 2 | animation: floating 3s ease infinite; 3 | will-change: transform; 4 | 5 | &:hover { 6 | animation-play-state: paused; 7 | } 8 | } 9 | 10 | .floating-lg { 11 | animation: floating-lg 3s ease infinite; 12 | } 13 | 14 | .floating-sm { 15 | animation: floating-sm 3s ease infinite; 16 | } 17 | 18 | // Keyframes 19 | 20 | @keyframes floating-lg { 21 | 0% { 22 | transform: translateY(0px) 23 | } 24 | 50% { 25 | transform: translateY(15px) 26 | } 27 | 100% { 28 | transform: translateY(0px) 29 | } 30 | } 31 | 32 | @keyframes floating { 33 | 0% { 34 | transform: translateY(0px) 35 | } 36 | 50% { 37 | transform: translateY(10px) 38 | } 39 | 100% { 40 | transform: translateY(0px) 41 | } 42 | } 43 | 44 | @keyframes floating-sm { 45 | 0% { 46 | transform: translateY(0px) 47 | } 48 | 50% { 49 | transform: translateY(5px) 50 | } 51 | 100% { 52 | transform: translateY(0px) 53 | } 54 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/backgrounds.scss: -------------------------------------------------------------------------------- 1 | @each $color, $value in $colors { 2 | @include bg-variant(".bg-#{$color}", $value); 3 | } 4 | 5 | @each $color, $value in $theme-colors { 6 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 7 | } 8 | 9 | @each $color, $value in $colors { 10 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 11 | } 12 | 13 | // Background colors with transparency 14 | @each $color, $value in $theme-colors { 15 | @include bg-translucent-variant(".bg-translucent-#{$color}", $value); 16 | } 17 | 18 | 19 | // Sections 20 | 21 | @each $color, $value in $section-colors { 22 | @include bg-variant(".section-#{$color}", $value); 23 | } 24 | 25 | @each $color, $value in $theme-colors { 26 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 27 | } 28 | 29 | 30 | // Shape (svg) fill colors 31 | 32 | @each $color, $value in $theme-colors { 33 | .fill-#{$color} { 34 | fill: $value; 35 | } 36 | 37 | .stroke-#{$color} { 38 | stroke: $value; 39 | } 40 | } 41 | 42 | .fill-opacity-8 { 43 | fill-opacity: .8; 44 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/helper.scss: -------------------------------------------------------------------------------- 1 | // Image 2 | 3 | .img-center { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | 9 | // Clearfix 10 | 11 | .floatfix { 12 | &:before, 13 | &:after { 14 | content: ''; 15 | display: table; 16 | } 17 | &:after { 18 | clear: both; 19 | } 20 | } 21 | 22 | // Overflows 23 | 24 | .overflow-visible { 25 | overflow: visible !important; 26 | } 27 | .overflow-hidden { 28 | overflow: hidden !important; 29 | } 30 | 31 | // Opacity classes 32 | 33 | .opacity-1 { 34 | opacity: .1 !important; 35 | } 36 | .opacity-2 { 37 | opacity: .2 !important; 38 | } 39 | .opacity-3 { 40 | opacity: .3 !important; 41 | } 42 | .opacity-4 { 43 | opacity: .4 !important; 44 | } 45 | .opacity-5 { 46 | opacity: .5 !important; 47 | } 48 | .opacity-6 { 49 | opacity: .6 !important; 50 | } 51 | .opacity-7 { 52 | opacity: .7 !important; 53 | } 54 | .opacity-8 { 55 | opacity: .8 !important; 56 | } 57 | .opacity-9 { 58 | opacity: .9 !important; 59 | } 60 | .opacity-10 { 61 | opacity: 1 !important; 62 | } 63 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system-react.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 based on Argon Design System - v1.1.1 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by www.creative-tim.com 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Bootstrap Functions 20 | @import "../../../node_modules/bootstrap/scss/functions"; 21 | 22 | // Theme Variables 23 | @import "argon-design-system/variables"; 24 | 25 | // Bootstrap Core 26 | @import "../../../node_modules/bootstrap/scss/bootstrap"; 27 | 28 | // Theme Core 29 | @import "argon-design-system/theme"; 30 | 31 | // React Differences 32 | @import "react/react-differences"; 33 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/text.scss: -------------------------------------------------------------------------------- 1 | // Weight and italics 2 | 3 | .font-weight-300 { font-weight: 300 !important; } 4 | .font-weight-400 { font-weight: 400 !important; } 5 | .font-weight-500 { font-weight: 500 !important; } 6 | .font-weight-600 { font-weight: 600 !important; } 7 | .font-weight-700 { font-weight: 700 !important; } 8 | .font-weight-800 { font-weight: 800 !important; } 9 | .font-weight-900 { font-weight: 900 !important; } 10 | 11 | 12 | // Text decorations 13 | 14 | .text-underline { text-decoration: underline; } 15 | .text-through { text-decoration: line-through; } 16 | 17 | 18 | // Line heights 19 | 20 | .lh-100 { line-height: 1; } 21 | .lh-110 { line-height: 1.1; } 22 | .lh-120 { line-height: 1.2; } 23 | .lh-130 { line-height: 1.3; } 24 | .lh-140 { line-height: 1.4; } 25 | .lh-150 { line-height: 1.5; } 26 | .lh-160 { line-height: 1.6; } 27 | .lh-170 { line-height: 1.7; } 28 | .lh-180 { line-height: 1.8; } 29 | 30 | 31 | // Letter spacings 32 | 33 | .ls-1 { letter-spacing: .0625rem; } 34 | .ls-15 { letter-spacing: .09375rem; } 35 | .ls-2 { letter-spacing: 0.125rem; } 36 | 37 | // Color variations 38 | 39 | @each $color, $value in $colors { 40 | @include text-emphasis-variant(".text-#{$color}", $value, $ignore-warning: true); 41 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/badge.scss: -------------------------------------------------------------------------------- 1 | .badge { 2 | text-transform: $badge-text-transfom; 3 | 4 | a { 5 | color: #FFF; 6 | } 7 | } 8 | 9 | // Variations 10 | .badge-pill { 11 | padding-right: $badge-pill-padding-x; 12 | padding-left: $badge-pill-padding-x; 13 | } 14 | 15 | .badge-circle { 16 | text-align: center; 17 | display: inline-flex; 18 | align-items: center; 19 | justify-content: center; 20 | border-radius: 50%; 21 | width: 2rem; 22 | height: 2rem; 23 | font-size: .875rem; 24 | } 25 | 26 | // Multiple inline badges 27 | .badge-inline { 28 | margin-right: .625rem; 29 | } 30 | 31 | .badge-inline + span { 32 | top: 2px; 33 | position: relative; 34 | } 35 | 36 | .badge-inline + span > a { 37 | text-decoration: underline; 38 | } 39 | 40 | // Sizes 41 | .badge-md { 42 | padding: .65em 1em; 43 | } 44 | 45 | .badge-lg { 46 | padding: .85em 1.375em; 47 | } 48 | 49 | 50 | // Color variations 51 | 52 | .badge-secondary { 53 | color: $gray-800; 54 | } 55 | 56 | // Link badges 57 | 58 | .btn { 59 | .badge { 60 | &:not(:first-child) { 61 | margin-left: .5rem; 62 | } 63 | &:not(:last-child) { 64 | margin-right: .5rem; 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown, 2 | .dropup, 3 | .dropright, 4 | .dropleft { 5 | display: inline-block; 6 | } 7 | 8 | .dropdown-menu { 9 | min-width: 12rem; 10 | 11 | .dropdown-item { 12 | padding: 1rem; 13 | font-size: $font-size-sm; 14 | > i, 15 | > svg { 16 | margin-right: 1rem; 17 | font-size: 1rem; 18 | vertical-align: -17%; 19 | } 20 | } 21 | } 22 | 23 | .dropdown-header { 24 | padding-left: 1rem; 25 | padding-right: 1rem; 26 | color: $gray-100; 27 | font-size: .625rem; 28 | text-transform: uppercase; 29 | font-weight: 700; 30 | } 31 | 32 | 33 | // Dropdown elements 34 | 35 | .dropdown-menu { 36 | a.media { 37 | > div { 38 | &:first-child { 39 | line-height: 1; 40 | } 41 | } 42 | 43 | p { 44 | color: $gray-600; 45 | } 46 | &:hover { 47 | .heading, p { 48 | color: theme-color("default") !important; 49 | } 50 | } 51 | } 52 | } 53 | 54 | // Dropown: Sizes 55 | 56 | .dropdown-menu-sm { 57 | min-width: 100px; 58 | border: $border-radius-lg; 59 | } 60 | 61 | .dropdown-menu-lg { 62 | min-width: 260px; 63 | border-radius: $border-radius-lg; 64 | } 65 | 66 | .dropdown-menu-xl { 67 | min-width: 450px; 68 | border-radius: $border-radius-lg; 69 | } 70 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/argon-design-system-react\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/input-group.scss: -------------------------------------------------------------------------------- 1 | .input-group { 2 | box-shadow: $input-box-shadow; 3 | border-radius: $input-border-radius; 4 | transition: $transition-base; 5 | 6 | .form-control { 7 | box-shadow: none; 8 | 9 | &:not(:first-child) { 10 | border-left: 0; 11 | padding-left: 0; 12 | } 13 | &:not(:last-child) { 14 | border-right: 0; 15 | padding-right: 0; 16 | } 17 | &:focus { 18 | box-shadow: none; 19 | } 20 | } 21 | 22 | .input-group-prepend { 23 | margin-right: 0; 24 | 25 | .input-group-text { 26 | border-right: none; 27 | } 28 | } 29 | } 30 | 31 | .input-group-text { 32 | transition: $transition-base; 33 | } 34 | 35 | .input-group-alternative { 36 | box-shadow: $input-alternative-box-shadow; 37 | border: 0; 38 | transition: box-shadow .15s ease; 39 | 40 | .form-control, 41 | .input-group-text { 42 | border: 0; 43 | box-shadow: none; 44 | } 45 | } 46 | 47 | .focused { 48 | .input-group-alternative { 49 | box-shadow: $input-focus-alternative-box-shadow !important; 50 | } 51 | } 52 | 53 | 54 | // .focus class is applied dinamycally from theme.js 55 | 56 | .focused { 57 | .input-group { 58 | box-shadow: $input-focus-box-shadow; 59 | } 60 | 61 | .input-group-text { 62 | color: $input-group-addon-focus-color; 63 | background-color: $input-group-addon-focus-bg; 64 | border-color: $primary; 65 | } 66 | 67 | .form-control { 68 | border-color: $primary; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/theme.scss: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | 4 | ========================================================= 5 | * {{ site.product.name }} {{ site.product.name_long }} - v{{ site.product.version }} 6 | ========================================================= 7 | 8 | * Product Page: {{ site.product.download }} 9 | * Copyright {{ 'now' | date: "%Y" }} {{ site.author }} ({{ site.website.url }}) 10 | * Licensed under MIT ({{ site.product.license }}) 11 | 12 | * Coded by www.creative-tim.com 13 | 14 | ========================================================= 15 | 16 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | */ 19 | 20 | // {{ site.product.name }} components 21 | 22 | @import "functions"; 23 | @import "mixins"; 24 | 25 | @import "reboot"; 26 | @import "global"; 27 | @import "utilities"; 28 | 29 | @import "accordion"; 30 | @import "alert"; 31 | @import "avatar"; 32 | @import "badge"; 33 | @import "buttons"; 34 | @import "card"; 35 | @import "carousel"; 36 | @import "close"; 37 | @import "content"; 38 | @import "custom-forms"; 39 | @import "dropdown"; 40 | @import "footer"; 41 | @import "forms"; 42 | @import "grid"; 43 | @import "icons"; 44 | @import "input-group"; 45 | @import "list-group"; 46 | @import "modal"; 47 | @import "nav"; 48 | @import "navbar"; 49 | @import "pagination"; 50 | @import "popover"; 51 | @import "progress"; 52 | @import "section"; 53 | @import "separator"; 54 | @import "type"; 55 | 56 | // Vendor 57 | 58 | @import "vendors"; 59 | 60 | // Docs 61 | 62 | @import "docs"; 63 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/progress.scss: -------------------------------------------------------------------------------- 1 | .progress-wrapper { 2 | position: relative; 3 | padding-top: 1.5rem; 4 | } 5 | .progress { 6 | height: 8px; 7 | margin-bottom: $spacer; 8 | overflow: hidden; 9 | border-radius: $border-radius-sm; 10 | background-color: $progress-bg; 11 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 12 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 13 | } 14 | .progress .sr-only { 15 | width: auto; 16 | height: 20px; 17 | margin: 0 0 0 30px; 18 | left: 0; 19 | clip: auto; 20 | line-height: 20px; 21 | font-size: 13px; 22 | } 23 | 24 | .progress-heading { 25 | font-size: 14px; 26 | font-weight: 500; 27 | margin: 0 0 2px; 28 | padding: 0; 29 | } 30 | .progress-bar { 31 | box-shadow: none; 32 | border-radius: 0; 33 | height: auto; 34 | } 35 | 36 | .progress-label { 37 | span { 38 | display: inline-block; 39 | color: $default; 40 | font-size: .625rem; 41 | font-weight: 600; 42 | text-transform: uppercase; 43 | padding: .25rem 0rem; 44 | } 45 | } 46 | 47 | .progress-percentage { 48 | text-align: right; 49 | span { 50 | display: inline-block; 51 | color: $gray-600; 52 | font-size: .875rem; 53 | font-weight: 600; 54 | } 55 | } 56 | 57 | .index-page { 58 | .progress-wrapper { 59 | padding-top: 1rem; 60 | 61 | .progress-label { 62 | position: absolute; 63 | top: auto; 64 | bottom: 10px; 65 | } 66 | 67 | .progress { 68 | margin-bottom: 0; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/views/IndexSections/Labels.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Badge, Col } from "reactstrap"; 22 | 23 | class Labels extends React.Component { 24 | render() { 25 | return ( 26 | <> 27 | 28 |

Labels

29 | 30 | Primary 31 | 32 | 33 | Success 34 | 35 | 36 | Danger 37 | 38 | 39 | Warning 40 | 41 | 42 | Info 43 | 44 | 45 | 46 | ); 47 | } 48 | } 49 | 50 | export default Labels; 51 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import ReactDOM from "react-dom/client"; 20 | import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; 21 | 22 | import "assets/vendor/nucleo/css/nucleo.css"; 23 | import "assets/vendor/font-awesome/css/font-awesome.min.css"; 24 | import "assets/scss/argon-design-system-react.scss?v1.1.0"; 25 | 26 | import Index from "views/Index.js"; 27 | import Landing from "views/examples/Landing.js"; 28 | import Login from "views/examples/Login.js"; 29 | import Profile from "views/examples/Profile.js"; 30 | import Register from "views/examples/Register.js"; 31 | 32 | const root = ReactDOM.createRoot(document.getElementById("root")); 33 | 34 | root.render( 35 | 36 | 37 | } /> 38 | } /> 39 | } /> 40 | } /> 41 | } /> 42 | } /> 43 | 44 | 45 | ); 46 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/type.scss: -------------------------------------------------------------------------------- 1 | // General styles 2 | 3 | p { 4 | font-size: $paragraph-font-size; 5 | font-weight: $paragraph-font-weight; 6 | line-height: $paragraph-line-height; 7 | } 8 | 9 | .lead { 10 | font-size: $lead-font-size; 11 | font-weight: $lead-font-weight; 12 | line-height: $paragraph-line-height; 13 | margin-top: 1.5rem; 14 | 15 | + .btn-wrapper { 16 | margin-top: 3rem; 17 | } 18 | } 19 | 20 | .description { 21 | font-size: $font-size-sm; 22 | } 23 | 24 | // Headings 25 | 26 | .heading { 27 | letter-spacing: $heading-letter-spacing; 28 | font-size: $heading-font-size; 29 | text-transform: $heading-text-transform; 30 | font-weight: $heading-font-weight; 31 | } 32 | 33 | .heading-title { 34 | letter-spacing: $heading-title-letter-spacing; 35 | font-size: $heading-title-font-size; 36 | font-weight: $heading-title-font-weight; 37 | text-transform: $heading-title-text-transform; 38 | } 39 | 40 | .heading-section { 41 | letter-spacing: $heading-section-letter-spacing; 42 | font-size: $heading-section-font-size; 43 | font-weight: $heading-section-font-weight; 44 | text-transform: $heading-section-text-transform; 45 | 46 | img { 47 | display: block; 48 | width: 72px; 49 | height: 72px; 50 | margin-bottom: 1.5rem; 51 | } 52 | 53 | &.text-center { 54 | img { 55 | margin-left: auto; 56 | margin-right: auto; 57 | } 58 | } 59 | } 60 | 61 | // Section titles 62 | 63 | .display-1, 64 | .display-2, 65 | .display-3, 66 | .display-4 { 67 | span { 68 | display: block; 69 | font-weight: $font-weight-light; 70 | } 71 | } 72 | 73 | 74 | // Articles 75 | 76 | article { 77 | h4:not(:first-child), 78 | h5:not(:first-child) { 79 | margin-top: 3rem; 80 | } 81 | 82 | h4, h5 { 83 | margin-bottom: 1.5rem; 84 | } 85 | 86 | figure { 87 | margin: 3rem 0; 88 | } 89 | 90 | h5 + figure { 91 | margin-top: 0; 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/alert.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | padding: $alert-padding-y $alert-padding-x; 3 | border: 0; 4 | font-size: $font-size-sm; 5 | @include border-radius($alert-border-radius); 6 | 7 | .alert-inner--icon { 8 | font-size: 1.25rem; 9 | margin-right: 1.25rem; 10 | display: inline-block; 11 | vertical-align: middle; 12 | 13 | i.ni { 14 | position: relative; 15 | top: 1px; 16 | } 17 | } 18 | .alert-inner--text { 19 | display: inline-block; 20 | vertical-align: middle; 21 | } 22 | } 23 | 24 | .alert:not(.alert-secondary) { 25 | color: $white; 26 | } 27 | 28 | [class*="alert-"] { 29 | .alert-link { 30 | color: $white; 31 | border-bottom: 1px dotted rgba($white, .5); 32 | } 33 | } 34 | 35 | .alert-heading { 36 | font-weight: $font-weight-bold; 37 | font-size: $h4-font-size; 38 | margin-top: .15rem; 39 | } 40 | 41 | .alert-dismissible { 42 | .close { 43 | top: 50%; 44 | right: $alert-padding-x; 45 | padding: 0; 46 | transform: translateY(-50%); 47 | color: rgba($white, .6); 48 | opacity: 1; 49 | 50 | &:hover, 51 | &:focus { 52 | color: rgba($white, .9); 53 | opacity: 1 !important; 54 | } 55 | 56 | @include media-breakpoint-down(xs) { 57 | top: 1rem; 58 | right: .5rem; 59 | } 60 | 61 | &>span:not(.sr-only) { 62 | font-size: 1.5rem; 63 | background-color: transparent; 64 | color: rgba($white, .6); 65 | } 66 | 67 | &:hover, 68 | &:focus { 69 | &>span:not(.sr-only) { 70 | background-color: transparent; 71 | color: rgba($white, .9); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/nav.scss: -------------------------------------------------------------------------------- 1 | .nav-link { 2 | color: $nav-link-color; 3 | 4 | &:hover, 5 | &.active { 6 | color: theme-color("primary"); 7 | } 8 | 9 | i:not(.fa) { 10 | position: relative; 11 | top: 2px; 12 | } 13 | } 14 | 15 | // Pills 16 | 17 | .nav-pills { 18 | .nav-item:not(:last-child) { 19 | padding-right: $nav-pills-space-x; 20 | } 21 | 22 | .nav-link { 23 | padding: $nav-pills-padding-y $nav-pills-padding-x; 24 | color: $nav-pills-link-color; 25 | font-weight: 500; 26 | font-size: $font-size-sm; 27 | box-shadow: $nav-pills-box-shadow; 28 | background-color: $nav-pills-bg; 29 | transition: $transition-base; 30 | 31 | &:hover { 32 | color: $nav-pills-link-hover-color; 33 | } 34 | } 35 | 36 | .nav-link.active, 37 | .show > .nav-link { 38 | color: $nav-pills-link-active-color; 39 | background-color: $nav-pills-link-active-bg; 40 | } 41 | 42 | @include media-breakpoint-down(xs) { 43 | .nav-item { 44 | margin-bottom: $spacer; 45 | } 46 | } 47 | } 48 | 49 | @include media-breakpoint-down(sm) { 50 | .nav-pills:not(.nav-pills-circle) { 51 | .nav-item { 52 | padding-right: 0; 53 | } 54 | } 55 | } 56 | 57 | // Nav pills circle 58 | 59 | .nav-pills-circle { 60 | .nav-link { 61 | text-align: center; 62 | height: 60px; 63 | width: 60px; 64 | padding: 0; 65 | line-height: 60px; 66 | border-radius: 50%; 67 | } 68 | 69 | .nav-link-icon { 70 | i, svg { 71 | font-size: 1rem; 72 | } 73 | } 74 | } 75 | 76 | // Nav wrapper 77 | .nav-wrapper { 78 | padding: 1rem 0; 79 | @include border-top-radius($card-border-radius); 80 | 81 | + .card { 82 | @include border-top-radius(0); 83 | @include border-bottom-radius($card-border-radius); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/icons.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | width: $icon-size; 3 | height: $icon-size; 4 | 5 | i, svg { 6 | font-size: $icon-size - .75; 7 | } 8 | } 9 | 10 | .icon + .icon-text { 11 | padding-left: 1rem; 12 | width: calc(100% - #{$icon-size} - 1); 13 | } 14 | 15 | .icon-xl { 16 | width: $icon-size-xl; 17 | height: $icon-size-xl; 18 | 19 | i, svg { 20 | font-size: $icon-size-xl - .75; 21 | } 22 | } 23 | 24 | .icon-xl + .icon-text { 25 | width: calc(100% - #{$icon-size-xl} - 1); 26 | } 27 | 28 | .icon-lg { 29 | width: $icon-size-lg; 30 | height: $icon-size-lg; 31 | 32 | i, svg { 33 | font-size: $icon-size-lg - .75; 34 | } 35 | } 36 | 37 | .icon-lg + .icon-text { 38 | width: calc(100% - #{$icon-size-lg} - 1); 39 | } 40 | 41 | .icon-sm { 42 | width: $icon-size-sm; 43 | height: $icon-size-sm; 44 | 45 | i, svg { 46 | font-size: $icon-size-sm - .75; 47 | } 48 | } 49 | 50 | .icon-sm + .icon-text { 51 | width: calc(100% - #{$icon-size-sm} - 1); 52 | } 53 | 54 | // Extra Small icon 55 | 56 | .icon-xs { 57 | width: $icon-size-xs; 58 | height: $icon-size-xs; 59 | 60 | i, svg { 61 | font-size: $icon-size-xs - .75 !important; 62 | } 63 | 64 | + .icon-text { 65 | width: calc(100% - #{$icon-size-xs} - 1); 66 | } 67 | } 68 | 69 | 70 | // Icons included in shapes 71 | .icon-shape { 72 | padding: 12px; 73 | text-align: center; 74 | display: inline-flex; 75 | align-items: center; 76 | justify-content: center; 77 | border-radius: 50%; 78 | 79 | 80 | i, svg { 81 | font-size: 1.25rem; 82 | } 83 | 84 | &.icon-lg { 85 | i, svg { 86 | font-size: 1.625rem; 87 | } 88 | } 89 | 90 | &.icon-sm { 91 | i, svg { 92 | font-size: .875rem; 93 | } 94 | } 95 | 96 | svg { 97 | width: 30px; 98 | height: 30px; 99 | } 100 | 101 | } 102 | 103 | @each $color, $value in $theme-colors { 104 | .icon-shape-#{$color} { 105 | @include icon-shape-variant(theme-color($color)); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/views/IndexSections/Progress.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Progress, Col } from "reactstrap"; 22 | 23 | class ProgressSection extends React.Component { 24 | render() { 25 | return ( 26 | <> 27 | 28 |

29 | Progress bars 30 |

31 |
32 |
33 |
34 | Task completed 35 |
36 |
37 | 40% 38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 | Task completed 46 |
47 |
48 | 60% 49 |
50 |
51 | 52 |
53 | 54 | 55 | ); 56 | } 57 | } 58 | 59 | export default ProgressSection; 60 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background: $secondary; 3 | padding: 1.5rem 0; 4 | 5 | .col-footer { 6 | .heading { 7 | color: $footer-heading-color; 8 | letter-spacing: 0; 9 | font-size: $footer-heading-font-size; 10 | text-transform: uppercase; 11 | font-weight: $font-weight-bold; 12 | margin-bottom: 1rem; 13 | } 14 | } 15 | 16 | .nav .nav-item .nav-link, 17 | .footer-link { 18 | color: $footer-link-color !important; 19 | 20 | &:hover { 21 | color: $footer-link-hover-color !important; 22 | } 23 | } 24 | 25 | .list-unstyled li a { 26 | display: inline-block; 27 | padding: .125rem 0; 28 | color: $footer-link-color; 29 | font-size: $footer-link-font-size; 30 | 31 | &:hover { 32 | color: $footer-link-hover-color; 33 | } 34 | } 35 | 36 | .copyright { 37 | font-size: $font-size-sm; 38 | } 39 | 40 | .dropdown { 41 | .btn:not(:disabled):not(.disabled):active:focus, 42 | .btn:not(:disabled):not(.disabled).active:focus { 43 | box-shadow: none; 44 | } 45 | } 46 | } 47 | 48 | .footer-dark { 49 | .col-footer .heading { 50 | color: $white; 51 | } 52 | } 53 | 54 | .footer.has-cards { 55 | overflow: hidden; 56 | padding-top: 500px; 57 | margin-top: -420px; 58 | position: relative; 59 | background: transparent; 60 | pointer-events: none; 61 | 62 | &:before { 63 | content: ""; 64 | position: absolute; 65 | left: 0; 66 | right: 0; 67 | top: 600px; 68 | height: 2000px; 69 | background: theme-color("secondary"); 70 | transform: skew(0,-8deg); 71 | } 72 | 73 | .container { 74 | pointer-events: auto; 75 | position: relative; 76 | } 77 | } 78 | 79 | .nav-footer { 80 | .nav-link { 81 | font-size: $font-size-sm; 82 | } 83 | 84 | .nav-item:last-child { 85 | .nav-link { 86 | padding-right: 0; 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/assets/img/icons/common/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/dark/github 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/img/icons/common/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/color/google 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 33 | 34 | 35 | 40 | 41 | 45 | Argon Design System React by Creative Tim 46 | 47 | 48 | 49 |
50 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "argon-design-system-react", 3 | "version": "1.1.2", 4 | "description": "React version of Argon Design System by Creative Tim", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/creativetimofficial/argon-design-system-react.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "reactjs", 13 | "argon", 14 | "argon-react", 15 | "design", 16 | "design-react", 17 | "argon-design", 18 | "argon-design-react", 19 | "kit", 20 | "react-kit", 21 | "argon-design-system", 22 | "argon-design-system-react", 23 | "design-system-react" 24 | ], 25 | "author": "Creative Tim", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/creativetimofficial/argon-design-system-react/issues" 29 | }, 30 | "homepage": "https://demos.creative-tim.com/argon-design-system-react/", 31 | "scripts": { 32 | "start": "react-scripts start", 33 | "build": "cross-env PUBLIC_URL=/ react-scripts build", 34 | "test": "react-scripts test", 35 | "eject": "react-scripts eject", 36 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", 37 | "compile-sass": "sass src/assets/scss/argon-design-system-react.scss src/assets/css/argon-design-system-react.css", 38 | "minify-sass": "sass src/assets/scss/argon-design-system-react.scss src/assets/css/argon-design-system-react.min.css --style compressed" 39 | }, 40 | "eslintConfig": { 41 | "extends": "react-app" 42 | }, 43 | "browserslist": [ 44 | ">0.2%", 45 | "not dead", 46 | "not ie <= 11", 47 | "not op_mini all" 48 | ], 49 | "dependencies": { 50 | "ajv": "^8.16.0", 51 | "bootstrap": "4.6.2", 52 | "classnames": "2.3.2", 53 | "headroom.js": "0.12.0", 54 | "moment": "2.29.4", 55 | "nouislider": "15.4.0", 56 | "react": ">=16.0.0", 57 | "react-datetime": "3.2.0", 58 | "react-dom": ">=16.0.0", 59 | "react-router-dom": "6.11.1", 60 | "react-scripts": "5.0.1", 61 | "reactstrap": "8.10.0", 62 | "sass": "1.62.1" 63 | }, 64 | "peerDependencies": { 65 | "react": ">=16.0.0", 66 | "react-dom": ">=16.0.0" 67 | }, 68 | "devDependencies": { 69 | "@types/markerclustererplus": "2.1.33", 70 | "@types/react": "18.2.6", 71 | "eslint-plugin-flowtype": "8.0.3", 72 | "jquery": "3.7.0", 73 | "typescript": "5.0.4", 74 | "cross-env": "^7.0.3" 75 | }, 76 | "overrides": { 77 | "svgo": "3.0.2" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/views/IndexSections/Alerts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { UncontrolledAlert } from "reactstrap"; 22 | 23 | class Alerts extends React.Component { 24 | render() { 25 | return ( 26 | <> 27 |

28 | Alerts 29 |

30 | 31 | 32 | 33 | 34 | 35 | Success! This is a success alert—check it out! 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | Info! This is an info alert—check it out! 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | Warning! This is a warning alert—check it out! 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | Danger! This is an error alert—check it out! 60 | 61 | 62 | 63 | ); 64 | } 65 | } 66 | 67 | export default Alerts; 68 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/card.scss: -------------------------------------------------------------------------------- 1 | 2 | .card { 3 | position: relative; 4 | 5 | &.card-plain { 6 | background: transparent; 7 | box-shadow: none; 8 | border: none; 9 | } 10 | } 11 | 12 | .profile-page { 13 | .card-profile { 14 | margin-top: -150px; 15 | 16 | .card-profile-image { 17 | position: relative; 18 | //min-height: 130px; 19 | 20 | img { 21 | max-width: 180px; 22 | border-radius: $border-radius; 23 | @extend .shadow; 24 | transform: translate(-50%,-30%); 25 | position: absolute; 26 | left: 50%; 27 | transition: $transition-base; 28 | 29 | &:hover { 30 | transform: translate(-50%, -33%); 31 | } 32 | } 33 | } 34 | 35 | .card-profile-stats { 36 | padding: 1rem 0; 37 | 38 | > div { 39 | text-align: center; 40 | margin-right: 1rem; 41 | padding: .875rem; 42 | 43 | &:last-child { 44 | margin-right: 0; 45 | } 46 | 47 | .heading { 48 | font-size: 1.1rem; 49 | font-weight: bold; 50 | display: block; 51 | } 52 | .description { 53 | font-size: .875rem; 54 | color: $gray-500; 55 | } 56 | } 57 | } 58 | 59 | .card-profile-actions { 60 | padding: .875rem; 61 | } 62 | 63 | @include media-breakpoint-down(xs) { 64 | .card-profile-actions { 65 | margin-top: 110px; 66 | } 67 | } 68 | 69 | @include media-breakpoint-between(sm, md) { 70 | .card-profile-stats { 71 | margin-top: 30px; 72 | } 73 | } 74 | } 75 | } 76 | 77 | // Card with blockquotes 78 | 79 | .card { 80 | .card-blockquote { 81 | padding: 2rem; 82 | position: relative; 83 | 84 | .svg-bg { 85 | display: block; 86 | width: 100%; 87 | height: 95px; 88 | position: absolute; 89 | top: -94px; 90 | left: 0; 91 | } 92 | } 93 | } 94 | 95 | // Animated cards 96 | 97 | .card-lift--hover { 98 | &:hover { 99 | transform: translateY(-20px); 100 | @include transition($transition-base); 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/utilities/spacing.scss: -------------------------------------------------------------------------------- 1 | // Spacing columns vertically 2 | 3 | .row.row-grid > [class*="col-"] + [class*="col-"] { 4 | margin-top: 3rem; 5 | } 6 | 7 | @include media-breakpoint-up(lg) { 8 | .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] { 9 | margin-top: 0; 10 | } 11 | } 12 | @include media-breakpoint-up(md) { 13 | .row.row-grid > [class*="col-md-"] + [class*="col-md-"] { 14 | margin-top: 0; 15 | } 16 | } 17 | @include media-breakpoint-up(sm) { 18 | .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] { 19 | margin-top: 0; 20 | } 21 | } 22 | 23 | .row-grid + .row-grid { 24 | margin-top: 3rem; 25 | } 26 | 27 | // Negative margins and paddings 28 | 29 | @media(min-width: 992px) { 30 | [class*="mt--"], 31 | [class*="mr--"], 32 | [class*="mb--"], 33 | [class*="ml--"] { 34 | position: relative; 35 | z-index: 5; 36 | } 37 | 38 | 39 | // Large negative margins in pixels 40 | 41 | .mt--100 { 42 | margin-top: -100px !important; 43 | } 44 | .mr--100 { 45 | margin-right: -100px !important; 46 | } 47 | .mb--100 { 48 | margin-bottom: -100px !important; 49 | } 50 | .ml--100 { 51 | margin-left: -100px !important; 52 | } 53 | .mt--150 { 54 | margin-top: -150px !important; 55 | } 56 | .mb--150 { 57 | margin-bottom: -150px !important; 58 | } 59 | .mt--200 { 60 | margin-top: -200px !important; 61 | } 62 | .mb--200 { 63 | margin-bottom: -200px !important; 64 | } 65 | .mt--300 { 66 | margin-top: -300px !important; 67 | } 68 | .mb--300 { 69 | margin-bottom: -300px !important; 70 | } 71 | 72 | 73 | // Large margins in pixels 74 | 75 | .pt-100 { 76 | padding-top: 100px !important; 77 | } 78 | .pb-100 { 79 | padding-bottom: 100px !important; 80 | } 81 | .pt-150 { 82 | padding-top: 150px !important; 83 | } 84 | .pb-150 { 85 | padding-bottom: 150px !important; 86 | } 87 | .pt-200 { 88 | padding-top: 200px !important; 89 | } 90 | .pb-200 { 91 | padding-bottom: 200px !important; 92 | } 93 | .pt-250 { 94 | padding-top: 250px !important; 95 | } 96 | .pb-250 { 97 | padding-bottom: 250px !important; 98 | } 99 | .pt-300 { 100 | padding-top: 300px!important; 101 | } 102 | .pb-300 { 103 | padding-bottom: 300px!important; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/assets/vendor/nucleo/css/nucleo-svg.css: -------------------------------------------------------------------------------- 1 | /* Generated using nucleoapp.com */ 2 | /* -------------------------------- 3 | 4 | Icon colors 5 | 6 | -------------------------------- */ 7 | 8 | .icon { 9 | display: inline-block; 10 | /* icon primary color */ 11 | color: #111111; 12 | height: 1em; 13 | width: 1em; 14 | } 15 | 16 | .icon use { 17 | /* icon secondary color - fill */ 18 | fill: #7ea6f6; 19 | } 20 | 21 | .icon.icon-outline use { 22 | /* icon secondary color - stroke */ 23 | stroke: #7ea6f6; 24 | } 25 | 26 | /* -------------------------------- 27 | 28 | Change icon size 29 | 30 | -------------------------------- */ 31 | 32 | .icon-xs { 33 | height: 0.5em; 34 | width: 0.5em; 35 | } 36 | 37 | .icon-sm { 38 | height: 0.8em; 39 | width: 0.8em; 40 | } 41 | 42 | .icon-lg { 43 | height: 1.6em; 44 | width: 1.6em; 45 | } 46 | 47 | .icon-xl { 48 | height: 2em; 49 | width: 2em; 50 | } 51 | 52 | /* -------------------------------- 53 | 54 | Align icon and text 55 | 56 | -------------------------------- */ 57 | 58 | .icon-text-aligner { 59 | /* add this class to parent element that contains icon + text */ 60 | display: flex; 61 | align-items: center; 62 | } 63 | 64 | .icon-text-aligner .icon { 65 | color: inherit; 66 | margin-right: 0.4em; 67 | } 68 | 69 | .icon-text-aligner .icon use { 70 | color: inherit; 71 | fill: currentColor; 72 | } 73 | 74 | .icon-text-aligner .icon.icon-outline use { 75 | stroke: currentColor; 76 | } 77 | 78 | /* -------------------------------- 79 | 80 | Icon reset values - used to enable color customizations 81 | 82 | -------------------------------- */ 83 | 84 | .icon { 85 | fill: currentColor; 86 | stroke: none; 87 | } 88 | 89 | .icon.icon-outline { 90 | fill: none; 91 | stroke: currentColor; 92 | } 93 | 94 | .icon use { 95 | stroke: none; 96 | } 97 | 98 | .icon.icon-outline use { 99 | fill: none; 100 | } 101 | 102 | /* -------------------------------- 103 | 104 | Stroke effects - Nucleo outline icons 105 | 106 | - 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes) 107 | - 24px, 32px icons -> up to 2px stroke 108 | - 48px, 64px icons -> up to 4px stroke 109 | 110 | -------------------------------- */ 111 | 112 | .icon-outline.icon-stroke-1 { 113 | stroke-width: 1px; 114 | } 115 | 116 | .icon-outline.icon-stroke-2 { 117 | stroke-width: 2px; 118 | } 119 | 120 | .icon-outline.icon-stroke-3 { 121 | stroke-width: 3px; 122 | } 123 | 124 | .icon-outline.icon-stroke-4 { 125 | stroke-width: 4px; 126 | } 127 | 128 | .icon-outline.icon-stroke-1 use, 129 | .icon-outline.icon-stroke-3 use { 130 | -webkit-transform: translateX(0.5px) translateY(0.5px); 131 | -moz-transform: translateX(0.5px) translateY(0.5px); 132 | -ms-transform: translateX(0.5px) translateY(0.5px); 133 | -o-transform: translateX(0.5px) translateY(0.5px); 134 | transform: translateX(0.5px) translateY(0.5px); 135 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/docs/nav.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Main navbar 3 | // 4 | .ct-navbar { 5 | background-color: $ct-primary; 6 | box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px; 7 | padding-top: .5rem; 8 | padding-bottom: .5rem; 9 | 10 | @include media-breakpoint-down(md) { 11 | padding-right: .5rem; 12 | padding-left: .5rem; 13 | 14 | .navbar-nav-scroll { 15 | max-width: 100%; 16 | height: 2.5rem; 17 | margin-top: .25rem; 18 | overflow: hidden; 19 | font-size: .875rem; 20 | 21 | .navbar-nav { 22 | padding-bottom: 2rem; 23 | overflow-x: auto; 24 | white-space: nowrap; 25 | -webkit-overflow-scrolling: touch; 26 | } 27 | } 28 | } 29 | 30 | @include media-breakpoint-up(md) { 31 | @supports (position: sticky) { 32 | position: sticky; 33 | top: 0; 34 | z-index: 1071; // over everything in bootstrap 35 | } 36 | } 37 | 38 | .navbar-nav { 39 | .nav-link { 40 | padding-right: .5rem; 41 | padding-left: .5rem; 42 | color: $ct-primary-light !important; 43 | 44 | &.active, 45 | &:hover { 46 | color: #fff !important; 47 | background-color: transparent !important; 48 | } 49 | 50 | &.active { 51 | font-weight: 500; 52 | } 53 | } 54 | } 55 | 56 | .navbar-nav-svg { 57 | display: inline-block; 58 | width: 1rem; 59 | height: 1rem; 60 | vertical-align: text-top; 61 | } 62 | 63 | .dropdown-menu { 64 | font-size: .875rem; 65 | } 66 | 67 | .dropdown-item.active { 68 | font-weight: 500; 69 | color: $gray-900; 70 | background-color: transparent; 71 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"); 72 | background-repeat: no-repeat; 73 | background-position: .4rem .87rem; 74 | background-size: .75rem .75rem; 75 | padding-left: 25px; 76 | } 77 | } 78 | 79 | // Github corner 80 | .github-corner { 81 | position: fixed; 82 | right: 0; 83 | z-index: 1080; 84 | 85 | &:hover { 86 | .octo-arm { 87 | animation: octocat-wave 560ms ease-in-out 88 | } 89 | } 90 | 91 | svg { 92 | fill: $white; 93 | color: $ct-primary; 94 | } 95 | } 96 | 97 | @keyframes octocat-wave { 98 | 0%, 99 | 100% { 100 | transform: rotate(0) 101 | } 102 | 20%, 103 | 60% { 104 | transform: rotate(-25deg) 105 | } 106 | 40%, 107 | 80% { 108 | transform: rotate(10deg) 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/forms.scss: -------------------------------------------------------------------------------- 1 | /* Form controls */ 2 | 3 | label { 4 | font-size: $font-size-sm; 5 | } 6 | 7 | .form-control { 8 | font-size: $input-btn-font-size; 9 | transition: $transition-base; 10 | 11 | &:focus { 12 | &::placeholder { 13 | color: $input-focus-placeholder-color; 14 | } 15 | } 16 | 17 | &.is-valid, 18 | &.is-invalid { 19 | background-image: none; 20 | } 21 | } 22 | 23 | 24 | /* Textareas */ 25 | 26 | textarea[resize="none"] { 27 | resize: none!important; 28 | } 29 | 30 | textarea[resize="both"] { 31 | resize: both!important; 32 | } 33 | 34 | textarea[resize="vertical"] { 35 | resize: vertical!important; 36 | } 37 | 38 | textarea[resize="horizontal"] { 39 | resize: horizontal!important; 40 | } 41 | 42 | 43 | /* Alternative styles */ 44 | 45 | .form-control-muted { 46 | background-color: $input-muted-bg; 47 | border-color: $input-muted-bg; 48 | box-shadow: none; 49 | 50 | &:focus { 51 | background-color: $input-muted-bg; 52 | } 53 | } 54 | 55 | .form-control-alternative { 56 | box-shadow: $input-alternative-box-shadow; 57 | border: 0; 58 | transition: box-shadow .15s ease; 59 | 60 | &:focus { 61 | box-shadow: $input-focus-alternative-box-shadow; 62 | } 63 | } 64 | 65 | // Sizes 66 | 67 | .form-control-lg { 68 | font-size: $font-size-base; 69 | } 70 | 71 | // Validation 72 | 73 | .has-success, 74 | .has-danger { 75 | position: relative; 76 | 77 | &:after { 78 | width: 19px; 79 | height: 19px; 80 | line-height: 19px; 81 | text-align: center; 82 | font-family: 'NucleoIcons'; 83 | display: inline-block; 84 | position: absolute; 85 | right: 15px; 86 | top: 2px; 87 | transform: translateY(50%); 88 | border-radius: 50%; 89 | font-size: 9px; 90 | opacity: 1; 91 | } 92 | 93 | .form-control-alternative { 94 | &.is-valid, 95 | &.is-invalid { 96 | &:focus { 97 | box-shadow: $input-focus-alternative-box-shadow !important; 98 | } 99 | } 100 | } 101 | } 102 | 103 | .has-success { 104 | &:after { 105 | content: "\ea26"; 106 | color: daken($form-feedback-valid-color, 18%); 107 | background-color: $form-feedback-valid-bg; 108 | } 109 | .form-control { 110 | background-color: $input-focus-bg; 111 | 112 | &:focus { 113 | border-color: $input-focus-border-color; 114 | } 115 | 116 | // Placeholder 117 | &::placeholder { 118 | color: $form-feedback-valid-color; 119 | } 120 | } 121 | } 122 | 123 | .has-danger { 124 | &:after { 125 | content: "\ea53"; 126 | color: daken($form-feedback-invalid-color, 18%); 127 | background-color: $form-feedback-invalid-bg; 128 | } 129 | .form-control { 130 | background-color: $input-focus-bg; 131 | 132 | &:focus { 133 | border-color: $input-focus-border-color; 134 | } 135 | 136 | // Placeholder 137 | &::placeholder { 138 | color: $form-feedback-invalid-color; 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/separator.scss: -------------------------------------------------------------------------------- 1 | .separator { 2 | position: absolute; 3 | top: auto; 4 | left: 0; 5 | right: 0; 6 | width: 100%; 7 | height: 150px; 8 | z-index: 1; 9 | transform: translateZ(0); 10 | overflow: hidden; 11 | pointer-events: none; 12 | 13 | svg { 14 | position: absolute; 15 | pointer-events: none; 16 | } 17 | } 18 | 19 | .separator-top { 20 | top: 0; 21 | bottom: auto; 22 | 23 | svg { 24 | top: 0; 25 | } 26 | } 27 | 28 | .separator-bottom { 29 | top: auto; 30 | bottom: 0; 31 | 32 | svg { 33 | bottom: 0; 34 | } 35 | } 36 | 37 | .separator-inverse { 38 | transform: rotate(180deg); 39 | } 40 | 41 | // Styles 42 | 43 | .separator-skew { 44 | height: 80px; 45 | @include media-breakpoint-down(md) { 46 | z-index: 0; 47 | } 48 | } 49 | 50 | 51 | 52 | .mt-md, 53 | .my-md 54 | { 55 | margin-top: 4rem !important; 56 | } 57 | 58 | .mr-md, 59 | .mx-md 60 | { 61 | margin-right: 4rem !important; 62 | } 63 | 64 | .mb-md, 65 | .my-md 66 | { 67 | margin-bottom: 4rem !important; 68 | } 69 | 70 | .ml-md, 71 | .mx-md 72 | { 73 | margin-left: 4rem !important; 74 | } 75 | 76 | .m-lg 77 | { 78 | margin: 6rem !important; 79 | } 80 | 81 | .mt-lg, 82 | .my-lg 83 | { 84 | margin-top: 6rem !important; 85 | } 86 | 87 | .mr-lg, 88 | .mx-lg 89 | { 90 | margin-right: 6rem !important; 91 | } 92 | 93 | .mb-lg, 94 | .my-lg 95 | { 96 | margin-bottom: 6rem !important; 97 | } 98 | 99 | .ml-lg, 100 | .mx-lg 101 | { 102 | margin-left: 6rem !important; 103 | } 104 | 105 | .m-xl 106 | { 107 | margin: 8rem !important; 108 | } 109 | 110 | .mt-xl, 111 | .my-xl 112 | { 113 | margin-top: 8rem !important; 114 | } 115 | 116 | .mr-xl, 117 | .mx-xl 118 | { 119 | margin-right: 8rem !important; 120 | } 121 | 122 | .mb-xl, 123 | .my-xl 124 | { 125 | margin-bottom: 8rem !important; 126 | } 127 | 128 | .ml-xl, 129 | .mx-xl 130 | { 131 | margin-left: 8rem !important; 132 | } 133 | 134 | 135 | .pt-lg, 136 | .py-lg 137 | { 138 | padding-top: 6rem !important; 139 | } 140 | 141 | .pr-lg, 142 | .px-lg 143 | { 144 | padding-right: 6rem !important; 145 | } 146 | 147 | .pb-lg, 148 | .py-lg 149 | { 150 | padding-bottom: 6rem !important; 151 | } 152 | 153 | .pl-lg, 154 | .px-lg 155 | { 156 | padding-left: 6rem !important; 157 | } 158 | 159 | .p-xl 160 | { 161 | padding: 8rem !important; 162 | } 163 | 164 | .pt-xl, 165 | .py-xl 166 | { 167 | padding-top: 8rem !important; 168 | } 169 | 170 | .pr-xl, 171 | .px-xl 172 | { 173 | padding-right: 8rem !important; 174 | } 175 | 176 | .pb-xl, 177 | .py-xl 178 | { 179 | padding-bottom: 8rem !important; 180 | } 181 | 182 | .pl-xl, 183 | .px-xl 184 | { 185 | padding-left: 8rem !important; 186 | } 187 | 188 | .m-auto 189 | { 190 | margin: auto !important; 191 | } 192 | 193 | .mt-auto, 194 | .my-auto 195 | { 196 | margin-top: auto !important; 197 | } 198 | 199 | .mr-auto, 200 | .mx-auto 201 | { 202 | margin-right: auto !important; 203 | } 204 | 205 | .mb-auto, 206 | .my-auto 207 | { 208 | margin-bottom: auto !important; 209 | } 210 | 211 | .ml-auto, 212 | .mx-auto 213 | { 214 | margin-left: auto !important; 215 | } 216 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/forms.scss: -------------------------------------------------------------------------------- 1 | @mixin form-control-focus() { 2 | &:focus { 3 | color: $input-focus-color; 4 | background-color: $input-focus-bg; 5 | border-color: $input-focus-border-color; 6 | outline: 0; 7 | // Avoid using mixin so we can pass custom focus shadow properly 8 | @if $enable-shadows { 9 | box-shadow: $input-box-shadow, $input-focus-box-shadow; 10 | } @else { 11 | box-shadow: $input-focus-box-shadow; 12 | } 13 | } 14 | } 15 | 16 | 17 | @mixin form-validation-state($state, $color) { 18 | .#{$state}-feedback { 19 | display: none; 20 | width: 100%; 21 | margin-top: $form-feedback-margin-top; 22 | font-size: $form-feedback-font-size; 23 | color: $color; 24 | } 25 | 26 | .#{$state}-tooltip { 27 | position: absolute; 28 | top: 100%; 29 | z-index: 5; 30 | display: none; 31 | max-width: 100%; // Contain to parent when possible 32 | padding: .5rem; 33 | margin-top: .1rem; 34 | font-size: .875rem; 35 | line-height: 1; 36 | color: #fff; 37 | background-color: rgba($color, .8); 38 | border-radius: .2rem; 39 | } 40 | 41 | .form-control, 42 | .custom-select { 43 | .was-validated &:#{$state}, 44 | &.is-#{$state} { 45 | border-color: $color; 46 | 47 | &:focus { 48 | border-color: $color; 49 | //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75); 50 | } 51 | 52 | ~ .#{$state}-feedback, 53 | ~ .#{$state}-tooltip { 54 | display: block; 55 | } 56 | } 57 | } 58 | 59 | .form-check-input { 60 | .was-validated &:#{$state}, 61 | &.is-#{$state} { 62 | ~ .form-check-label { 63 | color: $color; 64 | } 65 | 66 | ~ .#{$state}-feedback, 67 | ~ .#{$state}-tooltip { 68 | display: block; 69 | } 70 | } 71 | } 72 | 73 | .custom-control-input { 74 | .was-validated &:#{$state}, 75 | &.is-#{$state} { 76 | ~ .custom-control-label { 77 | color: $color; 78 | 79 | &::before { 80 | background-color: lighten($color, 25%); 81 | border-color: lighten($color, 25%); 82 | } 83 | } 84 | 85 | ~ .#{$state}-feedback, 86 | ~ .#{$state}-tooltip { 87 | display: block; 88 | } 89 | 90 | &:checked { 91 | ~ .custom-control-label::before { 92 | @include gradient-bg(lighten($color, 10%)); 93 | border-color: lighten($color, 25%); 94 | } 95 | } 96 | 97 | &:focus { 98 | ~ .custom-control-label::before { 99 | box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); 100 | } 101 | } 102 | } 103 | } 104 | 105 | // custom file 106 | .custom-file-input { 107 | .was-validated &:#{$state}, 108 | &.is-#{$state} { 109 | ~ .custom-file-label { 110 | border-color: $color; 111 | 112 | &::before { border-color: inherit; } 113 | } 114 | 115 | ~ .#{$state}-feedback, 116 | ~ .#{$state}-tooltip { 117 | display: block; 118 | } 119 | 120 | &:focus { 121 | ~ .custom-file-label { 122 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25); 123 | } 124 | } 125 | } 126 | } 127 | } 128 | 129 | -------------------------------------------------------------------------------- /src/views/IndexSections/Carousel.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Button, Container, Row, Col, UncontrolledCarousel } from "reactstrap"; 22 | 23 | const items = [ 24 | { 25 | src: require("assets/img/theme/img-1-1200x1000.jpg"), 26 | altText: "", 27 | caption: "", 28 | header: "", 29 | }, 30 | { 31 | src: require("assets/img/theme/img-2-1200x1000.jpg"), 32 | altText: "", 33 | caption: "", 34 | header: "", 35 | }, 36 | ]; 37 | 38 | class Carousel extends React.Component { 39 | render() { 40 | return ( 41 | <> 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 54 |

55 | Bootstrap carousel 56 |

57 |

58 | Argon Design System comes with four pre-built pages to help 59 | you get started faster. You can change the text and images and 60 | you're good to go. 61 |

62 | 69 | 70 | 71 |
72 | 73 |
74 | 75 | 76 | 77 | {/* SVG separator */} 78 |
79 | 87 | 88 | 89 |
90 |
91 | 92 | ); 93 | } 94 | } 95 | 96 | export default Carousel; 97 | -------------------------------------------------------------------------------- /src/views/IndexSections/Pills.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // nodejs library that concatenates classes 20 | import classnames from "classnames"; 21 | // reactstrap components 22 | import { NavItem, NavLink, Nav, Col } from "reactstrap"; 23 | 24 | class Index extends React.Component { 25 | state = { 26 | circledNavPills: 1, 27 | }; 28 | toggleNavs = (e, state, index) => { 29 | e.preventDefault(); 30 | this.setState({ 31 | [state]: index, 32 | }); 33 | }; 34 | render() { 35 | return ( 36 | <> 37 | 38 |

39 | Navigation Pills 40 |

41 | 88 | 89 | 90 | ); 91 | } 92 | } 93 | 94 | export default Index; 95 | -------------------------------------------------------------------------------- /src/views/Index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Container, Row } from "reactstrap"; 22 | 23 | // core components 24 | import DemoNavbar from "components/Navbars/DemoNavbar.js"; 25 | import CardsFooter from "components/Footers/CardsFooter.js"; 26 | 27 | // index page sections 28 | import Hero from "./IndexSections/Hero.js"; 29 | import Buttons from "./IndexSections/Buttons.js"; 30 | import Inputs from "./IndexSections/Inputs.js"; 31 | import CustomControls from "./IndexSections/CustomControls.js"; 32 | import Menus from "./IndexSections/Menus.js"; 33 | import Navbars from "./IndexSections/Navbars.js"; 34 | import Tabs from "./IndexSections/Tabs.js"; 35 | import Progress from "./IndexSections/Progress.js"; 36 | import Pagination from "./IndexSections/Pagination.js"; 37 | import Pills from "./IndexSections/Pills.js"; 38 | import Labels from "./IndexSections/Labels.js"; 39 | import Alerts from "./IndexSections/Alerts.js"; 40 | import Typography from "./IndexSections/Typography.js"; 41 | import Modals from "./IndexSections/Modals.js"; 42 | import Datepicker from "./IndexSections/Datepicker.js"; 43 | import TooltipPopover from "./IndexSections/TooltipPopover.js"; 44 | import Carousel from "./IndexSections/Carousel.js"; 45 | import Icons from "./IndexSections/Icons.js"; 46 | import Login from "./IndexSections/Login.js"; 47 | import Download from "./IndexSections/Download.js"; 48 | 49 | class Index extends React.Component { 50 | componentDidMount() { 51 | document.documentElement.scrollTop = 0; 52 | document.scrollingElement.scrollTop = 0; 53 | this.refs.main.scrollTop = 0; 54 | } 55 | render() { 56 | return ( 57 | <> 58 | 59 |
60 | 61 | 62 | 63 |
64 | 65 | 66 | 67 | 68 |
69 | 70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
88 | 89 | 90 | 91 | 92 |
93 | 94 | 95 | ); 96 | } 97 | } 98 | 99 | export default Index; 100 | -------------------------------------------------------------------------------- /src/views/IndexSections/Icons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Button, Container, Row, Col } from "reactstrap"; 22 | 23 | class Icons extends React.Component { 24 | render() { 25 | return ( 26 | <> 27 |
28 | 29 | 30 | 31 |

Nucleo Icons

32 |

33 | The official package contains over 21.000 icons which are 34 | looking great in combination with Argon Design System. Make 35 | sure you check all of them and use those that you like the 36 | most. 37 |

38 |
39 | 45 | 53 |
54 | 55 | 56 | 78 | 79 |
80 | 81 | ); 82 | } 83 | } 84 | 85 | export default Icons; 86 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/buttons.scss: -------------------------------------------------------------------------------- 1 | // General 2 | 3 | .btn { 4 | position: relative; 5 | text-transform: $btn-text-transform; 6 | will-change: transform; 7 | letter-spacing: $btn-letter-spacing; 8 | font-size: $input-btn-font-size; 9 | 10 | &:hover { 11 | @include box-shadow($btn-hover-box-shadow); 12 | transform: translateY(-1px); 13 | } 14 | 15 | &:not(:last-child) { 16 | margin-right: .5rem; 17 | } 18 | 19 | } 20 | 21 | .btn-group, 22 | .input-group { 23 | .btn { 24 | margin-right: 0; 25 | transform: translateY(0); 26 | } 27 | } 28 | 29 | // Sizes 30 | 31 | .btn-sm { 32 | font-size: $input-btn-font-size-sm; 33 | 34 | &.btn-icon-only { 35 | width: 35px; 36 | height: 35px; 37 | } 38 | 39 | .btn-inner--icon { 40 | font-size: 0.5rem;; 41 | } 42 | } 43 | 44 | .btn-lg { 45 | &.btn-icon-only { 46 | width: 52px; 47 | height: 52px; 48 | } 49 | 50 | .btn-inner--icon { 51 | font-size: 1.2rem; 52 | position: relative; 53 | top: 2px; 54 | } 55 | } 56 | 57 | // Fixes 58 | 59 | [class*="btn-outline-"] { 60 | border-width: 1px; 61 | } 62 | .btn-outline-secondary { 63 | color: darken(theme-color("secondary"), 50%); 64 | } 65 | 66 | .btn-inner--icon { 67 | i:not(.fa) { 68 | position: relative; 69 | } 70 | } 71 | 72 | .btn-link { 73 | font-weight: $btn-font-weight; 74 | box-shadow: none; 75 | 76 | &:hover { 77 | box-shadow: none; 78 | transform: none; 79 | } 80 | 81 | &.text-secondary { 82 | color: darken(theme-color("secondary"), 50%) !important; 83 | } 84 | } 85 | 86 | .btn-neutral { 87 | color: theme-color("primary"); 88 | } 89 | 90 | // Icons 91 | 92 | .btn svg:not(:first-child), 93 | .btn i:not(:first-child) { 94 | margin-left: 0.5rem; 95 | } 96 | 97 | .btn svg:not(:last-child), 98 | .btn i:not(:last-child) { 99 | margin-right: 0.5rem; 100 | } 101 | 102 | // Icon labels 103 | 104 | .btn-icon-label { 105 | position: relative; 106 | 107 | .btn-inner--icon { 108 | position: absolute; 109 | height: 100%; 110 | line-height: 1; 111 | border-radius: 0; 112 | text-align: center; 113 | margin: 0; 114 | width: 3em; 115 | background-color: rgba(0, 0, 0, .1); 116 | } 117 | .btn-inner--icon:not(:first-child) { 118 | right: 0; 119 | top: 0; 120 | border-top-right-radius: inherit; 121 | border-bottom-right-radius: inherit; 122 | } 123 | .btn-inner--icon:not(:last-child) { 124 | left: 0; 125 | top: 0; 126 | border-top-left-radius: inherit; 127 | border-bottom-left-radius: inherit; 128 | } 129 | .btn-inner--icon svg { 130 | position: relative; 131 | top: 50%; 132 | transform: translateY(-50%); 133 | } 134 | 135 | .btn-inner--text:not(:first-child) { 136 | padding-left: 3em; 137 | } 138 | .btn-inner--text:not(:last-child) { 139 | padding-right: 3em; 140 | } 141 | } 142 | 143 | 144 | // Icons 145 | 146 | .btn-icon { 147 | .btn-inner--icon { 148 | img { 149 | width: 20px; 150 | } 151 | } 152 | .btn-inner--text:not(:first-child) { 153 | margin-left: .75em; 154 | } 155 | .btn-inner--text:not(:last-child) { 156 | margin-right: .75em; 157 | } 158 | } 159 | 160 | .btn-icon-only { 161 | width: 2.375rem; 162 | height: 2.375rem; 163 | padding: 0; 164 | } 165 | a.btn-icon-only { 166 | line-height: 2.5; 167 | } 168 | .btn-icon-only.btn-sm { 169 | width: 2rem; 170 | height: 2rem; 171 | } 172 | 173 | 174 | // Brand buttons 175 | 176 | @each $color, 177 | $value in $brand-colors { 178 | .btn-#{$color} { 179 | @include button-variant($value, $value); 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.1.2] 2023-06-02 4 | 5 | - Update dependencies 6 | - Fix Warnings 7 | 8 | ## [1.1.1] 2022-08-25 9 | 10 | - Update dependencies 11 | - Migrate to React 18 12 | - Migrate from node-sass to sass 13 | 14 | ## [1.1.0] 2020-02-14 15 | 16 | ### Bug fixing 17 | 18 | - Changed all 1.0.0 versioning to v1.1.0 19 | - Solved https://github.com/creativetimofficial/argon-design-system-react/issues/2 20 | - Changes to match [Argon Design System](https://www.creative-tim.com/product/argon-design-system?ref=adsr-changelog) by Creative Tim 21 | - - `src/components/Footers/CardsFooter.js` 22 | - - `src/views/IndexSections/Datepicker.js` 23 | - Solved build issue 24 | 25 | ### Major style changes 26 | 27 | - Changed the whole scss/css files and folders to match those of [Argon Design System](https://www.creative-tim.com/product/argon-design-system?ref=adsr-changelog) by Creative Tim 28 | 29 | ### Deleted components 30 | 31 | ### Added components 32 | 33 | ### Deleted dependencies 34 | 35 | ### Added dependencies 36 | 37 | - eslint-plugin-flowtype@3.13.0 (To stop warning: `npm WARN eslint-config-react-app@5.2.0 requires a peer of eslint-plugin-flowtype@3.x but none is installed. You must install peer dependencies yourself.`) 38 | - bootstrap@4.3.1 (To match the new files and folders of scss) 39 | - jquery@3.4.1 (To stop warning: `npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.`) 40 | 41 | ### Updated dependencies 42 | 43 | ``` 44 | headroom.js 0.9.4 → 0.11.0 45 | node-sass 4.12.0 → 4.13.1 46 | nouislider 13.1.5 → 14.1.1 47 | react 16.8.6 → 16.12.0 48 | react-dom 16.8.6 → 16.12.0 49 | react-router 5.0.0 → 5.1.2 50 | react-router-dom 5.0.0 → 5.1.2 51 | react-scripts 3.0.0 → 3.3.1 52 | reactstrap 8.0.0 → 8.4.1 53 | @types/googlemaps 3.30.19 → 3.39.2 54 | @types/react 16.8.16 → 16.9.19 55 | typescript 3.4.5 → 3.7.5 56 | ``` 57 | 58 | ### Warning 59 | 60 | **The following warnings could not be solved, due to some of our dependencies, however, they do not affect the functionality or the UI of the product:** 61 | 62 | ``` 63 | npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 64 | npm WARN deprecated popper.js@1.16.1: Popper changed home, find its new releases at @popperjs/core 65 | npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. 66 | ``` 67 | 68 | **The following warning could not be solved due to the usage of react-datetime (Note: if the warning will persist after React changes version to 17, we'll drop the support for react-datetime and replace them with other react library for dates input):** 69 | 70 | ``` 71 | Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details. 72 | 73 | * Move data fetching code or side effects to componentDidUpdate. 74 | * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state 75 | * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. 76 | 77 | Please update the following components: DateTime 78 | ``` 79 | 80 | ## [1.0.0] 2019-05-13 81 | 82 | ### Original Release 83 | 84 | - Added Reactstrap as base framework 85 | - Added design from Argon Design System by Creative Tim 86 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/mixins/buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) { 2 | color: color-yiq($background); 3 | @include gradient-bg($background); 4 | border-color: $border; 5 | @include box-shadow($btn-box-shadow); 6 | 7 | @include hover { 8 | color: color-yiq($hover-background); 9 | @include gradient-bg($hover-background); 10 | border-color: $hover-border; 11 | } 12 | 13 | &:focus, 14 | &.focus { 15 | // Avoid using mixin so we can pass custom focus shadow properly 16 | @if $enable-shadows { 17 | box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); 18 | } 19 | @else { 20 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); 21 | } 22 | } 23 | // Disabled comes first so active can properly restyle 24 | &.disabled, 25 | &:disabled { 26 | color: color-yiq($background); 27 | background-color: $background; 28 | border-color: $border; 29 | } 30 | 31 | &:not(:disabled):not(.disabled):active, 32 | &:not(:disabled):not(.disabled).active, 33 | .show>&.dropdown-toggle { 34 | color: color-yiq($active-background); 35 | background-color: $active-background; 36 | @if $enable-gradients { 37 | background-image: none; // Remove the gradient for the pressed/active state 38 | } 39 | border-color: $active-border; 40 | 41 | &:focus { 42 | // Avoid using mixin so we can pass custom focus shadow properly 43 | @if $enable-shadows { 44 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); 45 | } 46 | @else { 47 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); 48 | } 49 | } 50 | } 51 | } 52 | 53 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { 54 | color: $color; 55 | background-color: transparent; 56 | background-image: none; 57 | border-color: $color; 58 | 59 | &:hover { 60 | color: $color-hover; 61 | background-color: $active-background; 62 | border-color: $active-border; 63 | } 64 | 65 | &:focus, 66 | &.focus { 67 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 68 | } 69 | 70 | &.disabled, 71 | &:disabled { 72 | color: $color; 73 | background-color: transparent; 74 | } 75 | 76 | &:not(:disabled):not(.disabled):active, 77 | &:not(:disabled):not(.disabled).active, 78 | .show>&.dropdown-toggle { 79 | color: color-yiq($active-background); 80 | background-color: $active-background; 81 | border-color: $active-border; 82 | 83 | &:focus { 84 | // Avoid using mixin so we can pass custom focus shadow properly 85 | @if $enable-shadows and $btn-active-box-shadow !=none { 86 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); 87 | } 88 | @else { 89 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 90 | } 91 | } 92 | } 93 | } 94 | 95 | // Button sizes 96 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 97 | padding: $padding-y $padding-x; 98 | font-size: $font-size; 99 | line-height: $line-height; // Manually declare to provide an override to the browser default 100 | @if $enable-rounded { 101 | border-radius: $border-radius; 102 | } 103 | @else { 104 | border-radius: 0; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/docs/prism.scss: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 4 | font-size: 14px; 5 | line-height: 1.375; 6 | direction: ltr; 7 | text-align: left; 8 | white-space: pre; 9 | word-spacing: normal; 10 | word-break: normal; 11 | -moz-tab-size: 4; 12 | -o-tab-size: 4; 13 | tab-size: 4; 14 | -webkit-hyphens: none; 15 | -moz-hyphens: none; 16 | -ms-hyphens: none; 17 | hyphens: none; 18 | background: #f5f7ff; 19 | color: #5e6687; 20 | border-radius: .25rem; 21 | } 22 | 23 | pre[class*="language-"]::-moz-selection, 24 | pre[class*="language-"] ::-moz-selection, 25 | code[class*="language-"]::-moz-selection, 26 | code[class*="language-"] ::-moz-selection { 27 | text-shadow: none; 28 | background: #dfe2f1; 29 | } 30 | 31 | pre[class*="language-"]::selection, 32 | pre[class*="language-"] ::selection, 33 | code[class*="language-"]::selection, 34 | code[class*="language-"] ::selection { 35 | text-shadow: none; 36 | background: #dfe2f1; 37 | } 38 | 39 | 40 | /* Code blocks */ 41 | 42 | pre[class*="language-"] { 43 | padding: 1.25rem; 44 | margin: 0; 45 | overflow: auto; 46 | } 47 | 48 | 49 | /* Inline code */ 50 | 51 | :not(pre)>code[class*="language-"] { 52 | padding: .1em; 53 | border-radius: .3em; 54 | } 55 | 56 | .token.comment, 57 | .token.prolog, 58 | .token.doctype, 59 | .token.cdata { 60 | color: #898ea4; 61 | } 62 | 63 | .token.punctuation { 64 | color: #5e6687; 65 | } 66 | 67 | .token.namespace { 68 | opacity: .7; 69 | } 70 | 71 | .token.operator, 72 | .token.boolean, 73 | .token.number { 74 | color: #c76b29; 75 | } 76 | 77 | .token.property { 78 | color: #c08b30; 79 | } 80 | 81 | .token.tag { 82 | color: #3d8fd1; 83 | } 84 | 85 | .token.string { 86 | color: #22a2c9; 87 | } 88 | 89 | .token.selector { 90 | color: #6679cc; 91 | } 92 | 93 | .token.attr-name { 94 | color: #c76b29; 95 | } 96 | 97 | .token.entity, 98 | .token.url, 99 | .language-css .token.string, 100 | .style .token.string { 101 | color: #22a2c9; 102 | } 103 | 104 | .token.attr-value, 105 | .token.keyword, 106 | .token.control, 107 | .token.directive, 108 | .token.unit { 109 | color: #ac9739; 110 | } 111 | 112 | .token.statement, 113 | .token.regex, 114 | .token.atrule { 115 | color: #22a2c9; 116 | } 117 | 118 | .token.placeholder, 119 | .token.variable { 120 | color: #3d8fd1; 121 | } 122 | 123 | .token.deleted { 124 | text-decoration: line-through; 125 | } 126 | 127 | .token.inserted { 128 | border-bottom: 1px dotted #202746; 129 | text-decoration: none; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.important { 142 | color: #c94922; 143 | } 144 | 145 | .token.entity { 146 | cursor: help; 147 | } 148 | 149 | pre>code.highlight { 150 | outline: 0.4em solid #c94922; 151 | outline-offset: .4em; 152 | } 153 | 154 | 155 | /* overrides color-values for the Line Numbers plugin 156 | * http://prismjs.com/plugins/line-numbers/ 157 | */ 158 | 159 | .line-numbers .line-numbers-rows { 160 | border-right-color: #dfe2f1; 161 | } 162 | 163 | .line-numbers-rows>span:before { 164 | color: #979db4; 165 | } 166 | 167 | 168 | /* overrides color-values for the Line Highlight plugin 169 | * http://prismjs.com/plugins/line-highlight/ 170 | */ 171 | 172 | .line-highlight { 173 | background: rgba(107, 115, 148, 0.2); 174 | background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); 175 | background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); 176 | } -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/docs/sidebar.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | // 3 | // Right side table of contents 4 | // 5 | .ct-toc { 6 | @supports (position: sticky) { 7 | position: sticky; 8 | top: 4rem; 9 | height: calc(100vh - 4rem); 10 | overflow-y: auto; 11 | } 12 | order: 2; 13 | padding-top: 2rem; 14 | padding-bottom: 1.5rem; 15 | font-size: .875rem; 16 | } 17 | 18 | .section-nav { 19 | padding-left: 0; 20 | border-left: 1px solid #eee; 21 | 22 | ul { 23 | padding-left: 1rem; 24 | 25 | ul { 26 | display: none; 27 | } 28 | } 29 | } 30 | 31 | .toc-entry { 32 | display: block; 33 | font-size: 1rem; 34 | 35 | a { 36 | display: block; 37 | padding: .125rem 1.5rem; 38 | color: #99979c; 39 | font-size: 90%; 40 | 41 | &:hover { 42 | color: $blue; 43 | text-decoration: none; 44 | } 45 | } 46 | } 47 | 48 | // 49 | // Left side navigation 50 | // 51 | .ct-sidebar { 52 | order: 0; // background-color: #f5f2f9; 53 | border-bottom: 1px solid $ct-sidebar-border-color; 54 | background-color: $ct-sidebar-bg; 55 | 56 | @include media-breakpoint-up(md) { 57 | @supports (position: sticky) { 58 | position: sticky; 59 | top: 4rem; 60 | z-index: 1000; 61 | height: calc(100vh - 4rem); 62 | } 63 | border-right: 1px solid $ct-sidebar-border-color; 64 | } 65 | 66 | @include media-breakpoint-up(xl) { 67 | flex: 0 1 320px; 68 | } 69 | } 70 | 71 | .ct-links { 72 | padding-top: 2rem; 73 | padding-bottom: 1rem; 74 | margin-right: -15px; 75 | margin-left: -15px; 76 | 77 | @include media-breakpoint-up(md) { 78 | @supports (position: sticky) { 79 | max-height: calc(100vh - 5rem); 80 | overflow-y: auto; 81 | } 82 | } // Override collapse behaviors 83 | @include media-breakpoint-up(md) { 84 | display: block !important; 85 | } 86 | } 87 | 88 | .ct-search { 89 | position: relative; // To contain the Algolia search 90 | padding: 1rem 15px; 91 | margin-right: -15px; 92 | margin-left: -15px; 93 | border-bottom: 1px solid rgba(0, 0, 0, .05); 94 | 95 | .form-control:focus { 96 | border-color: $ct-primary-bright; 97 | box-shadow: 0 0 0 3px rgba($ct-primary-bright, .25); 98 | } 99 | } 100 | 101 | .ct-search-docs-toggle { 102 | line-height: 1; 103 | color: $gray-900; 104 | } 105 | 106 | .ct-sidenav { 107 | display: none; 108 | } 109 | 110 | .ct-toc-link { 111 | display: block; 112 | padding: .25rem 1.5rem; 113 | font-weight: 600; 114 | font-size: .875rem; 115 | color: #0d2b3e; 116 | 117 | &:hover { 118 | color: rgba(0, 0, 0, .85); 119 | text-decoration: none; 120 | } 121 | } 122 | 123 | .ct-toc-item { 124 | &.active { 125 | margin-bottom: 1rem; 126 | 127 | &:not(:first-child) { 128 | margin-top: 1rem; 129 | } 130 | 131 | >.ct-toc-link { 132 | color: rgba(0, 0, 0, .85); 133 | 134 | &:hover { 135 | background-color: transparent; 136 | } 137 | } 138 | 139 | >.ct-sidenav { 140 | display: block; 141 | } 142 | } 143 | } 144 | 145 | // All levels of nav 146 | .ct-sidebar .nav>li>a { 147 | display: block; 148 | padding: .25rem 1.5rem; 149 | font-size: 84%; 150 | color: #4c555a; 151 | } 152 | 153 | .ct-sidebar .nav>li>a:hover { 154 | color: rgba(0, 0, 0, .85); 155 | text-decoration: none; 156 | background-color: transparent; 157 | } 158 | 159 | .ct-sidebar .nav>.active>a { 160 | font-weight: 500; 161 | color: #0099e5; 162 | background-color: transparent; 163 | padding-left: 2rem; 164 | position: relative; 165 | 166 | &:before { 167 | content: ''; 168 | position: absolute; 169 | height: 16px; 170 | width: 2px; 171 | background-color: #0099e5; 172 | top: 50%; 173 | left: 1.5rem; 174 | transform: translateY(-50%); 175 | } 176 | } 177 | 178 | .ct-sidebar .nav>.active:hover>a { 179 | color: #0099e5 180 | } 181 | 182 | 183 | .scrollbar-inner { 184 | height: 100%; 185 | 186 | &:not(:hover) .scroll-element { 187 | opacity: 0; 188 | } 189 | 190 | .scroll-element { 191 | transition: opacity 300ms; 192 | margin-right: 2px; 193 | 194 | .scroll-bar, 195 | .scroll-element_track { 196 | transition: background-color 300ms; 197 | } 198 | 199 | .scroll-element_track { 200 | background-color: transparent; 201 | } 202 | } 203 | 204 | .scroll-element.scroll-y { 205 | width: 3px; 206 | right: 0; 207 | } 208 | 209 | .scroll-element.scroll-x { 210 | height: 3px; 211 | bottom: 0; 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /src/views/IndexSections/Pagination.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Pagination, PaginationItem, PaginationLink, Col } from "reactstrap"; 22 | 23 | class PaginationSection extends React.Component { 24 | render() { 25 | return ( 26 | <> 27 | 28 |

Pagination

29 | 73 | 133 | 134 | 135 | ); 136 | } 137 | } 138 | 139 | export default PaginationSection; 140 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/global.scss: -------------------------------------------------------------------------------- 1 | // Nucleo icons 2 | 3 | .section-nucleo-icons .icons-container { 4 | position: relative; 5 | max-width: 100%; 6 | height: 360px; 7 | margin: 0 auto; 8 | z-index: 1; 9 | } 10 | 11 | .section-nucleo-icons { 12 | 13 | --icon-size: 5rem; 14 | --icon-sm-size: 3.75rem; 15 | --gutter: 7rem; 16 | 17 | .icons-container { 18 | i { 19 | position: absolute; 20 | display: inline-flex; 21 | align-items: center; 22 | justify-content: center; 23 | border-radius: 50%; 24 | background: $white; 25 | z-index: 1; 26 | transform: translate(-50%, -50%); 27 | @include box-shadow($box-shadow); 28 | transition: all .2s cubic-bezier(.25,.65,.9,.75); 29 | 30 | &.icon { 31 | width: var(--icon-size); 32 | height: var(--icon-size); 33 | font-size: 1.7em; 34 | } 35 | 36 | &.icon-sm { 37 | width: var(--icon-sm-size); 38 | height: var(--icon-sm-size); 39 | font-size: 1.5em; 40 | } 41 | 42 | &:nth-child(1) { 43 | font-size: 42px; 44 | color: theme-color("warning"); 45 | z-index: 2; 46 | } 47 | } 48 | 49 | &:not(.on-screen) { 50 | i { 51 | transform: translate(-50%, -50%); 52 | left: 50%; 53 | top: 50%; 54 | 55 | &:not(:nth-child(1)) { 56 | opacity: 0; 57 | } 58 | } 59 | } 60 | 61 | &.on-screen { 62 | 63 | i { 64 | opacity: 1; 65 | 66 | &:nth-child(1) { 67 | left: 50%; 68 | top: 50%; 69 | font-size: 42px; 70 | color: theme-color("warning"); 71 | } 72 | 73 | &:nth-child(2) { 74 | left: calc(50% + (var(--gutter) * 1.7)); 75 | top: 50%; 76 | } 77 | 78 | &:nth-child(3) { 79 | left: calc(50% + var(--gutter)); 80 | top: calc(50% + var(--gutter)); 81 | } 82 | 83 | &:nth-child(4) { 84 | left: calc(50% + var(--gutter)); 85 | top: calc(50% - var(--gutter)); 86 | } 87 | 88 | &:nth-child(5) { 89 | left: calc(50% + (var(--gutter) * 3)); 90 | top: 50%; 91 | } 92 | 93 | &:nth-child(6) { 94 | left: calc(50% + (var(--gutter) * 2.7)); 95 | top: calc(50% + (var(--gutter) * 1.5)); 96 | } 97 | 98 | &:nth-child(7) { 99 | left: calc(50% + (var(--gutter) * 2.7)); 100 | top: calc(50% - (var(--gutter) * 1.5)); 101 | } 102 | 103 | &:nth-child(8) { 104 | left: calc(50% - (var(--gutter) * 1.7)); 105 | top: 50%; 106 | } 107 | 108 | &:nth-child(9) { 109 | left: calc(50% - var(--gutter)); 110 | top: calc(50% + var(--gutter)); 111 | } 112 | 113 | &:nth-child(10) { 114 | left: calc(50% - var(--gutter)); 115 | top: calc(50% - var(--gutter)); 116 | } 117 | 118 | &:nth-child(11) { 119 | left: calc(50% - (var(--gutter) * 4)); 120 | top: 50%; 121 | } 122 | 123 | &:nth-child(12) { 124 | left: calc(50% - (var(--gutter) * 2.7)); 125 | top: calc(50% + (var(--gutter) * 1.5)); 126 | } 127 | 128 | &:nth-child(13) { 129 | left: calc(50% - (var(--gutter) * 2.7)); 130 | top: calc(50% - (var(--gutter) * 1.5)); 131 | } 132 | } 133 | 134 | } 135 | } 136 | 137 | @include media-breakpoint-down(md) { 138 | overflow: hidden; 139 | } 140 | } 141 | 142 | 143 | // Blurable sections 144 | 145 | .blur--hover { 146 | position: relative; 147 | 148 | .blur-item { 149 | transition: 1s cubic-bezier(.19,1,.22,1); 150 | will-change: transform; 151 | filter: blur(0); 152 | opacity: 1; 153 | } 154 | 155 | .blur-hidden { 156 | position: absolute; 157 | top: calc(50% + 7px); 158 | left: 50%; 159 | transform: translate(-50%, -50%); 160 | opacity: 0; 161 | transition: $transition-base; 162 | z-index: 100; 163 | } 164 | &:hover { 165 | .blur-item { 166 | opacity: .8; 167 | filter: blur(10px); 168 | transform: scale(.95); 169 | z-index: 1; 170 | } 171 | .blur-hidden { 172 | opacity: 1; 173 | top: 50%; 174 | } 175 | } 176 | } 177 | 178 | .info .info-title{ 179 | margin: 25px 0 15px; 180 | font-weight: 600; 181 | } 182 | -------------------------------------------------------------------------------- /src/views/IndexSections/Hero.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Button, Container, Row, Col } from "reactstrap"; 22 | 23 | class Hero extends React.Component { 24 | render() { 25 | return ( 26 | <> 27 |
28 | {/* Hero for FREE version */} 29 |
30 | {/* Background circles */} 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | ... 53 |

54 | A beautiful Design System for Bootstrap 4. It's Free and 55 | Open Source. 56 |

57 |
58 | {" "} 69 | 84 |
85 |
86 | 87 | *proudly coded by 88 | 89 | ... 95 |
96 | 97 | 98 |
99 | 100 | {/* SVG separator */} 101 |
102 | 110 | 114 | 115 |
116 |
117 |
118 | 119 | ); 120 | } 121 | } 122 | 123 | export default Hero; 124 | -------------------------------------------------------------------------------- /src/assets/scss/argon-design-system/custom-forms.scss: -------------------------------------------------------------------------------- 1 | .custom-control-label { 2 | // Background-color and (when enabled) gradient 3 | &::before { 4 | border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color; 5 | @if $enable-transitions { 6 | transition: all .3s ease;; 7 | } 8 | } 9 | 10 | span { 11 | position: relative; 12 | top: 2px; 13 | } 14 | } 15 | 16 | .custom-control { 17 | padding-left: 1.7rem !important; 18 | } 19 | 20 | .custom-control-label { 21 | margin-bottom: 0; 22 | 23 | &:before, 24 | &:after { 25 | left: -1.75rem; 26 | } 27 | } 28 | 29 | .custom-control-input { 30 | &:active~.custom-control-label::before { 31 | border-color: $custom-control-indicator-active-border-color; 32 | } 33 | } 34 | 35 | // Alternative custom control 36 | .custom-control-alternative { 37 | .custom-control-label { 38 | // Background-color and (when enabled) gradient 39 | &::before { 40 | border: 0; 41 | box-shadow: $input-alternative-box-shadow; 42 | } 43 | } 44 | 45 | .custom-control-input { 46 | &:checked { 47 | ~ .custom-control-label { 48 | &::before { 49 | box-shadow: $input-focus-alternative-box-shadow; 50 | } 51 | } 52 | } 53 | 54 | &:active~.custom-control-label::before, 55 | &:focus~.custom-control-label::before { 56 | box-shadow: $input-alternative-box-shadow; 57 | } 58 | } 59 | } 60 | 61 | 62 | // Checkboxes 63 | .custom-checkbox { 64 | .custom-control-input~.custom-control-label { 65 | cursor: pointer; 66 | font-size: $font-size-sm; 67 | } 68 | 69 | .custom-control-input { 70 | &:checked { 71 | ~ .custom-control-label { 72 | &::before { 73 | border-color: $custom-control-indicator-checked-border-color; 74 | } 75 | &::after { 76 | background-image: $custom-checkbox-indicator-icon-checked; 77 | } 78 | } 79 | } 80 | 81 | &:disabled { 82 | ~ .custom-control-label { 83 | &::before { 84 | border-color: $custom-control-indicator-disabled-bg; 85 | } 86 | } 87 | 88 | &:checked { 89 | &::before { 90 | border-color: $custom-control-indicator-checked-disabled-bg; 91 | } 92 | } 93 | } 94 | } 95 | } 96 | 97 | // Radios 98 | .custom-radio { 99 | .custom-control-input~.custom-control-label { 100 | cursor: pointer; 101 | font-size: $font-size-sm; 102 | } 103 | 104 | .custom-control-input { 105 | &:checked { 106 | ~ .custom-control-label { 107 | &::before { 108 | border-color: $custom-control-indicator-checked-border-color; 109 | } 110 | &::after { 111 | background-image: $custom-radio-indicator-icon-checked; 112 | } 113 | } 114 | } 115 | 116 | &:disabled { 117 | ~ .custom-control-label { 118 | &::before { 119 | border-color: $custom-control-indicator-disabled-bg; 120 | } 121 | } 122 | 123 | &:checked { 124 | &::before { 125 | border-color: $custom-control-indicator-checked-disabled-bg; 126 | } 127 | } 128 | } 129 | } 130 | 131 | } 132 | 133 | // Toggles 134 | .custom-toggle { 135 | position: relative; 136 | display: inline-block; 137 | width: 50px; 138 | height: 1.5rem; 139 | 140 | input { 141 | display: none; 142 | 143 | &:checked { 144 | + .custom-toggle-slider { 145 | border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color; 146 | 147 | &:before { 148 | background: $custom-toggle-checked-bg; 149 | transform: translateX(1.625rem); 150 | } 151 | } 152 | } 153 | 154 | &:disabled { 155 | + .custom-toggle-slider { 156 | border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg; 157 | } 158 | 159 | &:checked { 160 | + .custom-toggle-slider { 161 | border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg; 162 | 163 | &:before { 164 | background-color: lighten($custom-control-indicator-checked-bg, 10%); 165 | } 166 | } 167 | } 168 | } 169 | } 170 | } 171 | 172 | .custom-toggle-slider { 173 | position: absolute; 174 | cursor: pointer; 175 | top: 0; 176 | left: 0; 177 | right: 0; 178 | bottom: 0; 179 | border: $custom-control-indicator-border-width solid $input-border-color; 180 | border-radius: 34px !important; 181 | background-color: transparent; 182 | 183 | 184 | &:before { 185 | position: absolute; 186 | content: ""; 187 | height: 18px; 188 | width: 18px; 189 | left: 2px; 190 | bottom: 2px; 191 | border-radius: 50% !important; 192 | background-color: $custom-toggle-slider-bg; 193 | transition: $input-transition; 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /src/views/IndexSections/TooltipPopover.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { 22 | Button, 23 | Row, 24 | Col, 25 | UncontrolledTooltip, 26 | UncontrolledPopover, 27 | PopoverBody, 28 | PopoverHeader, 29 | } from "reactstrap"; 30 | 31 | class TooltipPopover extends React.Component { 32 | render() { 33 | return ( 34 | <> 35 |

36 | Tooltips & Popovers 37 |

38 | 39 | 40 | 41 | Tooltips 42 | 43 | 51 | 57 | Tooltip on left 58 | 59 | 67 | 73 | Tooltip on top 74 | 75 | 83 | 89 | Tooltip on bottom 90 | 91 | 99 | 105 | Tooltip on right 106 | 107 | 108 | 109 | 110 | Popovers 111 | 112 | 115 | 120 | Popover On Left 121 | 122 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 123 | 124 | 125 | 128 | 133 | Popover on Top 134 | 135 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 136 | 137 | 138 | 141 | 146 | Popover on Right 147 | 148 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 149 | 150 | 151 | 154 | 159 | Popover on Bottom 160 | 161 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 162 | 163 | 164 | 165 | 166 | 167 | ); 168 | } 169 | } 170 | 171 | export default TooltipPopover; 172 | -------------------------------------------------------------------------------- /src/components/Footers/SimpleFooter.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | /*eslint-disable*/ 19 | import React from "react"; 20 | // reactstrap components 21 | import { 22 | Button, 23 | NavItem, 24 | NavLink, 25 | Nav, 26 | Container, 27 | Row, 28 | Col, 29 | UncontrolledTooltip, 30 | } from "reactstrap"; 31 | 32 | class SimpleFooter extends React.Component { 33 | render() { 34 | return ( 35 | <> 36 |
37 | 38 | 39 | 40 |

41 | Thank you for supporting us! 42 |

43 |

44 | Let's get in touch on any of these platforms. 45 |

46 | 47 | 48 | 59 | 60 | Follow us 61 | 62 | 73 | 74 | Like us 75 | 76 | 87 | 88 | Follow us 89 | 90 | 101 | 102 | Star on Github 103 | 104 | 105 | 106 |
107 | 108 | 109 |
110 | © {new Date().getFullYear()}{" "} 111 | 115 | Creative Tim 116 | 117 | . 118 |
119 | 120 | 121 | 155 | 156 | 157 | 158 |
159 | 160 | ); 161 | } 162 | } 163 | 164 | export default SimpleFooter; 165 | -------------------------------------------------------------------------------- /src/views/examples/Profile.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Button, Card, Container, Row, Col } from "reactstrap"; 22 | 23 | // core components 24 | import DemoNavbar from "components/Navbars/DemoNavbar.js"; 25 | import SimpleFooter from "components/Footers/SimpleFooter.js"; 26 | 27 | class Profile extends React.Component { 28 | componentDidMount() { 29 | document.documentElement.scrollTop = 0; 30 | document.scrollingElement.scrollTop = 0; 31 | this.refs.main.scrollTop = 0; 32 | } 33 | render() { 34 | return ( 35 | <> 36 | 37 |
38 |
39 | {/* Circles background */} 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | {/* SVG separator */} 50 |
51 | 59 | 63 | 64 |
65 |
66 |
67 | 68 | 69 |
70 | 71 | 72 | 81 | 82 | 86 |
87 | 96 | 105 |
106 | 107 | 108 |
109 |
110 | 22 111 | Friends 112 |
113 |
114 | 10 115 | Photos 116 |
117 |
118 | 89 119 | Comments 120 |
121 |
122 | 123 | 124 |
125 |

126 | Jessica Jones{" "} 127 | , 27 128 |

129 |
130 | 131 | Bucharest, Romania 132 |
133 |
134 | 135 | Solution Manager - Creative Tim Officer 136 |
137 |
138 | 139 | University of Computer Science 140 |
141 |
142 |
143 | 144 | 145 |

146 | An artist of considerable range, Ryan — the name taken 147 | by Melbourne-raised, Brooklyn-based Nick Murphy — 148 | writes, performs and records all of his own music, 149 | giving it a warm, intimate feel with a solid groove 150 | structure. An artist of considerable range. 151 |

152 | e.preventDefault()}> 153 | Show more 154 | 155 | 156 | 157 |
158 |
159 | 160 | 161 |
162 |
163 | 164 | 165 | ); 166 | } 167 | } 168 | 169 | export default Profile; 170 | -------------------------------------------------------------------------------- /src/views/IndexSections/Datepicker.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // react plugin used to create datetimepicker 20 | import ReactDatetime from "react-datetime"; 21 | 22 | // reactstrap components 23 | import { 24 | FormGroup, 25 | InputGroupAddon, 26 | InputGroupText, 27 | InputGroup, 28 | Row, 29 | Col, 30 | } from "reactstrap"; 31 | 32 | class Datepicker extends React.Component { 33 | state = {}; 34 | handleReactDatetimeChange = (who, date) => { 35 | if ( 36 | this.state.startDate && 37 | who === "endDate" && 38 | new Date(this.state.startDate._d + "") > new Date(date._d + "") 39 | ) { 40 | this.setState({ 41 | startDate: date, 42 | endDate: date, 43 | }); 44 | } else if ( 45 | this.state.endDate && 46 | who === "startDate" && 47 | new Date(this.state.endDate._d + "") < new Date(date._d + "") 48 | ) { 49 | this.setState({ 50 | startDate: date, 51 | endDate: date, 52 | }); 53 | } else { 54 | this.setState({ 55 | [who]: date, 56 | }); 57 | } 58 | }; 59 | // this function adds on the day tag of the date picker 60 | // middle-date className which means that this day will have no border radius 61 | // start-date className which means that this day will only have left border radius 62 | // end-date className which means that this day will only have right border radius 63 | // this way, the selected dates will look nice and will only be rounded at the ends 64 | getClassNameReactDatetimeDays = (date) => { 65 | if (this.state.startDate && this.state.endDate) { 66 | } 67 | if ( 68 | this.state.startDate && 69 | this.state.endDate && 70 | this.state.startDate._d + "" !== this.state.endDate._d + "" 71 | ) { 72 | if ( 73 | new Date(this.state.endDate._d + "") > new Date(date._d + "") && 74 | new Date(this.state.startDate._d + "") < new Date(date._d + "") 75 | ) { 76 | return " middle-date"; 77 | } 78 | if (this.state.endDate._d + "" === date._d + "") { 79 | return " end-date"; 80 | } 81 | if (this.state.startDate._d + "" === date._d + "") { 82 | return " start-date"; 83 | } 84 | } 85 | return ""; 86 | }; 87 | render() { 88 | return ( 89 | <> 90 |

91 | Datepicker 92 |

93 | 94 | 95 | 96 | Single date 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 112 | 113 | 114 | 115 | 116 | Date range 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 134 | this.handleReactDatetimeChange("startDate", e) 135 | } 136 | renderDay={(props, currentDate, selectedDate) => { 137 | let classes = props.className; 138 | classes += 139 | this.getClassNameReactDatetimeDays(currentDate); 140 | return ( 141 | 142 | {currentDate.date()} 143 | 144 | ); 145 | }} 146 | /> 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 166 | this.handleReactDatetimeChange("endDate", e) 167 | } 168 | renderDay={(props, currentDate, selectedDate) => { 169 | let classes = props.className; 170 | classes += 171 | this.getClassNameReactDatetimeDays(currentDate); 172 | return ( 173 | 174 | {currentDate.date()} 175 | 176 | ); 177 | }} 178 | /> 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | ); 187 | } 188 | } 189 | 190 | export default Datepicker; 191 | -------------------------------------------------------------------------------- /src/components/Footers/CardsFooter.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | /*eslint-disable*/ 19 | import React from "react"; 20 | import { Link } from "react-router-dom"; 21 | // reactstrap components 22 | import { 23 | Button, 24 | Card, 25 | CardImg, 26 | NavItem, 27 | NavLink, 28 | Nav, 29 | Container, 30 | Row, 31 | Col, 32 | UncontrolledTooltip, 33 | } from "reactstrap"; 34 | 35 | class CardsFooter extends React.Component { 36 | render() { 37 | return ( 38 | <> 39 |
40 | 41 | 42 | 43 | 44 | 45 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |

68 | Thank you for supporting us! 69 |

70 |

71 | Let's get in touch on any of these platforms. 72 |

73 | 74 | 75 | 86 | 87 | Follow us 88 | 89 | 100 | 101 | Like us 102 | 103 | 114 | 115 | Follow us 116 | 117 | 128 | 129 | Star on Github 130 | 131 | 132 | 133 |
134 | 135 | 136 |
137 | © {new Date().getFullYear()}{" "} 138 | 142 | Creative Tim 143 | 144 | . 145 |
146 | 147 | 148 | 182 | 183 | 184 | 185 |
186 | 187 | ); 188 | } 189 | } 190 | 191 | export default CardsFooter; 192 | -------------------------------------------------------------------------------- /src/views/IndexSections/Download.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | /*eslint-disable*/ 19 | import React from "react"; 20 | 21 | // reactstrap components 22 | import { Button, Container, Row, Col, UncontrolledTooltip } from "reactstrap"; 23 | 24 | class Download extends React.Component { 25 | render() { 26 | return ( 27 | <> 28 |
29 | 30 | 31 | 32 |

33 | Do you love this awesome{" "} 34 | 35 | Design System for Bootstrap 4? 36 | 37 |

38 |

39 | Cause if you do, it can be yours for FREE. Hit the button 40 | below to navigate to Creative Tim where you can find the 41 | Design System in React. Start a new project or give an old 42 | Bootstrap project a new look! 43 |

44 |
45 | 52 |
53 |
54 |

55 | Available on these technologies 56 |

57 | 58 | 59 | 64 | ... 69 | 70 | 71 | Bootstrap 4 - Most popular front-end component library 72 | 73 | 74 | 75 | 80 | ... 85 | 86 | 87 | Vue.js - The progressive javascript framework 88 | 89 | 90 | 91 | 96 | ... 101 | 102 | 103 | Angular - One framework. Mobile & Desktop 104 | 105 | 106 | 107 | 112 | ... 117 | 118 | 119 | React - A JavaScript library for building user 120 | interfaces 121 | 122 | 123 | 124 | 129 | ... 134 | 135 | 136 | Sketch - Digital design toolkit 137 | 138 | 139 | 140 | 145 | ... 150 | 151 | 152 | Adobe Photoshop - Software for digital images 153 | manipulation 154 | 155 | 156 | 157 |
158 | 159 | 160 | 161 |
162 | 163 | ); 164 | } 165 | } 166 | 167 | export default Download; 168 | -------------------------------------------------------------------------------- /src/views/examples/Login.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { 22 | Button, 23 | Card, 24 | CardHeader, 25 | CardBody, 26 | FormGroup, 27 | Form, 28 | Input, 29 | InputGroupAddon, 30 | InputGroupText, 31 | InputGroup, 32 | Container, 33 | Row, 34 | Col, 35 | } from "reactstrap"; 36 | 37 | // core components 38 | import DemoNavbar from "components/Navbars/DemoNavbar.js"; 39 | import SimpleFooter from "components/Footers/SimpleFooter.js"; 40 | 41 | class Login extends React.Component { 42 | componentDidMount() { 43 | document.documentElement.scrollTop = 0; 44 | document.scrollingElement.scrollTop = 0; 45 | this.refs.main.scrollTop = 0; 46 | } 47 | render() { 48 | return ( 49 | <> 50 | 51 |
52 |
53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
63 | 64 | 65 | 66 | 67 | 68 |
69 | Sign in with 70 |
71 |
72 | 89 | 106 |
107 | 108 | 109 |
110 | Or sign in with credentials 111 |
112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 135 | 136 | 137 |
138 | 143 | 149 |
150 |
151 | 158 |
159 | 160 |
161 | 162 | 163 | 164 | e.preventDefault()} 168 | > 169 | Forgot password? 170 | 171 | 172 | 173 | e.preventDefault()} 177 | > 178 | Create new account 179 | 180 | 181 | 182 | 183 | 184 | 185 |
186 |
187 | 188 | 189 | ); 190 | } 191 | } 192 | 193 | export default Login; 194 | -------------------------------------------------------------------------------- /src/views/IndexSections/Buttons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | 20 | // reactstrap components 21 | import { Button, Container, Row, Col } from "reactstrap"; 22 | 23 | class BasicElements extends React.Component { 24 | render() { 25 | return ( 26 | <> 27 |
31 | 32 | 33 | 34 | {/* Basic elements */} 35 |

36 | Basic Elements 37 |

38 | {/* Buttons */} 39 |

40 | Buttons 41 |

42 | {/* Button styles */} 43 |
44 | 47 | 57 | 66 | {/* Button wizes */} 67 |
68 | 69 | Pick your size 70 | 71 |
72 | 75 | 78 | 86 |
87 | {/* Button colors */} 88 |
89 | 90 | Pick your color 91 | 92 |
93 | 96 | 99 | 102 | 105 | 108 | 115 |
116 | 117 | Outline 118 | 119 |
120 | 123 | 131 | 139 | 147 | 155 | {/* Button links */} 156 |
157 | 158 | Links 159 | 160 |
161 | 169 | 177 | 185 | 193 | 201 | 209 | 210 | 211 | 212 |
213 | 214 | ); 215 | } 216 | } 217 | 218 | export default BasicElements; 219 | -------------------------------------------------------------------------------- /src/views/IndexSections/Inputs.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Argon Design System React - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/argon-design-system-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | // nodejs library that concatenates classes 20 | import classnames from "classnames"; 21 | // reactstrap components 22 | import { 23 | FormGroup, 24 | Input, 25 | InputGroupAddon, 26 | InputGroupText, 27 | InputGroup, 28 | Container, 29 | Row, 30 | Col, 31 | } from "reactstrap"; 32 | 33 | class Inputs extends React.Component { 34 | state = {}; 35 | render() { 36 | return ( 37 | <> 38 |
39 | 40 | {/* Inputs */} 41 |

Inputs

42 |
43 | 44 | Form controls 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | this.setState({ searchFocused: true })} 67 | onBlur={(e) => this.setState({ searchFocused: false })} 68 | /> 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 81 | 82 | this.setState({ birthdayFocused: true })} 86 | onBlur={(e) => this.setState({ birthdayFocused: false })} 87 | /> 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 103 | 104 | 105 | 110 | 111 | 112 | 113 | 114 |
115 | 116 | {/* Inputs (alternative) */} 117 |
118 | 119 | Form controls (alternative) 120 | 121 |
122 | 123 | 124 | 125 | 130 | 131 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 146 | this.setState({ searchAltFocused: true }) 147 | } 148 | onBlur={(e) => 149 | this.setState({ searchAltFocused: false }) 150 | } 151 | /> 152 | 153 | 154 | 155 | 156 | 157 | 163 | 164 | 169 | 170 | 174 | this.setState({ birthdayAltFocused: true }) 175 | } 176 | onBlur={(e) => 177 | this.setState({ birthdayAltFocused: false }) 178 | } 179 | /> 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 195 | 196 | 197 | 202 | 203 | 204 | 205 | 206 |
207 |
208 | 209 | ); 210 | } 211 | } 212 | 213 | export default Inputs; 214 | --------------------------------------------------------------------------------