From bcda44f25904847d13d5f7c77d26a262cc29261d Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 9 Sep 2024 07:01:26 +0300 Subject: [PATCH 001/154] 3.0 Beta --- LICENSE | 2 +- README.md | 3 +- dist/punica.min.css | 10 - package.json | 19 -- .../Global/Getters.scss} | 60 ++---- src/Core/Global/Helpers.scss | 41 ++++ .../mixins.scss => Core/Global/Mixins.scss} | 5 +- .../Global/Variables.scss} | 3 +- src/Core/Theme/Getters.scss | 168 ++++++++++++++++ .../_setters.scss => Core/Theme/Setters.scss} | 8 +- src/Elements/Icon/Icon.scss | 15 -- src/Elements/Icon/variables.scss | 4 - src/Layout/Grid/Grid.scss | 68 ------- src/Layout/Grid/variables.scss | 16 -- src/Layout/index.scss | 7 - src/{ => Modules}/Components/Alert/Alert.scss | 20 +- .../Components/Alert/variables.scss | 2 +- src/{ => Modules}/Components/Badge/Badge.scss | 14 +- .../Components/Badge/variables.scss | 2 +- .../Components/Billboard/Billboard.scss | 24 +-- .../Components/Billboard/variables.scss | 2 +- .../Components/Breadcrumb/Breadcrumb.scss | 34 ++-- .../Components/Breadcrumb/variables.scss | 10 +- .../Components}/Caption/Caption.scss | 26 +-- .../Components}/Caption/variables.scss | 4 +- src/{ => Modules}/Components/Card/Card.scss | 44 ++--- .../Components/Card/variables.scss | 0 .../Components}/Label/Label.scss | 18 +- .../Components}/Label/variables.scss | 4 +- src/{ => Modules}/Components/List/List.scss | 44 ++--- .../Components/List/variables.scss | 0 src/{ => Modules}/Components/Menu/Menu.scss | 58 +++--- .../Components/Menu/variables.scss | 0 .../Components/Navbar/Navbar.scss | 80 ++++---- .../Components/Navbar/mixins.scss | 12 +- .../Components/Navbar/variables.scss | 2 +- src/{ => Modules}/Components/Panel/Panel.scss | 28 +-- .../Components/Panel/variables.scss | 0 .../Components/Process/Process.scss | 42 ++-- .../Components/Process/mixins.scss | 14 +- .../Components/Process/variables.scss | 2 +- .../Components/Progress/Progress.scss | 24 +-- .../Components/Progress/variables.scss | 2 +- src/{ => Modules}/Components/Stats/Stats.scss | 40 ++-- .../Components/Stats/variables.scss | 2 +- .../Components/Tabnav/Tabnav.scss | 30 +-- .../Components/Tabnav/mixins.scss | 2 +- .../Components/Tabnav/variables.scss | 2 +- .../Components/Timeline/Timeline.scss | 26 +-- .../Components/Timeline/variables.scss | 2 +- .../Components/Tooltip/Tooltip.scss | 22 +-- .../Components/Tooltip/variables.scss | 0 src/{ => Modules}/Components/index.scss | 2 + .../Elements}/Base/Base.scss | 26 +-- src/{ => Modules}/Elements/Button/Button.scss | 49 ++--- src/{ => Modules}/Elements/Button/mixins.scss | 62 ++---- .../Elements/Button/variables.scss | 2 +- src/{ => Modules}/Elements/Form/Form.scss | 140 ++++++------- src/{ => Modules}/Elements/Form/mixins.scss | 0 .../Elements/Form/variables.scss | 2 +- src/Modules/Elements/Grid/Grid.scss | 71 +++++++ src/Modules/Elements/Grid/variables.scss | 17 ++ src/{ => Modules}/Elements/Table/Table.scss | 18 +- .../Elements/Table/variables.scss | 0 .../Elements/Typography/Typography.scss | 9 +- .../Elements/Typography/variables.scss | 2 +- src/{ => Modules}/Elements/index.scss | 9 +- .../Utilities/_config/_specs.scss | 0 .../Utilities/_config/align-content.scss | 0 .../Utilities/_config/align-items.scss | 0 .../Utilities/_config/align-self.scss | 0 .../Utilities/_config/backdrop-filter.scss | 0 .../Utilities/_config/bg-colors.scss | 2 +- .../Utilities/_config/border-radius.scss | 0 .../Utilities/_config/border-style.scss | 0 .../Utilities/_config/border.scss | 0 .../Utilities/_config/cursors.scss | 0 .../Utilities/_config/display-filter.scss | 0 .../Utilities/_config/display.scss | 0 .../Utilities/_config/flex-direction.scss | 0 .../Utilities/_config/flex-grow.scss | 0 .../Utilities/_config/flex-shrink.scss | 0 .../Utilities/_config/flex-wrap.scss | 0 src/{ => Modules}/Utilities/_config/flex.scss | 0 .../Utilities/_config/float.scss | 0 .../Utilities/_config/font-sizes.scss | 0 .../Utilities/_config/font-weight.scss | 0 .../Utilities/_config/height.scss | 0 .../Utilities/_config/inset.scss | 0 .../Utilities/_config/justify-content.scss | 0 .../Utilities/_config/justify-items.scss | 0 .../Utilities/_config/justify-self.scss | 0 .../Utilities/_config/line-height.scss | 0 .../Utilities/_config/margin.scss | 0 .../Utilities/_config/object-fit.scss | 0 .../Utilities/_config/order.scss | 0 .../Utilities/_config/overflow.scss | 0 .../Utilities/_config/padding.scss | 0 .../Utilities/_config/place-content.scss | 0 .../Utilities/_config/place-items.scss | 0 .../Utilities/_config/place-self.scss | 0 .../Utilities/_config/position.scss | 0 .../Utilities/_config/resize.scss | 0 .../Utilities/_config/text-align.scss | 0 .../Utilities/_config/text-colors.scss | 2 +- .../Utilities/_config/text-decoration.scss | 0 .../Utilities/_config/text-transform.scss | 0 .../Utilities/_config/user-select.scss | 0 .../Utilities/_config/width.scss | 0 .../Utilities/_config/z-index.scss | 0 src/{ => Modules}/Utilities/helpers.scss | 5 +- src/{ => Modules}/Utilities/mixins.scss | 4 +- src/{ => Modules}/Utilities/variables.scss | 0 src/_themes/_getters.scss | 51 ----- src/_themes/index.scss | 88 --------- src/classnames.scss | 42 ++-- src/options.scss | 187 +++++++----------- src/punica.scss | 45 ++--- src/themes.scss | 138 +++++++++++++ 119 files changed, 1027 insertions(+), 1013 deletions(-) delete mode 100644 dist/punica.min.css delete mode 100644 package.json rename src/{_global/_getters.scss => Core/Global/Getters.scss} (65%) create mode 100644 src/Core/Global/Helpers.scss rename src/{_global/mixins.scss => Core/Global/Mixins.scss} (93%) rename src/{_global/variables.scss => Core/Global/Variables.scss} (87%) create mode 100644 src/Core/Theme/Getters.scss rename src/{_themes/_setters.scss => Core/Theme/Setters.scss} (94%) delete mode 100644 src/Elements/Icon/Icon.scss delete mode 100644 src/Elements/Icon/variables.scss delete mode 100644 src/Layout/Grid/Grid.scss delete mode 100644 src/Layout/Grid/variables.scss delete mode 100644 src/Layout/index.scss rename src/{ => Modules}/Components/Alert/Alert.scss (68%) rename src/{ => Modules}/Components/Alert/variables.scss (93%) rename src/{ => Modules}/Components/Badge/Badge.scss (73%) rename src/{ => Modules}/Components/Badge/variables.scss (95%) rename src/{ => Modules}/Components/Billboard/Billboard.scss (75%) rename src/{ => Modules}/Components/Billboard/variables.scss (95%) rename src/{ => Modules}/Components/Breadcrumb/Breadcrumb.scss (52%) rename src/{ => Modules}/Components/Breadcrumb/variables.scss (65%) rename src/{Elements => Modules/Components}/Caption/Caption.scss (69%) rename src/{Elements => Modules/Components}/Caption/variables.scss (84%) rename src/{ => Modules}/Components/Card/Card.scss (68%) rename src/{ => Modules}/Components/Card/variables.scss (100%) rename src/{Elements => Modules/Components}/Label/Label.scss (69%) rename src/{Elements => Modules/Components}/Label/variables.scss (88%) rename src/{ => Modules}/Components/List/List.scss (57%) rename src/{ => Modules}/Components/List/variables.scss (100%) rename src/{ => Modules}/Components/Menu/Menu.scss (50%) rename src/{ => Modules}/Components/Menu/variables.scss (100%) rename src/{ => Modules}/Components/Navbar/Navbar.scss (79%) rename src/{ => Modules}/Components/Navbar/mixins.scss (91%) rename src/{ => Modules}/Components/Navbar/variables.scss (97%) rename src/{ => Modules}/Components/Panel/Panel.scss (77%) rename src/{ => Modules}/Components/Panel/variables.scss (100%) rename src/{ => Modules}/Components/Process/Process.scss (62%) rename src/{ => Modules}/Components/Process/mixins.scss (80%) rename src/{ => Modules}/Components/Process/variables.scss (89%) rename src/{ => Modules}/Components/Progress/Progress.scss (51%) rename src/{ => Modules}/Components/Progress/variables.scss (89%) rename src/{ => Modules}/Components/Stats/Stats.scss (59%) rename src/{ => Modules}/Components/Stats/variables.scss (90%) rename src/{ => Modules}/Components/Tabnav/Tabnav.scss (71%) rename src/{ => Modules}/Components/Tabnav/mixins.scss (94%) rename src/{ => Modules}/Components/Tabnav/variables.scss (91%) rename src/{ => Modules}/Components/Timeline/Timeline.scss (77%) rename src/{ => Modules}/Components/Timeline/variables.scss (94%) rename src/{ => Modules}/Components/Tooltip/Tooltip.scss (81%) rename src/{ => Modules}/Components/Tooltip/variables.scss (100%) rename src/{ => Modules}/Components/index.scss (89%) rename src/{Layout => Modules/Elements}/Base/Base.scss (84%) rename src/{ => Modules}/Elements/Button/Button.scss (71%) rename src/{ => Modules}/Elements/Button/mixins.scss (86%) rename src/{ => Modules}/Elements/Button/variables.scss (96%) rename src/{ => Modules}/Elements/Form/Form.scss (63%) rename src/{ => Modules}/Elements/Form/mixins.scss (100%) rename src/{ => Modules}/Elements/Form/variables.scss (94%) create mode 100644 src/Modules/Elements/Grid/Grid.scss create mode 100644 src/Modules/Elements/Grid/variables.scss rename src/{ => Modules}/Elements/Table/Table.scss (77%) rename src/{ => Modules}/Elements/Table/variables.scss (100%) rename src/{ => Modules}/Elements/Typography/Typography.scss (83%) rename src/{ => Modules}/Elements/Typography/variables.scss (96%) rename src/{ => Modules}/Elements/index.scss (56%) rename src/{ => Modules}/Utilities/_config/_specs.scss (100%) rename src/{ => Modules}/Utilities/_config/align-content.scss (100%) rename src/{ => Modules}/Utilities/_config/align-items.scss (100%) rename src/{ => Modules}/Utilities/_config/align-self.scss (100%) rename src/{ => Modules}/Utilities/_config/backdrop-filter.scss (100%) rename src/{ => Modules}/Utilities/_config/bg-colors.scss (94%) rename src/{ => Modules}/Utilities/_config/border-radius.scss (100%) rename src/{ => Modules}/Utilities/_config/border-style.scss (100%) rename src/{ => Modules}/Utilities/_config/border.scss (100%) rename src/{ => Modules}/Utilities/_config/cursors.scss (100%) rename src/{ => Modules}/Utilities/_config/display-filter.scss (100%) rename src/{ => Modules}/Utilities/_config/display.scss (100%) rename src/{ => Modules}/Utilities/_config/flex-direction.scss (100%) rename src/{ => Modules}/Utilities/_config/flex-grow.scss (100%) rename src/{ => Modules}/Utilities/_config/flex-shrink.scss (100%) rename src/{ => Modules}/Utilities/_config/flex-wrap.scss (100%) rename src/{ => Modules}/Utilities/_config/flex.scss (100%) rename src/{ => Modules}/Utilities/_config/float.scss (100%) rename src/{ => Modules}/Utilities/_config/font-sizes.scss (100%) rename src/{ => Modules}/Utilities/_config/font-weight.scss (100%) rename src/{ => Modules}/Utilities/_config/height.scss (100%) rename src/{ => Modules}/Utilities/_config/inset.scss (100%) rename src/{ => Modules}/Utilities/_config/justify-content.scss (100%) rename src/{ => Modules}/Utilities/_config/justify-items.scss (100%) rename src/{ => Modules}/Utilities/_config/justify-self.scss (100%) rename src/{ => Modules}/Utilities/_config/line-height.scss (100%) rename src/{ => Modules}/Utilities/_config/margin.scss (100%) rename src/{ => Modules}/Utilities/_config/object-fit.scss (100%) rename src/{ => Modules}/Utilities/_config/order.scss (100%) rename src/{ => Modules}/Utilities/_config/overflow.scss (100%) rename src/{ => Modules}/Utilities/_config/padding.scss (100%) rename src/{ => Modules}/Utilities/_config/place-content.scss (100%) rename src/{ => Modules}/Utilities/_config/place-items.scss (100%) rename src/{ => Modules}/Utilities/_config/place-self.scss (100%) rename src/{ => Modules}/Utilities/_config/position.scss (100%) rename src/{ => Modules}/Utilities/_config/resize.scss (100%) rename src/{ => Modules}/Utilities/_config/text-align.scss (100%) rename src/{ => Modules}/Utilities/_config/text-colors.scss (90%) rename src/{ => Modules}/Utilities/_config/text-decoration.scss (100%) rename src/{ => Modules}/Utilities/_config/text-transform.scss (100%) rename src/{ => Modules}/Utilities/_config/user-select.scss (100%) rename src/{ => Modules}/Utilities/_config/width.scss (100%) rename src/{ => Modules}/Utilities/_config/z-index.scss (100%) rename src/{ => Modules}/Utilities/helpers.scss (97%) rename src/{ => Modules}/Utilities/mixins.scss (98%) rename src/{ => Modules}/Utilities/variables.scss (100%) delete mode 100644 src/_themes/_getters.scss delete mode 100644 src/_themes/index.scss create mode 100644 src/themes.scss diff --git a/LICENSE b/LICENSE index 3178eae9..5e6fd5f1 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2020-23 CodeForms / Fatih Kececi +Copyright (c) 2020-24 Fatih Kececi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 77d539b8..fdce2fc5 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ -## Introduction +## Punica CSS Framework 3.0 Beta

+ Documentation | Nightly Builds | Templates | Changelog diff --git a/dist/punica.min.css b/dist/punica.min.css deleted file mode 100644 index 00ca55e8..00000000 --- a/dist/punica.min.css +++ /dev/null @@ -1,10 +0,0 @@ -@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@400;600;700&display=swap";/*! - * PUNICA CSS - Default Theme - * v2.8.20 build 1054 - * - * @link http://www.punicacss.com - * @link http://github.com/codeforms/Punica-CSS-Framework - * - * Released under the MIT license - * @link http://opensource.org/licenses/MIT - */*,*:after,*:before{box-sizing:inherit;border:0 solid #c6c6c6}*{margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;text-shadow:1px 1px 1px rgba(0,0,0,.004) !important}html{box-sizing:border-box;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"IBM Plex Sans Hebrew",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:400;line-height:1.7;color:#202123;background-color:#fff}html,body{min-height:100%;height:100%;padding:0;margin:0;border:none}::selection{background-color:#314a93;color:#fff}::placeholder{color:#202123;opacity:.5}a{color:#202123;outline:none;text-decoration:none}a:focus,a:hover{color:#314a93;text-decoration:underline}hr{margin:15px 0;background-color:#c6c6c6;border:none;height:1px}ul,ol{margin:.8rem 0 .8rem .8rem;padding:0}ul ul,ul ol,ol ul,ol ol{margin:.8rem 0 .8rem .8rem}ul li,ol li{margin-top:.4rem}ul{list-style:disc inside}ol{list-style:decimal inside}dl dt{font-weight:bold}img,canvas,embed,object,video{max-width:100%;height:auto;box-sizing:border-box}img{border-style:none}iframe{outline:0}:not(pre)>code,:not(pre)>kbd,:not(pre)>samp{color:#972727;white-space:nowrap;padding:2px 6px;font-size:1em}.container{width:100%;margin:0 auto;padding:0 40px}@media only screen and (max-width: 768px){.container{padding:0 13.3333333333px}}.row{display:grid;grid-gap:6px;grid-template-columns:repeat(16, 1fr)}.row>[class^=col]{height:fit-content;padding:.3rem;min-height:.125rem}.row.equal>[class^=col]{height:auto}.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}.col-13{grid-column:span 13}.col-14{grid-column:span 14}.col-15{grid-column:span 15}.col-16{grid-column:span 16}@media only screen and (min-width: 0){.col-xs-1{grid-column:span 1}.col-xs-2{grid-column:span 2}.col-xs-3{grid-column:span 3}.col-xs-4{grid-column:span 4}.col-xs-5{grid-column:span 5}.col-xs-6{grid-column:span 6}.col-xs-7{grid-column:span 7}.col-xs-8{grid-column:span 8}.col-xs-9{grid-column:span 9}.col-xs-10{grid-column:span 10}.col-xs-11{grid-column:span 11}.col-xs-12{grid-column:span 12}.col-xs-13{grid-column:span 13}.col-xs-14{grid-column:span 14}.col-xs-15{grid-column:span 15}.col-xs-16{grid-column:span 16}}@media only screen and (min-width: 500px){.col-sm-1{grid-column:span 1}.col-sm-2{grid-column:span 2}.col-sm-3{grid-column:span 3}.col-sm-4{grid-column:span 4}.col-sm-5{grid-column:span 5}.col-sm-6{grid-column:span 6}.col-sm-7{grid-column:span 7}.col-sm-8{grid-column:span 8}.col-sm-9{grid-column:span 9}.col-sm-10{grid-column:span 10}.col-sm-11{grid-column:span 11}.col-sm-12{grid-column:span 12}.col-sm-13{grid-column:span 13}.col-sm-14{grid-column:span 14}.col-sm-15{grid-column:span 15}.col-sm-16{grid-column:span 16}}@media only screen and (min-width: 768px){.col-md-1{grid-column:span 1}.col-md-2{grid-column:span 2}.col-md-3{grid-column:span 3}.col-md-4{grid-column:span 4}.col-md-5{grid-column:span 5}.col-md-6{grid-column:span 6}.col-md-7{grid-column:span 7}.col-md-8{grid-column:span 8}.col-md-9{grid-column:span 9}.col-md-10{grid-column:span 10}.col-md-11{grid-column:span 11}.col-md-12{grid-column:span 12}.col-md-13{grid-column:span 13}.col-md-14{grid-column:span 14}.col-md-15{grid-column:span 15}.col-md-16{grid-column:span 16}}@media only screen and (min-width: 992px){.col-lg-1{grid-column:span 1}.col-lg-2{grid-column:span 2}.col-lg-3{grid-column:span 3}.col-lg-4{grid-column:span 4}.col-lg-5{grid-column:span 5}.col-lg-6{grid-column:span 6}.col-lg-7{grid-column:span 7}.col-lg-8{grid-column:span 8}.col-lg-9{grid-column:span 9}.col-lg-10{grid-column:span 10}.col-lg-11{grid-column:span 11}.col-lg-12{grid-column:span 12}.col-lg-13{grid-column:span 13}.col-lg-14{grid-column:span 14}.col-lg-15{grid-column:span 15}.col-lg-16{grid-column:span 16}}@media only screen and (min-width: 1260px){.col-xl-1{grid-column:span 1}.col-xl-2{grid-column:span 2}.col-xl-3{grid-column:span 3}.col-xl-4{grid-column:span 4}.col-xl-5{grid-column:span 5}.col-xl-6{grid-column:span 6}.col-xl-7{grid-column:span 7}.col-xl-8{grid-column:span 8}.col-xl-9{grid-column:span 9}.col-xl-10{grid-column:span 10}.col-xl-11{grid-column:span 11}.col-xl-12{grid-column:span 12}.col-xl-13{grid-column:span 13}.col-xl-14{grid-column:span 14}.col-xl-15{grid-column:span 15}.col-xl-16{grid-column:span 16}}@media only screen and (min-width: 1400px){.col-xxl-1{grid-column:span 1}.col-xxl-2{grid-column:span 2}.col-xxl-3{grid-column:span 3}.col-xxl-4{grid-column:span 4}.col-xxl-5{grid-column:span 5}.col-xxl-6{grid-column:span 6}.col-xxl-7{grid-column:span 7}.col-xxl-8{grid-column:span 8}.col-xxl-9{grid-column:span 9}.col-xxl-10{grid-column:span 10}.col-xxl-11{grid-column:span 11}.col-xxl-12{grid-column:span 12}.col-xxl-13{grid-column:span 13}.col-xxl-14{grid-column:span 14}.col-xxl-15{grid-column:span 15}.col-xxl-16{grid-column:span 16}}@media only screen and (min-width: 0){.col-xs-1.offset-xs-2{grid-column:2/span 1}.col-xs-1.offset-xs-3{grid-column:3/span 1}.col-xs-1.offset-xs-4{grid-column:4/span 1}.col-xs-1.offset-xs-5{grid-column:5/span 1}.col-xs-1.offset-xs-6{grid-column:6/span 1}.col-xs-1.offset-xs-7{grid-column:7/span 1}.col-xs-1.offset-xs-8{grid-column:8/span 1}.col-xs-1.offset-xs-9{grid-column:9/span 1}.col-xs-1.offset-xs-10{grid-column:10/span 1}.col-xs-1.offset-xs-11{grid-column:11/span 1}.col-xs-1.offset-xs-12{grid-column:12/span 1}.col-xs-1.offset-xs-13{grid-column:13/span 1}.col-xs-1.offset-xs-14{grid-column:14/span 1}.col-xs-1.offset-xs-15{grid-column:15/span 1}.col-xs-1.offset-xs-16{grid-column:16/span 1}.col-xs-2.offset-xs-2{grid-column:2/span 2}.col-xs-2.offset-xs-3{grid-column:3/span 2}.col-xs-2.offset-xs-4{grid-column:4/span 2}.col-xs-2.offset-xs-5{grid-column:5/span 2}.col-xs-2.offset-xs-6{grid-column:6/span 2}.col-xs-2.offset-xs-7{grid-column:7/span 2}.col-xs-2.offset-xs-8{grid-column:8/span 2}.col-xs-2.offset-xs-9{grid-column:9/span 2}.col-xs-2.offset-xs-10{grid-column:10/span 2}.col-xs-2.offset-xs-11{grid-column:11/span 2}.col-xs-2.offset-xs-12{grid-column:12/span 2}.col-xs-2.offset-xs-13{grid-column:13/span 2}.col-xs-2.offset-xs-14{grid-column:14/span 2}.col-xs-2.offset-xs-15{grid-column:15/span 2}.col-xs-2.offset-xs-16{grid-column:16/span 2}.col-xs-3.offset-xs-2{grid-column:2/span 3}.col-xs-3.offset-xs-3{grid-column:3/span 3}.col-xs-3.offset-xs-4{grid-column:4/span 3}.col-xs-3.offset-xs-5{grid-column:5/span 3}.col-xs-3.offset-xs-6{grid-column:6/span 3}.col-xs-3.offset-xs-7{grid-column:7/span 3}.col-xs-3.offset-xs-8{grid-column:8/span 3}.col-xs-3.offset-xs-9{grid-column:9/span 3}.col-xs-3.offset-xs-10{grid-column:10/span 3}.col-xs-3.offset-xs-11{grid-column:11/span 3}.col-xs-3.offset-xs-12{grid-column:12/span 3}.col-xs-3.offset-xs-13{grid-column:13/span 3}.col-xs-3.offset-xs-14{grid-column:14/span 3}.col-xs-3.offset-xs-15{grid-column:15/span 3}.col-xs-3.offset-xs-16{grid-column:16/span 3}.col-xs-4.offset-xs-2{grid-column:2/span 4}.col-xs-4.offset-xs-3{grid-column:3/span 4}.col-xs-4.offset-xs-4{grid-column:4/span 4}.col-xs-4.offset-xs-5{grid-column:5/span 4}.col-xs-4.offset-xs-6{grid-column:6/span 4}.col-xs-4.offset-xs-7{grid-column:7/span 4}.col-xs-4.offset-xs-8{grid-column:8/span 4}.col-xs-4.offset-xs-9{grid-column:9/span 4}.col-xs-4.offset-xs-10{grid-column:10/span 4}.col-xs-4.offset-xs-11{grid-column:11/span 4}.col-xs-4.offset-xs-12{grid-column:12/span 4}.col-xs-4.offset-xs-13{grid-column:13/span 4}.col-xs-4.offset-xs-14{grid-column:14/span 4}.col-xs-4.offset-xs-15{grid-column:15/span 4}.col-xs-4.offset-xs-16{grid-column:16/span 4}.col-xs-5.offset-xs-2{grid-column:2/span 5}.col-xs-5.offset-xs-3{grid-column:3/span 5}.col-xs-5.offset-xs-4{grid-column:4/span 5}.col-xs-5.offset-xs-5{grid-column:5/span 5}.col-xs-5.offset-xs-6{grid-column:6/span 5}.col-xs-5.offset-xs-7{grid-column:7/span 5}.col-xs-5.offset-xs-8{grid-column:8/span 5}.col-xs-5.offset-xs-9{grid-column:9/span 5}.col-xs-5.offset-xs-10{grid-column:10/span 5}.col-xs-5.offset-xs-11{grid-column:11/span 5}.col-xs-5.offset-xs-12{grid-column:12/span 5}.col-xs-5.offset-xs-13{grid-column:13/span 5}.col-xs-5.offset-xs-14{grid-column:14/span 5}.col-xs-5.offset-xs-15{grid-column:15/span 5}.col-xs-5.offset-xs-16{grid-column:16/span 5}.col-xs-6.offset-xs-2{grid-column:2/span 6}.col-xs-6.offset-xs-3{grid-column:3/span 6}.col-xs-6.offset-xs-4{grid-column:4/span 6}.col-xs-6.offset-xs-5{grid-column:5/span 6}.col-xs-6.offset-xs-6{grid-column:6/span 6}.col-xs-6.offset-xs-7{grid-column:7/span 6}.col-xs-6.offset-xs-8{grid-column:8/span 6}.col-xs-6.offset-xs-9{grid-column:9/span 6}.col-xs-6.offset-xs-10{grid-column:10/span 6}.col-xs-6.offset-xs-11{grid-column:11/span 6}.col-xs-6.offset-xs-12{grid-column:12/span 6}.col-xs-6.offset-xs-13{grid-column:13/span 6}.col-xs-6.offset-xs-14{grid-column:14/span 6}.col-xs-6.offset-xs-15{grid-column:15/span 6}.col-xs-6.offset-xs-16{grid-column:16/span 6}.col-xs-7.offset-xs-2{grid-column:2/span 7}.col-xs-7.offset-xs-3{grid-column:3/span 7}.col-xs-7.offset-xs-4{grid-column:4/span 7}.col-xs-7.offset-xs-5{grid-column:5/span 7}.col-xs-7.offset-xs-6{grid-column:6/span 7}.col-xs-7.offset-xs-7{grid-column:7/span 7}.col-xs-7.offset-xs-8{grid-column:8/span 7}.col-xs-7.offset-xs-9{grid-column:9/span 7}.col-xs-7.offset-xs-10{grid-column:10/span 7}.col-xs-7.offset-xs-11{grid-column:11/span 7}.col-xs-7.offset-xs-12{grid-column:12/span 7}.col-xs-7.offset-xs-13{grid-column:13/span 7}.col-xs-7.offset-xs-14{grid-column:14/span 7}.col-xs-7.offset-xs-15{grid-column:15/span 7}.col-xs-7.offset-xs-16{grid-column:16/span 7}.col-xs-8.offset-xs-2{grid-column:2/span 8}.col-xs-8.offset-xs-3{grid-column:3/span 8}.col-xs-8.offset-xs-4{grid-column:4/span 8}.col-xs-8.offset-xs-5{grid-column:5/span 8}.col-xs-8.offset-xs-6{grid-column:6/span 8}.col-xs-8.offset-xs-7{grid-column:7/span 8}.col-xs-8.offset-xs-8{grid-column:8/span 8}.col-xs-8.offset-xs-9{grid-column:9/span 8}.col-xs-8.offset-xs-10{grid-column:10/span 8}.col-xs-8.offset-xs-11{grid-column:11/span 8}.col-xs-8.offset-xs-12{grid-column:12/span 8}.col-xs-8.offset-xs-13{grid-column:13/span 8}.col-xs-8.offset-xs-14{grid-column:14/span 8}.col-xs-8.offset-xs-15{grid-column:15/span 8}.col-xs-8.offset-xs-16{grid-column:16/span 8}.col-xs-9.offset-xs-2{grid-column:2/span 9}.col-xs-9.offset-xs-3{grid-column:3/span 9}.col-xs-9.offset-xs-4{grid-column:4/span 9}.col-xs-9.offset-xs-5{grid-column:5/span 9}.col-xs-9.offset-xs-6{grid-column:6/span 9}.col-xs-9.offset-xs-7{grid-column:7/span 9}.col-xs-9.offset-xs-8{grid-column:8/span 9}.col-xs-9.offset-xs-9{grid-column:9/span 9}.col-xs-9.offset-xs-10{grid-column:10/span 9}.col-xs-9.offset-xs-11{grid-column:11/span 9}.col-xs-9.offset-xs-12{grid-column:12/span 9}.col-xs-9.offset-xs-13{grid-column:13/span 9}.col-xs-9.offset-xs-14{grid-column:14/span 9}.col-xs-9.offset-xs-15{grid-column:15/span 9}.col-xs-9.offset-xs-16{grid-column:16/span 9}.col-xs-10.offset-xs-2{grid-column:2/span 10}.col-xs-10.offset-xs-3{grid-column:3/span 10}.col-xs-10.offset-xs-4{grid-column:4/span 10}.col-xs-10.offset-xs-5{grid-column:5/span 10}.col-xs-10.offset-xs-6{grid-column:6/span 10}.col-xs-10.offset-xs-7{grid-column:7/span 10}.col-xs-10.offset-xs-8{grid-column:8/span 10}.col-xs-10.offset-xs-9{grid-column:9/span 10}.col-xs-10.offset-xs-10{grid-column:10/span 10}.col-xs-10.offset-xs-11{grid-column:11/span 10}.col-xs-10.offset-xs-12{grid-column:12/span 10}.col-xs-10.offset-xs-13{grid-column:13/span 10}.col-xs-10.offset-xs-14{grid-column:14/span 10}.col-xs-10.offset-xs-15{grid-column:15/span 10}.col-xs-10.offset-xs-16{grid-column:16/span 10}.col-xs-11.offset-xs-2{grid-column:2/span 11}.col-xs-11.offset-xs-3{grid-column:3/span 11}.col-xs-11.offset-xs-4{grid-column:4/span 11}.col-xs-11.offset-xs-5{grid-column:5/span 11}.col-xs-11.offset-xs-6{grid-column:6/span 11}.col-xs-11.offset-xs-7{grid-column:7/span 11}.col-xs-11.offset-xs-8{grid-column:8/span 11}.col-xs-11.offset-xs-9{grid-column:9/span 11}.col-xs-11.offset-xs-10{grid-column:10/span 11}.col-xs-11.offset-xs-11{grid-column:11/span 11}.col-xs-11.offset-xs-12{grid-column:12/span 11}.col-xs-11.offset-xs-13{grid-column:13/span 11}.col-xs-11.offset-xs-14{grid-column:14/span 11}.col-xs-11.offset-xs-15{grid-column:15/span 11}.col-xs-11.offset-xs-16{grid-column:16/span 11}.col-xs-12.offset-xs-2{grid-column:2/span 12}.col-xs-12.offset-xs-3{grid-column:3/span 12}.col-xs-12.offset-xs-4{grid-column:4/span 12}.col-xs-12.offset-xs-5{grid-column:5/span 12}.col-xs-12.offset-xs-6{grid-column:6/span 12}.col-xs-12.offset-xs-7{grid-column:7/span 12}.col-xs-12.offset-xs-8{grid-column:8/span 12}.col-xs-12.offset-xs-9{grid-column:9/span 12}.col-xs-12.offset-xs-10{grid-column:10/span 12}.col-xs-12.offset-xs-11{grid-column:11/span 12}.col-xs-12.offset-xs-12{grid-column:12/span 12}.col-xs-12.offset-xs-13{grid-column:13/span 12}.col-xs-12.offset-xs-14{grid-column:14/span 12}.col-xs-12.offset-xs-15{grid-column:15/span 12}.col-xs-12.offset-xs-16{grid-column:16/span 12}.col-xs-13.offset-xs-2{grid-column:2/span 13}.col-xs-13.offset-xs-3{grid-column:3/span 13}.col-xs-13.offset-xs-4{grid-column:4/span 13}.col-xs-13.offset-xs-5{grid-column:5/span 13}.col-xs-13.offset-xs-6{grid-column:6/span 13}.col-xs-13.offset-xs-7{grid-column:7/span 13}.col-xs-13.offset-xs-8{grid-column:8/span 13}.col-xs-13.offset-xs-9{grid-column:9/span 13}.col-xs-13.offset-xs-10{grid-column:10/span 13}.col-xs-13.offset-xs-11{grid-column:11/span 13}.col-xs-13.offset-xs-12{grid-column:12/span 13}.col-xs-13.offset-xs-13{grid-column:13/span 13}.col-xs-13.offset-xs-14{grid-column:14/span 13}.col-xs-13.offset-xs-15{grid-column:15/span 13}.col-xs-13.offset-xs-16{grid-column:16/span 13}.col-xs-14.offset-xs-2{grid-column:2/span 14}.col-xs-14.offset-xs-3{grid-column:3/span 14}.col-xs-14.offset-xs-4{grid-column:4/span 14}.col-xs-14.offset-xs-5{grid-column:5/span 14}.col-xs-14.offset-xs-6{grid-column:6/span 14}.col-xs-14.offset-xs-7{grid-column:7/span 14}.col-xs-14.offset-xs-8{grid-column:8/span 14}.col-xs-14.offset-xs-9{grid-column:9/span 14}.col-xs-14.offset-xs-10{grid-column:10/span 14}.col-xs-14.offset-xs-11{grid-column:11/span 14}.col-xs-14.offset-xs-12{grid-column:12/span 14}.col-xs-14.offset-xs-13{grid-column:13/span 14}.col-xs-14.offset-xs-14{grid-column:14/span 14}.col-xs-14.offset-xs-15{grid-column:15/span 14}.col-xs-14.offset-xs-16{grid-column:16/span 14}.col-xs-15.offset-xs-2{grid-column:2/span 15}.col-xs-15.offset-xs-3{grid-column:3/span 15}.col-xs-15.offset-xs-4{grid-column:4/span 15}.col-xs-15.offset-xs-5{grid-column:5/span 15}.col-xs-15.offset-xs-6{grid-column:6/span 15}.col-xs-15.offset-xs-7{grid-column:7/span 15}.col-xs-15.offset-xs-8{grid-column:8/span 15}.col-xs-15.offset-xs-9{grid-column:9/span 15}.col-xs-15.offset-xs-10{grid-column:10/span 15}.col-xs-15.offset-xs-11{grid-column:11/span 15}.col-xs-15.offset-xs-12{grid-column:12/span 15}.col-xs-15.offset-xs-13{grid-column:13/span 15}.col-xs-15.offset-xs-14{grid-column:14/span 15}.col-xs-15.offset-xs-15{grid-column:15/span 15}.col-xs-15.offset-xs-16{grid-column:16/span 15}.col-xs-16.offset-xs-2{grid-column:2/span 16}.col-xs-16.offset-xs-3{grid-column:3/span 16}.col-xs-16.offset-xs-4{grid-column:4/span 16}.col-xs-16.offset-xs-5{grid-column:5/span 16}.col-xs-16.offset-xs-6{grid-column:6/span 16}.col-xs-16.offset-xs-7{grid-column:7/span 16}.col-xs-16.offset-xs-8{grid-column:8/span 16}.col-xs-16.offset-xs-9{grid-column:9/span 16}.col-xs-16.offset-xs-10{grid-column:10/span 16}.col-xs-16.offset-xs-11{grid-column:11/span 16}.col-xs-16.offset-xs-12{grid-column:12/span 16}.col-xs-16.offset-xs-13{grid-column:13/span 16}.col-xs-16.offset-xs-14{grid-column:14/span 16}.col-xs-16.offset-xs-15{grid-column:15/span 16}.col-xs-16.offset-xs-16{grid-column:16/span 16}}@media only screen and (min-width: 500px){.col-sm-1.offset-sm-2{grid-column:2/span 1}.col-sm-1.offset-sm-3{grid-column:3/span 1}.col-sm-1.offset-sm-4{grid-column:4/span 1}.col-sm-1.offset-sm-5{grid-column:5/span 1}.col-sm-1.offset-sm-6{grid-column:6/span 1}.col-sm-1.offset-sm-7{grid-column:7/span 1}.col-sm-1.offset-sm-8{grid-column:8/span 1}.col-sm-1.offset-sm-9{grid-column:9/span 1}.col-sm-1.offset-sm-10{grid-column:10/span 1}.col-sm-1.offset-sm-11{grid-column:11/span 1}.col-sm-1.offset-sm-12{grid-column:12/span 1}.col-sm-1.offset-sm-13{grid-column:13/span 1}.col-sm-1.offset-sm-14{grid-column:14/span 1}.col-sm-1.offset-sm-15{grid-column:15/span 1}.col-sm-1.offset-sm-16{grid-column:16/span 1}.col-sm-2.offset-sm-2{grid-column:2/span 2}.col-sm-2.offset-sm-3{grid-column:3/span 2}.col-sm-2.offset-sm-4{grid-column:4/span 2}.col-sm-2.offset-sm-5{grid-column:5/span 2}.col-sm-2.offset-sm-6{grid-column:6/span 2}.col-sm-2.offset-sm-7{grid-column:7/span 2}.col-sm-2.offset-sm-8{grid-column:8/span 2}.col-sm-2.offset-sm-9{grid-column:9/span 2}.col-sm-2.offset-sm-10{grid-column:10/span 2}.col-sm-2.offset-sm-11{grid-column:11/span 2}.col-sm-2.offset-sm-12{grid-column:12/span 2}.col-sm-2.offset-sm-13{grid-column:13/span 2}.col-sm-2.offset-sm-14{grid-column:14/span 2}.col-sm-2.offset-sm-15{grid-column:15/span 2}.col-sm-2.offset-sm-16{grid-column:16/span 2}.col-sm-3.offset-sm-2{grid-column:2/span 3}.col-sm-3.offset-sm-3{grid-column:3/span 3}.col-sm-3.offset-sm-4{grid-column:4/span 3}.col-sm-3.offset-sm-5{grid-column:5/span 3}.col-sm-3.offset-sm-6{grid-column:6/span 3}.col-sm-3.offset-sm-7{grid-column:7/span 3}.col-sm-3.offset-sm-8{grid-column:8/span 3}.col-sm-3.offset-sm-9{grid-column:9/span 3}.col-sm-3.offset-sm-10{grid-column:10/span 3}.col-sm-3.offset-sm-11{grid-column:11/span 3}.col-sm-3.offset-sm-12{grid-column:12/span 3}.col-sm-3.offset-sm-13{grid-column:13/span 3}.col-sm-3.offset-sm-14{grid-column:14/span 3}.col-sm-3.offset-sm-15{grid-column:15/span 3}.col-sm-3.offset-sm-16{grid-column:16/span 3}.col-sm-4.offset-sm-2{grid-column:2/span 4}.col-sm-4.offset-sm-3{grid-column:3/span 4}.col-sm-4.offset-sm-4{grid-column:4/span 4}.col-sm-4.offset-sm-5{grid-column:5/span 4}.col-sm-4.offset-sm-6{grid-column:6/span 4}.col-sm-4.offset-sm-7{grid-column:7/span 4}.col-sm-4.offset-sm-8{grid-column:8/span 4}.col-sm-4.offset-sm-9{grid-column:9/span 4}.col-sm-4.offset-sm-10{grid-column:10/span 4}.col-sm-4.offset-sm-11{grid-column:11/span 4}.col-sm-4.offset-sm-12{grid-column:12/span 4}.col-sm-4.offset-sm-13{grid-column:13/span 4}.col-sm-4.offset-sm-14{grid-column:14/span 4}.col-sm-4.offset-sm-15{grid-column:15/span 4}.col-sm-4.offset-sm-16{grid-column:16/span 4}.col-sm-5.offset-sm-2{grid-column:2/span 5}.col-sm-5.offset-sm-3{grid-column:3/span 5}.col-sm-5.offset-sm-4{grid-column:4/span 5}.col-sm-5.offset-sm-5{grid-column:5/span 5}.col-sm-5.offset-sm-6{grid-column:6/span 5}.col-sm-5.offset-sm-7{grid-column:7/span 5}.col-sm-5.offset-sm-8{grid-column:8/span 5}.col-sm-5.offset-sm-9{grid-column:9/span 5}.col-sm-5.offset-sm-10{grid-column:10/span 5}.col-sm-5.offset-sm-11{grid-column:11/span 5}.col-sm-5.offset-sm-12{grid-column:12/span 5}.col-sm-5.offset-sm-13{grid-column:13/span 5}.col-sm-5.offset-sm-14{grid-column:14/span 5}.col-sm-5.offset-sm-15{grid-column:15/span 5}.col-sm-5.offset-sm-16{grid-column:16/span 5}.col-sm-6.offset-sm-2{grid-column:2/span 6}.col-sm-6.offset-sm-3{grid-column:3/span 6}.col-sm-6.offset-sm-4{grid-column:4/span 6}.col-sm-6.offset-sm-5{grid-column:5/span 6}.col-sm-6.offset-sm-6{grid-column:6/span 6}.col-sm-6.offset-sm-7{grid-column:7/span 6}.col-sm-6.offset-sm-8{grid-column:8/span 6}.col-sm-6.offset-sm-9{grid-column:9/span 6}.col-sm-6.offset-sm-10{grid-column:10/span 6}.col-sm-6.offset-sm-11{grid-column:11/span 6}.col-sm-6.offset-sm-12{grid-column:12/span 6}.col-sm-6.offset-sm-13{grid-column:13/span 6}.col-sm-6.offset-sm-14{grid-column:14/span 6}.col-sm-6.offset-sm-15{grid-column:15/span 6}.col-sm-6.offset-sm-16{grid-column:16/span 6}.col-sm-7.offset-sm-2{grid-column:2/span 7}.col-sm-7.offset-sm-3{grid-column:3/span 7}.col-sm-7.offset-sm-4{grid-column:4/span 7}.col-sm-7.offset-sm-5{grid-column:5/span 7}.col-sm-7.offset-sm-6{grid-column:6/span 7}.col-sm-7.offset-sm-7{grid-column:7/span 7}.col-sm-7.offset-sm-8{grid-column:8/span 7}.col-sm-7.offset-sm-9{grid-column:9/span 7}.col-sm-7.offset-sm-10{grid-column:10/span 7}.col-sm-7.offset-sm-11{grid-column:11/span 7}.col-sm-7.offset-sm-12{grid-column:12/span 7}.col-sm-7.offset-sm-13{grid-column:13/span 7}.col-sm-7.offset-sm-14{grid-column:14/span 7}.col-sm-7.offset-sm-15{grid-column:15/span 7}.col-sm-7.offset-sm-16{grid-column:16/span 7}.col-sm-8.offset-sm-2{grid-column:2/span 8}.col-sm-8.offset-sm-3{grid-column:3/span 8}.col-sm-8.offset-sm-4{grid-column:4/span 8}.col-sm-8.offset-sm-5{grid-column:5/span 8}.col-sm-8.offset-sm-6{grid-column:6/span 8}.col-sm-8.offset-sm-7{grid-column:7/span 8}.col-sm-8.offset-sm-8{grid-column:8/span 8}.col-sm-8.offset-sm-9{grid-column:9/span 8}.col-sm-8.offset-sm-10{grid-column:10/span 8}.col-sm-8.offset-sm-11{grid-column:11/span 8}.col-sm-8.offset-sm-12{grid-column:12/span 8}.col-sm-8.offset-sm-13{grid-column:13/span 8}.col-sm-8.offset-sm-14{grid-column:14/span 8}.col-sm-8.offset-sm-15{grid-column:15/span 8}.col-sm-8.offset-sm-16{grid-column:16/span 8}.col-sm-9.offset-sm-2{grid-column:2/span 9}.col-sm-9.offset-sm-3{grid-column:3/span 9}.col-sm-9.offset-sm-4{grid-column:4/span 9}.col-sm-9.offset-sm-5{grid-column:5/span 9}.col-sm-9.offset-sm-6{grid-column:6/span 9}.col-sm-9.offset-sm-7{grid-column:7/span 9}.col-sm-9.offset-sm-8{grid-column:8/span 9}.col-sm-9.offset-sm-9{grid-column:9/span 9}.col-sm-9.offset-sm-10{grid-column:10/span 9}.col-sm-9.offset-sm-11{grid-column:11/span 9}.col-sm-9.offset-sm-12{grid-column:12/span 9}.col-sm-9.offset-sm-13{grid-column:13/span 9}.col-sm-9.offset-sm-14{grid-column:14/span 9}.col-sm-9.offset-sm-15{grid-column:15/span 9}.col-sm-9.offset-sm-16{grid-column:16/span 9}.col-sm-10.offset-sm-2{grid-column:2/span 10}.col-sm-10.offset-sm-3{grid-column:3/span 10}.col-sm-10.offset-sm-4{grid-column:4/span 10}.col-sm-10.offset-sm-5{grid-column:5/span 10}.col-sm-10.offset-sm-6{grid-column:6/span 10}.col-sm-10.offset-sm-7{grid-column:7/span 10}.col-sm-10.offset-sm-8{grid-column:8/span 10}.col-sm-10.offset-sm-9{grid-column:9/span 10}.col-sm-10.offset-sm-10{grid-column:10/span 10}.col-sm-10.offset-sm-11{grid-column:11/span 10}.col-sm-10.offset-sm-12{grid-column:12/span 10}.col-sm-10.offset-sm-13{grid-column:13/span 10}.col-sm-10.offset-sm-14{grid-column:14/span 10}.col-sm-10.offset-sm-15{grid-column:15/span 10}.col-sm-10.offset-sm-16{grid-column:16/span 10}.col-sm-11.offset-sm-2{grid-column:2/span 11}.col-sm-11.offset-sm-3{grid-column:3/span 11}.col-sm-11.offset-sm-4{grid-column:4/span 11}.col-sm-11.offset-sm-5{grid-column:5/span 11}.col-sm-11.offset-sm-6{grid-column:6/span 11}.col-sm-11.offset-sm-7{grid-column:7/span 11}.col-sm-11.offset-sm-8{grid-column:8/span 11}.col-sm-11.offset-sm-9{grid-column:9/span 11}.col-sm-11.offset-sm-10{grid-column:10/span 11}.col-sm-11.offset-sm-11{grid-column:11/span 11}.col-sm-11.offset-sm-12{grid-column:12/span 11}.col-sm-11.offset-sm-13{grid-column:13/span 11}.col-sm-11.offset-sm-14{grid-column:14/span 11}.col-sm-11.offset-sm-15{grid-column:15/span 11}.col-sm-11.offset-sm-16{grid-column:16/span 11}.col-sm-12.offset-sm-2{grid-column:2/span 12}.col-sm-12.offset-sm-3{grid-column:3/span 12}.col-sm-12.offset-sm-4{grid-column:4/span 12}.col-sm-12.offset-sm-5{grid-column:5/span 12}.col-sm-12.offset-sm-6{grid-column:6/span 12}.col-sm-12.offset-sm-7{grid-column:7/span 12}.col-sm-12.offset-sm-8{grid-column:8/span 12}.col-sm-12.offset-sm-9{grid-column:9/span 12}.col-sm-12.offset-sm-10{grid-column:10/span 12}.col-sm-12.offset-sm-11{grid-column:11/span 12}.col-sm-12.offset-sm-12{grid-column:12/span 12}.col-sm-12.offset-sm-13{grid-column:13/span 12}.col-sm-12.offset-sm-14{grid-column:14/span 12}.col-sm-12.offset-sm-15{grid-column:15/span 12}.col-sm-12.offset-sm-16{grid-column:16/span 12}.col-sm-13.offset-sm-2{grid-column:2/span 13}.col-sm-13.offset-sm-3{grid-column:3/span 13}.col-sm-13.offset-sm-4{grid-column:4/span 13}.col-sm-13.offset-sm-5{grid-column:5/span 13}.col-sm-13.offset-sm-6{grid-column:6/span 13}.col-sm-13.offset-sm-7{grid-column:7/span 13}.col-sm-13.offset-sm-8{grid-column:8/span 13}.col-sm-13.offset-sm-9{grid-column:9/span 13}.col-sm-13.offset-sm-10{grid-column:10/span 13}.col-sm-13.offset-sm-11{grid-column:11/span 13}.col-sm-13.offset-sm-12{grid-column:12/span 13}.col-sm-13.offset-sm-13{grid-column:13/span 13}.col-sm-13.offset-sm-14{grid-column:14/span 13}.col-sm-13.offset-sm-15{grid-column:15/span 13}.col-sm-13.offset-sm-16{grid-column:16/span 13}.col-sm-14.offset-sm-2{grid-column:2/span 14}.col-sm-14.offset-sm-3{grid-column:3/span 14}.col-sm-14.offset-sm-4{grid-column:4/span 14}.col-sm-14.offset-sm-5{grid-column:5/span 14}.col-sm-14.offset-sm-6{grid-column:6/span 14}.col-sm-14.offset-sm-7{grid-column:7/span 14}.col-sm-14.offset-sm-8{grid-column:8/span 14}.col-sm-14.offset-sm-9{grid-column:9/span 14}.col-sm-14.offset-sm-10{grid-column:10/span 14}.col-sm-14.offset-sm-11{grid-column:11/span 14}.col-sm-14.offset-sm-12{grid-column:12/span 14}.col-sm-14.offset-sm-13{grid-column:13/span 14}.col-sm-14.offset-sm-14{grid-column:14/span 14}.col-sm-14.offset-sm-15{grid-column:15/span 14}.col-sm-14.offset-sm-16{grid-column:16/span 14}.col-sm-15.offset-sm-2{grid-column:2/span 15}.col-sm-15.offset-sm-3{grid-column:3/span 15}.col-sm-15.offset-sm-4{grid-column:4/span 15}.col-sm-15.offset-sm-5{grid-column:5/span 15}.col-sm-15.offset-sm-6{grid-column:6/span 15}.col-sm-15.offset-sm-7{grid-column:7/span 15}.col-sm-15.offset-sm-8{grid-column:8/span 15}.col-sm-15.offset-sm-9{grid-column:9/span 15}.col-sm-15.offset-sm-10{grid-column:10/span 15}.col-sm-15.offset-sm-11{grid-column:11/span 15}.col-sm-15.offset-sm-12{grid-column:12/span 15}.col-sm-15.offset-sm-13{grid-column:13/span 15}.col-sm-15.offset-sm-14{grid-column:14/span 15}.col-sm-15.offset-sm-15{grid-column:15/span 15}.col-sm-15.offset-sm-16{grid-column:16/span 15}.col-sm-16.offset-sm-2{grid-column:2/span 16}.col-sm-16.offset-sm-3{grid-column:3/span 16}.col-sm-16.offset-sm-4{grid-column:4/span 16}.col-sm-16.offset-sm-5{grid-column:5/span 16}.col-sm-16.offset-sm-6{grid-column:6/span 16}.col-sm-16.offset-sm-7{grid-column:7/span 16}.col-sm-16.offset-sm-8{grid-column:8/span 16}.col-sm-16.offset-sm-9{grid-column:9/span 16}.col-sm-16.offset-sm-10{grid-column:10/span 16}.col-sm-16.offset-sm-11{grid-column:11/span 16}.col-sm-16.offset-sm-12{grid-column:12/span 16}.col-sm-16.offset-sm-13{grid-column:13/span 16}.col-sm-16.offset-sm-14{grid-column:14/span 16}.col-sm-16.offset-sm-15{grid-column:15/span 16}.col-sm-16.offset-sm-16{grid-column:16/span 16}}@media only screen and (min-width: 768px){.col-md-1.offset-md-2{grid-column:2/span 1}.col-md-1.offset-md-3{grid-column:3/span 1}.col-md-1.offset-md-4{grid-column:4/span 1}.col-md-1.offset-md-5{grid-column:5/span 1}.col-md-1.offset-md-6{grid-column:6/span 1}.col-md-1.offset-md-7{grid-column:7/span 1}.col-md-1.offset-md-8{grid-column:8/span 1}.col-md-1.offset-md-9{grid-column:9/span 1}.col-md-1.offset-md-10{grid-column:10/span 1}.col-md-1.offset-md-11{grid-column:11/span 1}.col-md-1.offset-md-12{grid-column:12/span 1}.col-md-1.offset-md-13{grid-column:13/span 1}.col-md-1.offset-md-14{grid-column:14/span 1}.col-md-1.offset-md-15{grid-column:15/span 1}.col-md-1.offset-md-16{grid-column:16/span 1}.col-md-2.offset-md-2{grid-column:2/span 2}.col-md-2.offset-md-3{grid-column:3/span 2}.col-md-2.offset-md-4{grid-column:4/span 2}.col-md-2.offset-md-5{grid-column:5/span 2}.col-md-2.offset-md-6{grid-column:6/span 2}.col-md-2.offset-md-7{grid-column:7/span 2}.col-md-2.offset-md-8{grid-column:8/span 2}.col-md-2.offset-md-9{grid-column:9/span 2}.col-md-2.offset-md-10{grid-column:10/span 2}.col-md-2.offset-md-11{grid-column:11/span 2}.col-md-2.offset-md-12{grid-column:12/span 2}.col-md-2.offset-md-13{grid-column:13/span 2}.col-md-2.offset-md-14{grid-column:14/span 2}.col-md-2.offset-md-15{grid-column:15/span 2}.col-md-2.offset-md-16{grid-column:16/span 2}.col-md-3.offset-md-2{grid-column:2/span 3}.col-md-3.offset-md-3{grid-column:3/span 3}.col-md-3.offset-md-4{grid-column:4/span 3}.col-md-3.offset-md-5{grid-column:5/span 3}.col-md-3.offset-md-6{grid-column:6/span 3}.col-md-3.offset-md-7{grid-column:7/span 3}.col-md-3.offset-md-8{grid-column:8/span 3}.col-md-3.offset-md-9{grid-column:9/span 3}.col-md-3.offset-md-10{grid-column:10/span 3}.col-md-3.offset-md-11{grid-column:11/span 3}.col-md-3.offset-md-12{grid-column:12/span 3}.col-md-3.offset-md-13{grid-column:13/span 3}.col-md-3.offset-md-14{grid-column:14/span 3}.col-md-3.offset-md-15{grid-column:15/span 3}.col-md-3.offset-md-16{grid-column:16/span 3}.col-md-4.offset-md-2{grid-column:2/span 4}.col-md-4.offset-md-3{grid-column:3/span 4}.col-md-4.offset-md-4{grid-column:4/span 4}.col-md-4.offset-md-5{grid-column:5/span 4}.col-md-4.offset-md-6{grid-column:6/span 4}.col-md-4.offset-md-7{grid-column:7/span 4}.col-md-4.offset-md-8{grid-column:8/span 4}.col-md-4.offset-md-9{grid-column:9/span 4}.col-md-4.offset-md-10{grid-column:10/span 4}.col-md-4.offset-md-11{grid-column:11/span 4}.col-md-4.offset-md-12{grid-column:12/span 4}.col-md-4.offset-md-13{grid-column:13/span 4}.col-md-4.offset-md-14{grid-column:14/span 4}.col-md-4.offset-md-15{grid-column:15/span 4}.col-md-4.offset-md-16{grid-column:16/span 4}.col-md-5.offset-md-2{grid-column:2/span 5}.col-md-5.offset-md-3{grid-column:3/span 5}.col-md-5.offset-md-4{grid-column:4/span 5}.col-md-5.offset-md-5{grid-column:5/span 5}.col-md-5.offset-md-6{grid-column:6/span 5}.col-md-5.offset-md-7{grid-column:7/span 5}.col-md-5.offset-md-8{grid-column:8/span 5}.col-md-5.offset-md-9{grid-column:9/span 5}.col-md-5.offset-md-10{grid-column:10/span 5}.col-md-5.offset-md-11{grid-column:11/span 5}.col-md-5.offset-md-12{grid-column:12/span 5}.col-md-5.offset-md-13{grid-column:13/span 5}.col-md-5.offset-md-14{grid-column:14/span 5}.col-md-5.offset-md-15{grid-column:15/span 5}.col-md-5.offset-md-16{grid-column:16/span 5}.col-md-6.offset-md-2{grid-column:2/span 6}.col-md-6.offset-md-3{grid-column:3/span 6}.col-md-6.offset-md-4{grid-column:4/span 6}.col-md-6.offset-md-5{grid-column:5/span 6}.col-md-6.offset-md-6{grid-column:6/span 6}.col-md-6.offset-md-7{grid-column:7/span 6}.col-md-6.offset-md-8{grid-column:8/span 6}.col-md-6.offset-md-9{grid-column:9/span 6}.col-md-6.offset-md-10{grid-column:10/span 6}.col-md-6.offset-md-11{grid-column:11/span 6}.col-md-6.offset-md-12{grid-column:12/span 6}.col-md-6.offset-md-13{grid-column:13/span 6}.col-md-6.offset-md-14{grid-column:14/span 6}.col-md-6.offset-md-15{grid-column:15/span 6}.col-md-6.offset-md-16{grid-column:16/span 6}.col-md-7.offset-md-2{grid-column:2/span 7}.col-md-7.offset-md-3{grid-column:3/span 7}.col-md-7.offset-md-4{grid-column:4/span 7}.col-md-7.offset-md-5{grid-column:5/span 7}.col-md-7.offset-md-6{grid-column:6/span 7}.col-md-7.offset-md-7{grid-column:7/span 7}.col-md-7.offset-md-8{grid-column:8/span 7}.col-md-7.offset-md-9{grid-column:9/span 7}.col-md-7.offset-md-10{grid-column:10/span 7}.col-md-7.offset-md-11{grid-column:11/span 7}.col-md-7.offset-md-12{grid-column:12/span 7}.col-md-7.offset-md-13{grid-column:13/span 7}.col-md-7.offset-md-14{grid-column:14/span 7}.col-md-7.offset-md-15{grid-column:15/span 7}.col-md-7.offset-md-16{grid-column:16/span 7}.col-md-8.offset-md-2{grid-column:2/span 8}.col-md-8.offset-md-3{grid-column:3/span 8}.col-md-8.offset-md-4{grid-column:4/span 8}.col-md-8.offset-md-5{grid-column:5/span 8}.col-md-8.offset-md-6{grid-column:6/span 8}.col-md-8.offset-md-7{grid-column:7/span 8}.col-md-8.offset-md-8{grid-column:8/span 8}.col-md-8.offset-md-9{grid-column:9/span 8}.col-md-8.offset-md-10{grid-column:10/span 8}.col-md-8.offset-md-11{grid-column:11/span 8}.col-md-8.offset-md-12{grid-column:12/span 8}.col-md-8.offset-md-13{grid-column:13/span 8}.col-md-8.offset-md-14{grid-column:14/span 8}.col-md-8.offset-md-15{grid-column:15/span 8}.col-md-8.offset-md-16{grid-column:16/span 8}.col-md-9.offset-md-2{grid-column:2/span 9}.col-md-9.offset-md-3{grid-column:3/span 9}.col-md-9.offset-md-4{grid-column:4/span 9}.col-md-9.offset-md-5{grid-column:5/span 9}.col-md-9.offset-md-6{grid-column:6/span 9}.col-md-9.offset-md-7{grid-column:7/span 9}.col-md-9.offset-md-8{grid-column:8/span 9}.col-md-9.offset-md-9{grid-column:9/span 9}.col-md-9.offset-md-10{grid-column:10/span 9}.col-md-9.offset-md-11{grid-column:11/span 9}.col-md-9.offset-md-12{grid-column:12/span 9}.col-md-9.offset-md-13{grid-column:13/span 9}.col-md-9.offset-md-14{grid-column:14/span 9}.col-md-9.offset-md-15{grid-column:15/span 9}.col-md-9.offset-md-16{grid-column:16/span 9}.col-md-10.offset-md-2{grid-column:2/span 10}.col-md-10.offset-md-3{grid-column:3/span 10}.col-md-10.offset-md-4{grid-column:4/span 10}.col-md-10.offset-md-5{grid-column:5/span 10}.col-md-10.offset-md-6{grid-column:6/span 10}.col-md-10.offset-md-7{grid-column:7/span 10}.col-md-10.offset-md-8{grid-column:8/span 10}.col-md-10.offset-md-9{grid-column:9/span 10}.col-md-10.offset-md-10{grid-column:10/span 10}.col-md-10.offset-md-11{grid-column:11/span 10}.col-md-10.offset-md-12{grid-column:12/span 10}.col-md-10.offset-md-13{grid-column:13/span 10}.col-md-10.offset-md-14{grid-column:14/span 10}.col-md-10.offset-md-15{grid-column:15/span 10}.col-md-10.offset-md-16{grid-column:16/span 10}.col-md-11.offset-md-2{grid-column:2/span 11}.col-md-11.offset-md-3{grid-column:3/span 11}.col-md-11.offset-md-4{grid-column:4/span 11}.col-md-11.offset-md-5{grid-column:5/span 11}.col-md-11.offset-md-6{grid-column:6/span 11}.col-md-11.offset-md-7{grid-column:7/span 11}.col-md-11.offset-md-8{grid-column:8/span 11}.col-md-11.offset-md-9{grid-column:9/span 11}.col-md-11.offset-md-10{grid-column:10/span 11}.col-md-11.offset-md-11{grid-column:11/span 11}.col-md-11.offset-md-12{grid-column:12/span 11}.col-md-11.offset-md-13{grid-column:13/span 11}.col-md-11.offset-md-14{grid-column:14/span 11}.col-md-11.offset-md-15{grid-column:15/span 11}.col-md-11.offset-md-16{grid-column:16/span 11}.col-md-12.offset-md-2{grid-column:2/span 12}.col-md-12.offset-md-3{grid-column:3/span 12}.col-md-12.offset-md-4{grid-column:4/span 12}.col-md-12.offset-md-5{grid-column:5/span 12}.col-md-12.offset-md-6{grid-column:6/span 12}.col-md-12.offset-md-7{grid-column:7/span 12}.col-md-12.offset-md-8{grid-column:8/span 12}.col-md-12.offset-md-9{grid-column:9/span 12}.col-md-12.offset-md-10{grid-column:10/span 12}.col-md-12.offset-md-11{grid-column:11/span 12}.col-md-12.offset-md-12{grid-column:12/span 12}.col-md-12.offset-md-13{grid-column:13/span 12}.col-md-12.offset-md-14{grid-column:14/span 12}.col-md-12.offset-md-15{grid-column:15/span 12}.col-md-12.offset-md-16{grid-column:16/span 12}.col-md-13.offset-md-2{grid-column:2/span 13}.col-md-13.offset-md-3{grid-column:3/span 13}.col-md-13.offset-md-4{grid-column:4/span 13}.col-md-13.offset-md-5{grid-column:5/span 13}.col-md-13.offset-md-6{grid-column:6/span 13}.col-md-13.offset-md-7{grid-column:7/span 13}.col-md-13.offset-md-8{grid-column:8/span 13}.col-md-13.offset-md-9{grid-column:9/span 13}.col-md-13.offset-md-10{grid-column:10/span 13}.col-md-13.offset-md-11{grid-column:11/span 13}.col-md-13.offset-md-12{grid-column:12/span 13}.col-md-13.offset-md-13{grid-column:13/span 13}.col-md-13.offset-md-14{grid-column:14/span 13}.col-md-13.offset-md-15{grid-column:15/span 13}.col-md-13.offset-md-16{grid-column:16/span 13}.col-md-14.offset-md-2{grid-column:2/span 14}.col-md-14.offset-md-3{grid-column:3/span 14}.col-md-14.offset-md-4{grid-column:4/span 14}.col-md-14.offset-md-5{grid-column:5/span 14}.col-md-14.offset-md-6{grid-column:6/span 14}.col-md-14.offset-md-7{grid-column:7/span 14}.col-md-14.offset-md-8{grid-column:8/span 14}.col-md-14.offset-md-9{grid-column:9/span 14}.col-md-14.offset-md-10{grid-column:10/span 14}.col-md-14.offset-md-11{grid-column:11/span 14}.col-md-14.offset-md-12{grid-column:12/span 14}.col-md-14.offset-md-13{grid-column:13/span 14}.col-md-14.offset-md-14{grid-column:14/span 14}.col-md-14.offset-md-15{grid-column:15/span 14}.col-md-14.offset-md-16{grid-column:16/span 14}.col-md-15.offset-md-2{grid-column:2/span 15}.col-md-15.offset-md-3{grid-column:3/span 15}.col-md-15.offset-md-4{grid-column:4/span 15}.col-md-15.offset-md-5{grid-column:5/span 15}.col-md-15.offset-md-6{grid-column:6/span 15}.col-md-15.offset-md-7{grid-column:7/span 15}.col-md-15.offset-md-8{grid-column:8/span 15}.col-md-15.offset-md-9{grid-column:9/span 15}.col-md-15.offset-md-10{grid-column:10/span 15}.col-md-15.offset-md-11{grid-column:11/span 15}.col-md-15.offset-md-12{grid-column:12/span 15}.col-md-15.offset-md-13{grid-column:13/span 15}.col-md-15.offset-md-14{grid-column:14/span 15}.col-md-15.offset-md-15{grid-column:15/span 15}.col-md-15.offset-md-16{grid-column:16/span 15}.col-md-16.offset-md-2{grid-column:2/span 16}.col-md-16.offset-md-3{grid-column:3/span 16}.col-md-16.offset-md-4{grid-column:4/span 16}.col-md-16.offset-md-5{grid-column:5/span 16}.col-md-16.offset-md-6{grid-column:6/span 16}.col-md-16.offset-md-7{grid-column:7/span 16}.col-md-16.offset-md-8{grid-column:8/span 16}.col-md-16.offset-md-9{grid-column:9/span 16}.col-md-16.offset-md-10{grid-column:10/span 16}.col-md-16.offset-md-11{grid-column:11/span 16}.col-md-16.offset-md-12{grid-column:12/span 16}.col-md-16.offset-md-13{grid-column:13/span 16}.col-md-16.offset-md-14{grid-column:14/span 16}.col-md-16.offset-md-15{grid-column:15/span 16}.col-md-16.offset-md-16{grid-column:16/span 16}}@media only screen and (min-width: 992px){.col-lg-1.offset-lg-2{grid-column:2/span 1}.col-lg-1.offset-lg-3{grid-column:3/span 1}.col-lg-1.offset-lg-4{grid-column:4/span 1}.col-lg-1.offset-lg-5{grid-column:5/span 1}.col-lg-1.offset-lg-6{grid-column:6/span 1}.col-lg-1.offset-lg-7{grid-column:7/span 1}.col-lg-1.offset-lg-8{grid-column:8/span 1}.col-lg-1.offset-lg-9{grid-column:9/span 1}.col-lg-1.offset-lg-10{grid-column:10/span 1}.col-lg-1.offset-lg-11{grid-column:11/span 1}.col-lg-1.offset-lg-12{grid-column:12/span 1}.col-lg-1.offset-lg-13{grid-column:13/span 1}.col-lg-1.offset-lg-14{grid-column:14/span 1}.col-lg-1.offset-lg-15{grid-column:15/span 1}.col-lg-1.offset-lg-16{grid-column:16/span 1}.col-lg-2.offset-lg-2{grid-column:2/span 2}.col-lg-2.offset-lg-3{grid-column:3/span 2}.col-lg-2.offset-lg-4{grid-column:4/span 2}.col-lg-2.offset-lg-5{grid-column:5/span 2}.col-lg-2.offset-lg-6{grid-column:6/span 2}.col-lg-2.offset-lg-7{grid-column:7/span 2}.col-lg-2.offset-lg-8{grid-column:8/span 2}.col-lg-2.offset-lg-9{grid-column:9/span 2}.col-lg-2.offset-lg-10{grid-column:10/span 2}.col-lg-2.offset-lg-11{grid-column:11/span 2}.col-lg-2.offset-lg-12{grid-column:12/span 2}.col-lg-2.offset-lg-13{grid-column:13/span 2}.col-lg-2.offset-lg-14{grid-column:14/span 2}.col-lg-2.offset-lg-15{grid-column:15/span 2}.col-lg-2.offset-lg-16{grid-column:16/span 2}.col-lg-3.offset-lg-2{grid-column:2/span 3}.col-lg-3.offset-lg-3{grid-column:3/span 3}.col-lg-3.offset-lg-4{grid-column:4/span 3}.col-lg-3.offset-lg-5{grid-column:5/span 3}.col-lg-3.offset-lg-6{grid-column:6/span 3}.col-lg-3.offset-lg-7{grid-column:7/span 3}.col-lg-3.offset-lg-8{grid-column:8/span 3}.col-lg-3.offset-lg-9{grid-column:9/span 3}.col-lg-3.offset-lg-10{grid-column:10/span 3}.col-lg-3.offset-lg-11{grid-column:11/span 3}.col-lg-3.offset-lg-12{grid-column:12/span 3}.col-lg-3.offset-lg-13{grid-column:13/span 3}.col-lg-3.offset-lg-14{grid-column:14/span 3}.col-lg-3.offset-lg-15{grid-column:15/span 3}.col-lg-3.offset-lg-16{grid-column:16/span 3}.col-lg-4.offset-lg-2{grid-column:2/span 4}.col-lg-4.offset-lg-3{grid-column:3/span 4}.col-lg-4.offset-lg-4{grid-column:4/span 4}.col-lg-4.offset-lg-5{grid-column:5/span 4}.col-lg-4.offset-lg-6{grid-column:6/span 4}.col-lg-4.offset-lg-7{grid-column:7/span 4}.col-lg-4.offset-lg-8{grid-column:8/span 4}.col-lg-4.offset-lg-9{grid-column:9/span 4}.col-lg-4.offset-lg-10{grid-column:10/span 4}.col-lg-4.offset-lg-11{grid-column:11/span 4}.col-lg-4.offset-lg-12{grid-column:12/span 4}.col-lg-4.offset-lg-13{grid-column:13/span 4}.col-lg-4.offset-lg-14{grid-column:14/span 4}.col-lg-4.offset-lg-15{grid-column:15/span 4}.col-lg-4.offset-lg-16{grid-column:16/span 4}.col-lg-5.offset-lg-2{grid-column:2/span 5}.col-lg-5.offset-lg-3{grid-column:3/span 5}.col-lg-5.offset-lg-4{grid-column:4/span 5}.col-lg-5.offset-lg-5{grid-column:5/span 5}.col-lg-5.offset-lg-6{grid-column:6/span 5}.col-lg-5.offset-lg-7{grid-column:7/span 5}.col-lg-5.offset-lg-8{grid-column:8/span 5}.col-lg-5.offset-lg-9{grid-column:9/span 5}.col-lg-5.offset-lg-10{grid-column:10/span 5}.col-lg-5.offset-lg-11{grid-column:11/span 5}.col-lg-5.offset-lg-12{grid-column:12/span 5}.col-lg-5.offset-lg-13{grid-column:13/span 5}.col-lg-5.offset-lg-14{grid-column:14/span 5}.col-lg-5.offset-lg-15{grid-column:15/span 5}.col-lg-5.offset-lg-16{grid-column:16/span 5}.col-lg-6.offset-lg-2{grid-column:2/span 6}.col-lg-6.offset-lg-3{grid-column:3/span 6}.col-lg-6.offset-lg-4{grid-column:4/span 6}.col-lg-6.offset-lg-5{grid-column:5/span 6}.col-lg-6.offset-lg-6{grid-column:6/span 6}.col-lg-6.offset-lg-7{grid-column:7/span 6}.col-lg-6.offset-lg-8{grid-column:8/span 6}.col-lg-6.offset-lg-9{grid-column:9/span 6}.col-lg-6.offset-lg-10{grid-column:10/span 6}.col-lg-6.offset-lg-11{grid-column:11/span 6}.col-lg-6.offset-lg-12{grid-column:12/span 6}.col-lg-6.offset-lg-13{grid-column:13/span 6}.col-lg-6.offset-lg-14{grid-column:14/span 6}.col-lg-6.offset-lg-15{grid-column:15/span 6}.col-lg-6.offset-lg-16{grid-column:16/span 6}.col-lg-7.offset-lg-2{grid-column:2/span 7}.col-lg-7.offset-lg-3{grid-column:3/span 7}.col-lg-7.offset-lg-4{grid-column:4/span 7}.col-lg-7.offset-lg-5{grid-column:5/span 7}.col-lg-7.offset-lg-6{grid-column:6/span 7}.col-lg-7.offset-lg-7{grid-column:7/span 7}.col-lg-7.offset-lg-8{grid-column:8/span 7}.col-lg-7.offset-lg-9{grid-column:9/span 7}.col-lg-7.offset-lg-10{grid-column:10/span 7}.col-lg-7.offset-lg-11{grid-column:11/span 7}.col-lg-7.offset-lg-12{grid-column:12/span 7}.col-lg-7.offset-lg-13{grid-column:13/span 7}.col-lg-7.offset-lg-14{grid-column:14/span 7}.col-lg-7.offset-lg-15{grid-column:15/span 7}.col-lg-7.offset-lg-16{grid-column:16/span 7}.col-lg-8.offset-lg-2{grid-column:2/span 8}.col-lg-8.offset-lg-3{grid-column:3/span 8}.col-lg-8.offset-lg-4{grid-column:4/span 8}.col-lg-8.offset-lg-5{grid-column:5/span 8}.col-lg-8.offset-lg-6{grid-column:6/span 8}.col-lg-8.offset-lg-7{grid-column:7/span 8}.col-lg-8.offset-lg-8{grid-column:8/span 8}.col-lg-8.offset-lg-9{grid-column:9/span 8}.col-lg-8.offset-lg-10{grid-column:10/span 8}.col-lg-8.offset-lg-11{grid-column:11/span 8}.col-lg-8.offset-lg-12{grid-column:12/span 8}.col-lg-8.offset-lg-13{grid-column:13/span 8}.col-lg-8.offset-lg-14{grid-column:14/span 8}.col-lg-8.offset-lg-15{grid-column:15/span 8}.col-lg-8.offset-lg-16{grid-column:16/span 8}.col-lg-9.offset-lg-2{grid-column:2/span 9}.col-lg-9.offset-lg-3{grid-column:3/span 9}.col-lg-9.offset-lg-4{grid-column:4/span 9}.col-lg-9.offset-lg-5{grid-column:5/span 9}.col-lg-9.offset-lg-6{grid-column:6/span 9}.col-lg-9.offset-lg-7{grid-column:7/span 9}.col-lg-9.offset-lg-8{grid-column:8/span 9}.col-lg-9.offset-lg-9{grid-column:9/span 9}.col-lg-9.offset-lg-10{grid-column:10/span 9}.col-lg-9.offset-lg-11{grid-column:11/span 9}.col-lg-9.offset-lg-12{grid-column:12/span 9}.col-lg-9.offset-lg-13{grid-column:13/span 9}.col-lg-9.offset-lg-14{grid-column:14/span 9}.col-lg-9.offset-lg-15{grid-column:15/span 9}.col-lg-9.offset-lg-16{grid-column:16/span 9}.col-lg-10.offset-lg-2{grid-column:2/span 10}.col-lg-10.offset-lg-3{grid-column:3/span 10}.col-lg-10.offset-lg-4{grid-column:4/span 10}.col-lg-10.offset-lg-5{grid-column:5/span 10}.col-lg-10.offset-lg-6{grid-column:6/span 10}.col-lg-10.offset-lg-7{grid-column:7/span 10}.col-lg-10.offset-lg-8{grid-column:8/span 10}.col-lg-10.offset-lg-9{grid-column:9/span 10}.col-lg-10.offset-lg-10{grid-column:10/span 10}.col-lg-10.offset-lg-11{grid-column:11/span 10}.col-lg-10.offset-lg-12{grid-column:12/span 10}.col-lg-10.offset-lg-13{grid-column:13/span 10}.col-lg-10.offset-lg-14{grid-column:14/span 10}.col-lg-10.offset-lg-15{grid-column:15/span 10}.col-lg-10.offset-lg-16{grid-column:16/span 10}.col-lg-11.offset-lg-2{grid-column:2/span 11}.col-lg-11.offset-lg-3{grid-column:3/span 11}.col-lg-11.offset-lg-4{grid-column:4/span 11}.col-lg-11.offset-lg-5{grid-column:5/span 11}.col-lg-11.offset-lg-6{grid-column:6/span 11}.col-lg-11.offset-lg-7{grid-column:7/span 11}.col-lg-11.offset-lg-8{grid-column:8/span 11}.col-lg-11.offset-lg-9{grid-column:9/span 11}.col-lg-11.offset-lg-10{grid-column:10/span 11}.col-lg-11.offset-lg-11{grid-column:11/span 11}.col-lg-11.offset-lg-12{grid-column:12/span 11}.col-lg-11.offset-lg-13{grid-column:13/span 11}.col-lg-11.offset-lg-14{grid-column:14/span 11}.col-lg-11.offset-lg-15{grid-column:15/span 11}.col-lg-11.offset-lg-16{grid-column:16/span 11}.col-lg-12.offset-lg-2{grid-column:2/span 12}.col-lg-12.offset-lg-3{grid-column:3/span 12}.col-lg-12.offset-lg-4{grid-column:4/span 12}.col-lg-12.offset-lg-5{grid-column:5/span 12}.col-lg-12.offset-lg-6{grid-column:6/span 12}.col-lg-12.offset-lg-7{grid-column:7/span 12}.col-lg-12.offset-lg-8{grid-column:8/span 12}.col-lg-12.offset-lg-9{grid-column:9/span 12}.col-lg-12.offset-lg-10{grid-column:10/span 12}.col-lg-12.offset-lg-11{grid-column:11/span 12}.col-lg-12.offset-lg-12{grid-column:12/span 12}.col-lg-12.offset-lg-13{grid-column:13/span 12}.col-lg-12.offset-lg-14{grid-column:14/span 12}.col-lg-12.offset-lg-15{grid-column:15/span 12}.col-lg-12.offset-lg-16{grid-column:16/span 12}.col-lg-13.offset-lg-2{grid-column:2/span 13}.col-lg-13.offset-lg-3{grid-column:3/span 13}.col-lg-13.offset-lg-4{grid-column:4/span 13}.col-lg-13.offset-lg-5{grid-column:5/span 13}.col-lg-13.offset-lg-6{grid-column:6/span 13}.col-lg-13.offset-lg-7{grid-column:7/span 13}.col-lg-13.offset-lg-8{grid-column:8/span 13}.col-lg-13.offset-lg-9{grid-column:9/span 13}.col-lg-13.offset-lg-10{grid-column:10/span 13}.col-lg-13.offset-lg-11{grid-column:11/span 13}.col-lg-13.offset-lg-12{grid-column:12/span 13}.col-lg-13.offset-lg-13{grid-column:13/span 13}.col-lg-13.offset-lg-14{grid-column:14/span 13}.col-lg-13.offset-lg-15{grid-column:15/span 13}.col-lg-13.offset-lg-16{grid-column:16/span 13}.col-lg-14.offset-lg-2{grid-column:2/span 14}.col-lg-14.offset-lg-3{grid-column:3/span 14}.col-lg-14.offset-lg-4{grid-column:4/span 14}.col-lg-14.offset-lg-5{grid-column:5/span 14}.col-lg-14.offset-lg-6{grid-column:6/span 14}.col-lg-14.offset-lg-7{grid-column:7/span 14}.col-lg-14.offset-lg-8{grid-column:8/span 14}.col-lg-14.offset-lg-9{grid-column:9/span 14}.col-lg-14.offset-lg-10{grid-column:10/span 14}.col-lg-14.offset-lg-11{grid-column:11/span 14}.col-lg-14.offset-lg-12{grid-column:12/span 14}.col-lg-14.offset-lg-13{grid-column:13/span 14}.col-lg-14.offset-lg-14{grid-column:14/span 14}.col-lg-14.offset-lg-15{grid-column:15/span 14}.col-lg-14.offset-lg-16{grid-column:16/span 14}.col-lg-15.offset-lg-2{grid-column:2/span 15}.col-lg-15.offset-lg-3{grid-column:3/span 15}.col-lg-15.offset-lg-4{grid-column:4/span 15}.col-lg-15.offset-lg-5{grid-column:5/span 15}.col-lg-15.offset-lg-6{grid-column:6/span 15}.col-lg-15.offset-lg-7{grid-column:7/span 15}.col-lg-15.offset-lg-8{grid-column:8/span 15}.col-lg-15.offset-lg-9{grid-column:9/span 15}.col-lg-15.offset-lg-10{grid-column:10/span 15}.col-lg-15.offset-lg-11{grid-column:11/span 15}.col-lg-15.offset-lg-12{grid-column:12/span 15}.col-lg-15.offset-lg-13{grid-column:13/span 15}.col-lg-15.offset-lg-14{grid-column:14/span 15}.col-lg-15.offset-lg-15{grid-column:15/span 15}.col-lg-15.offset-lg-16{grid-column:16/span 15}.col-lg-16.offset-lg-2{grid-column:2/span 16}.col-lg-16.offset-lg-3{grid-column:3/span 16}.col-lg-16.offset-lg-4{grid-column:4/span 16}.col-lg-16.offset-lg-5{grid-column:5/span 16}.col-lg-16.offset-lg-6{grid-column:6/span 16}.col-lg-16.offset-lg-7{grid-column:7/span 16}.col-lg-16.offset-lg-8{grid-column:8/span 16}.col-lg-16.offset-lg-9{grid-column:9/span 16}.col-lg-16.offset-lg-10{grid-column:10/span 16}.col-lg-16.offset-lg-11{grid-column:11/span 16}.col-lg-16.offset-lg-12{grid-column:12/span 16}.col-lg-16.offset-lg-13{grid-column:13/span 16}.col-lg-16.offset-lg-14{grid-column:14/span 16}.col-lg-16.offset-lg-15{grid-column:15/span 16}.col-lg-16.offset-lg-16{grid-column:16/span 16}}@media only screen and (min-width: 1260px){.col-xl-1.offset-xl-2{grid-column:2/span 1}.col-xl-1.offset-xl-3{grid-column:3/span 1}.col-xl-1.offset-xl-4{grid-column:4/span 1}.col-xl-1.offset-xl-5{grid-column:5/span 1}.col-xl-1.offset-xl-6{grid-column:6/span 1}.col-xl-1.offset-xl-7{grid-column:7/span 1}.col-xl-1.offset-xl-8{grid-column:8/span 1}.col-xl-1.offset-xl-9{grid-column:9/span 1}.col-xl-1.offset-xl-10{grid-column:10/span 1}.col-xl-1.offset-xl-11{grid-column:11/span 1}.col-xl-1.offset-xl-12{grid-column:12/span 1}.col-xl-1.offset-xl-13{grid-column:13/span 1}.col-xl-1.offset-xl-14{grid-column:14/span 1}.col-xl-1.offset-xl-15{grid-column:15/span 1}.col-xl-1.offset-xl-16{grid-column:16/span 1}.col-xl-2.offset-xl-2{grid-column:2/span 2}.col-xl-2.offset-xl-3{grid-column:3/span 2}.col-xl-2.offset-xl-4{grid-column:4/span 2}.col-xl-2.offset-xl-5{grid-column:5/span 2}.col-xl-2.offset-xl-6{grid-column:6/span 2}.col-xl-2.offset-xl-7{grid-column:7/span 2}.col-xl-2.offset-xl-8{grid-column:8/span 2}.col-xl-2.offset-xl-9{grid-column:9/span 2}.col-xl-2.offset-xl-10{grid-column:10/span 2}.col-xl-2.offset-xl-11{grid-column:11/span 2}.col-xl-2.offset-xl-12{grid-column:12/span 2}.col-xl-2.offset-xl-13{grid-column:13/span 2}.col-xl-2.offset-xl-14{grid-column:14/span 2}.col-xl-2.offset-xl-15{grid-column:15/span 2}.col-xl-2.offset-xl-16{grid-column:16/span 2}.col-xl-3.offset-xl-2{grid-column:2/span 3}.col-xl-3.offset-xl-3{grid-column:3/span 3}.col-xl-3.offset-xl-4{grid-column:4/span 3}.col-xl-3.offset-xl-5{grid-column:5/span 3}.col-xl-3.offset-xl-6{grid-column:6/span 3}.col-xl-3.offset-xl-7{grid-column:7/span 3}.col-xl-3.offset-xl-8{grid-column:8/span 3}.col-xl-3.offset-xl-9{grid-column:9/span 3}.col-xl-3.offset-xl-10{grid-column:10/span 3}.col-xl-3.offset-xl-11{grid-column:11/span 3}.col-xl-3.offset-xl-12{grid-column:12/span 3}.col-xl-3.offset-xl-13{grid-column:13/span 3}.col-xl-3.offset-xl-14{grid-column:14/span 3}.col-xl-3.offset-xl-15{grid-column:15/span 3}.col-xl-3.offset-xl-16{grid-column:16/span 3}.col-xl-4.offset-xl-2{grid-column:2/span 4}.col-xl-4.offset-xl-3{grid-column:3/span 4}.col-xl-4.offset-xl-4{grid-column:4/span 4}.col-xl-4.offset-xl-5{grid-column:5/span 4}.col-xl-4.offset-xl-6{grid-column:6/span 4}.col-xl-4.offset-xl-7{grid-column:7/span 4}.col-xl-4.offset-xl-8{grid-column:8/span 4}.col-xl-4.offset-xl-9{grid-column:9/span 4}.col-xl-4.offset-xl-10{grid-column:10/span 4}.col-xl-4.offset-xl-11{grid-column:11/span 4}.col-xl-4.offset-xl-12{grid-column:12/span 4}.col-xl-4.offset-xl-13{grid-column:13/span 4}.col-xl-4.offset-xl-14{grid-column:14/span 4}.col-xl-4.offset-xl-15{grid-column:15/span 4}.col-xl-4.offset-xl-16{grid-column:16/span 4}.col-xl-5.offset-xl-2{grid-column:2/span 5}.col-xl-5.offset-xl-3{grid-column:3/span 5}.col-xl-5.offset-xl-4{grid-column:4/span 5}.col-xl-5.offset-xl-5{grid-column:5/span 5}.col-xl-5.offset-xl-6{grid-column:6/span 5}.col-xl-5.offset-xl-7{grid-column:7/span 5}.col-xl-5.offset-xl-8{grid-column:8/span 5}.col-xl-5.offset-xl-9{grid-column:9/span 5}.col-xl-5.offset-xl-10{grid-column:10/span 5}.col-xl-5.offset-xl-11{grid-column:11/span 5}.col-xl-5.offset-xl-12{grid-column:12/span 5}.col-xl-5.offset-xl-13{grid-column:13/span 5}.col-xl-5.offset-xl-14{grid-column:14/span 5}.col-xl-5.offset-xl-15{grid-column:15/span 5}.col-xl-5.offset-xl-16{grid-column:16/span 5}.col-xl-6.offset-xl-2{grid-column:2/span 6}.col-xl-6.offset-xl-3{grid-column:3/span 6}.col-xl-6.offset-xl-4{grid-column:4/span 6}.col-xl-6.offset-xl-5{grid-column:5/span 6}.col-xl-6.offset-xl-6{grid-column:6/span 6}.col-xl-6.offset-xl-7{grid-column:7/span 6}.col-xl-6.offset-xl-8{grid-column:8/span 6}.col-xl-6.offset-xl-9{grid-column:9/span 6}.col-xl-6.offset-xl-10{grid-column:10/span 6}.col-xl-6.offset-xl-11{grid-column:11/span 6}.col-xl-6.offset-xl-12{grid-column:12/span 6}.col-xl-6.offset-xl-13{grid-column:13/span 6}.col-xl-6.offset-xl-14{grid-column:14/span 6}.col-xl-6.offset-xl-15{grid-column:15/span 6}.col-xl-6.offset-xl-16{grid-column:16/span 6}.col-xl-7.offset-xl-2{grid-column:2/span 7}.col-xl-7.offset-xl-3{grid-column:3/span 7}.col-xl-7.offset-xl-4{grid-column:4/span 7}.col-xl-7.offset-xl-5{grid-column:5/span 7}.col-xl-7.offset-xl-6{grid-column:6/span 7}.col-xl-7.offset-xl-7{grid-column:7/span 7}.col-xl-7.offset-xl-8{grid-column:8/span 7}.col-xl-7.offset-xl-9{grid-column:9/span 7}.col-xl-7.offset-xl-10{grid-column:10/span 7}.col-xl-7.offset-xl-11{grid-column:11/span 7}.col-xl-7.offset-xl-12{grid-column:12/span 7}.col-xl-7.offset-xl-13{grid-column:13/span 7}.col-xl-7.offset-xl-14{grid-column:14/span 7}.col-xl-7.offset-xl-15{grid-column:15/span 7}.col-xl-7.offset-xl-16{grid-column:16/span 7}.col-xl-8.offset-xl-2{grid-column:2/span 8}.col-xl-8.offset-xl-3{grid-column:3/span 8}.col-xl-8.offset-xl-4{grid-column:4/span 8}.col-xl-8.offset-xl-5{grid-column:5/span 8}.col-xl-8.offset-xl-6{grid-column:6/span 8}.col-xl-8.offset-xl-7{grid-column:7/span 8}.col-xl-8.offset-xl-8{grid-column:8/span 8}.col-xl-8.offset-xl-9{grid-column:9/span 8}.col-xl-8.offset-xl-10{grid-column:10/span 8}.col-xl-8.offset-xl-11{grid-column:11/span 8}.col-xl-8.offset-xl-12{grid-column:12/span 8}.col-xl-8.offset-xl-13{grid-column:13/span 8}.col-xl-8.offset-xl-14{grid-column:14/span 8}.col-xl-8.offset-xl-15{grid-column:15/span 8}.col-xl-8.offset-xl-16{grid-column:16/span 8}.col-xl-9.offset-xl-2{grid-column:2/span 9}.col-xl-9.offset-xl-3{grid-column:3/span 9}.col-xl-9.offset-xl-4{grid-column:4/span 9}.col-xl-9.offset-xl-5{grid-column:5/span 9}.col-xl-9.offset-xl-6{grid-column:6/span 9}.col-xl-9.offset-xl-7{grid-column:7/span 9}.col-xl-9.offset-xl-8{grid-column:8/span 9}.col-xl-9.offset-xl-9{grid-column:9/span 9}.col-xl-9.offset-xl-10{grid-column:10/span 9}.col-xl-9.offset-xl-11{grid-column:11/span 9}.col-xl-9.offset-xl-12{grid-column:12/span 9}.col-xl-9.offset-xl-13{grid-column:13/span 9}.col-xl-9.offset-xl-14{grid-column:14/span 9}.col-xl-9.offset-xl-15{grid-column:15/span 9}.col-xl-9.offset-xl-16{grid-column:16/span 9}.col-xl-10.offset-xl-2{grid-column:2/span 10}.col-xl-10.offset-xl-3{grid-column:3/span 10}.col-xl-10.offset-xl-4{grid-column:4/span 10}.col-xl-10.offset-xl-5{grid-column:5/span 10}.col-xl-10.offset-xl-6{grid-column:6/span 10}.col-xl-10.offset-xl-7{grid-column:7/span 10}.col-xl-10.offset-xl-8{grid-column:8/span 10}.col-xl-10.offset-xl-9{grid-column:9/span 10}.col-xl-10.offset-xl-10{grid-column:10/span 10}.col-xl-10.offset-xl-11{grid-column:11/span 10}.col-xl-10.offset-xl-12{grid-column:12/span 10}.col-xl-10.offset-xl-13{grid-column:13/span 10}.col-xl-10.offset-xl-14{grid-column:14/span 10}.col-xl-10.offset-xl-15{grid-column:15/span 10}.col-xl-10.offset-xl-16{grid-column:16/span 10}.col-xl-11.offset-xl-2{grid-column:2/span 11}.col-xl-11.offset-xl-3{grid-column:3/span 11}.col-xl-11.offset-xl-4{grid-column:4/span 11}.col-xl-11.offset-xl-5{grid-column:5/span 11}.col-xl-11.offset-xl-6{grid-column:6/span 11}.col-xl-11.offset-xl-7{grid-column:7/span 11}.col-xl-11.offset-xl-8{grid-column:8/span 11}.col-xl-11.offset-xl-9{grid-column:9/span 11}.col-xl-11.offset-xl-10{grid-column:10/span 11}.col-xl-11.offset-xl-11{grid-column:11/span 11}.col-xl-11.offset-xl-12{grid-column:12/span 11}.col-xl-11.offset-xl-13{grid-column:13/span 11}.col-xl-11.offset-xl-14{grid-column:14/span 11}.col-xl-11.offset-xl-15{grid-column:15/span 11}.col-xl-11.offset-xl-16{grid-column:16/span 11}.col-xl-12.offset-xl-2{grid-column:2/span 12}.col-xl-12.offset-xl-3{grid-column:3/span 12}.col-xl-12.offset-xl-4{grid-column:4/span 12}.col-xl-12.offset-xl-5{grid-column:5/span 12}.col-xl-12.offset-xl-6{grid-column:6/span 12}.col-xl-12.offset-xl-7{grid-column:7/span 12}.col-xl-12.offset-xl-8{grid-column:8/span 12}.col-xl-12.offset-xl-9{grid-column:9/span 12}.col-xl-12.offset-xl-10{grid-column:10/span 12}.col-xl-12.offset-xl-11{grid-column:11/span 12}.col-xl-12.offset-xl-12{grid-column:12/span 12}.col-xl-12.offset-xl-13{grid-column:13/span 12}.col-xl-12.offset-xl-14{grid-column:14/span 12}.col-xl-12.offset-xl-15{grid-column:15/span 12}.col-xl-12.offset-xl-16{grid-column:16/span 12}.col-xl-13.offset-xl-2{grid-column:2/span 13}.col-xl-13.offset-xl-3{grid-column:3/span 13}.col-xl-13.offset-xl-4{grid-column:4/span 13}.col-xl-13.offset-xl-5{grid-column:5/span 13}.col-xl-13.offset-xl-6{grid-column:6/span 13}.col-xl-13.offset-xl-7{grid-column:7/span 13}.col-xl-13.offset-xl-8{grid-column:8/span 13}.col-xl-13.offset-xl-9{grid-column:9/span 13}.col-xl-13.offset-xl-10{grid-column:10/span 13}.col-xl-13.offset-xl-11{grid-column:11/span 13}.col-xl-13.offset-xl-12{grid-column:12/span 13}.col-xl-13.offset-xl-13{grid-column:13/span 13}.col-xl-13.offset-xl-14{grid-column:14/span 13}.col-xl-13.offset-xl-15{grid-column:15/span 13}.col-xl-13.offset-xl-16{grid-column:16/span 13}.col-xl-14.offset-xl-2{grid-column:2/span 14}.col-xl-14.offset-xl-3{grid-column:3/span 14}.col-xl-14.offset-xl-4{grid-column:4/span 14}.col-xl-14.offset-xl-5{grid-column:5/span 14}.col-xl-14.offset-xl-6{grid-column:6/span 14}.col-xl-14.offset-xl-7{grid-column:7/span 14}.col-xl-14.offset-xl-8{grid-column:8/span 14}.col-xl-14.offset-xl-9{grid-column:9/span 14}.col-xl-14.offset-xl-10{grid-column:10/span 14}.col-xl-14.offset-xl-11{grid-column:11/span 14}.col-xl-14.offset-xl-12{grid-column:12/span 14}.col-xl-14.offset-xl-13{grid-column:13/span 14}.col-xl-14.offset-xl-14{grid-column:14/span 14}.col-xl-14.offset-xl-15{grid-column:15/span 14}.col-xl-14.offset-xl-16{grid-column:16/span 14}.col-xl-15.offset-xl-2{grid-column:2/span 15}.col-xl-15.offset-xl-3{grid-column:3/span 15}.col-xl-15.offset-xl-4{grid-column:4/span 15}.col-xl-15.offset-xl-5{grid-column:5/span 15}.col-xl-15.offset-xl-6{grid-column:6/span 15}.col-xl-15.offset-xl-7{grid-column:7/span 15}.col-xl-15.offset-xl-8{grid-column:8/span 15}.col-xl-15.offset-xl-9{grid-column:9/span 15}.col-xl-15.offset-xl-10{grid-column:10/span 15}.col-xl-15.offset-xl-11{grid-column:11/span 15}.col-xl-15.offset-xl-12{grid-column:12/span 15}.col-xl-15.offset-xl-13{grid-column:13/span 15}.col-xl-15.offset-xl-14{grid-column:14/span 15}.col-xl-15.offset-xl-15{grid-column:15/span 15}.col-xl-15.offset-xl-16{grid-column:16/span 15}.col-xl-16.offset-xl-2{grid-column:2/span 16}.col-xl-16.offset-xl-3{grid-column:3/span 16}.col-xl-16.offset-xl-4{grid-column:4/span 16}.col-xl-16.offset-xl-5{grid-column:5/span 16}.col-xl-16.offset-xl-6{grid-column:6/span 16}.col-xl-16.offset-xl-7{grid-column:7/span 16}.col-xl-16.offset-xl-8{grid-column:8/span 16}.col-xl-16.offset-xl-9{grid-column:9/span 16}.col-xl-16.offset-xl-10{grid-column:10/span 16}.col-xl-16.offset-xl-11{grid-column:11/span 16}.col-xl-16.offset-xl-12{grid-column:12/span 16}.col-xl-16.offset-xl-13{grid-column:13/span 16}.col-xl-16.offset-xl-14{grid-column:14/span 16}.col-xl-16.offset-xl-15{grid-column:15/span 16}.col-xl-16.offset-xl-16{grid-column:16/span 16}}@media only screen and (min-width: 1400px){.col-xxl-1.offset-xxl-2{grid-column:2/span 1}.col-xxl-1.offset-xxl-3{grid-column:3/span 1}.col-xxl-1.offset-xxl-4{grid-column:4/span 1}.col-xxl-1.offset-xxl-5{grid-column:5/span 1}.col-xxl-1.offset-xxl-6{grid-column:6/span 1}.col-xxl-1.offset-xxl-7{grid-column:7/span 1}.col-xxl-1.offset-xxl-8{grid-column:8/span 1}.col-xxl-1.offset-xxl-9{grid-column:9/span 1}.col-xxl-1.offset-xxl-10{grid-column:10/span 1}.col-xxl-1.offset-xxl-11{grid-column:11/span 1}.col-xxl-1.offset-xxl-12{grid-column:12/span 1}.col-xxl-1.offset-xxl-13{grid-column:13/span 1}.col-xxl-1.offset-xxl-14{grid-column:14/span 1}.col-xxl-1.offset-xxl-15{grid-column:15/span 1}.col-xxl-1.offset-xxl-16{grid-column:16/span 1}.col-xxl-2.offset-xxl-2{grid-column:2/span 2}.col-xxl-2.offset-xxl-3{grid-column:3/span 2}.col-xxl-2.offset-xxl-4{grid-column:4/span 2}.col-xxl-2.offset-xxl-5{grid-column:5/span 2}.col-xxl-2.offset-xxl-6{grid-column:6/span 2}.col-xxl-2.offset-xxl-7{grid-column:7/span 2}.col-xxl-2.offset-xxl-8{grid-column:8/span 2}.col-xxl-2.offset-xxl-9{grid-column:9/span 2}.col-xxl-2.offset-xxl-10{grid-column:10/span 2}.col-xxl-2.offset-xxl-11{grid-column:11/span 2}.col-xxl-2.offset-xxl-12{grid-column:12/span 2}.col-xxl-2.offset-xxl-13{grid-column:13/span 2}.col-xxl-2.offset-xxl-14{grid-column:14/span 2}.col-xxl-2.offset-xxl-15{grid-column:15/span 2}.col-xxl-2.offset-xxl-16{grid-column:16/span 2}.col-xxl-3.offset-xxl-2{grid-column:2/span 3}.col-xxl-3.offset-xxl-3{grid-column:3/span 3}.col-xxl-3.offset-xxl-4{grid-column:4/span 3}.col-xxl-3.offset-xxl-5{grid-column:5/span 3}.col-xxl-3.offset-xxl-6{grid-column:6/span 3}.col-xxl-3.offset-xxl-7{grid-column:7/span 3}.col-xxl-3.offset-xxl-8{grid-column:8/span 3}.col-xxl-3.offset-xxl-9{grid-column:9/span 3}.col-xxl-3.offset-xxl-10{grid-column:10/span 3}.col-xxl-3.offset-xxl-11{grid-column:11/span 3}.col-xxl-3.offset-xxl-12{grid-column:12/span 3}.col-xxl-3.offset-xxl-13{grid-column:13/span 3}.col-xxl-3.offset-xxl-14{grid-column:14/span 3}.col-xxl-3.offset-xxl-15{grid-column:15/span 3}.col-xxl-3.offset-xxl-16{grid-column:16/span 3}.col-xxl-4.offset-xxl-2{grid-column:2/span 4}.col-xxl-4.offset-xxl-3{grid-column:3/span 4}.col-xxl-4.offset-xxl-4{grid-column:4/span 4}.col-xxl-4.offset-xxl-5{grid-column:5/span 4}.col-xxl-4.offset-xxl-6{grid-column:6/span 4}.col-xxl-4.offset-xxl-7{grid-column:7/span 4}.col-xxl-4.offset-xxl-8{grid-column:8/span 4}.col-xxl-4.offset-xxl-9{grid-column:9/span 4}.col-xxl-4.offset-xxl-10{grid-column:10/span 4}.col-xxl-4.offset-xxl-11{grid-column:11/span 4}.col-xxl-4.offset-xxl-12{grid-column:12/span 4}.col-xxl-4.offset-xxl-13{grid-column:13/span 4}.col-xxl-4.offset-xxl-14{grid-column:14/span 4}.col-xxl-4.offset-xxl-15{grid-column:15/span 4}.col-xxl-4.offset-xxl-16{grid-column:16/span 4}.col-xxl-5.offset-xxl-2{grid-column:2/span 5}.col-xxl-5.offset-xxl-3{grid-column:3/span 5}.col-xxl-5.offset-xxl-4{grid-column:4/span 5}.col-xxl-5.offset-xxl-5{grid-column:5/span 5}.col-xxl-5.offset-xxl-6{grid-column:6/span 5}.col-xxl-5.offset-xxl-7{grid-column:7/span 5}.col-xxl-5.offset-xxl-8{grid-column:8/span 5}.col-xxl-5.offset-xxl-9{grid-column:9/span 5}.col-xxl-5.offset-xxl-10{grid-column:10/span 5}.col-xxl-5.offset-xxl-11{grid-column:11/span 5}.col-xxl-5.offset-xxl-12{grid-column:12/span 5}.col-xxl-5.offset-xxl-13{grid-column:13/span 5}.col-xxl-5.offset-xxl-14{grid-column:14/span 5}.col-xxl-5.offset-xxl-15{grid-column:15/span 5}.col-xxl-5.offset-xxl-16{grid-column:16/span 5}.col-xxl-6.offset-xxl-2{grid-column:2/span 6}.col-xxl-6.offset-xxl-3{grid-column:3/span 6}.col-xxl-6.offset-xxl-4{grid-column:4/span 6}.col-xxl-6.offset-xxl-5{grid-column:5/span 6}.col-xxl-6.offset-xxl-6{grid-column:6/span 6}.col-xxl-6.offset-xxl-7{grid-column:7/span 6}.col-xxl-6.offset-xxl-8{grid-column:8/span 6}.col-xxl-6.offset-xxl-9{grid-column:9/span 6}.col-xxl-6.offset-xxl-10{grid-column:10/span 6}.col-xxl-6.offset-xxl-11{grid-column:11/span 6}.col-xxl-6.offset-xxl-12{grid-column:12/span 6}.col-xxl-6.offset-xxl-13{grid-column:13/span 6}.col-xxl-6.offset-xxl-14{grid-column:14/span 6}.col-xxl-6.offset-xxl-15{grid-column:15/span 6}.col-xxl-6.offset-xxl-16{grid-column:16/span 6}.col-xxl-7.offset-xxl-2{grid-column:2/span 7}.col-xxl-7.offset-xxl-3{grid-column:3/span 7}.col-xxl-7.offset-xxl-4{grid-column:4/span 7}.col-xxl-7.offset-xxl-5{grid-column:5/span 7}.col-xxl-7.offset-xxl-6{grid-column:6/span 7}.col-xxl-7.offset-xxl-7{grid-column:7/span 7}.col-xxl-7.offset-xxl-8{grid-column:8/span 7}.col-xxl-7.offset-xxl-9{grid-column:9/span 7}.col-xxl-7.offset-xxl-10{grid-column:10/span 7}.col-xxl-7.offset-xxl-11{grid-column:11/span 7}.col-xxl-7.offset-xxl-12{grid-column:12/span 7}.col-xxl-7.offset-xxl-13{grid-column:13/span 7}.col-xxl-7.offset-xxl-14{grid-column:14/span 7}.col-xxl-7.offset-xxl-15{grid-column:15/span 7}.col-xxl-7.offset-xxl-16{grid-column:16/span 7}.col-xxl-8.offset-xxl-2{grid-column:2/span 8}.col-xxl-8.offset-xxl-3{grid-column:3/span 8}.col-xxl-8.offset-xxl-4{grid-column:4/span 8}.col-xxl-8.offset-xxl-5{grid-column:5/span 8}.col-xxl-8.offset-xxl-6{grid-column:6/span 8}.col-xxl-8.offset-xxl-7{grid-column:7/span 8}.col-xxl-8.offset-xxl-8{grid-column:8/span 8}.col-xxl-8.offset-xxl-9{grid-column:9/span 8}.col-xxl-8.offset-xxl-10{grid-column:10/span 8}.col-xxl-8.offset-xxl-11{grid-column:11/span 8}.col-xxl-8.offset-xxl-12{grid-column:12/span 8}.col-xxl-8.offset-xxl-13{grid-column:13/span 8}.col-xxl-8.offset-xxl-14{grid-column:14/span 8}.col-xxl-8.offset-xxl-15{grid-column:15/span 8}.col-xxl-8.offset-xxl-16{grid-column:16/span 8}.col-xxl-9.offset-xxl-2{grid-column:2/span 9}.col-xxl-9.offset-xxl-3{grid-column:3/span 9}.col-xxl-9.offset-xxl-4{grid-column:4/span 9}.col-xxl-9.offset-xxl-5{grid-column:5/span 9}.col-xxl-9.offset-xxl-6{grid-column:6/span 9}.col-xxl-9.offset-xxl-7{grid-column:7/span 9}.col-xxl-9.offset-xxl-8{grid-column:8/span 9}.col-xxl-9.offset-xxl-9{grid-column:9/span 9}.col-xxl-9.offset-xxl-10{grid-column:10/span 9}.col-xxl-9.offset-xxl-11{grid-column:11/span 9}.col-xxl-9.offset-xxl-12{grid-column:12/span 9}.col-xxl-9.offset-xxl-13{grid-column:13/span 9}.col-xxl-9.offset-xxl-14{grid-column:14/span 9}.col-xxl-9.offset-xxl-15{grid-column:15/span 9}.col-xxl-9.offset-xxl-16{grid-column:16/span 9}.col-xxl-10.offset-xxl-2{grid-column:2/span 10}.col-xxl-10.offset-xxl-3{grid-column:3/span 10}.col-xxl-10.offset-xxl-4{grid-column:4/span 10}.col-xxl-10.offset-xxl-5{grid-column:5/span 10}.col-xxl-10.offset-xxl-6{grid-column:6/span 10}.col-xxl-10.offset-xxl-7{grid-column:7/span 10}.col-xxl-10.offset-xxl-8{grid-column:8/span 10}.col-xxl-10.offset-xxl-9{grid-column:9/span 10}.col-xxl-10.offset-xxl-10{grid-column:10/span 10}.col-xxl-10.offset-xxl-11{grid-column:11/span 10}.col-xxl-10.offset-xxl-12{grid-column:12/span 10}.col-xxl-10.offset-xxl-13{grid-column:13/span 10}.col-xxl-10.offset-xxl-14{grid-column:14/span 10}.col-xxl-10.offset-xxl-15{grid-column:15/span 10}.col-xxl-10.offset-xxl-16{grid-column:16/span 10}.col-xxl-11.offset-xxl-2{grid-column:2/span 11}.col-xxl-11.offset-xxl-3{grid-column:3/span 11}.col-xxl-11.offset-xxl-4{grid-column:4/span 11}.col-xxl-11.offset-xxl-5{grid-column:5/span 11}.col-xxl-11.offset-xxl-6{grid-column:6/span 11}.col-xxl-11.offset-xxl-7{grid-column:7/span 11}.col-xxl-11.offset-xxl-8{grid-column:8/span 11}.col-xxl-11.offset-xxl-9{grid-column:9/span 11}.col-xxl-11.offset-xxl-10{grid-column:10/span 11}.col-xxl-11.offset-xxl-11{grid-column:11/span 11}.col-xxl-11.offset-xxl-12{grid-column:12/span 11}.col-xxl-11.offset-xxl-13{grid-column:13/span 11}.col-xxl-11.offset-xxl-14{grid-column:14/span 11}.col-xxl-11.offset-xxl-15{grid-column:15/span 11}.col-xxl-11.offset-xxl-16{grid-column:16/span 11}.col-xxl-12.offset-xxl-2{grid-column:2/span 12}.col-xxl-12.offset-xxl-3{grid-column:3/span 12}.col-xxl-12.offset-xxl-4{grid-column:4/span 12}.col-xxl-12.offset-xxl-5{grid-column:5/span 12}.col-xxl-12.offset-xxl-6{grid-column:6/span 12}.col-xxl-12.offset-xxl-7{grid-column:7/span 12}.col-xxl-12.offset-xxl-8{grid-column:8/span 12}.col-xxl-12.offset-xxl-9{grid-column:9/span 12}.col-xxl-12.offset-xxl-10{grid-column:10/span 12}.col-xxl-12.offset-xxl-11{grid-column:11/span 12}.col-xxl-12.offset-xxl-12{grid-column:12/span 12}.col-xxl-12.offset-xxl-13{grid-column:13/span 12}.col-xxl-12.offset-xxl-14{grid-column:14/span 12}.col-xxl-12.offset-xxl-15{grid-column:15/span 12}.col-xxl-12.offset-xxl-16{grid-column:16/span 12}.col-xxl-13.offset-xxl-2{grid-column:2/span 13}.col-xxl-13.offset-xxl-3{grid-column:3/span 13}.col-xxl-13.offset-xxl-4{grid-column:4/span 13}.col-xxl-13.offset-xxl-5{grid-column:5/span 13}.col-xxl-13.offset-xxl-6{grid-column:6/span 13}.col-xxl-13.offset-xxl-7{grid-column:7/span 13}.col-xxl-13.offset-xxl-8{grid-column:8/span 13}.col-xxl-13.offset-xxl-9{grid-column:9/span 13}.col-xxl-13.offset-xxl-10{grid-column:10/span 13}.col-xxl-13.offset-xxl-11{grid-column:11/span 13}.col-xxl-13.offset-xxl-12{grid-column:12/span 13}.col-xxl-13.offset-xxl-13{grid-column:13/span 13}.col-xxl-13.offset-xxl-14{grid-column:14/span 13}.col-xxl-13.offset-xxl-15{grid-column:15/span 13}.col-xxl-13.offset-xxl-16{grid-column:16/span 13}.col-xxl-14.offset-xxl-2{grid-column:2/span 14}.col-xxl-14.offset-xxl-3{grid-column:3/span 14}.col-xxl-14.offset-xxl-4{grid-column:4/span 14}.col-xxl-14.offset-xxl-5{grid-column:5/span 14}.col-xxl-14.offset-xxl-6{grid-column:6/span 14}.col-xxl-14.offset-xxl-7{grid-column:7/span 14}.col-xxl-14.offset-xxl-8{grid-column:8/span 14}.col-xxl-14.offset-xxl-9{grid-column:9/span 14}.col-xxl-14.offset-xxl-10{grid-column:10/span 14}.col-xxl-14.offset-xxl-11{grid-column:11/span 14}.col-xxl-14.offset-xxl-12{grid-column:12/span 14}.col-xxl-14.offset-xxl-13{grid-column:13/span 14}.col-xxl-14.offset-xxl-14{grid-column:14/span 14}.col-xxl-14.offset-xxl-15{grid-column:15/span 14}.col-xxl-14.offset-xxl-16{grid-column:16/span 14}.col-xxl-15.offset-xxl-2{grid-column:2/span 15}.col-xxl-15.offset-xxl-3{grid-column:3/span 15}.col-xxl-15.offset-xxl-4{grid-column:4/span 15}.col-xxl-15.offset-xxl-5{grid-column:5/span 15}.col-xxl-15.offset-xxl-6{grid-column:6/span 15}.col-xxl-15.offset-xxl-7{grid-column:7/span 15}.col-xxl-15.offset-xxl-8{grid-column:8/span 15}.col-xxl-15.offset-xxl-9{grid-column:9/span 15}.col-xxl-15.offset-xxl-10{grid-column:10/span 15}.col-xxl-15.offset-xxl-11{grid-column:11/span 15}.col-xxl-15.offset-xxl-12{grid-column:12/span 15}.col-xxl-15.offset-xxl-13{grid-column:13/span 15}.col-xxl-15.offset-xxl-14{grid-column:14/span 15}.col-xxl-15.offset-xxl-15{grid-column:15/span 15}.col-xxl-15.offset-xxl-16{grid-column:16/span 15}.col-xxl-16.offset-xxl-2{grid-column:2/span 16}.col-xxl-16.offset-xxl-3{grid-column:3/span 16}.col-xxl-16.offset-xxl-4{grid-column:4/span 16}.col-xxl-16.offset-xxl-5{grid-column:5/span 16}.col-xxl-16.offset-xxl-6{grid-column:6/span 16}.col-xxl-16.offset-xxl-7{grid-column:7/span 16}.col-xxl-16.offset-xxl-8{grid-column:8/span 16}.col-xxl-16.offset-xxl-9{grid-column:9/span 16}.col-xxl-16.offset-xxl-10{grid-column:10/span 16}.col-xxl-16.offset-xxl-11{grid-column:11/span 16}.col-xxl-16.offset-xxl-12{grid-column:12/span 16}.col-xxl-16.offset-xxl-13{grid-column:13/span 16}.col-xxl-16.offset-xxl-14{grid-column:14/span 16}.col-xxl-16.offset-xxl-15{grid-column:15/span 16}.col-xxl-16.offset-xxl-16{grid-column:16/span 16}}a.button,.button{display:inline-flex;font-family:"IBM Plex Sans Hebrew",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1em;font-weight:700;text-decoration:none;white-space:nowrap;outline:none;width:min-content;background:#fff;background-image:none;border:1px solid #c6c6c6;appearance:none;color:#202123;border-radius:4px;box-sizing:border-box;cursor:pointer;line-height:1;padding:.935rem 1.6rem;transition:.2s;user-select:none;box-shadow:none;align-items:center;justify-content:center;overflow:visible;text-align:center}a.button:focus,a.button:hover,.button:focus,.button:hover{transition:.2s;background-image:none}a.button:hover,.button:hover{background:#e6e6e6}a.button:active,a.button:focus,.button:active,.button:focus{background:#fff}a.button.gradient,.button.gradient{z-index:1;position:relative;background:linear-gradient(to top, white 0%, white 100%)}a.button.gradient:before,.button.gradient:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(to bottom, white 0%, white 100%)}a.button.gradient:hover::before,.button.gradient:hover::before{opacity:1}a.button.gradient:active::before,a.button.gradient:focus::before,.button.gradient:active::before,.button.gradient:focus::before{background:linear-gradient(to bottom, white 0%, white 100%)}a.button.active,.button.active{color:#202123;background:#dcdcdc;background-image:none;text-decoration:none}a.button.active:focus,a.button.active:hover,.button.active:focus,.button.active:hover{color:#202123;background:#e6e6e6}a.button.inactive,.button.inactive{pointer-events:none;cursor:default;background-image:none}a.button.block,.button.block{display:flex;flex:1;width:auto}a.button i,a.button [class^=material-symbols-outlined],.button i,.button [class^=material-symbols-outlined]{font-size:1.12rem;color:#202123;text-shadow:none}a.button.primary,.button.primary{background:#314a93;color:#fff;text-shadow:0 1px 1px #293e7c;border:1px solid #3a57ae}a.button.primary i,a.button.primary [class^=material-symbols-outlined],.button.primary i,.button.primary [class^=material-symbols-outlined]{color:#fff}a.button.primary:hover,.button.primary:hover{background:#3b58b0;color:#fff}a.button.primary:hover i,a.button.primary:hover [class^=material-symbols-outlined],.button.primary:hover i,.button.primary:hover [class^=material-symbols-outlined]{color:#fff}a.button.primary:active,a.button.primary.active,.button.primary:active,.button.primary.active{background:#3b58b0;color:#fff}a.button.primary:active:focus,a.button.primary:active:hover,a.button.primary.active:focus,a.button.primary.active:hover,.button.primary:active:focus,.button.primary:active:hover,.button.primary.active:focus,.button.primary.active:hover{background:#4363c0}a.button.primary.gradient,.button.primary.gradient{background:#314a93;z-index:1;position:relative;background:linear-gradient(to top, #314a93 0%, #647ecb 100%)}a.button.primary.gradient:before,.button.primary.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #314a93 0%, #6b85ce 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.primary.gradient:hover::before,.button.primary.gradient:hover::before{opacity:1}a.button.primary.gradient:active::before,a.button.primary.gradient:focus::before,.button.primary.gradient:active::before,.button.primary.gradient:focus::before{background:#314a93;background:linear-gradient(to bottom, #314a93 0%, #7b91d3 100%)}a.button.primary.gradient-ltr,.button.primary.gradient-ltr{background:linear-gradient(125deg, #647ecb, #2b4080)}a.button.primary.gradient-rtl,.button.primary.gradient-rtl{background:linear-gradient(-125deg, #647ecb, #2b4080)}a.button.primary.gradient-ltr,a.button.primary.gradient-rtl,.button.primary.gradient-ltr,.button.primary.gradient-rtl{z-index:1;position:relative}a.button.primary.gradient-ltr:before,a.button.primary.gradient-rtl:before,.button.primary.gradient-ltr:before,.button.primary.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #647ecb, #2e468b)}a.button.primary.gradient-ltr:hover::before,a.button.primary.gradient-rtl:hover::before,.button.primary.gradient-ltr:hover::before,.button.primary.gradient-rtl:hover::before{opacity:1}a.button.primary.gradient-ltr:active::before,a.button.primary.gradient-ltr:focus::before,a.button.primary.gradient-rtl:active::before,a.button.primary.gradient-rtl:focus::before,.button.primary.gradient-ltr:active::before,.button.primary.gradient-ltr:focus::before,.button.primary.gradient-rtl:active::before,.button.primary.gradient-rtl:focus::before{background:linear-gradient(0deg, #738bd0, #314a93)}a.button.primary.outlined,.button.primary.outlined{background:rgba(0,0,0,0);color:#314a93;text-shadow:0 1px 1px #293e7c;border:1px solid #3a57ae}a.button.primary.outlined i,a.button.primary.outlined [class^=material-symbols-outlined],.button.primary.outlined i,.button.primary.outlined [class^=material-symbols-outlined]{color:#314a93}a.button.primary.outlined:hover,.button.primary.outlined:hover{background:#3b58b0;color:#fff}a.button.primary.outlined:hover i,a.button.primary.outlined:hover [class^=material-symbols-outlined],.button.primary.outlined:hover i,.button.primary.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.primary.outlined:active,a.button.primary.outlined.active,.button.primary.outlined:active,.button.primary.outlined.active{background:#3b58b0;color:#fff}a.button.primary.outlined:active:focus,a.button.primary.outlined:active:hover,a.button.primary.outlined.active:focus,a.button.primary.outlined.active:hover,.button.primary.outlined:active:focus,.button.primary.outlined:active:hover,.button.primary.outlined.active:focus,.button.primary.outlined.active:hover{background:#4363c0}a.button.success,.button.success{background:#297d51;color:#fff;text-shadow:0 1px 1px #216642;border:1px solid #329862}a.button.success i,a.button.success [class^=material-symbols-outlined],.button.success i,.button.success [class^=material-symbols-outlined]{color:#fff}a.button.success:hover,.button.success:hover{background:#329a64;color:#fff}a.button.success:hover i,a.button.success:hover [class^=material-symbols-outlined],.button.success:hover i,.button.success:hover [class^=material-symbols-outlined]{color:#fff}a.button.success:active,a.button.success.active,.button.success:active,.button.success.active{background:#329a64;color:#fff}a.button.success:active:focus,a.button.success:active:hover,a.button.success.active:focus,a.button.success.active:hover,.button.success:active:focus,.button.success:active:hover,.button.success.active:focus,.button.success.active:hover{background:#39ad70}a.button.success.gradient,.button.success.gradient{background:#297d51;z-index:1;position:relative;background:linear-gradient(to top, #297d51 0%, #4dc486 100%)}a.button.success.gradient:before,.button.success.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #297d51 0%, #54c78b 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.success.gradient:hover::before,.button.success.gradient:hover::before{opacity:1}a.button.success.gradient:active::before,a.button.success.gradient:focus::before,.button.success.gradient:active::before,.button.success.gradient:focus::before{background:#297d51;background:linear-gradient(to bottom, #297d51 0%, #64cc95 100%)}a.button.success.gradient-ltr,.button.success.gradient-ltr{background:linear-gradient(125deg, #4dc486, #236a45)}a.button.success.gradient-rtl,.button.success.gradient-rtl{background:linear-gradient(-125deg, #4dc486, #236a45)}a.button.success.gradient-ltr,a.button.success.gradient-rtl,.button.success.gradient-ltr,.button.success.gradient-rtl{z-index:1;position:relative}a.button.success.gradient-ltr:before,a.button.success.gradient-rtl:before,.button.success.gradient-ltr:before,.button.success.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #4dc486, #26754c)}a.button.success.gradient-ltr:hover::before,a.button.success.gradient-rtl:hover::before,.button.success.gradient-ltr:hover::before,.button.success.gradient-rtl:hover::before{opacity:1}a.button.success.gradient-ltr:active::before,a.button.success.gradient-ltr:focus::before,a.button.success.gradient-rtl:active::before,a.button.success.gradient-rtl:focus::before,.button.success.gradient-ltr:active::before,.button.success.gradient-ltr:focus::before,.button.success.gradient-rtl:active::before,.button.success.gradient-rtl:focus::before{background:linear-gradient(0deg, #5cca90, #297d51)}a.button.success.outlined,.button.success.outlined{background:rgba(0,0,0,0);color:#297d51;text-shadow:0 1px 1px #216642;border:1px solid #329862}a.button.success.outlined i,a.button.success.outlined [class^=material-symbols-outlined],.button.success.outlined i,.button.success.outlined [class^=material-symbols-outlined]{color:#297d51}a.button.success.outlined:hover,.button.success.outlined:hover{background:#329a64;color:#fff}a.button.success.outlined:hover i,a.button.success.outlined:hover [class^=material-symbols-outlined],.button.success.outlined:hover i,.button.success.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.success.outlined:active,a.button.success.outlined.active,.button.success.outlined:active,.button.success.outlined.active{background:#329a64;color:#fff}a.button.success.outlined:active:focus,a.button.success.outlined:active:hover,a.button.success.outlined.active:focus,a.button.success.outlined.active:hover,.button.success.outlined:active:focus,.button.success.outlined:active:hover,.button.success.outlined.active:focus,.button.success.outlined.active:hover{background:#39ad70}a.button.warning,.button.warning{background:#956d28;color:#fff;text-shadow:0 1px 1px #7d5b22;border:1px solid #b18230}a.button.warning i,a.button.warning [class^=material-symbols-outlined],.button.warning i,.button.warning [class^=material-symbols-outlined]{color:#fff}a.button.warning:hover,.button.warning:hover{background:#b38330;color:#fff}a.button.warning:hover i,a.button.warning:hover [class^=material-symbols-outlined],.button.warning:hover i,.button.warning:hover [class^=material-symbols-outlined]{color:#fff}a.button.warning:active,a.button.warning.active,.button.warning:active,.button.warning.active{background:#b38330;color:#fff}a.button.warning:active:focus,a.button.warning:active:hover,a.button.warning.active:focus,a.button.warning.active:hover,.button.warning:active:focus,.button.warning:active:hover,.button.warning.active:focus,.button.warning.active:hover{background:#c79235}a.button.warning.gradient,.button.warning.gradient{background:#956d28;z-index:1;position:relative;background:linear-gradient(to top, #956d28 0%, #d2a456 100%)}a.button.warning.gradient:before,.button.warning.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #956d28 0%, #d4a95e 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.warning.gradient:hover::before,.button.warning.gradient:hover::before{opacity:1}a.button.warning.gradient:active::before,a.button.warning.gradient:focus::before,.button.warning.gradient:active::before,.button.warning.gradient:focus::before{background:#956d28;background:linear-gradient(to bottom, #956d28 0%, #d8b16e 100%)}a.button.warning.gradient-ltr,.button.warning.gradient-ltr{background:linear-gradient(125deg, #d2a456, #815e23)}a.button.warning.gradient-rtl,.button.warning.gradient-rtl{background:linear-gradient(-125deg, #d2a456, #815e23)}a.button.warning.gradient-ltr,a.button.warning.gradient-rtl,.button.warning.gradient-ltr,.button.warning.gradient-rtl{z-index:1;position:relative}a.button.warning.gradient-ltr:before,a.button.warning.gradient-rtl:before,.button.warning.gradient-ltr:before,.button.warning.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d2a456, #8d6726)}a.button.warning.gradient-ltr:hover::before,a.button.warning.gradient-rtl:hover::before,.button.warning.gradient-ltr:hover::before,.button.warning.gradient-rtl:hover::before{opacity:1}a.button.warning.gradient-ltr:active::before,a.button.warning.gradient-ltr:focus::before,a.button.warning.gradient-rtl:active::before,a.button.warning.gradient-rtl:focus::before,.button.warning.gradient-ltr:active::before,.button.warning.gradient-ltr:focus::before,.button.warning.gradient-rtl:active::before,.button.warning.gradient-rtl:focus::before{background:linear-gradient(0deg, #d6ad66, #956d28)}a.button.warning.outlined,.button.warning.outlined{background:rgba(0,0,0,0);color:#956d28;text-shadow:0 1px 1px #7d5b22;border:1px solid #b18230}a.button.warning.outlined i,a.button.warning.outlined [class^=material-symbols-outlined],.button.warning.outlined i,.button.warning.outlined [class^=material-symbols-outlined]{color:#956d28}a.button.warning.outlined:hover,.button.warning.outlined:hover{background:#b38330;color:#fff}a.button.warning.outlined:hover i,a.button.warning.outlined:hover [class^=material-symbols-outlined],.button.warning.outlined:hover i,.button.warning.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.warning.outlined:active,a.button.warning.outlined.active,.button.warning.outlined:active,.button.warning.outlined.active{background:#b38330;color:#fff}a.button.warning.outlined:active:focus,a.button.warning.outlined:active:hover,a.button.warning.outlined.active:focus,a.button.warning.outlined.active:hover,.button.warning.outlined:active:focus,.button.warning.outlined:active:hover,.button.warning.outlined.active:focus,.button.warning.outlined.active:hover{background:#c79235}a.button.error,.button.error{background:#972727;color:#fff;text-shadow:0 1px 1px #7f2121;border:1px solid #b32e2e}a.button.error i,a.button.error [class^=material-symbols-outlined],.button.error i,.button.error [class^=material-symbols-outlined]{color:#fff}a.button.error:hover,.button.error:hover{background:#b52f2f;color:#fff}a.button.error:hover i,a.button.error:hover [class^=material-symbols-outlined],.button.error:hover i,.button.error:hover [class^=material-symbols-outlined]{color:#fff}a.button.error:active,a.button.error.active,.button.error:active,.button.error.active{background:#b52f2f;color:#fff}a.button.error:active:focus,a.button.error:active:hover,a.button.error.active:focus,a.button.error.active:hover,.button.error:active:focus,.button.error:active:hover,.button.error.active:focus,.button.error.active:hover{background:#ca3434}a.button.error.gradient,.button.error.gradient{background:#972727;z-index:1;position:relative;background:linear-gradient(to top, #972727 0%, #d35656 100%)}a.button.error.gradient:before,.button.error.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #972727 0%, #d55e5e 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.error.gradient:hover::before,.button.error.gradient:hover::before{opacity:1}a.button.error.gradient:active::before,a.button.error.gradient:focus::before,.button.error.gradient:active::before,.button.error.gradient:focus::before{background:#972727;background:linear-gradient(to bottom, #972727 0%, #da6e6e 100%)}a.button.error.gradient-ltr,.button.error.gradient-ltr{background:linear-gradient(125deg, #d35656, #832222)}a.button.error.gradient-rtl,.button.error.gradient-rtl{background:linear-gradient(-125deg, #d35656, #832222)}a.button.error.gradient-ltr,a.button.error.gradient-rtl,.button.error.gradient-ltr,.button.error.gradient-rtl{z-index:1;position:relative}a.button.error.gradient-ltr:before,a.button.error.gradient-rtl:before,.button.error.gradient-ltr:before,.button.error.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d35656, #8f2525)}a.button.error.gradient-ltr:hover::before,a.button.error.gradient-rtl:hover::before,.button.error.gradient-ltr:hover::before,.button.error.gradient-rtl:hover::before{opacity:1}a.button.error.gradient-ltr:active::before,a.button.error.gradient-ltr:focus::before,a.button.error.gradient-rtl:active::before,a.button.error.gradient-rtl:focus::before,.button.error.gradient-ltr:active::before,.button.error.gradient-ltr:focus::before,.button.error.gradient-rtl:active::before,.button.error.gradient-rtl:focus::before{background:linear-gradient(0deg, #d76666, #972727)}a.button.error.outlined,.button.error.outlined{background:rgba(0,0,0,0);color:#972727;text-shadow:0 1px 1px #7f2121;border:1px solid #b32e2e}a.button.error.outlined i,a.button.error.outlined [class^=material-symbols-outlined],.button.error.outlined i,.button.error.outlined [class^=material-symbols-outlined]{color:#972727}a.button.error.outlined:hover,.button.error.outlined:hover{background:#b52f2f;color:#fff}a.button.error.outlined:hover i,a.button.error.outlined:hover [class^=material-symbols-outlined],.button.error.outlined:hover i,.button.error.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.error.outlined:active,a.button.error.outlined.active,.button.error.outlined:active,.button.error.outlined.active{background:#b52f2f;color:#fff}a.button.error.outlined:active:focus,a.button.error.outlined:active:hover,a.button.error.outlined.active:focus,a.button.error.outlined.active:hover,.button.error.outlined:active:focus,.button.error.outlined:active:hover,.button.error.outlined.active:focus,.button.error.outlined.active:hover{background:#ca3434}a.button.dark,.button.dark{background:#252831;color:#fff;text-shadow:0 1px 1px #181a20;border:1px solid #343945}a.button.dark i,a.button.dark [class^=material-symbols-outlined],.button.dark i,.button.dark [class^=material-symbols-outlined]{color:#fff}a.button.dark:hover,.button.dark:hover{background:#353a47;color:#fff}a.button.dark:hover i,a.button.dark:hover [class^=material-symbols-outlined],.button.dark:hover i,.button.dark:hover [class^=material-symbols-outlined]{color:#fff}a.button.dark:active,a.button.dark.active,.button.dark:active,.button.dark.active{background:#353a47;color:#fff}a.button.dark:active:focus,a.button.dark:active:hover,a.button.dark.active:focus,a.button.dark.active:hover,.button.dark:active:focus,.button.dark:active:hover,.button.dark.active:focus,.button.dark.active:hover{background:#404655}a.button.dark.gradient,.button.dark.gradient{background:#252831;z-index:1;position:relative;background:linear-gradient(to top, #252831 0%, #535a6e 100%)}a.button.dark.gradient:before,.button.dark.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #252831 0%, #575f74 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.dark.gradient:hover::before,.button.dark.gradient:hover::before{opacity:1}a.button.dark.gradient:active::before,a.button.dark.gradient:focus::before,.button.dark.gradient:active::before,.button.dark.gradient:focus::before{background:#252831;background:linear-gradient(to bottom, #252831 0%, #60687f 100%)}a.button.dark.gradient-ltr,.button.dark.gradient-ltr{background:linear-gradient(125deg, #535a6e, #1a1c22)}a.button.dark.gradient-rtl,.button.dark.gradient-rtl{background:linear-gradient(-125deg, #535a6e, #1a1c22)}a.button.dark.gradient-ltr,a.button.dark.gradient-rtl,.button.dark.gradient-ltr,.button.dark.gradient-rtl{z-index:1;position:relative}a.button.dark.gradient-ltr:before,a.button.dark.gradient-rtl:before,.button.dark.gradient-ltr:before,.button.dark.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #535a6e, #21232b)}a.button.dark.gradient-ltr:hover::before,a.button.dark.gradient-rtl:hover::before,.button.dark.gradient-ltr:hover::before,.button.dark.gradient-rtl:hover::before{opacity:1}a.button.dark.gradient-ltr:active::before,a.button.dark.gradient-ltr:focus::before,a.button.dark.gradient-rtl:active::before,a.button.dark.gradient-rtl:focus::before,.button.dark.gradient-ltr:active::before,.button.dark.gradient-ltr:focus::before,.button.dark.gradient-rtl:active::before,.button.dark.gradient-rtl:focus::before{background:linear-gradient(0deg, #5c637a, #252831)}a.button.dark.outlined,.button.dark.outlined{background:rgba(0,0,0,0);color:#252831;text-shadow:0 1px 1px #181a20;border:1px solid #343945}a.button.dark.outlined i,a.button.dark.outlined [class^=material-symbols-outlined],.button.dark.outlined i,.button.dark.outlined [class^=material-symbols-outlined]{color:#252831}a.button.dark.outlined:hover,.button.dark.outlined:hover{background:#353a47;color:#fff}a.button.dark.outlined:hover i,a.button.dark.outlined:hover [class^=material-symbols-outlined],.button.dark.outlined:hover i,.button.dark.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.dark.outlined:active,a.button.dark.outlined.active,.button.dark.outlined:active,.button.dark.outlined.active{background:#353a47;color:#fff}a.button.dark.outlined:active:focus,a.button.dark.outlined:active:hover,a.button.dark.outlined.active:focus,a.button.dark.outlined.active:hover,.button.dark.outlined:active:focus,.button.dark.outlined:active:hover,.button.dark.outlined.active:focus,.button.dark.outlined.active:hover{background:#404655}a.button.link.button,a.button.top>.button,.button.link.button,.button.top>.button{background:rgba(0,0,0,0);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0);border:1px solid;box-shadow:none;border:none;color:#314a93;text-decoration:underline;font-weight:400}a.button.link.button i,a.button.link.button [class^=material-symbols-outlined],a.button.top>.button i,a.button.top>.button [class^=material-symbols-outlined],.button.link.button i,.button.link.button [class^=material-symbols-outlined],.button.top>.button i,.button.top>.button [class^=material-symbols-outlined]{color:#fff}a.button.link.button:hover,a.button.top>.button:hover,.button.link.button:hover,.button.top>.button:hover{background:rgba(19,19,19,0);color:#fff}a.button.link.button:hover i,a.button.link.button:hover [class^=material-symbols-outlined],a.button.top>.button:hover i,a.button.top>.button:hover [class^=material-symbols-outlined],.button.link.button:hover i,.button.link.button:hover [class^=material-symbols-outlined],.button.top>.button:hover i,.button.top>.button:hover [class^=material-symbols-outlined]{color:#fff}a.button.link.button:active,a.button.link.button.active,a.button.top>.button:active,a.button.top>.button.active,.button.link.button:active,.button.link.button.active,.button.top>.button:active,.button.top>.button.active{background:rgba(19,19,19,0);color:#fff}a.button.link.button:active:focus,a.button.link.button:active:hover,a.button.link.button.active:focus,a.button.link.button.active:hover,a.button.top>.button:active:focus,a.button.top>.button:active:hover,a.button.top>.button.active:focus,a.button.top>.button.active:hover,.button.link.button:active:focus,.button.link.button:active:hover,.button.link.button.active:focus,.button.link.button.active:hover,.button.top>.button:active:focus,.button.top>.button:active:hover,.button.top>.button.active:focus,.button.top>.button.active:hover{background:rgba(32,32,32,0)}a.button.link.button.gradient,a.button.top>.button.gradient,.button.link.button.gradient,.button.top>.button.gradient{background:rgba(0,0,0,0);z-index:1;position:relative;background:linear-gradient(to top, transparent 0%, rgba(54, 54, 54, 0) 100%)}a.button.link.button.gradient:before,a.button.top>.button.gradient:before,.button.link.button.gradient:before,.button.top>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, transparent 0%, rgba(59, 59, 59, 0) 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.link.button.gradient:hover::before,a.button.top>.button.gradient:hover::before,.button.link.button.gradient:hover::before,.button.top>.button.gradient:hover::before{opacity:1}a.button.link.button.gradient:active::before,a.button.link.button.gradient:focus::before,a.button.top>.button.gradient:active::before,a.button.top>.button.gradient:focus::before,.button.link.button.gradient:active::before,.button.link.button.gradient:focus::before,.button.top>.button.gradient:active::before,.button.top>.button.gradient:focus::before{background:rgba(0,0,0,0);background:linear-gradient(to bottom, transparent 0%, rgba(69, 69, 69, 0) 100%)}a.button.link.button.gradient-ltr,a.button.top>.button.gradient-ltr,.button.link.button.gradient-ltr,.button.top>.button.gradient-ltr{background:linear-gradient(125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}a.button.link.button.gradient-rtl,a.button.top>.button.gradient-rtl,.button.link.button.gradient-rtl,.button.top>.button.gradient-rtl{background:linear-gradient(-125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}a.button.link.button.gradient-ltr,a.button.link.button.gradient-rtl,a.button.top>.button.gradient-ltr,a.button.top>.button.gradient-rtl,.button.link.button.gradient-ltr,.button.link.button.gradient-rtl,.button.top>.button.gradient-ltr,.button.top>.button.gradient-rtl{z-index:1;position:relative}a.button.link.button.gradient-ltr:before,a.button.link.button.gradient-rtl:before,a.button.top>.button.gradient-ltr:before,a.button.top>.button.gradient-rtl:before,.button.link.button.gradient-ltr:before,.button.link.button.gradient-rtl:before,.button.top>.button.gradient-ltr:before,.button.top>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}a.button.link.button.gradient-ltr:hover::before,a.button.link.button.gradient-rtl:hover::before,a.button.top>.button.gradient-ltr:hover::before,a.button.top>.button.gradient-rtl:hover::before,.button.link.button.gradient-ltr:hover::before,.button.link.button.gradient-rtl:hover::before,.button.top>.button.gradient-ltr:hover::before,.button.top>.button.gradient-rtl:hover::before{opacity:1}a.button.link.button.gradient-ltr:active::before,a.button.link.button.gradient-ltr:focus::before,a.button.link.button.gradient-rtl:active::before,a.button.link.button.gradient-rtl:focus::before,a.button.top>.button.gradient-ltr:active::before,a.button.top>.button.gradient-ltr:focus::before,a.button.top>.button.gradient-rtl:active::before,a.button.top>.button.gradient-rtl:focus::before,.button.link.button.gradient-ltr:active::before,.button.link.button.gradient-ltr:focus::before,.button.link.button.gradient-rtl:active::before,.button.link.button.gradient-rtl:focus::before,.button.top>.button.gradient-ltr:active::before,.button.top>.button.gradient-ltr:focus::before,.button.top>.button.gradient-rtl:active::before,.button.top>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, rgba(64, 64, 64, 0), transparent)}a.button.link.button:hover,a.button.top>.button:hover,.button.link.button:hover,.button.top>.button:hover{color:#202123}a.button.link.button i,a.button.link.button [class^=material-symbols-outlined],a.button.top>.button i,a.button.top>.button [class^=material-symbols-outlined],.button.link.button i,.button.link.button [class^=material-symbols-outlined],.button.top>.button i,.button.top>.button [class^=material-symbols-outlined]{color:#202123}a.button.tiny,.button.tiny{font-size:.809em;padding:.415rem .5rem}a.button.mini,.button.mini{font-size:.909em;padding:.445rem .9rem}a.button.small,.button.small{font-size:.979em;padding:.645rem 1.4rem}a.button.large,.button.large{font-size:1.25em;padding:1.15rem 2.1rem}a.button.huge,.button.huge{font-size:1.45em;padding:1.3rem 2.4rem}a.button.secondary,.button.secondary{color:#202123;border-color:#c6c6c6;background:linear-gradient(to top, #e6e6e6 0%, #ffffff 100%)}a.button.secondary:focus,a.button.secondary:hover,a.button.secondary:active,a.button.secondary.active,.button.secondary:focus,.button.secondary:hover,.button.secondary:active,.button.secondary.active{color:#202123;background:linear-gradient(to bottom, #e6e6e6 0%, #ffffff 100%)}a.button.secondary i,a.button.secondary [class^=material-symbols-outlined],.button.secondary i,.button.secondary [class^=material-symbols-outlined]{color:#202123}.buttons{display:inline-flex;flex-wrap:wrap;flex-shrink:0;border-radius:4px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);width:fit-content}.buttons .button{box-shadow:none}.buttons .button:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.buttons .button:not(:first-child):not(:last-child){border-radius:0;margin-left:-1px}.buttons .button:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.buttons.secondary>.button{color:#202123;border-color:#c6c6c6;background:linear-gradient(to top, #e6e6e6 0%, #ffffff 100%)}.buttons.secondary>.button:focus,.buttons.secondary>.button:hover,.buttons.secondary>.button:active,.buttons.secondary>.button.active{color:#202123;background:linear-gradient(to bottom, #e6e6e6 0%, #ffffff 100%)}.buttons.secondary>.button i,.buttons.secondary>.button [class^=material-symbols-outlined]{color:#202123}.buttons.block{display:flex;width:auto}.buttons.block .button{flex:1 0 0}.buttons.tiny>.button,.buttons.tiny>.dropdown>.button{font-size:.809em;padding:.415rem .5rem}.buttons.mini>.button,.buttons.mini>.dropdown>.button{font-size:.909em;padding:.445rem .9rem}.buttons.small>.button,.buttons.small>.dropdown>.button{font-size:.979em;padding:.645rem 1.4rem}.buttons.large>.button,.buttons.large>.dropdown>.button{font-size:1.25em;padding:1.15rem 2.1rem}.buttons.huge>.button,.buttons.huge>.dropdown>.button{font-size:1.45em;padding:1.3rem 2.4rem}.buttons.primary>.button,.buttons.primary>.dropdown>.button{background:#314a93;color:#fff;text-shadow:0 1px 1px #293e7c;border:1px solid #283d78}.buttons.primary>.button i,.buttons.primary>.button [class^=material-symbols-outlined],.buttons.primary>.dropdown>.button i,.buttons.primary>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.primary>.button:hover,.buttons.primary>.dropdown>.button:hover{background:#3b58b0;color:#fff}.buttons.primary>.button:hover i,.buttons.primary>.button:hover [class^=material-symbols-outlined],.buttons.primary>.dropdown>.button:hover i,.buttons.primary>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.primary>.button:active,.buttons.primary>.button.active,.buttons.primary>.dropdown>.button:active,.buttons.primary>.dropdown>.button.active{background:#3b58b0;color:#fff}.buttons.primary>.button:active:focus,.buttons.primary>.button:active:hover,.buttons.primary>.button.active:focus,.buttons.primary>.button.active:hover,.buttons.primary>.dropdown>.button:active:focus,.buttons.primary>.dropdown>.button:active:hover,.buttons.primary>.dropdown>.button.active:focus,.buttons.primary>.dropdown>.button.active:hover{background:#4363c0}.buttons.primary>.button.gradient,.buttons.primary>.dropdown>.button.gradient{background:#314a93;z-index:1;position:relative;background:linear-gradient(to top, #314a93 0%, #647ecb 100%)}.buttons.primary>.button.gradient:before,.buttons.primary>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #314a93 0%, #6b85ce 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.primary>.button.gradient:hover::before,.buttons.primary>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.primary>.button.gradient:active::before,.buttons.primary>.button.gradient:focus::before,.buttons.primary>.dropdown>.button.gradient:active::before,.buttons.primary>.dropdown>.button.gradient:focus::before{background:#314a93;background:linear-gradient(to bottom, #314a93 0%, #7b91d3 100%)}.buttons.primary>.button.gradient-ltr,.buttons.primary>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #647ecb, #2b4080)}.buttons.primary>.button.gradient-rtl,.buttons.primary>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #647ecb, #2b4080)}.buttons.primary>.button.gradient-ltr,.buttons.primary>.button.gradient-rtl,.buttons.primary>.dropdown>.button.gradient-ltr,.buttons.primary>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.primary>.button.gradient-ltr:before,.buttons.primary>.button.gradient-rtl:before,.buttons.primary>.dropdown>.button.gradient-ltr:before,.buttons.primary>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #647ecb, #2e468b)}.buttons.primary>.button.gradient-ltr:hover::before,.buttons.primary>.button.gradient-rtl:hover::before,.buttons.primary>.dropdown>.button.gradient-ltr:hover::before,.buttons.primary>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.primary>.button.gradient-ltr:active::before,.buttons.primary>.button.gradient-ltr:focus::before,.buttons.primary>.button.gradient-rtl:active::before,.buttons.primary>.button.gradient-rtl:focus::before,.buttons.primary>.dropdown>.button.gradient-ltr:active::before,.buttons.primary>.dropdown>.button.gradient-ltr:focus::before,.buttons.primary>.dropdown>.button.gradient-rtl:active::before,.buttons.primary>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #738bd0, #314a93)}.buttons.success>.button,.buttons.success>.dropdown>.button{background:#297d51;color:#fff;text-shadow:0 1px 1px #216642;border:1px solid #206240}.buttons.success>.button i,.buttons.success>.button [class^=material-symbols-outlined],.buttons.success>.dropdown>.button i,.buttons.success>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.success>.button:hover,.buttons.success>.dropdown>.button:hover{background:#329a64;color:#fff}.buttons.success>.button:hover i,.buttons.success>.button:hover [class^=material-symbols-outlined],.buttons.success>.dropdown>.button:hover i,.buttons.success>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.success>.button:active,.buttons.success>.button.active,.buttons.success>.dropdown>.button:active,.buttons.success>.dropdown>.button.active{background:#329a64;color:#fff}.buttons.success>.button:active:focus,.buttons.success>.button:active:hover,.buttons.success>.button.active:focus,.buttons.success>.button.active:hover,.buttons.success>.dropdown>.button:active:focus,.buttons.success>.dropdown>.button:active:hover,.buttons.success>.dropdown>.button.active:focus,.buttons.success>.dropdown>.button.active:hover{background:#39ad70}.buttons.success>.button.gradient,.buttons.success>.dropdown>.button.gradient{background:#297d51;z-index:1;position:relative;background:linear-gradient(to top, #297d51 0%, #4dc486 100%)}.buttons.success>.button.gradient:before,.buttons.success>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #297d51 0%, #54c78b 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.success>.button.gradient:hover::before,.buttons.success>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.success>.button.gradient:active::before,.buttons.success>.button.gradient:focus::before,.buttons.success>.dropdown>.button.gradient:active::before,.buttons.success>.dropdown>.button.gradient:focus::before{background:#297d51;background:linear-gradient(to bottom, #297d51 0%, #64cc95 100%)}.buttons.success>.button.gradient-ltr,.buttons.success>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #4dc486, #236a45)}.buttons.success>.button.gradient-rtl,.buttons.success>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #4dc486, #236a45)}.buttons.success>.button.gradient-ltr,.buttons.success>.button.gradient-rtl,.buttons.success>.dropdown>.button.gradient-ltr,.buttons.success>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.success>.button.gradient-ltr:before,.buttons.success>.button.gradient-rtl:before,.buttons.success>.dropdown>.button.gradient-ltr:before,.buttons.success>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #4dc486, #26754c)}.buttons.success>.button.gradient-ltr:hover::before,.buttons.success>.button.gradient-rtl:hover::before,.buttons.success>.dropdown>.button.gradient-ltr:hover::before,.buttons.success>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.success>.button.gradient-ltr:active::before,.buttons.success>.button.gradient-ltr:focus::before,.buttons.success>.button.gradient-rtl:active::before,.buttons.success>.button.gradient-rtl:focus::before,.buttons.success>.dropdown>.button.gradient-ltr:active::before,.buttons.success>.dropdown>.button.gradient-ltr:focus::before,.buttons.success>.dropdown>.button.gradient-rtl:active::before,.buttons.success>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #5cca90, #297d51)}.buttons.warning>.button,.buttons.warning>.dropdown>.button{background:#956d28;color:#fff;text-shadow:0 1px 1px #7d5b22;border:1px solid #795820}.buttons.warning>.button i,.buttons.warning>.button [class^=material-symbols-outlined],.buttons.warning>.dropdown>.button i,.buttons.warning>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.warning>.button:hover,.buttons.warning>.dropdown>.button:hover{background:#b38330;color:#fff}.buttons.warning>.button:hover i,.buttons.warning>.button:hover [class^=material-symbols-outlined],.buttons.warning>.dropdown>.button:hover i,.buttons.warning>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.warning>.button:active,.buttons.warning>.button.active,.buttons.warning>.dropdown>.button:active,.buttons.warning>.dropdown>.button.active{background:#b38330;color:#fff}.buttons.warning>.button:active:focus,.buttons.warning>.button:active:hover,.buttons.warning>.button.active:focus,.buttons.warning>.button.active:hover,.buttons.warning>.dropdown>.button:active:focus,.buttons.warning>.dropdown>.button:active:hover,.buttons.warning>.dropdown>.button.active:focus,.buttons.warning>.dropdown>.button.active:hover{background:#c79235}.buttons.warning>.button.gradient,.buttons.warning>.dropdown>.button.gradient{background:#956d28;z-index:1;position:relative;background:linear-gradient(to top, #956d28 0%, #d2a456 100%)}.buttons.warning>.button.gradient:before,.buttons.warning>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #956d28 0%, #d4a95e 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.warning>.button.gradient:hover::before,.buttons.warning>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.warning>.button.gradient:active::before,.buttons.warning>.button.gradient:focus::before,.buttons.warning>.dropdown>.button.gradient:active::before,.buttons.warning>.dropdown>.button.gradient:focus::before{background:#956d28;background:linear-gradient(to bottom, #956d28 0%, #d8b16e 100%)}.buttons.warning>.button.gradient-ltr,.buttons.warning>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #d2a456, #815e23)}.buttons.warning>.button.gradient-rtl,.buttons.warning>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #d2a456, #815e23)}.buttons.warning>.button.gradient-ltr,.buttons.warning>.button.gradient-rtl,.buttons.warning>.dropdown>.button.gradient-ltr,.buttons.warning>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.warning>.button.gradient-ltr:before,.buttons.warning>.button.gradient-rtl:before,.buttons.warning>.dropdown>.button.gradient-ltr:before,.buttons.warning>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d2a456, #8d6726)}.buttons.warning>.button.gradient-ltr:hover::before,.buttons.warning>.button.gradient-rtl:hover::before,.buttons.warning>.dropdown>.button.gradient-ltr:hover::before,.buttons.warning>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.warning>.button.gradient-ltr:active::before,.buttons.warning>.button.gradient-ltr:focus::before,.buttons.warning>.button.gradient-rtl:active::before,.buttons.warning>.button.gradient-rtl:focus::before,.buttons.warning>.dropdown>.button.gradient-ltr:active::before,.buttons.warning>.dropdown>.button.gradient-ltr:focus::before,.buttons.warning>.dropdown>.button.gradient-rtl:active::before,.buttons.warning>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #d6ad66, #956d28)}.buttons.error>.button,.buttons.error>.dropdown>.button{background:#972727;color:#fff;text-shadow:0 1px 1px #7f2121;border:1px solid #7b2020}.buttons.error>.button i,.buttons.error>.button [class^=material-symbols-outlined],.buttons.error>.dropdown>.button i,.buttons.error>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.error>.button:hover,.buttons.error>.dropdown>.button:hover{background:#b52f2f;color:#fff}.buttons.error>.button:hover i,.buttons.error>.button:hover [class^=material-symbols-outlined],.buttons.error>.dropdown>.button:hover i,.buttons.error>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.error>.button:active,.buttons.error>.button.active,.buttons.error>.dropdown>.button:active,.buttons.error>.dropdown>.button.active{background:#b52f2f;color:#fff}.buttons.error>.button:active:focus,.buttons.error>.button:active:hover,.buttons.error>.button.active:focus,.buttons.error>.button.active:hover,.buttons.error>.dropdown>.button:active:focus,.buttons.error>.dropdown>.button:active:hover,.buttons.error>.dropdown>.button.active:focus,.buttons.error>.dropdown>.button.active:hover{background:#ca3434}.buttons.error>.button.gradient,.buttons.error>.dropdown>.button.gradient{background:#972727;z-index:1;position:relative;background:linear-gradient(to top, #972727 0%, #d35656 100%)}.buttons.error>.button.gradient:before,.buttons.error>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #972727 0%, #d55e5e 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.error>.button.gradient:hover::before,.buttons.error>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.error>.button.gradient:active::before,.buttons.error>.button.gradient:focus::before,.buttons.error>.dropdown>.button.gradient:active::before,.buttons.error>.dropdown>.button.gradient:focus::before{background:#972727;background:linear-gradient(to bottom, #972727 0%, #da6e6e 100%)}.buttons.error>.button.gradient-ltr,.buttons.error>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #d35656, #832222)}.buttons.error>.button.gradient-rtl,.buttons.error>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #d35656, #832222)}.buttons.error>.button.gradient-ltr,.buttons.error>.button.gradient-rtl,.buttons.error>.dropdown>.button.gradient-ltr,.buttons.error>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.error>.button.gradient-ltr:before,.buttons.error>.button.gradient-rtl:before,.buttons.error>.dropdown>.button.gradient-ltr:before,.buttons.error>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d35656, #8f2525)}.buttons.error>.button.gradient-ltr:hover::before,.buttons.error>.button.gradient-rtl:hover::before,.buttons.error>.dropdown>.button.gradient-ltr:hover::before,.buttons.error>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.error>.button.gradient-ltr:active::before,.buttons.error>.button.gradient-ltr:focus::before,.buttons.error>.button.gradient-rtl:active::before,.buttons.error>.button.gradient-rtl:focus::before,.buttons.error>.dropdown>.button.gradient-ltr:active::before,.buttons.error>.dropdown>.button.gradient-ltr:focus::before,.buttons.error>.dropdown>.button.gradient-rtl:active::before,.buttons.error>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #d76666, #972727)}.buttons.dark>.button,.buttons.dark>.dropdown>.button{background:#252831;color:#fff;text-shadow:0 1px 1px #181a20;border:1px solid #16171d}.buttons.dark>.button i,.buttons.dark>.button [class^=material-symbols-outlined],.buttons.dark>.dropdown>.button i,.buttons.dark>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.dark>.button:hover,.buttons.dark>.dropdown>.button:hover{background:#353a47;color:#fff}.buttons.dark>.button:hover i,.buttons.dark>.button:hover [class^=material-symbols-outlined],.buttons.dark>.dropdown>.button:hover i,.buttons.dark>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.dark>.button:active,.buttons.dark>.button.active,.buttons.dark>.dropdown>.button:active,.buttons.dark>.dropdown>.button.active{background:#353a47;color:#fff}.buttons.dark>.button:active:focus,.buttons.dark>.button:active:hover,.buttons.dark>.button.active:focus,.buttons.dark>.button.active:hover,.buttons.dark>.dropdown>.button:active:focus,.buttons.dark>.dropdown>.button:active:hover,.buttons.dark>.dropdown>.button.active:focus,.buttons.dark>.dropdown>.button.active:hover{background:#404655}.buttons.dark>.button.gradient,.buttons.dark>.dropdown>.button.gradient{background:#252831;z-index:1;position:relative;background:linear-gradient(to top, #252831 0%, #535a6e 100%)}.buttons.dark>.button.gradient:before,.buttons.dark>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #252831 0%, #575f74 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.dark>.button.gradient:hover::before,.buttons.dark>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.dark>.button.gradient:active::before,.buttons.dark>.button.gradient:focus::before,.buttons.dark>.dropdown>.button.gradient:active::before,.buttons.dark>.dropdown>.button.gradient:focus::before{background:#252831;background:linear-gradient(to bottom, #252831 0%, #60687f 100%)}.buttons.dark>.button.gradient-ltr,.buttons.dark>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #535a6e, #1a1c22)}.buttons.dark>.button.gradient-rtl,.buttons.dark>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #535a6e, #1a1c22)}.buttons.dark>.button.gradient-ltr,.buttons.dark>.button.gradient-rtl,.buttons.dark>.dropdown>.button.gradient-ltr,.buttons.dark>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.dark>.button.gradient-ltr:before,.buttons.dark>.button.gradient-rtl:before,.buttons.dark>.dropdown>.button.gradient-ltr:before,.buttons.dark>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #535a6e, #21232b)}.buttons.dark>.button.gradient-ltr:hover::before,.buttons.dark>.button.gradient-rtl:hover::before,.buttons.dark>.dropdown>.button.gradient-ltr:hover::before,.buttons.dark>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.dark>.button.gradient-ltr:active::before,.buttons.dark>.button.gradient-ltr:focus::before,.buttons.dark>.button.gradient-rtl:active::before,.buttons.dark>.button.gradient-rtl:focus::before,.buttons.dark>.dropdown>.button.gradient-ltr:active::before,.buttons.dark>.dropdown>.button.gradient-ltr:focus::before,.buttons.dark>.dropdown>.button.gradient-rtl:active::before,.buttons.dark>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #5c637a, #252831)}.buttons.link.button,.buttons.top>.button{background:rgba(0,0,0,0);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0);border:1px solid;box-shadow:none;border:none;color:#314a93;text-decoration:underline;font-weight:400}.buttons.link.button i,.buttons.link.button [class^=material-symbols-outlined],.buttons.top>.button i,.buttons.top>.button [class^=material-symbols-outlined]{color:#fff}.buttons.link.button:hover,.buttons.top>.button:hover{background:rgba(19,19,19,0);color:#fff}.buttons.link.button:hover i,.buttons.link.button:hover [class^=material-symbols-outlined],.buttons.top>.button:hover i,.buttons.top>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.link.button:active,.buttons.link.button.active,.buttons.top>.button:active,.buttons.top>.button.active{background:rgba(19,19,19,0);color:#fff}.buttons.link.button:active:focus,.buttons.link.button:active:hover,.buttons.link.button.active:focus,.buttons.link.button.active:hover,.buttons.top>.button:active:focus,.buttons.top>.button:active:hover,.buttons.top>.button.active:focus,.buttons.top>.button.active:hover{background:rgba(32,32,32,0)}.buttons.link.button.gradient,.buttons.top>.button.gradient{background:rgba(0,0,0,0);z-index:1;position:relative;background:linear-gradient(to top, transparent 0%, rgba(54, 54, 54, 0) 100%)}.buttons.link.button.gradient:before,.buttons.top>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, transparent 0%, rgba(59, 59, 59, 0) 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.link.button.gradient:hover::before,.buttons.top>.button.gradient:hover::before{opacity:1}.buttons.link.button.gradient:active::before,.buttons.link.button.gradient:focus::before,.buttons.top>.button.gradient:active::before,.buttons.top>.button.gradient:focus::before{background:rgba(0,0,0,0);background:linear-gradient(to bottom, transparent 0%, rgba(69, 69, 69, 0) 100%)}.buttons.link.button.gradient-ltr,.buttons.top>.button.gradient-ltr{background:linear-gradient(125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}.buttons.link.button.gradient-rtl,.buttons.top>.button.gradient-rtl{background:linear-gradient(-125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}.buttons.link.button.gradient-ltr,.buttons.link.button.gradient-rtl,.buttons.top>.button.gradient-ltr,.buttons.top>.button.gradient-rtl{z-index:1;position:relative}.buttons.link.button.gradient-ltr:before,.buttons.link.button.gradient-rtl:before,.buttons.top>.button.gradient-ltr:before,.buttons.top>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}.buttons.link.button.gradient-ltr:hover::before,.buttons.link.button.gradient-rtl:hover::before,.buttons.top>.button.gradient-ltr:hover::before,.buttons.top>.button.gradient-rtl:hover::before{opacity:1}.buttons.link.button.gradient-ltr:active::before,.buttons.link.button.gradient-ltr:focus::before,.buttons.link.button.gradient-rtl:active::before,.buttons.link.button.gradient-rtl:focus::before,.buttons.top>.button.gradient-ltr:active::before,.buttons.top>.button.gradient-ltr:focus::before,.buttons.top>.button.gradient-rtl:active::before,.buttons.top>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, rgba(64, 64, 64, 0), transparent)}.buttons.link.button:hover,.buttons.top>.button:hover{color:#202123}.buttons.link.button i,.buttons.link.button [class^=material-symbols-outlined],.buttons.top>.button i,.buttons.top>.button [class^=material-symbols-outlined]{color:#202123}.buttons .dropdown:last-child:not(:first-child),.buttons .dropdown:last-child:not(:first-child)>.button{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.buttons .dropdown:last-child,.buttons .dropdown:last-child>.button:first-child,.buttons .dropdown:last-child>.button:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px}.buttons .dropdown:not(:first-child):not(:last-child)>.button{border-radius:0;margin-left:-1px}@media only screen and (max-width: 768px){.buttons{box-shadow:none}}.buttons.vertical{flex-flow:column}.buttons.vertical>.button,.buttons.vertical.block,.buttons.vertical.block>.button,.buttons.vertical>.dropdown>.button{width:100%}.buttons.vertical>.button{border-radius:0}.buttons.vertical>.button:last-child:not(:first-child),.buttons.vertical>.button:not(:first-child):not(:last-child){margin:-1px 0 0}.buttons.vertical.block{display:inline-flex}.buttons.vertical>.dropdown:last-child:not(:first-child),.buttons.vertical>.dropdown:last-child:not(:first-child)>.button,.buttons.vertical>.dropdown:not(:first-child):not(:last-child)>.button{margin:-1px 0 0;border-radius:0}.buttons.vertical>.primary.button,.buttons.vertical>.dropdown>.primary.button{border:1px solid #293e7c}.buttons.vertical>.success.button,.buttons.vertical>.dropdown>.success.button{border:1px solid #216642}.buttons.vertical>.warning.button,.buttons.vertical>.dropdown>.warning.button{border:1px solid #7d5b22}.buttons.vertical>.error.button,.buttons.vertical>.dropdown>.error.button{border:1px solid #7f2121}.buttons.vertical>.dark.button,.buttons.vertical>.dropdown>.dark.button{border:1px solid #181a20}.dropdown{display:inline-block;position:relative}.dropdown>.menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:45vh;overflow-y:auto;position:absolute;top:100%;z-index:301;width:auto}.dropdown>.menu>.item>a{padding:.1rem .9rem}.dropdown.right>.menu,.dropdown.left>.menu{top:0}.dropdown.right>.menu{left:100%;right:auto}.dropdown.left>.menu{left:auto;right:100%}.dropdown.top.left>.menu{right:auto !important;left:0 !important}.dropdown.top.right>.menu{right:0 !important;left:auto !important}.dropdown.top>.menu{bottom:100%;top:auto;right:0;left:auto;box-shadow:0 -2px 4px 0 rgba(0,0,0,.2)}.dropdown.bottom.left>.menu,.dropdown.bottom.right>.menu{top:100%}.dropdown.bottom.left>.menu{right:auto !important;left:0 !important}.dropdown.bottom.right>.menu{right:0 !important;left:auto !important}.dropdown.active>.menu,.dropdown>.toggle:focus+.menu,.dropdown>.toggle:hover+.menu,.dropdown>.menu:focus,.dropdown>.menu:hover{display:block}.dropdown.clickable>.toggle:hover+.menu{display:none}.dropdown.clickable>.toggle:focus+.menu,.dropdown.clickable>.toggle:active+.menu{display:block}.dropdown>.buttons>.toggle:nth-last-child(2){border-bottom-right-radius:4px;border-top-right-radius:4px}.dropdown.tiny>.button,.dropdown.tiny>.dropdown>.button{font-size:.809em;padding:.415rem .5rem}.dropdown.mini>.button,.dropdown.mini>.dropdown>.button{font-size:.909em;padding:.445rem .9rem}.dropdown.small>.button,.dropdown.small>.dropdown>.button{font-size:.979em;padding:.645rem 1.4rem}.dropdown.large>.button,.dropdown.large>.dropdown>.button{font-size:1.25em;padding:1.15rem 2.1rem}.dropdown.huge>.button,.dropdown.huge>.dropdown>.button{font-size:1.45em;padding:1.3rem 2.4rem}.caption{display:flex;align-items:center;margin:1.3em .2rem;font-size:1.95rem;font-weight:700;line-height:1.5;text-align:left}.caption>img,.caption>.material-symbols-outlined,.caption>i{margin-right:.559em}.caption>.material-symbols-outlined,.caption>i{font-size:2.73rem}.caption.divided{border-bottom:1px solid #c6c6c6;padding-bottom:.559em}.caption>span,.caption>div{display:contents}.caption.centered{flex-direction:column;text-align:center;margin:inherit}.caption.centered>img,.caption.centered>.material-symbols-outlined,.caption.centered>i{margin-right:unset;margin-bottom:2rem}.caption.small{font-size:1.65rem;margin:1em .1rem;font-weight:400}.caption.small>.material-symbols-outlined,.caption.small>i{font-size:2.31rem}.caption.large{font-size:2.35rem;margin:1.4em .3rem;font-weight:700}.caption.large>.material-symbols-outlined,.caption.large>i{font-size:3.29rem}@media only screen and (max-width: 768px){.caption{flex-direction:column;text-align:center;margin:inherit}.caption>img,.caption>.material-symbols-outlined,.caption>i{margin-right:unset;margin-bottom:2rem}}input[type=color],input[type=date],input[type=time],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],input[type=week],input[type=file],input:not([type]),textarea,select{-webkit-appearance:none;background-color:#fff;border-width:1px;border-style:solid;border-color:#c6c6c6;height:2.5rem;border-radius:0;outline:2px solid rgba(0,0,0,0);box-shadow:none;box-sizing:inherit;outline-offset:-2px;padding:.4rem .5rem;width:100%;max-width:100%;font-family:inherit;color:#202123;font-size:1.088em;transition:.35s}input[type=color]:focus,input[type=date]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,input[type=week]:focus,input[type=file]:focus,input:not([type]):focus,textarea:focus,select:focus{outline:2px solid #252831;outline-offset:-2px;background-color:#fff}input[type=color].success,input[type=date].success,input[type=time].success,input[type=datetime].success,input[type=datetime-local].success,input[type=email].success,input[type=month].success,input[type=number].success,input[type=password].success,input[type=search].success,input[type=tel].success,input[type=text].success,input[type=url].success,input[type=week].success,input[type=file].success,input:not([type]).success,textarea.success,select.success{color:#297d51;outline-color:#297d51}input[type=color].error,input[type=date].error,input[type=time].error,input[type=datetime].error,input[type=datetime-local].error,input[type=email].error,input[type=month].error,input[type=number].error,input[type=password].error,input[type=search].error,input[type=tel].error,input[type=text].error,input[type=url].error,input[type=week].error,input[type=file].error,input:not([type]).error,textarea.error,select.error{color:#972727;outline-color:#972727}select{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:right 10px center}select[multiple]{background:none;height:auto}textarea{min-height:6.5rem;resize:vertical}label,legend{display:block;font-size:1rem;font-weight:400}fieldset{border-width:0;padding:0}input[type=checkbox],input[type=radio]{display:inline}input:disabled{opacity:.59}.form{position:relative;max-width:100%;padding:0 16px}.form .item{height:fit-content;margin:6px;display:inline-flex;flex-wrap:wrap;width:100%;max-width:100%;position:relative;align-items:center}.form label,.form .item>label{margin:0;color:#202123;font-size:.8579rem;font-weight:600;text-transform:none;height:fit-content}.form .item>input[type=file]{opacity:0;position:absolute;top:0;left:0;height:100%;cursor:default}.form .group,.form .item>.group{display:flex;width:100%}.form .group>*,.form .item>.group>*{flex:1 1 auto}.form .group>*:last-child,.form .item>.group>*:last-child{margin-left:-1px}.form .group>*:not(:first-child):not(:last-child),.form .item>.group>*:not(:first-child):not(:last-child){margin-left:-1px;margin-right:0}.form .group>.buttons,.form .item>.group>.buttons{box-shadow:none}.form .group>.button,.form .item>.group>.button{height:2.5rem;box-shadow:none}.form .group>.button:first-child,.form .item>.group>.button:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.form .group>.button:last-child:not(:first-child),.form .item>.group>.button:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.form .items{margin:6px 0 .75em;display:flex;flex-wrap:wrap}.form .items>.item{margin:6px}.form .two.items>.item{flex:0 0 calc(100%*(1 / 2) - (2 * 6px))}@media only screen and (max-width: 768px){.form .two.form .two.items>.item{flex:0 0 100%}}.form .three.items>.item{flex:0 0 calc(100%*(1 / 3) - (2 * 6px))}@media only screen and (max-width: 768px){.form .three.form .three.items>.item{flex:0 0 100%}}.form .four.items>.item{flex:0 0 calc(100%*(1 / 4) - (2 * 6px))}@media only screen and (max-width: 768px){.form .four.form .four.items>.item{flex:0 0 100%}}.form .five.items>.item{flex:0 0 calc(100%*(1 / 5) - (2 * 6px))}@media only screen and (max-width: 768px){.form .five.form .five.items>.item{flex:0 0 100%}}.form .six.items>.item{flex:0 0 calc(100%*(1 / 6) - (2 * 6px))}@media only screen and (max-width: 768px){.form .six.form .six.items>.item{flex:0 0 100%}}.form .seven.items>.item{flex:0 0 calc(100%*(1 / 7) - (2 * 6px))}@media only screen and (max-width: 768px){.form .seven.form .seven.items>.item{flex:0 0 100%}}.form .eight.items>.item{flex:0 0 calc(100%*(1 / 8) - (2 * 6px))}@media only screen and (max-width: 768px){.form .eight.form .eight.items>.item{flex:0 0 100%}}.form .nine.items>.item{flex:0 0 calc(100%*(1 / 9) - (2 * 6px))}@media only screen and (max-width: 768px){.form .nine.form .nine.items>.item{flex:0 0 100%}}.form .ten.items>.item{flex:0 0 calc(100%*(1 / 10) - (2 * 6px))}@media only screen and (max-width: 768px){.form .ten.form .ten.items>.item{flex:0 0 100%}}.form .eleven.items>.item{flex:0 0 calc(100%*(1 / 11) - (2 * 6px))}@media only screen and (max-width: 768px){.form .eleven.form .eleven.items>.item{flex:0 0 100%}}.form .twelve.items>.item{flex:0 0 calc(100%*(1 / 12) - (2 * 6px))}@media only screen and (max-width: 768px){.form .twelve.form .twelve.items>.item{flex:0 0 100%}}.form .thirteen.items>.item{flex:0 0 calc(100%*(1 / 13) - (2 * 6px))}@media only screen and (max-width: 768px){.form .thirteen.form .thirteen.items>.item{flex:0 0 100%}}.form .fourteen.items>.item{flex:0 0 calc(100%*(1 / 14) - (2 * 6px))}@media only screen and (max-width: 768px){.form .fourteen.form .fourteen.items>.item{flex:0 0 100%}}.form .fifteen.items>.item{flex:0 0 calc(100%*(1 / 15) - (2 * 6px))}@media only screen and (max-width: 768px){.form .fifteen.form .fifteen.items>.item{flex:0 0 100%}}.form .sixteen.items>.item{flex:0 0 calc(100%*(1 / 16) - (2 * 6px))}@media only screen and (max-width: 768px){.form .sixteen.form .sixteen.items>.item{flex:0 0 100%}}.form.small input[type=color],.form.small input[type=date],.form.small input[type=time],.form.small input[type=datetime],.form.small input[type=datetime-local],.form.small input[type=email],.form.small input[type=month],.form.small input[type=number],.form.small input[type=password],.form.small input[type=search],.form.small input[type=tel],.form.small input[type=text],.form.small input[type=url],.form.small input[type=week],.form.small input[type=file],.form.small input:not([type]),.form.small textarea,.form.small select{height:1.9rem;font-size:1em}.form.small .button{height:1.9rem !important;font-size:.979em !important;padding:.645rem 1.4rem !important}.form.small label,.form.small>.items>.item>label,.form.small>.item>label{font-size:1em}.form.large input[type=color],.form.large input[type=date],.form.large input[type=time],.form.large input[type=datetime],.form.large input[type=datetime-local],.form.large input[type=email],.form.large input[type=month],.form.large input[type=number],.form.large input[type=password],.form.large input[type=search],.form.large input[type=tel],.form.large input[type=text],.form.large input[type=url],.form.large input[type=week],.form.large input[type=file],.form.large input:not([type]),.form.large textarea,.form.large select{height:2.9rem;font-size:1.2em}.form.large .button{height:2.9rem !important;font-size:1.25em !important;padding:1.15rem 2.1rem !important}.form.large label,.form.large>.items>.item>label,.form.large>.item>label{font-size:1.2em}.radio,.checkbox{position:relative}.radio label,.checkbox label{padding:0 1.2rem 0 1.7rem;cursor:pointer;user-select:none;font-weight:400;margin:0}.radio input,.checkbox input{left:0;opacity:0;position:absolute;top:0}.radio input+label::before,.radio input+label::after,.checkbox input+label::before,.checkbox input+label::after{position:absolute;transition:opacity .11s ease-in-out;font-family:"Material Symbols Outlined";font-style:normal;font-weight:normal;text-transform:none;font-size:1.35rem;top:-8px;left:0}.radio input+label::before,.checkbox input+label::before{opacity:1}.radio input+label::after,.checkbox input+label::after{opacity:0}.radio input:checked+label::after,.checkbox input:checked+label::after{opacity:1}.checkbox input+label::before{content:"check_box_outline_blank";color:#202123}.checkbox input+label::after{content:"check_box";color:#314a93}.radio input+label::before{content:"radio_button_unchecked";color:#202123}.radio input+label::after{content:"radio_button_checked";color:#314a93}h1{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h1,.h1{font-size:2em;font-weight:700}@media only screen and (max-width: 768px){h1,.h1{font-size:1.7em}}h2{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h2,.h2{font-size:1.8em;font-weight:700}@media only screen and (max-width: 768px){h2,.h2{font-size:1.5em}}h3{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h3,.h3{font-size:1.6em;font-weight:700}@media only screen and (max-width: 768px){h3,.h3{font-size:1.3em}}h4{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h4,.h4{font-size:1.4em;font-weight:700}@media only screen and (max-width: 768px){h4,.h4{font-size:1.1em}}h5{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h5,.h5{font-size:1.2em;font-weight:700}@media only screen and (max-width: 768px){h5,.h5{font-size:.9em}}h6{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h6,.h6{font-size:1em;font-weight:700}@media only screen and (max-width: 768px){h6,.h6{font-size:inherit}}h1.bordered,h2.bordered,h3.bordered,h4.bordered,h5.bordered,h6.bordered,.h1.bordered,.h2.bordered,.h3.bordered,.h4.bordered,.h5.bordered,.h6.bordered{border-width:0 0 1px 0 !important;padding-bottom:10px;margin-bottom:20px}p{margin:0 0 1em;font-size:1rem}a,ins,u{text-decoration-skip:ink edges}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}blockquote{border-left:.1rem dotted #252831;margin-left:0;padding:.4rem .8rem;font-style:italic;color:#202123}small{font-size:86%}sub,sup{font-size:78%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}.table{position:relative;border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;text-align:left;margin-bottom:1.5rem}.table caption{text-align:inherit;color:#202123;font-size:1rem;font-weight:bold;padding:.7rem;border-bottom:1px solid #202123}.table.striped tr.active,.table.striped tbody tr.active{background:#e6e6e6}.table.striped tr:nth-of-type(odd),.table.striped tbody tr:nth-of-type(odd){background:#e6e6e6}.table.hovered tr:hover,.table.hovered tbody tr:hover{background:#e6e6e6;color:#202123}.table tr,.table tbody tr{transition:all .3s}.table tr.active,.table tr.active:hover,.table tbody tr.active,.table tbody tr.active:hover{background:#e6e6e6}.table td,.table th{border-bottom:1px solid #c6c6c6;padding:5px .7rem;text-align:inherit}.table thead tr{background:rgba(0,0,0,0) !important}.table thead tr th{border-bottom-color:#c6c6c6;font-weight:400;color:#979797;padding:.7rem}.material-symbols-outlined{font-size:1.12rem;line-height:1;vertical-align:middle}a.label,.label{background-color:#fff;color:#202123;display:inline-block;font-weight:bold;line-height:1.2;margin:.1rem .05rem;border-radius:4px;text-decoration:none;border:1px solid #c6c6c6;box-shadow:0 .155em 0 rgba(0,0,0,.095) rgba(0,0,0,.2);border-color:#c6c6c6;padding:.28rem .9rem;font-size:.9195em}a.label>i,a.label>.material-icons,.label>i,.label>.material-icons{vertical-align:text-top}a.label.primary,.label.primary{background-color:#314a93;color:#fff;border-color:#283d78}a.label.success,.label.success{background-color:#297d51;color:#fff;border-color:#206240}a.label.warning,.label.warning{background-color:#956d28;color:#fff;border-color:#795820}a.label.error,.label.error{background-color:#972727;color:#fff;border-color:#7b2020}a.label.dark,.label.dark{background-color:#252831;color:#fff;border-color:#16171d}a.label.small,.label.small{padding:.18rem .85rem;font-size:.8195em}a.label.large,.label.large{padding:.415rem 1.159rem;font-size:1em}.alert{background-color:#fff;color:#202123;display:block;border:1px solid #c6c6c6;border-radius:4px;padding:.6rem;margin:0 0 8px;width:100%;font-weight:bold}.alert a{color:#202123;text-decoration:underline}.alert a:focus,.alert a:hover,.alert a:active,.alert a.active{opacity:.75}.alert p:last-child{margin-bottom:0}.alert>i,.alert>.material-symbols-outlined{vertical-align:text-top}.alert.primary{background-color:#314a93;color:#fff;border-color:#2b4080}.alert.success{background-color:#297d51;color:#fff;border-color:#236a45}.alert.warning{background-color:#956d28;color:#fff;border-color:#815e23}.alert.error{background-color:#972727;color:#fff;border-color:#832222}.alert.dark{background-color:#252831;color:#fff;border-color:#1a1c22}.alert.small{padding:.4rem;font-size:.749rem}.alert.large{padding:.8rem;font-size:1.1rem}.badge{background-color:#e6e6e6;color:#202123;position:relative;white-space:nowrap;display:inline-flex;justify-content:center;align-items:center;font-weight:bold;border-radius:500px;border:1px solid #d5d5d5;padding:1px 6px;font-size:1em}.badge.primary{background-color:#314a93;color:#fff;border-color:#293d7a}.badge.success{background-color:#297d51;color:#fff;border-color:#216441}.badge.warning{background-color:#956d28;color:#fff;border-color:#7b5a21}.badge.error{background-color:#972727;color:#fff;border-color:#7d2020}.badge.dark{background-color:#252831;color:#fff;border-color:#17191e}.badge.tiny{padding:0 4px !important;font-size:.659rem !important}.badge.small{padding:1px 4px !important;font-size:.749rem !important}.badge.large{padding:2px 8px !important;font-size:1.1rem !important}.billboard{background-color:#fff;color:#202123;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:4.5rem 2.5rem;border-color:#f4f4f4;border:1px solid #c6c6c6}.billboard.primary{background-color:#314a93;color:#fff;border-color:#2b4182}.billboard.success{background-color:#297d51;color:#fff;border-color:#236c46}.billboard.warning{background-color:#956d28;color:#fff;border-color:#836023}.billboard.error{background-color:#972727;color:#fff;border-color:#852222}.billboard.dark{background-color:#252831;color:#fff;border-color:#1b1d24}.billboard.small{padding:2.5rem 1.5rem;font-size:1em}.billboard.small .body{padding:2.5rem 1.5rem}.billboard.small p{font-size:1em}.billboard.large{padding:7.5rem 4rem;font-size:1.6em}.billboard.large .body{padding:7.5rem 4rem}.billboard.large p{font-size:1.6em}.billboard .media{flex:0 0 auto}.billboard .body{padding:4.5rem 2.5rem;flex:1 1 auto;display:flex;justify-content:center;flex-direction:column}.billboard.cover{min-height:100vh;max-height:100%;min-width:100%;border:0;background-size:cover;background-position:center center;background-repeat:no-repeat}@media only screen and (max-width: 768px){.billboard{padding:2.5rem 1rem;flex-direction:column}.billboard .media img{width:100%}.billboard .body{padding:2.5rem 1rem}.billboard.small{padding:1rem}.billboard.small .body{padding:1rem}.billboard.small p{font-size:1em}.billboard.large{padding:1rem}.billboard.large .body{padding:1rem}.billboard.large p{font-size:1.358em}}.breadcrumb{display:inline-block;white-space:nowrap}.breadcrumb a.item,.breadcrumb .item{text-decoration:none;font-size:inherit;font-weight:bold}.breadcrumb a.item:focus,.breadcrumb a.item:hover,.breadcrumb a.item:active,.breadcrumb a.item.active,.breadcrumb .item:focus,.breadcrumb .item:hover,.breadcrumb .item:active,.breadcrumb .item.active{color:#314a93}.breadcrumb a.item::after,.breadcrumb .item::after{font-family:"Material Symbols Outlined";content:"keyboard_arrow_right";color:#314a93;padding:0 .25em;vertical-align:middle;font-size:1.4rem;cursor:auto}.breadcrumb a.item:first-child,.breadcrumb .item:first-child{margin-left:0}.breadcrumb a.item.active,.breadcrumb .item.active{color:#314a93;font-weight:bold}.breadcrumb a.item.active::after,.breadcrumb .item.active::after{content:none}.breadcrumb.small .item{font-size:.9589em}.breadcrumb.small .item::after{padding:.15em;font-size:1.25rem}.breadcrumb.large .item{font-size:1.18em}.breadcrumb.large .item::after{padding:.18em;font-size:1.7rem}@media only screen and (max-width: 768px){.breadcrumb .item:after{font-size:1rem;vertical-align:middle}}.cards{display:flex;flex-wrap:wrap}.cards.two>.card{flex:0 0 calc(100%*(1 / 2) - (2 * 10px));height:auto;margin:10px}.cards.three>.card{flex:0 0 calc(100%*(1 / 3) - (2 * 10px));height:auto;margin:10px}.cards.four>.card{flex:0 0 calc(100%*(1 / 4) - (2 * 10px));height:auto;margin:10px}.cards.five>.card{flex:0 0 calc(100%*(1 / 5) - (2 * 10px));height:auto;margin:10px}.cards.six>.card{flex:0 0 calc(100%*(1 / 6) - (2 * 10px));height:auto;margin:10px}.cards.seven>.card{flex:0 0 calc(100%*(1 / 7) - (2 * 10px));height:auto;margin:10px}.cards.eight>.card{flex:0 0 calc(100%*(1 / 8) - (2 * 10px));height:auto;margin:10px}.cards.nine>.card{flex:0 0 calc(100%*(1 / 9) - (2 * 10px));height:auto;margin:10px}.cards.ten>.card{flex:0 0 calc(100%*(1 / 10) - (2 * 10px));height:auto;margin:10px}.cards.eleven>.card{flex:0 0 calc(100%*(1 / 11) - (2 * 10px));height:auto;margin:10px}.cards.twelve>.card{flex:0 0 calc(100%*(1 / 12) - (2 * 10px));height:auto;margin:10px}.cards.thirteen>.card{flex:0 0 calc(100%*(1 / 13) - (2 * 10px));height:auto;margin:10px}.cards.fourteen>.card{flex:0 0 calc(100%*(1 / 14) - (2 * 10px));height:auto;margin:10px}.cards.fifteen>.card{flex:0 0 calc(100%*(1 / 15) - (2 * 10px));height:auto;margin:10px}.cards.sixteen>.card{flex:0 0 calc(100%*(1 / 16) - (2 * 10px));height:auto;margin:10px}.card{background-color:#fff;border:1px solid #c6c6c6;border-radius:4px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);display:flex;flex-direction:column;width:240px;height:100%;overflow:hidden}.card>.body .title,.card>.title{color:#202123;line-height:initial}.card>.body .title>.subtitle,.card>.title>.subtitle{color:#979797;flex:1 1 auto}.card>.title,.card>.description,.card>.actions{padding:16px}.card>.description{flex:1 1 auto;color:#202123}.card>.media{display:flex;flex-wrap:wrap}.card>.media img{display:block;width:100%}.card>.media.two{padding-bottom:initial !important;height:auto}.card>.media.two>div,.card>.media.two>a{flex:0 0 calc(100%*(1 / 2));flex-grow:1;padding:0}.card>.media.three{padding-bottom:initial !important;height:auto}.card>.media.three>div,.card>.media.three>a{flex:0 0 calc(100%*(1 / 3));flex-grow:1;padding:0}.card>.media.four{padding-bottom:initial !important;height:auto}.card>.media.four>div,.card>.media.four>a{flex:0 0 calc(100%*(1 / 4));flex-grow:1;padding:0}.card>.media.five{padding-bottom:initial !important;height:auto}.card>.media.five>div,.card>.media.five>a{flex:0 0 calc(100%*(1 / 5));flex-grow:1;padding:0}.card>.media.six{padding-bottom:initial !important;height:auto}.card>.media.six>div,.card>.media.six>a{flex:0 0 calc(100%*(1 / 6));flex-grow:1;padding:0}.card>.media.seven{padding-bottom:initial !important;height:auto}.card>.media.seven>div,.card>.media.seven>a{flex:0 0 calc(100%*(1 / 7));flex-grow:1;padding:0}.card>.media.eight{padding-bottom:initial !important;height:auto}.card>.media.eight>div,.card>.media.eight>a{flex:0 0 calc(100%*(1 / 8));flex-grow:1;padding:0}.card>.media.nine{padding-bottom:initial !important;height:auto}.card>.media.nine>div,.card>.media.nine>a{flex:0 0 calc(100%*(1 / 9));flex-grow:1;padding:0}.card>.media.ten{padding-bottom:initial !important;height:auto}.card>.media.ten>div,.card>.media.ten>a{flex:0 0 calc(100%*(1 / 10));flex-grow:1;padding:0}.card>.media.eleven{padding-bottom:initial !important;height:auto}.card>.media.eleven>div,.card>.media.eleven>a{flex:0 0 calc(100%*(1 / 11));flex-grow:1;padding:0}.card>.media.twelve{padding-bottom:initial !important;height:auto}.card>.media.twelve>div,.card>.media.twelve>a{flex:0 0 calc(100%*(1 / 12));flex-grow:1;padding:0}.card>.media.thirteen{padding-bottom:initial !important;height:auto}.card>.media.thirteen>div,.card>.media.thirteen>a{flex:0 0 calc(100%*(1 / 13));flex-grow:1;padding:0}.card>.media.fourteen{padding-bottom:initial !important;height:auto}.card>.media.fourteen>div,.card>.media.fourteen>a{flex:0 0 calc(100%*(1 / 14));flex-grow:1;padding:0}.card>.media.fifteen{padding-bottom:initial !important;height:auto}.card>.media.fifteen>div,.card>.media.fifteen>a{flex:0 0 calc(100%*(1 / 15));flex-grow:1;padding:0}.card>.media.sixteen{padding-bottom:initial !important;height:auto}.card>.media.sixteen>div,.card>.media.sixteen>a{flex:0 0 calc(100%*(1 / 16));flex-grow:1;padding:0}.card.horizontal{flex-direction:row;width:100%;align-items:center;margin-bottom:15px}.card.horizontal>.media{align-self:normal;width:fit-content}.card.horizontal>.media img{width:auto;object-fit:cover}.card.horizontal>.body{flex:inherit}.card.horizontal>.body .title,.card.horizontal>.body .description{padding:calc(16px / 2) 16px}.card.horizontal>.body .description{flex:1}@media only screen and (max-width: 768px){.card,.cards>.card{flex:0 0 100% !important;width:100%;height:fit-content !important}.card.horizontal{flex-direction:column}}.list{list-style:none;margin:1rem 0}.list>.item{display:flex;align-items:center;padding:.55em;margin:0;transition:.15s}.list>.item>img,.list>.item>.material-symbols-outlined,.list>.item>i{margin-right:1rem}.list>.item>span,.list>.item>div{display:contents}.list>.item>.body{flex:1;line-height:1.4;text-align:left;display:initial}.list>.item>.body>.title,.list>.item>.body>.subtitle{display:block}.list>.item>.body>.title{font-size:1.28rem;font-weight:700;line-height:1.4}.list>.item>.body>.subtitle{font-size:.889em;font-weight:400;color:#314a93;margin-bottom:7px}.list>.item>.actions{width:auto;margin-left:1rem}.list>.item.active{background:#e3e3e3}.list.divided>.item{border-bottom:1px solid #c6c6c6}.list.divided>.item:last-child{border-bottom:none}.list.striped>.item:nth-of-type(odd){background:#e6e6e6}.list.hovered>.item:hover{background:#e6e6e6;transition:.15s}.menu{background-color:#fff;border-radius:0;list-style:none;margin:0;width:100%;min-width:max-content;padding:.9rem;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);z-index:300}.menu .title{font-size:1.25em;min-height:2rem;color:#202123;padding:.6rem 0;font-weight:700;letter-spacing:-0.015rem}.menu .item{padding:0;position:relative;text-decoration:none;text-align:left}.menu .item>a{color:#202123;display:block;width:100%;padding:.28rem .9rem;text-decoration:none;font-size:1em;font-weight:400;transition:background .15s}.menu .item>a:hover{background:#e6e6e6;color:#202123;transition:background .15s}.menu .item>a:active,.menu .item>a:focus,.menu .item>a.active{background:#e6e6e6;color:#202123;transition:background .15s}.menu .item i,.menu .item span.material-symbols-outlined{color:#979797;font-size:1.2rem;margin-right:10px;vertical-align:text-bottom}.menu .item .menu{padding:.4rem}.menu .badge{position:absolute;right:0;top:4px;padding:0 4px;font-size:.93em}.menu.small>.item a{font-size:.945em}.menu.divided .item{border-bottom:1px solid #c6c6c6}.menu.divided .item:last-child{border-bottom:none}.navbar-spacer{margin-top:105px}.navbar{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;min-height:80px;background:#314a93;color:#fff;width:100%}.navbar .container{display:flex;width:100%}.navbar .brand{padding:0;display:flex;justify-content:center;min-height:100%;align-items:center;margin-right:1rem;white-space:nowrap}.navbar .brand img{width:7rem}.navbar .brand a,.navbar .brand a:visited{font-size:1.128em;text-decoration:none;color:#fff;display:flex;font-weight:bold}.navbar input[type=checkbox]#burger,.navbar .burger{display:none}.navbar .burger::before{content:"dehaze";font-family:"Material Symbols Outlined";font-size:2.459rem;display:none;min-height:80px;max-height:80px;position:absolute;cursor:pointer;right:0;top:0}.navbar section.links{display:flex;flex:1 0 0;align-items:center}.navbar section.links div.section{flex:1 0 0;display:flex;height:100%;align-items:center}.navbar section.links div.section:not(:first-child):last-child{justify-content:flex-end}.navbar section.links div.section input[type=text]{background-color:#283d78;color:#fff;border-color:#3b59b2}.navbar section.links div.section input[type=text]::placeholder{color:#fff}.navbar section.links div.section input[type=text]:focus{outline:2px solid #778ed2}.navbar section.links div.section.divided .buttons .button,.navbar section.links div.section.divided .buttons .dropdown .button{border-width:0 1px !important}.navbar section.links div.section.divided .buttons>.button:first-child{border-left-width:0 !important}.navbar section.links div.section.divided .buttons>.button:last-child{border-right-width:0 !important}.navbar section.links div.section.divided .buttons .dropdown:first-child .button{border-left-width:0 !important}.navbar section.links div.section.divided .buttons .dropdown:last-child .button{border-right-width:0 !important;border-left-width:0 !important;margin-left:1px}.navbar section.links div.section.divided .buttons .button,.navbar section.links div.section.divided .buttons .dropdown .button{border:solid #283c78}@media only screen and (max-width: 768px){.navbar section.links div.section.divided .buttons .button,.navbar section.links div.section.divided .buttons .dropdown .button{border:0 !important}}.navbar.fixed{position:fixed;top:0;left:0;right:0px;margin-top:0;transform:translateY(0px);z-index:5}.navbar .buttons{height:100%;min-height:100%;box-shadow:none}.navbar .buttons .button,.navbar .buttons .dropdown .button{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:#fff;min-height:100%;border-radius:0;border:0}.navbar .buttons .button i,.navbar .buttons .button span.material-symbols-outlined,.navbar .buttons .dropdown .button i,.navbar .buttons .dropdown .button span.material-symbols-outlined{color:#fff}.navbar .buttons .button:hover,.navbar .buttons .dropdown .button:hover{background:#24366c;border-radius:0}.navbar .buttons .button:active,.navbar .buttons .button.active,.navbar .buttons .dropdown .button:active,.navbar .buttons .dropdown .button.active{color:#fff;background:#283d78;transition:.2s}.navbar .buttons .button:active:hover,.navbar .buttons .button.active:hover,.navbar .buttons .dropdown .button:active:hover,.navbar .buttons .dropdown .button.active:hover{transition:.2s;background:#24376d}.navbar .buttons .dropdown:last-child,.navbar .buttons .dropdown:last-child>.button:first-child,.navbar .buttons .dropdown:last-child>.button:last-child{border-radius:0}.navbar .button,.navbar .dropdown .button{font-size:1.128em;padding:.935rem 1.4rem;font-weight:700}.navbar.gradient{background:linear-gradient(to top, #314a93 0%, #4060bf 2%, #2d4488 97%, #4060bf 100%)}.navbar.gradient-ltr{background:linear-gradient(135deg, #3b58b0, #314a93)}.navbar.gradient-rtl{background:linear-gradient(-135deg, #3b58b0, #314a93)}.navbar.light{background:#fff;color:#303232}.navbar.light.gradient{background:linear-gradient(to top, white 0%, white 2%, #f7f7f7 97%, white 100%)}.navbar.light.gradient-ltr{background:linear-gradient(135deg, white, white)}.navbar.light.gradient-rtl{background:linear-gradient(-135deg, white, white)}.navbar.light .buttons .button{color:#303232;min-height:100%}.navbar.light .buttons .button i,.navbar.light .buttons .button span.material-symbols-outlined{color:#303232}.navbar.light .buttons .button:hover{background:#e5e5e5}.navbar.light .brand a,.navbar.light .brand a:visited{color:#303232}.navbar.light section.links div.section input[type=text]{background-color:#fff;border-color:#252831;color:#303232}.navbar.light section.links div.section input[type=text]::placeholder{color:#303232}.navbar.light section.links div.section input[type=text]:focus{outline:2px solid #424757}.navbar.light section.links div.section .buttons .button:active,.navbar.light section.links div.section .buttons .button.active,.navbar.light section.links div.section .buttons .dropdown .button:active,.navbar.light section.links div.section .buttons .dropdown .button.active{color:#303232;background:#ededed;transition:.2s}.navbar.light section.links div.section .buttons .button:active:hover,.navbar.light section.links div.section .buttons .button.active:hover,.navbar.light section.links div.section .buttons .dropdown .button:active:hover,.navbar.light section.links div.section .buttons .dropdown .button.active:hover{transition:.2s;background:#e6e6e6}.navbar.light section.links div.section.divided .buttons .button,.navbar.light section.links div.section.divided .buttons .dropdown .button{border:solid #979797}.navbar.dark{background:#252831;color:#fff}.navbar.dark.gradient{background:linear-gradient(to top, #252831 0%, #3e4352 2%, #1e2128 97%, #3e4352 100%)}.navbar.dark.gradient-ltr{background:linear-gradient(135deg, #393d4b, #252831)}.navbar.dark.gradient-rtl{background:linear-gradient(-135deg, #393d4b, #252831)}.navbar.dark .buttons .button{color:#fff;min-height:100%}.navbar.dark .buttons .button i,.navbar.dark .buttons .button span.material-symbols-outlined{color:#fff}.navbar.dark .buttons .button:hover{background:#0f1014}.navbar.dark .brand a,.navbar.dark .brand a:visited{color:#fff}.navbar.dark section.links div.section input[type=text]{background-color:#343945;border-color:#5e657c;color:#fff}.navbar.dark section.links div.section input[type=text]::placeholder{color:#fff}.navbar.dark section.links div.section input[type=text]:focus{outline:2px solid #7e869e}.navbar.dark section.links div.section .buttons .button:active,.navbar.dark section.links div.section .buttons .button.active,.navbar.dark section.links div.section .buttons .dropdown .button:active,.navbar.dark section.links div.section .buttons .dropdown .button.active{color:#fff;background:#16171d;transition:.2s}.navbar.dark section.links div.section .buttons .button:active:hover,.navbar.dark section.links div.section .buttons .button.active:hover,.navbar.dark section.links div.section .buttons .dropdown .button:active:hover,.navbar.dark section.links div.section .buttons .dropdown .button.active:hover{transition:.2s;background:#0f1014}.navbar.dark section.links div.section.divided .buttons .button,.navbar.dark section.links div.section.divided .buttons .dropdown .button{border:solid #414655}.navbar.mini{min-height:45px}.navbar.mini .button,.navbar.mini .dropdown .button{font-size:.9839em;padding:.445rem .9rem}.navbar-spacer-mini{margin-top:70px !important}@media only screen and (max-width: 768px){.navbar-spacer-mini{margin-top:div(70px, 2) !important}}.navbar.small{min-height:65px}.navbar.small .button,.navbar.small .dropdown .button{font-size:1em;padding:.645rem 1.4rem}.navbar-spacer-small{margin-top:90px !important}@media only screen and (max-width: 768px){.navbar-spacer-small{margin-top:div(90px, 2) !important}}.navbar.large{min-height:95px}.navbar.large .button,.navbar.large .dropdown .button{font-size:1.28em;padding:.645rem 1.4rem}.navbar-spacer-large{margin-top:115px !important}@media only screen and (max-width: 768px){.navbar-spacer-large{margin-top:div(115px, 2) !important}}@media only screen and (max-width: 768px){.navbar-spacer{margin-top:0}.navbar .container{padding:0 div(40px, 2)}.navbar.fixed{position:relative}.navbar section.links{position:absolute;display:block;width:100%;height:0;top:80px;left:0;overflow-x:auto;overflow-y:hidden;background:#e6e6e6;z-index:1;margin:0 !important;padding:0 !important;box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}.navbar section.links .section,.navbar section.links .section .buttons,.navbar section.links .section .buttons .dropdown,.navbar section.links .section .buttons .dropdown .menu,.navbar section.links .section .buttons .dropdown .menu .button,.navbar section.links .section .buttons .dropdown .button,.navbar section.links .section .buttons .button{display:block !important;width:100%;text-align:left;position:relative}.navbar section.links .section .buttons .dropdown .button,.navbar section.links .section .buttons .button{color:#202123;background:#e6e6e6}.navbar section.links .section .buttons .dropdown .button i,.navbar section.links .section .buttons .dropdown .button span.material-symbols-outlined,.navbar section.links .section .buttons .button i,.navbar section.links .section .buttons .button span.material-symbols-outlined{display:none}.navbar section.links .section .buttons .dropdown .menu{max-height:100%;box-shadow:none}.navbar .burger{display:flex;align-items:center;justify-content:center}.navbar .burger::before{content:"close";padding:0 1.5rem;font-size:2.459rem;display:flex;align-items:center;justify-content:center;top:auto}.navbar.mini .burger,.navbar.mini .burger::before{min-height:45px;max-height:45px}.navbar.mini section.links{top:45px}.navbar.small .burger,.navbar.small .burger::before{min-height:65px;max-height:65px}.navbar.small section.links{top:65px}.navbar.large .burger,.navbar.large .burger::before{min-height:95px;max-height:95px}.navbar.large section.links{top:95px}.navbar input[type=checkbox]#burger:not(:checked)~section.links{height:0}.navbar input[type=checkbox]#burger:checked~section.links{height:auto}.navbar input[type=checkbox]#burger:not(:checked)~.burger::before{content:"dehaze"}.navbar input[type=checkbox]#burger:checked~.burger::before{content:"close"}}.panel{display:flex;flex-direction:column;border:1px solid #c6c6c6;border-radius:4px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);background-color:#fff;margin:16px 0}.panel>.header,.panel>.bottom{display:flex;flex-direction:row;align-items:center}.panel>.header .actions,.panel>.bottom .actions{margin-left:auto}.panel>.header .actions:before,.panel>.bottom .actions:before{flex-grow:1}.panel>.header{border-bottom:1px solid #c6c6c6;padding:12px 16px}.panel>.header.dashed{border-bottom-style:dashed}.panel>.header.dotted{border-bottom-style:dotted}.panel>.header>.title{font-size:1.185rem;font-weight:700}.panel>.content{flex:1 1 auto;padding:16px;height:auto}.panel>.content>.media{min-width:0;flex:auto;margin-bottom:32px;flex-wrap:wrap;display:flex;position:relative;padding-bottom:56.25% !important;height:0;overflow:hidden;max-width:100%;width:100%;box-sizing:border-box}.panel>.content>.media iframe,.panel>.content>.media object,.panel>.content>.media embed{position:absolute;top:0;left:0;width:100%;height:100%}.panel>.content>.media video{max-width:100%;height:auto;box-sizing:border-box}.panel>.content>.media img{display:block}.panel>.content>.media.two{padding-bottom:initial !important;height:auto}.panel>.content>.media.two>div,.panel>.content>.media.two>a{flex:0 0 calc(100%*(1 / 2));flex-grow:1;padding:1px}.panel>.content>.media.three{padding-bottom:initial !important;height:auto}.panel>.content>.media.three>div,.panel>.content>.media.three>a{flex:0 0 calc(100%*(1 / 3));flex-grow:1;padding:1px}.panel>.content>.media.four{padding-bottom:initial !important;height:auto}.panel>.content>.media.four>div,.panel>.content>.media.four>a{flex:0 0 calc(100%*(1 / 4));flex-grow:1;padding:1px}.panel>.content>.media.five{padding-bottom:initial !important;height:auto}.panel>.content>.media.five>div,.panel>.content>.media.five>a{flex:0 0 calc(100%*(1 / 5));flex-grow:1;padding:1px}.panel>.content>.media.six{padding-bottom:initial !important;height:auto}.panel>.content>.media.six>div,.panel>.content>.media.six>a{flex:0 0 calc(100%*(1 / 6));flex-grow:1;padding:1px}.panel>.content>.media.seven{padding-bottom:initial !important;height:auto}.panel>.content>.media.seven>div,.panel>.content>.media.seven>a{flex:0 0 calc(100%*(1 / 7));flex-grow:1;padding:1px}.panel>.content>.media.eight{padding-bottom:initial !important;height:auto}.panel>.content>.media.eight>div,.panel>.content>.media.eight>a{flex:0 0 calc(100%*(1 / 8));flex-grow:1;padding:1px}.panel>.content>.media.nine{padding-bottom:initial !important;height:auto}.panel>.content>.media.nine>div,.panel>.content>.media.nine>a{flex:0 0 calc(100%*(1 / 9));flex-grow:1;padding:1px}.panel>.content>.media.ten{padding-bottom:initial !important;height:auto}.panel>.content>.media.ten>div,.panel>.content>.media.ten>a{flex:0 0 calc(100%*(1 / 10));flex-grow:1;padding:1px}.panel>.content>.media.eleven{padding-bottom:initial !important;height:auto}.panel>.content>.media.eleven>div,.panel>.content>.media.eleven>a{flex:0 0 calc(100%*(1 / 11));flex-grow:1;padding:1px}.panel>.content>.media.twelve{padding-bottom:initial !important;height:auto}.panel>.content>.media.twelve>div,.panel>.content>.media.twelve>a{flex:0 0 calc(100%*(1 / 12));flex-grow:1;padding:1px}.panel>.content>.media.thirteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.thirteen>div,.panel>.content>.media.thirteen>a{flex:0 0 calc(100%*(1 / 13));flex-grow:1;padding:1px}.panel>.content>.media.fourteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.fourteen>div,.panel>.content>.media.fourteen>a{flex:0 0 calc(100%*(1 / 14));flex-grow:1;padding:1px}.panel>.content>.media.fifteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.fifteen>div,.panel>.content>.media.fifteen>a{flex:0 0 calc(100%*(1 / 15));flex-grow:1;padding:1px}.panel>.content>.media.sixteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.sixteen>div,.panel>.content>.media.sixteen>a{flex:0 0 calc(100%*(1 / 16));flex-grow:1;padding:1px}.panel>.content .headline,.panel>.content p.headline{font-size:1.39em;line-height:1.5;margin-bottom:26px;color:#000;letter-spacing:-0.0158em}.panel>.bottom{min-height:50px;border-top:1px solid #c6c6c6;padding:16px}.panel.mini>.header{padding:4px 8px}.panel.mini>.header .title{font-size:.985rem}.panel.mini>.content,.panel.mini>.bottom{padding:4px 8px}.panel.small>.header{padding:8px 12px}.panel.small>.header .title{font-size:1.038rem}.panel.small>.content,.panel.small>.bottom{padding:8px 12px}.process{display:flex;flex-wrap:nowrap;margin:1em 0 5em;width:100%;list-style:none}.process .item{flex:1 1 0;min-height:4rem;position:relative;align-items:center;justify-content:center;display:flex;word-break:break-word;line-height:1.3;text-align:center}.process .item:not(:first-child)::before{background:#314a93;content:"";height:6px;left:-50%;position:absolute;top:0;width:100%}.process .item a{color:#202123;display:inline-block;padding:10px 10px 0;text-decoration:none;font-weight:bold}.process .item a::before{position:absolute;content:"";background:#314a93;top:0;left:50%;height:.8rem;width:3px;z-index:1}.process .item a:first-child::before{left:calc(50% - (3px - 1px))}.process .item.active a{color:#314a93}.process .item.active a::after{content:"beenhere";font-family:"Material Symbols Outlined";position:absolute;top:calc(-15px - 1.8rem);left:calc(50% - (3px * 10)/2);color:#314a93;font-size:1.8rem}.process .item.active~.item::before{background:#c6c6c6}.process .item.active~.item a{color:#202123}.process .item.active~.item a:hover{color:#314a93}.process .item.active~.item a::before{background:#c6c6c6}.process.success .item:not(:first-child)::before{background:#297d51}.process.success .item a{padding:10px}.process.success .item a::before{background:#297d51}.process.success .item.active a{color:#297d51}.process.success .item.active a::after{color:#297d51}.process.success .item.active~.item::before{background:#c6c6c6}.process.warning .item:not(:first-child)::before{background:#956d28}.process.warning .item a{padding:10px}.process.warning .item a::before{background:#956d28}.process.warning .item.active a{color:#956d28}.process.warning .item.active a::after{color:#956d28}.process.warning .item.active~.item::before{background:#c6c6c6}.process.error .item:not(:first-child)::before{background:#972727}.process.error .item a{padding:10px}.process.error .item a::before{background:#972727}.process.error .item.active a{color:#972727}.process.error .item.active a::after{color:#972727}.process.error .item.active~.item::before{background:#c6c6c6}.process.dark .item:not(:first-child)::before{background:#202123}.process.dark .item a{padding:10px}.process.dark .item a::before{background:#202123}.process.dark .item.active a{color:#202123}.process.dark .item.active a::after{color:#202123}.process.dark .item.active~.item::before{background:#c6c6c6}.process.vertical{display:flex;padding:1.25em 2em 2.85em;margin:1em 0;flex-direction:column;align-items:flex-start}.process.vertical .item{justify-content:flex-start;align-items:center;max-width:100%;min-width:100%;border-bottom:1px solid #c6c6c6;border-right:1px solid #c6c6c6;padding-left:20px}.process.vertical .item:first-child{border-top:1px solid #c6c6c6}.process.vertical .item:not(:first-child)::before{width:3px;height:100%;left:0}.process.vertical .item a::before{width:9px}.process.vertical .item a:first-child::before{left:0;height:100%}.process.vertical .item.active a{font-weight:bold}.process.vertical .item.active a::after{top:15px;left:calc(-15px - 1.8rem)}.process.vertical.reversed{flex-direction:column-reverse}.process.vertical.reversed .item:last-child{border-top:1px solid #c6c6c6}.process.vertical.reversed .item:first-child{border-top:none}@media only screen and (max-width: 768px){.process{display:flex;padding:1.25em 2em 2.85em;margin:1em 0;flex-direction:column;align-items:flex-start}.process .item{justify-content:flex-start;align-items:center;max-width:100%;min-width:100%;border-bottom:1px solid #c6c6c6;border-right:1px solid #c6c6c6;padding-left:20px}.process .item:first-child{border-top:1px solid #c6c6c6}.process .item:not(:first-child)::before{width:3px;height:100%;left:0}.process .item a::before{width:9px}.process .item a:first-child::before{left:0;height:100%}.process .item.active a{font-weight:bold}.process .item.active a::after{top:15px;left:calc(-15px - 1.8rem)}.process.reversed{flex-direction:column-reverse}.process.reversed .item:last-child{border-top:1px solid #c6c6c6}.process.reversed .item:first-child{border-top:none}}.progress{width:100%;height:12px;background:#e6e6e6;box-shadow:0 1px 2px rgba(0,0,0,.15) inset;border-radius:16px;appearance:none}.progress::-webkit-progress-bar{background:rgba(0,0,0,0);border-radius:16px}.progress::-webkit-progress-value{background:#314a93;border-radius:16px}.progress::-moz-progress-bar{background:#314a93;border-radius:16px}.progress.success::-webkit-progress-value{background:#297d51}.progress.warning::-webkit-progress-value{background:#956d28}.progress.error::-webkit-progress-value{background:#972727}.progress.dark::-webkit-progress-value{background:#202123}.stats,a.stats{display:inline-flex;flex-direction:column;background-color:rgba(0,0,0,0);margin:0 1.1em .8em;border-width:1px;border-color:#c6c6c6;border-style:solid;border-radius:4px;padding:8px 2.76em;line-height:2.1em;text-decoration:none;transition:.15s}.stats>.title,.stats>.subtitle,.stats>.value,a.stats>.title,a.stats>.subtitle,a.stats>.value{display:flex;flex-direction:column}.stats>.title,a.stats>.title{font-size:1.1em}.stats>.subtitle,a.stats>.subtitle{font-size:.816rem;margin-top:-4px;color:#979797}.stats>.value,a.stats>.value{font-weight:bold;font-size:1.65rem;flex-direction:row;line-height:1.2;align-items:center}.stats>.value>img,.stats>.value>.material-symbols-outlined,.stats>.value>i,a.stats>.value>img,a.stats>.value>.material-symbols-outlined,a.stats>.value>i{font-weight:normal;display:inline-block;vertical-align:baseline;font-size:1em;margin-right:.5em}.stats.primary,a.stats.primary{background-color:#314a93;color:#fff;border-color:#314a93;background:rgba(0,0,0,0);color:inherit}.stats.primary>.value,a.stats.primary>.value{color:inherit}.stats.primary>.value>.material-symbols-outlined,.stats.primary>.value>i,a.stats.primary>.value>.material-symbols-outlined,a.stats.primary>.value>i{color:#314a93}.stats.success,a.stats.success{background-color:#297d51;color:#fff;border-color:#297d51;background:rgba(0,0,0,0);color:inherit}.stats.success>.value,a.stats.success>.value{color:inherit}.stats.success>.value>.material-symbols-outlined,.stats.success>.value>i,a.stats.success>.value>.material-symbols-outlined,a.stats.success>.value>i{color:#297d51}.stats.warning,a.stats.warning{background-color:#956d28;color:#fff;border-color:#956d28;background:rgba(0,0,0,0);color:inherit}.stats.warning>.value,a.stats.warning>.value{color:inherit}.stats.warning>.value>.material-symbols-outlined,.stats.warning>.value>i,a.stats.warning>.value>.material-symbols-outlined,a.stats.warning>.value>i{color:#956d28}.stats.error,a.stats.error{background-color:#972727;color:#fff;border-color:#972727;background:rgba(0,0,0,0);color:inherit}.stats.error>.value,a.stats.error>.value{color:inherit}.stats.error>.value>.material-symbols-outlined,.stats.error>.value>i,a.stats.error>.value>.material-symbols-outlined,a.stats.error>.value>i{color:#972727}.stats.dark,a.stats.dark{background-color:#363b48;color:#fff;border-color:#363b48;background:rgba(0,0,0,0);color:inherit}.stats.dark>.value,a.stats.dark>.value{color:inherit}.stats.dark>.value>.material-symbols-outlined,.stats.dark>.value>i,a.stats.dark>.value>.material-symbols-outlined,a.stats.dark>.value>i{color:#363b48}a.stats:hover{background-color:#f3f3f3}.tab{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;border-bottom:2px solid #c6c6c6;padding:0}.tab>.buttons{box-shadow:none;border-radius:0}.tab>.button,.tab>a.button,.tab>.buttons>.button,.tab>.buttons>a.button,.tab>.dropdown>.button,.tab>.dropdown>a.button,.tab>.buttons>.dropdown>.button,.tab>.buttons>.dropdown>a.button{background:rgba(0,0,0,0);border:none;border-radius:0 !important;line-height:unset;font-size:1.025em;font-weight:600;color:#202123;padding:.935rem 1.4rem;box-shadow:none;border-bottom:2px solid rgba(0,0,0,0);margin-bottom:-2px}.tab>.button:hover,.tab>a.button:hover,.tab>.buttons>.button:hover,.tab>.buttons>a.button:hover,.tab>.dropdown>.button:hover,.tab>.dropdown>a.button:hover,.tab>.buttons>.dropdown>.button:hover,.tab>.buttons>.dropdown>a.button:hover{color:#202123;border-bottom-color:#979797}.tab>.button:focus,.tab>a.button:focus,.tab>.buttons>.button:focus,.tab>.buttons>a.button:focus,.tab>.dropdown>.button:focus,.tab>.dropdown>a.button:focus,.tab>.buttons>.dropdown>.button:focus,.tab>.buttons>.dropdown>a.button:focus{background:rgba(0,0,0,0)}.tab>.button.active,.tab>a.button.active,.tab>.buttons>.button.active,.tab>.buttons>a.button.active,.tab>.dropdown>.button.active,.tab>.dropdown>a.button.active,.tab>.buttons>.dropdown>.button.active,.tab>.buttons>.dropdown>a.button.active{border-bottom-color:#314a93}.tab>.button.active i,.tab>.button.active [class^=material-symbols-outlined],.tab>a.button.active i,.tab>a.button.active [class^=material-symbols-outlined],.tab>.buttons>.button.active i,.tab>.buttons>.button.active [class^=material-symbols-outlined],.tab>.buttons>a.button.active i,.tab>.buttons>a.button.active [class^=material-symbols-outlined],.tab>.dropdown>.button.active i,.tab>.dropdown>.button.active [class^=material-symbols-outlined],.tab>.dropdown>a.button.active i,.tab>.dropdown>a.button.active [class^=material-symbols-outlined],.tab>.buttons>.dropdown>.button.active i,.tab>.buttons>.dropdown>.button.active [class^=material-symbols-outlined],.tab>.buttons>.dropdown>a.button.active i,.tab>.buttons>.dropdown>a.button.active [class^=material-symbols-outlined]{color:inherit}.tab>.button i,.tab>.button [class^=material-symbols-outlined],.tab>a.button i,.tab>a.button [class^=material-symbols-outlined],.tab>.buttons>.button i,.tab>.buttons>.button [class^=material-symbols-outlined],.tab>.buttons>a.button i,.tab>.buttons>a.button [class^=material-symbols-outlined],.tab>.dropdown>.button i,.tab>.dropdown>.button [class^=material-symbols-outlined],.tab>.dropdown>a.button i,.tab>.dropdown>a.button [class^=material-symbols-outlined],.tab>.buttons>.dropdown>.button i,.tab>.buttons>.dropdown>.button [class^=material-symbols-outlined],.tab>.buttons>.dropdown>a.button i,.tab>.buttons>.dropdown>a.button [class^=material-symbols-outlined]{font-size:1.12rem}.tab.bottom{border-bottom:0;border-top:2px solid #e6e6e6}.tab.bottom>.button,.tab.bottom>a.button,.tab.bottom>.buttons>.button,.tab.bottom>.buttons>a.button,.tab.bottom>.dropdown>.button,.tab.bottom>.dropdown>a.button,.tab.bottom>.buttons>.dropdown>.button,.tab.bottom>.buttons>.dropdown>a.button{margin-top:-2px;border-top:2px solid rgba(0,0,0,0);border-bottom:0;margin-bottom:0}.tab.bottom>.button:hover,.tab.bottom>a.button:hover,.tab.bottom>.buttons>.button:hover,.tab.bottom>.buttons>a.button:hover,.tab.bottom>.dropdown>.button:hover,.tab.bottom>.dropdown>a.button:hover,.tab.bottom>.buttons>.dropdown>.button:hover,.tab.bottom>.buttons>.dropdown>a.button:hover{border-top-color:#979797}.tab.bottom>.button.active,.tab.bottom>a.button.active,.tab.bottom>.buttons>.button.active,.tab.bottom>.buttons>a.button.active,.tab.bottom>.dropdown>.button.active,.tab.bottom>.dropdown>a.button.active,.tab.bottom>.buttons>.dropdown>.button.active,.tab.bottom>.buttons>.dropdown>a.button.active{border-top-color:#314a93}.tab.success .button.active,.tab.success a.button.active,.tab.success .dropdown .button.active,.tab.success .dropdown a.button.active{border-bottom-color:#297d51}.tab.success.bottom .button.active,.tab.success.bottom a.button.active,.tab.success.bottom .dropdown .button.active,.tab.success.bottom .dropdown a.button.active{border-top-color:#297d51}.tab.warning .button.active,.tab.warning a.button.active,.tab.warning .dropdown .button.active,.tab.warning .dropdown a.button.active{border-bottom-color:#956d28}.tab.warning.bottom .button.active,.tab.warning.bottom a.button.active,.tab.warning.bottom .dropdown .button.active,.tab.warning.bottom .dropdown a.button.active{border-top-color:#956d28}.tab.error .button.active,.tab.error a.button.active,.tab.error .dropdown .button.active,.tab.error .dropdown a.button.active{border-bottom-color:#972727}.tab.error.bottom .button.active,.tab.error.bottom a.button.active,.tab.error.bottom .dropdown .button.active,.tab.error.bottom .dropdown a.button.active{border-top-color:#972727}.tab.dark .button.active,.tab.dark a.button.active,.tab.dark .dropdown .button.active,.tab.dark .dropdown a.button.active{border-bottom-color:#202123}.tab.dark.bottom .button.active,.tab.dark.bottom a.button.active,.tab.dark.bottom .dropdown .button.active,.tab.dark.bottom .dropdown a.button.active{border-top-color:#202123}.tab.centered{justify-content:center}.timeline .activity{display:flex;padding:1.25em 2em 2.85em;position:relative;flex-direction:column;justify-content:center}.timeline .activity::before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;width:1px;background-color:#c6c6c6}.timeline .activity:target .type{border-color:#314a93;box-shadow:0 0 .2em #314a93}.timeline .activity .type{position:absolute;z-index:1;display:flex;width:32px;height:32px;top:13px;left:-15px;align-items:center;background-color:#e6e6e6;border:2px solid #c6c6c6;border-radius:50%;justify-content:center;flex-shrink:0;box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}.timeline .activity .type.primary{background-color:#314a93;color:#fff;border-color:#2b4080}.timeline .activity .type.success{background-color:#297d51;color:#fff;border-color:#236a45}.timeline .activity .type.warning{background-color:#956d28;color:#fff;border-color:#815e23}.timeline .activity .type.error{background-color:#972727;color:#fff;border-color:#832222}.timeline .activity .type.dark{background-color:#202123;color:#979797;border-color:#141416}.timeline .activity .author,.timeline .activity .body,.timeline .activity .date,.timeline .activity .actions,.timeline .activity .media{min-width:0;max-width:100%;color:#202123;flex:auto;margin-left:10px;width:100%}.timeline .activity .author{font-weight:bold;font-size:1rem;color:#030303}.timeline .activity .date{font-size:.9em;opacity:.6}.timeline .activity .media{margin-top:16px;display:flex;flex-wrap:wrap;position:relative;padding-bottom:56.25% !important;height:0;overflow:hidden;max-width:100%;width:100%;box-sizing:border-box}.timeline .activity .media iframe,.timeline .activity .media object,.timeline .activity .media embed{position:absolute;top:0;left:0;width:100%;height:100%}.timeline .activity .media video{max-width:100%;height:auto;box-sizing:border-box}.timeline .activity .media img{display:block}.timeline .activity>.media.two{padding-bottom:initial !important;height:auto}.timeline .activity>.media.two>div,.timeline .activity>.media.two>a{flex:0 0 calc(100%*(1 / 2));flex-grow:1;padding:1px}.timeline .activity>.media.three{padding-bottom:initial !important;height:auto}.timeline .activity>.media.three>div,.timeline .activity>.media.three>a{flex:0 0 calc(100%*(1 / 3));flex-grow:1;padding:1px}.timeline .activity>.media.four{padding-bottom:initial !important;height:auto}.timeline .activity>.media.four>div,.timeline .activity>.media.four>a{flex:0 0 calc(100%*(1 / 4));flex-grow:1;padding:1px}.timeline .activity>.media.five{padding-bottom:initial !important;height:auto}.timeline .activity>.media.five>div,.timeline .activity>.media.five>a{flex:0 0 calc(100%*(1 / 5));flex-grow:1;padding:1px}.timeline .activity>.media.six{padding-bottom:initial !important;height:auto}.timeline .activity>.media.six>div,.timeline .activity>.media.six>a{flex:0 0 calc(100%*(1 / 6));flex-grow:1;padding:1px}.timeline .activity>.media.seven{padding-bottom:initial !important;height:auto}.timeline .activity>.media.seven>div,.timeline .activity>.media.seven>a{flex:0 0 calc(100%*(1 / 7));flex-grow:1;padding:1px}.timeline .activity>.media.eight{padding-bottom:initial !important;height:auto}.timeline .activity>.media.eight>div,.timeline .activity>.media.eight>a{flex:0 0 calc(100%*(1 / 8));flex-grow:1;padding:1px}.timeline .activity>.media.nine{padding-bottom:initial !important;height:auto}.timeline .activity>.media.nine>div,.timeline .activity>.media.nine>a{flex:0 0 calc(100%*(1 / 9));flex-grow:1;padding:1px}.timeline .activity>.media.ten{padding-bottom:initial !important;height:auto}.timeline .activity>.media.ten>div,.timeline .activity>.media.ten>a{flex:0 0 calc(100%*(1 / 10));flex-grow:1;padding:1px}.timeline .activity>.media.eleven{padding-bottom:initial !important;height:auto}.timeline .activity>.media.eleven>div,.timeline .activity>.media.eleven>a{flex:0 0 calc(100%*(1 / 11));flex-grow:1;padding:1px}.timeline .activity>.media.twelve{padding-bottom:initial !important;height:auto}.timeline .activity>.media.twelve>div,.timeline .activity>.media.twelve>a{flex:0 0 calc(100%*(1 / 12));flex-grow:1;padding:1px}.timeline .activity>.media.thirteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.thirteen>div,.timeline .activity>.media.thirteen>a{flex:0 0 calc(100%*(1 / 13));flex-grow:1;padding:1px}.timeline .activity>.media.fourteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.fourteen>div,.timeline .activity>.media.fourteen>a{flex:0 0 calc(100%*(1 / 14));flex-grow:1;padding:1px}.timeline .activity>.media.fifteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.fifteen>div,.timeline .activity>.media.fifteen>a{flex:0 0 calc(100%*(1 / 15));flex-grow:1;padding:1px}.timeline .activity>.media.sixteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.sixteen>div,.timeline .activity>.media.sixteen>a{flex:0 0 calc(100%*(1 / 16));flex-grow:1;padding:1px}.timeline .activity .actions{margin-top:16px}.timeline .activity:last-child::before{background:linear-gradient(180deg, #c6c6c6 45%, rgba(255, 255, 255, 0) 100%)}.timeline .activity:first-child::before{background:linear-gradient(0deg, #c6c6c6 45%, rgba(255, 255, 255, 0) 100%)}.tooltip{display:inline-flex;justify-content:center;align-items:center;position:relative;cursor:default}.tooltip .text{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9em;font-weight:bold;visibility:hidden;background-color:#252831;border-radius:4px;min-width:100px;max-width:180px;padding:5px;top:120%;opacity:0;transition:opacity .18s;z-index:1}.tooltip .text::after{content:"";position:absolute;top:auto;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #252831 rgba(0,0,0,0)}.tooltip.left>.text,.tooltip.right>.text,.tooltip.top>.text{top:auto}.tooltip.left>.text::after,.tooltip.right>.text::after,.tooltip.top>.text::after{bottom:auto}.tooltip.right>.text{left:110%}.tooltip.right>.text::after{right:100%;left:auto;border-color:rgba(0,0,0,0) #252831 rgba(0,0,0,0) rgba(0,0,0,0)}.tooltip.left>.text{right:110%}.tooltip.left>.text::after{left:100%;right:auto;margin:auto -5px auto auto;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #252831}.tooltip.top>.text{bottom:120%}.tooltip.top>.text::after{top:100%;border-color:#252831 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.tooltip:hover .text{visibility:visible;opacity:1}.align-items-baseline{align-items:baseline !important}.align-items-start{align-items:flex-start !important}.align-items-end{align-items:flex-end !important}.align-items-center{align-items:center !important}.align-items-stretch{align-items:stretch !important}.align-items-initial{align-items:initial !important}.align-items-inherit{align-items:inherit !important}.align-self-auto{align-self:auto !important}.align-self-baseline{align-self:baseline !important}.align-self-start{align-self:flex-start !important}.align-self-end{align-self:flex-end !important}.align-self-center{align-self:center !important}.align-self-stretch{align-self:stretch !important}.align-self-initial{align-self:initial !important}.align-self-inherit{align-self:inherit !important}.align-content-stretch{align-content:stretch !important}.align-content-center{align-content:center !important}.align-content-start{align-content:flex-start !important}.align-content-end{align-content:flex-end !important}.align-content-between{align-content:space-between !important}.align-content-around{align-content:space-around !important}.align-content-evenly{align-content:space-evenly !important}.align-content-initial{align-content:initial !important}.align-content-inherit{align-content:inherit !important}.backdrop-blur-4{backdrop-filter:blur(4px)}.backdrop-blur-7{backdrop-filter:blur(7px)}.backdrop-blur-10{backdrop-filter:blur(10px)}.backdrop-blur-12{backdrop-filter:blur(12px)}.backdrop-blur-16{backdrop-filter:blur(16px)}.backdrop-blur-20{backdrop-filter:blur(20px)}.backdrop-brightness-0{backdrop-filter:brightness(0)}.backdrop-brightness-25{backdrop-filter:brightness(0.25)}.backdrop-brightness-50{backdrop-filter:brightness(0.5)}.backdrop-brightness-75{backdrop-filter:brightness(0.75)}.backdrop-brightness-100{backdrop-filter:brightness(1)}.backdrop-brightness-125{backdrop-filter:brightness(1.25)}.backdrop-brightness-150{backdrop-filter:brightness(1.5)}.backdrop-brightness-175{backdrop-filter:brightness(1.75)}.backdrop-brightness-200{backdrop-filter:brightness(2)}.backdrop-contrast-0{backdrop-filter:contrast(0)}.backdrop-contrast-25{backdrop-filter:contrast(0.25)}.backdrop-contrast-50{backdrop-filter:contrast(0.5)}.backdrop-contrast-75{backdrop-filter:contrast(0.75)}.backdrop-contrast-100{backdrop-filter:contrast(1)}.backdrop-contrast-125{backdrop-filter:contrast(1.25)}.backdrop-contrast-150{backdrop-filter:contrast(1.5)}.backdrop-contrast-175{backdrop-filter:contrast(1.75)}.backdrop-contrast-200{backdrop-filter:contrast(2)}.backdrop-grayscale-0{backdrop-filter:grayscale(0)}.backdrop-grayscale-25{backdrop-filter:grayscale(0.25)}.backdrop-grayscale-50{backdrop-filter:grayscale(0.5)}.backdrop-grayscale-75{backdrop-filter:grayscale(0.75)}.backdrop-grayscale-100{backdrop-filter:grayscale(1)}.backdrop-grayscale-125{backdrop-filter:grayscale(1.25)}.backdrop-grayscale-150{backdrop-filter:grayscale(1.5)}.backdrop-grayscale-175{backdrop-filter:grayscale(1.75)}.backdrop-grayscale-200{backdrop-filter:grayscale(2)}.backdrop-invert-0{backdrop-filter:invert(0)}.backdrop-invert-25{backdrop-filter:invert(0.25)}.backdrop-invert-50{backdrop-filter:invert(0.5)}.backdrop-invert-75{backdrop-filter:invert(0.75)}.backdrop-invert-100{backdrop-filter:invert(1)}.backdrop-invert-125{backdrop-filter:invert(1.25)}.backdrop-invert-150{backdrop-filter:invert(1.5)}.backdrop-invert-175{backdrop-filter:invert(1.75)}.backdrop-invert-200{backdrop-filter:invert(2)}.backdrop-opacity-0{backdrop-filter:opacity(0)}.backdrop-opacity-25{backdrop-filter:opacity(0.25)}.backdrop-opacity-50{backdrop-filter:opacity(0.5)}.backdrop-opacity-75{backdrop-filter:opacity(0.75)}.backdrop-opacity-100{backdrop-filter:opacity(1)}.backdrop-opacity-125{backdrop-filter:opacity(1.25)}.backdrop-opacity-150{backdrop-filter:opacity(1.5)}.backdrop-opacity-175{backdrop-filter:opacity(1.75)}.backdrop-opacity-200{backdrop-filter:opacity(2)}.backdrop-saturate-0{backdrop-filter:saturate(0)}.backdrop-saturate-25{backdrop-filter:saturate(0.25)}.backdrop-saturate-50{backdrop-filter:saturate(0.5)}.backdrop-saturate-75{backdrop-filter:saturate(0.75)}.backdrop-saturate-100{backdrop-filter:saturate(1)}.backdrop-saturate-125{backdrop-filter:saturate(1.25)}.backdrop-saturate-150{backdrop-filter:saturate(1.5)}.backdrop-saturate-175{backdrop-filter:saturate(1.75)}.backdrop-saturate-200{backdrop-filter:saturate(2)}.backdrop-sepia-0{backdrop-filter:sepia(0)}.backdrop-sepia-25{backdrop-filter:sepia(0.25)}.backdrop-sepia-50{backdrop-filter:sepia(0.5)}.backdrop-sepia-75{backdrop-filter:sepia(0.75)}.backdrop-sepia-100{backdrop-filter:sepia(1)}.backdrop-sepia-125{backdrop-filter:sepia(1.25)}.backdrop-sepia-150{backdrop-filter:sepia(1.5)}.backdrop-sepia-175{backdrop-filter:sepia(1.75)}.backdrop-sepia-200{backdrop-filter:sepia(2)}.bg-color{background-color:white !important}.bg-grey{background-color:#979797 !important}.bg-secondary{background-color:#e6e6e6 !important}.bg-white{background-color:white !important}.bg-black{background-color:black !important}.bg-dark{background-color:#252831 !important}.bg-primary{background-color:#314a93 !important}.bg-success{background-color:#297d51 !important}.bg-warning{background-color:#956d28 !important}.bg-error{background-color:#972727 !important}.bg-color-darken-5{background-color:#f2f2f2 !important}.bg-color-lighten-5{background-color:#fff !important}.bg-grey-darken-5{background-color:#8f8f8f !important}.bg-grey-lighten-5{background-color:#9c9c9c !important}.bg-secondary-darken-5{background-color:#dbdbdb !important}.bg-secondary-lighten-5{background-color:#e7e7e7 !important}.bg-white-darken-5{background-color:#f2f2f2 !important}.bg-white-lighten-5{background-color:#fff !important}.bg-black-darken-5{background-color:#000 !important}.bg-black-lighten-5{background-color:#0d0d0d !important}.bg-dark-darken-5{background-color:#23262f !important}.bg-dark-lighten-5{background-color:#30333b !important}.bg-primary-darken-5{background-color:#2f468c !important}.bg-primary-lighten-5{background-color:#3b5398 !important}.bg-success-darken-5{background-color:#27774d !important}.bg-success-lighten-5{background-color:#34845a !important}.bg-warning-darken-5{background-color:#8e6826 !important}.bg-warning-lighten-5{background-color:#9a7433 !important}.bg-error-darken-5{background-color:#8f2525 !important}.bg-error-lighten-5{background-color:#9c3232 !important}.bg-color-darken-10{background-color:#e6e6e6 !important}.bg-color-lighten-10{background-color:#fff !important}.bg-grey-darken-10{background-color:#888 !important}.bg-grey-lighten-10{background-color:#a1a1a1 !important}.bg-secondary-darken-10{background-color:#cfcfcf !important}.bg-secondary-lighten-10{background-color:#e9e9e9 !important}.bg-white-darken-10{background-color:#e6e6e6 !important}.bg-white-lighten-10{background-color:#fff !important}.bg-black-darken-10{background-color:#000 !important}.bg-black-lighten-10{background-color:#1a1a1a !important}.bg-dark-darken-10{background-color:#21242c !important}.bg-dark-lighten-10{background-color:#3b3e46 !important}.bg-primary-darken-10{background-color:#2c4384 !important}.bg-primary-lighten-10{background-color:#465c9e !important}.bg-success-darken-10{background-color:#257149 !important}.bg-success-lighten-10{background-color:#3e8a62 !important}.bg-warning-darken-10{background-color:#866224 !important}.bg-warning-lighten-10{background-color:#a07c3e !important}.bg-error-darken-10{background-color:#882323 !important}.bg-error-lighten-10{background-color:#a13d3d !important}.bg-color-darken-15{background-color:#d9d9d9 !important}.bg-color-lighten-15{background-color:#fff !important}.bg-grey-darken-15{background-color:gray !important}.bg-grey-lighten-15{background-color:#a7a7a7 !important}.bg-secondary-darken-15{background-color:#c4c4c4 !important}.bg-secondary-lighten-15{background-color:#eaeaea !important}.bg-white-darken-15{background-color:#d9d9d9 !important}.bg-white-lighten-15{background-color:#fff !important}.bg-black-darken-15{background-color:#000 !important}.bg-black-lighten-15{background-color:#262626 !important}.bg-dark-darken-15{background-color:#1f222a !important}.bg-dark-lighten-15{background-color:#464850 !important}.bg-primary-darken-15{background-color:#2a3f7d !important}.bg-primary-lighten-15{background-color:#5065a3 !important}.bg-success-darken-15{background-color:#236a45 !important}.bg-success-lighten-15{background-color:#49916b !important}.bg-warning-darken-15{background-color:#7f5d22 !important}.bg-warning-lighten-15{background-color:#a58348 !important}.bg-error-darken-15{background-color:#802121 !important}.bg-error-lighten-15{background-color:#a74747 !important}.bg-color-darken-20{background-color:#ccc !important}.bg-color-lighten-20{background-color:#fff !important}.bg-grey-darken-20{background-color:#797979 !important}.bg-grey-lighten-20{background-color:#acacac !important}.bg-secondary-darken-20{background-color:#b8b8b8 !important}.bg-secondary-lighten-20{background-color:#ebebeb !important}.bg-white-darken-20{background-color:#ccc !important}.bg-white-lighten-20{background-color:#fff !important}.bg-black-darken-20{background-color:#000 !important}.bg-black-lighten-20{background-color:#333 !important}.bg-dark-darken-20{background-color:#1e2027 !important}.bg-dark-lighten-20{background-color:#51535a !important}.bg-primary-darken-20{background-color:#273b76 !important}.bg-primary-lighten-20{background-color:#5a6ea9 !important}.bg-success-darken-20{background-color:#216441 !important}.bg-success-lighten-20{background-color:#549774 !important}.bg-warning-darken-20{background-color:#775720 !important}.bg-warning-lighten-20{background-color:#aa8a53 !important}.bg-error-darken-20{background-color:#791f1f !important}.bg-error-lighten-20{background-color:#ac5252 !important}.bg-color-darken-25{background-color:#bfbfbf !important}.bg-color-lighten-25{background-color:#fff !important}.bg-grey-darken-25{background-color:#717171 !important}.bg-grey-lighten-25{background-color:#b1b1b1 !important}.bg-secondary-darken-25{background-color:#adadad !important}.bg-secondary-lighten-25{background-color:#ececec !important}.bg-white-darken-25{background-color:#bfbfbf !important}.bg-white-lighten-25{background-color:#fff !important}.bg-black-darken-25{background-color:#000 !important}.bg-black-lighten-25{background-color:#404040 !important}.bg-dark-darken-25{background-color:#1c1e25 !important}.bg-dark-lighten-25{background-color:#5c5e65 !important}.bg-primary-darken-25{background-color:#25386e !important}.bg-primary-lighten-25{background-color:#6577ae !important}.bg-success-darken-25{background-color:#1f5e3d !important}.bg-success-lighten-25{background-color:#5f9e7d !important}.bg-warning-darken-25{background-color:#70521e !important}.bg-warning-lighten-25{background-color:#b0925e !important}.bg-error-darken-25{background-color:#711d1d !important}.bg-error-lighten-25{background-color:#b15d5d !important}.bg-color-darken-30{background-color:#b3b3b3 !important}.bg-color-lighten-30{background-color:#fff !important}.bg-grey-darken-30{background-color:#6a6a6a !important}.bg-grey-lighten-30{background-color:#b6b6b6 !important}.bg-secondary-darken-30{background-color:#a1a1a1 !important}.bg-secondary-lighten-30{background-color:#eee !important}.bg-white-darken-30{background-color:#b3b3b3 !important}.bg-white-lighten-30{background-color:#fff !important}.bg-black-darken-30{background-color:#000 !important}.bg-black-lighten-30{background-color:#4d4d4d !important}.bg-dark-darken-30{background-color:#1a1c22 !important}.bg-dark-lighten-30{background-color:#66696f !important}.bg-primary-darken-30{background-color:#223467 !important}.bg-primary-lighten-30{background-color:#6f80b3 !important}.bg-success-darken-30{background-color:#1d5839 !important}.bg-success-lighten-30{background-color:#69a485 !important}.bg-warning-darken-30{background-color:#684c1c !important}.bg-warning-lighten-30{background-color:#b59969 !important}.bg-error-darken-30{background-color:#6a1b1b !important}.bg-error-lighten-30{background-color:#b66868 !important}.bg-color-darken-35{background-color:#a6a6a6 !important}.bg-color-lighten-35{background-color:#fff !important}.bg-grey-darken-35{background-color:#626262 !important}.bg-grey-lighten-35{background-color:#bbb !important}.bg-secondary-darken-35{background-color:#969696 !important}.bg-secondary-lighten-35{background-color:#efefef !important}.bg-white-darken-35{background-color:#a6a6a6 !important}.bg-white-lighten-35{background-color:#fff !important}.bg-black-darken-35{background-color:#000 !important}.bg-black-lighten-35{background-color:#595959 !important}.bg-dark-darken-35{background-color:#181a20 !important}.bg-dark-lighten-35{background-color:#717379 !important}.bg-primary-darken-35{background-color:#203060 !important}.bg-primary-lighten-35{background-color:#7989b9 !important}.bg-success-darken-35{background-color:#1b5135 !important}.bg-success-lighten-35{background-color:#74ab8e !important}.bg-warning-darken-35{background-color:#61471a !important}.bg-warning-lighten-35{background-color:#baa073 !important}.bg-error-darken-35{background-color:#621919 !important}.bg-error-lighten-35{background-color:#bb7373 !important}.border-0{border-width:0px !important}.border-1{border-width:1px !important}.border-2{border-width:2px !important}.border-3{border-width:3px !important}.border-4{border-width:4px !important}.border-5{border-width:5px !important}.border-top-0{border-top-width:0px !important}.border-top-1{border-top-width:1px !important}.border-top-2{border-top-width:2px !important}.border-top-3{border-top-width:3px !important}.border-top-4{border-top-width:4px !important}.border-top-5{border-top-width:5px !important}.border-right-0{border-right-width:0px !important}.border-right-1{border-right-width:1px !important}.border-right-2{border-right-width:2px !important}.border-right-3{border-right-width:3px !important}.border-right-4{border-right-width:4px !important}.border-right-5{border-right-width:5px !important}.border-bottom-0{border-bottom-width:0px !important}.border-bottom-1{border-bottom-width:1px !important}.border-bottom-2{border-bottom-width:2px !important}.border-bottom-3{border-bottom-width:3px !important}.border-bottom-4{border-bottom-width:4px !important}.border-bottom-5{border-bottom-width:5px !important}.border-left-0{border-left-width:0px !important}.border-left-1{border-left-width:1px !important}.border-left-2{border-left-width:2px !important}.border-left-3{border-left-width:3px !important}.border-left-4{border-left-width:4px !important}.border-left-5{border-left-width:5px !important}.border-x-0{border-left-width:0px !important;border-right-width:0px !important}.border-y-0{border-top-width:0px !important;border-bottom-width:0px !important}.border-x-1{border-left-width:1px !important;border-right-width:1px !important}.border-y-1{border-top-width:1px !important;border-bottom-width:1px !important}.border-x-2{border-left-width:2px !important;border-right-width:2px !important}.border-y-2{border-top-width:2px !important;border-bottom-width:2px !important}.border-x-3{border-left-width:3px !important;border-right-width:3px !important}.border-y-3{border-top-width:3px !important;border-bottom-width:3px !important}.border-x-4{border-left-width:4px !important;border-right-width:4px !important}.border-y-4{border-top-width:4px !important;border-bottom-width:4px !important}.border-x-5{border-left-width:5px !important;border-right-width:5px !important}.border-y-5{border-top-width:5px !important;border-bottom-width:5px !important}.radius-2{border-radius:2px !important}.radius-4{border-radius:4px !important}.radius-8{border-radius:8px !important}.radius-10{border-radius:10px !important}.radius-12{border-radius:12px !important}.radius-14{border-radius:14px !important}.radius-16{border-radius:16px !important}.radius-500{border-radius:500px !important}.border-solid{border-style:solid !important}.border-dashed{border-style:dashed !important}.border-dotted{border-style:dotted !important}.border-double{border-style:double !important}.border-groove{border-style:groove !important}.border-ridge{border-style:ridge !important}.cursor-alias{cursor:alias !important}.cursor-default{cursor:default !important}.cursor-grab{cursor:grab !important}.cursor-help{cursor:help !important}.cursor-move{cursor:move !important}.cursor-pointer{cursor:pointer !important}.cursor-wait{cursor:wait !important}.cursor-zoom-in{cursor:zoom-in !important}.cursor-zoom-out{cursor:zoom-out !important}.filter-invert{filter:invert(100%)}.filter-gray{filter:grayscale(100%)}.display-inline{display:inline !important}.display-flex{display:flex !important}.display-inline-flex{display:inline-flex !important}.display-grid{display:grid !important}.display-inline-grid{display:inline-grid !important}.display-block{display:block !important}.display-inline-block{display:inline-block !important}.display-table{display:table !important}.display-inline-table{display:inline-table !important}.display-table-row{display:table-row !important}.display-table-column{display:table-column !important}.display-table-cell{display:table-cell !important}.flex-1{flex:1 1 0% !important}.flex-auto{flex:1 1 auto !important}.flex-initial{flex:0 1 auto !important}.flex-none{flex:none !important}.flex-direction-row{flex-direction:row !important}.flex-direction-row-reverse{flex-direction:row-reverse !important}.flex-direction-column{flex-direction:column !important}.flex-direction-column-reverse{flex-direction:column-reverse !important}.flex-direction-initial{flex-direction:initial !important}.flex-direction-inherit{flex-direction:inherit !important}.flex-grow{flex-grow:1 !important}.flex-grow-0{flex-grow:0 !important}.flex-shrink{flex-shrink:1 !important}.flex-shrink-0{flex-shrink:0 !important}.flex-wrap{flex-wrap:wrap !important}.flex-wrap-reverse{flex-wrap:wrap-reverse !important}.flex-nowrap{flex-wrap:nowrap !important}.float-right{float:right !important}.float-left{float:left !important}.float-none{float:none !important}.mini-text{font-size:60% !important}.tiny-text{font-size:73% !important}.small-text{font-size:85% !important}.large-text{font-size:120% !important}.big-text{font-size:175% !important}.huge-text{font-size:200% !important}.giant-text{font-size:350% !important}.weight-100{font-weight:100 !important}.weight-200{font-weight:200 !important}.weight-300{font-weight:300 !important}.weight-400{font-weight:400 !important}.weight-500{font-weight:500 !important}.weight-600{font-weight:600 !important}.weight-700{font-weight:700 !important}.weight-800{font-weight:800 !important}.weight-900{font-weight:900 !important}.weight-normal{font-weight:normal !important}.weight-bold{font-weight:bold !important}.weight-bolder{font-weight:bolder !important}.weight-lighter{font-weight:lighter !important}.height-min-content{height:min-content !important}.height-max-content{height:max-content !important}.height-fit-content{height:fit-content !important}.height-25{height:25% !important}.height-50{height:50% !important}.height-75{height:75% !important}.height-100{height:100% !important}.tiny-height{height:1rem !important}.mini-height{height:2rem !important}.small-height{height:4rem !important}.large-height{height:8rem !important}.big-height{height:10rem !important}.huge-height{height:12rem !important}.massive-height{height:18rem !important}.giant-height{height:24rem !important}.top-0{top:0}.top-auto{top:auto}.bottom-0{bottom:0}.bottom-auto{bottom:auto}.left-0{left:0}.left-auto{left:auto}.right-0{right:0}.right-auto{right:auto}.justify-content-baseline{justify-content:baseline !important}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.justify-content-between{justify-content:space-between !important}.justify-content-around{justify-content:space-around !important}.justify-content-initial{justify-content:initial !important}.justify-content-inherit{justify-content:inherit !important}.justify-items-stretch{justify-items:stretch !important}.justify-items-start{justify-items:start !important}.justify-items-left{justify-items:left !important}.justify-items-center{justify-items:center !important}.justify-items-end{justify-items:end !important}.justify-items-right{justify-items:right !important}.justify-items-initial{justify-items:initial !important}.justify-items-inherit{justify-items:inherit !important}.justify-self-auto{justify-self:auto !important}.justify-self-normal{justify-self:normal !important}.justify-self-stretch{justify-self:stretch !important}.justify-self-start{justify-self:start !important}.justify-self-left{justify-self:left !important}.justify-self-center{justify-self:center !important}.justify-self-end{justify-self:end !important}.justify-self-right{justify-self:right !important}.justify-self-first-baseline{justify-self:first baseline !important}.justify-self-last-baseline{justify-self:last baseline !important}.justify-self-initial{justify-self:initial !important}.justify-self-inherit{justify-self:inherit !important}.line-height-0{line-height:0 !important}.line-height-1{line-height:1 !important}.line-height-2{line-height:2 !important}.line-height-3{line-height:3 !important}.line-height-4{line-height:4 !important}.line-height-5{line-height:5 !important}.m-0{margin:0px !important}.m-5{margin:5px !important}.m-10{margin:10px !important}.m-15{margin:15px !important}.m-20{margin:20px !important}.m-30{margin:30px !important}.m-40{margin:40px !important}.m-50{margin:50px !important}.m-75{margin:75px !important}.m-100{margin:100px !important}.m-125{margin:125px !important}.m-150{margin:150px !important}.m-175{margin:175px !important}.m-200{margin:200px !important}.mt-0{margin-top:0px !important}.mt-5{margin-top:5px !important}.mt-10{margin-top:10px !important}.mt-15{margin-top:15px !important}.mt-20{margin-top:20px !important}.mt-30{margin-top:30px !important}.mt-40{margin-top:40px !important}.mt-50{margin-top:50px !important}.mt-75{margin-top:75px !important}.mt-100{margin-top:100px !important}.mt-125{margin-top:125px !important}.mt-150{margin-top:150px !important}.mt-175{margin-top:175px !important}.mt-200{margin-top:200px !important}.mr-0{margin-right:0px !important}.mr-5{margin-right:5px !important}.mr-10{margin-right:10px !important}.mr-15{margin-right:15px !important}.mr-20{margin-right:20px !important}.mr-30{margin-right:30px !important}.mr-40{margin-right:40px !important}.mr-50{margin-right:50px !important}.mr-75{margin-right:75px !important}.mr-100{margin-right:100px !important}.mr-125{margin-right:125px !important}.mr-150{margin-right:150px !important}.mr-175{margin-right:175px !important}.mr-200{margin-right:200px !important}.mb-0{margin-bottom:0px !important}.mb-5{margin-bottom:5px !important}.mb-10{margin-bottom:10px !important}.mb-15{margin-bottom:15px !important}.mb-20{margin-bottom:20px !important}.mb-30{margin-bottom:30px !important}.mb-40{margin-bottom:40px !important}.mb-50{margin-bottom:50px !important}.mb-75{margin-bottom:75px !important}.mb-100{margin-bottom:100px !important}.mb-125{margin-bottom:125px !important}.mb-150{margin-bottom:150px !important}.mb-175{margin-bottom:175px !important}.mb-200{margin-bottom:200px !important}.ml-0{margin-left:0px !important}.ml-5{margin-left:5px !important}.ml-10{margin-left:10px !important}.ml-15{margin-left:15px !important}.ml-20{margin-left:20px !important}.ml-30{margin-left:30px !important}.ml-40{margin-left:40px !important}.ml-50{margin-left:50px !important}.ml-75{margin-left:75px !important}.ml-100{margin-left:100px !important}.ml-125{margin-left:125px !important}.ml-150{margin-left:150px !important}.ml-175{margin-left:175px !important}.ml-200{margin-left:200px !important}.m-tiny{margin:1rem !important}.m-mini{margin:2rem !important}.m-small{margin:4rem !important}.m-large{margin:8rem !important}.m-big{margin:10rem !important}.m-huge{margin:12rem !important}.m-massive{margin:18rem !important}.m-giant{margin:24rem !important}.mt-tiny{margin-top:1rem !important}.mt-mini{margin-top:2rem !important}.mt-small{margin-top:4rem !important}.mt-large{margin-top:8rem !important}.mt-big{margin-top:10rem !important}.mt-huge{margin-top:12rem !important}.mt-massive{margin-top:18rem !important}.mt-giant{margin-top:24rem !important}.mr-tiny{margin-right:1rem !important}.mr-mini{margin-right:2rem !important}.mr-small{margin-right:4rem !important}.mr-large{margin-right:8rem !important}.mr-big{margin-right:10rem !important}.mr-huge{margin-right:12rem !important}.mr-massive{margin-right:18rem !important}.mr-giant{margin-right:24rem !important}.mb-tiny{margin-bottom:1rem !important}.mb-mini{margin-bottom:2rem !important}.mb-small{margin-bottom:4rem !important}.mb-large{margin-bottom:8rem !important}.mb-big{margin-bottom:10rem !important}.mb-huge{margin-bottom:12rem !important}.mb-massive{margin-bottom:18rem !important}.mb-giant{margin-bottom:24rem !important}.ml-tiny{margin-left:1rem !important}.ml-mini{margin-left:2rem !important}.ml-small{margin-left:4rem !important}.ml-large{margin-left:8rem !important}.ml-big{margin-left:10rem !important}.ml-huge{margin-left:12rem !important}.ml-massive{margin-left:18rem !important}.ml-giant{margin-left:24rem !important}.m-auto{margin:auto !important}.mt-auto{margin-top:auto !important}.mr-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ml-auto{margin-left:auto !important}.fit-fill{object-fit:fill !important}.fit-contain{object-fit:contain !important}.fit-cover{object-fit:cover !important}.fit-none{object-fit:none !important}.fit-scale-down{object-fit:scale-down !important}.fit-initial{object-fit:initial !important}.fit-inherit{object-fit:inherit !important}.order-1{order:1 !important}.order-2{order:2 !important}.order-3{order:3 !important}.order-4{order:4 !important}.order-5{order:5 !important}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-visible{overflow-x:visible}.overflow-x-scroll{overflow-x:scroll}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-visible{overflow-y:visible}.overflow-y-scroll{overflow-y:scroll}.p-0{padding:0px !important}.p-5{padding:5px !important}.p-10{padding:10px !important}.p-15{padding:15px !important}.p-20{padding:20px !important}.p-30{padding:30px !important}.p-40{padding:40px !important}.p-50{padding:50px !important}.p-75{padding:75px !important}.p-100{padding:100px !important}.p-125{padding:125px !important}.p-150{padding:150px !important}.p-175{padding:175px !important}.p-200{padding:200px !important}.pt-0{padding-top:0px !important}.pt-5{padding-top:5px !important}.pt-10{padding-top:10px !important}.pt-15{padding-top:15px !important}.pt-20{padding-top:20px !important}.pt-30{padding-top:30px !important}.pt-40{padding-top:40px !important}.pt-50{padding-top:50px !important}.pt-75{padding-top:75px !important}.pt-100{padding-top:100px !important}.pt-125{padding-top:125px !important}.pt-150{padding-top:150px !important}.pt-175{padding-top:175px !important}.pt-200{padding-top:200px !important}.pr-0{padding-right:0px !important}.pr-5{padding-right:5px !important}.pr-10{padding-right:10px !important}.pr-15{padding-right:15px !important}.pr-20{padding-right:20px !important}.pr-30{padding-right:30px !important}.pr-40{padding-right:40px !important}.pr-50{padding-right:50px !important}.pr-75{padding-right:75px !important}.pr-100{padding-right:100px !important}.pr-125{padding-right:125px !important}.pr-150{padding-right:150px !important}.pr-175{padding-right:175px !important}.pr-200{padding-right:200px !important}.pb-0{padding-bottom:0px !important}.pb-5{padding-bottom:5px !important}.pb-10{padding-bottom:10px !important}.pb-15{padding-bottom:15px !important}.pb-20{padding-bottom:20px !important}.pb-30{padding-bottom:30px !important}.pb-40{padding-bottom:40px !important}.pb-50{padding-bottom:50px !important}.pb-75{padding-bottom:75px !important}.pb-100{padding-bottom:100px !important}.pb-125{padding-bottom:125px !important}.pb-150{padding-bottom:150px !important}.pb-175{padding-bottom:175px !important}.pb-200{padding-bottom:200px !important}.pl-0{padding-left:0px !important}.pl-5{padding-left:5px !important}.pl-10{padding-left:10px !important}.pl-15{padding-left:15px !important}.pl-20{padding-left:20px !important}.pl-30{padding-left:30px !important}.pl-40{padding-left:40px !important}.pl-50{padding-left:50px !important}.pl-75{padding-left:75px !important}.pl-100{padding-left:100px !important}.pl-125{padding-left:125px !important}.pl-150{padding-left:150px !important}.pl-175{padding-left:175px !important}.pl-200{padding-left:200px !important}.p-tiny{padding:1rem !important}.p-mini{padding:2rem !important}.p-small{padding:4rem !important}.p-large{padding:8rem !important}.p-big{padding:10rem !important}.p-huge{padding:12rem !important}.p-massive{padding:18rem !important}.p-giant{padding:24rem !important}.pt-tiny{padding-top:1rem !important}.pt-mini{padding-top:2rem !important}.pt-small{padding-top:4rem !important}.pt-large{padding-top:8rem !important}.pt-big{padding-top:10rem !important}.pt-huge{padding-top:12rem !important}.pt-massive{padding-top:18rem !important}.pt-giant{padding-top:24rem !important}.pr-tiny{padding-right:1rem !important}.pr-mini{padding-right:2rem !important}.pr-small{padding-right:4rem !important}.pr-large{padding-right:8rem !important}.pr-big{padding-right:10rem !important}.pr-huge{padding-right:12rem !important}.pr-massive{padding-right:18rem !important}.pr-giant{padding-right:24rem !important}.pb-tiny{padding-bottom:1rem !important}.pb-mini{padding-bottom:2rem !important}.pb-small{padding-bottom:4rem !important}.pb-large{padding-bottom:8rem !important}.pb-big{padding-bottom:10rem !important}.pb-huge{padding-bottom:12rem !important}.pb-massive{padding-bottom:18rem !important}.pb-giant{padding-bottom:24rem !important}.pl-tiny{padding-left:1rem !important}.pl-mini{padding-left:2rem !important}.pl-small{padding-left:4rem !important}.pl-large{padding-left:8rem !important}.pl-big{padding-left:10rem !important}.pl-huge{padding-left:12rem !important}.pl-massive{padding-left:18rem !important}.pl-giant{padding-left:24rem !important}.p-auto{padding:auto !important}.pt-auto{padding-top:auto !important}.pr-auto{padding-right:auto !important}.pb-auto{padding-bottom:auto !important}.pl-auto{padding-left:auto !important}.place-content-stretch{place-content:stretch !important}.place-content-start{place-content:start !important}.place-content-end{place-content:end !important}.place-content-center{place-content:center !important}.place-content-between{place-content:space-between !important}.place-content-around{place-content:space-around !important}.place-content-evenly{place-content:space-evenly !important}.place-content-initial{place-content:initial !important}.place-content-inherit{place-content:inherit !important}.place-items-stretch{place-items:stretch !important}.place-items-start{place-items:start !important}.place-items-end{place-items:end !important}.place-items-center{place-items:center !important}.place-items-baseline{place-items:baseline !important}.place-self-auto{place-self:auto !important}.place-self-stretch{place-self:stretch !important}.place-self-start{place-self:start !important}.place-self-left{place-self:left !important}.place-self-center{place-self:center !important}.place-self-end{place-self:end !important}.place-self-right{place-self:right !important}.position-static{position:static !important}.position-absolute{position:absolute !important}.position-fixed{position:fixed !important}.position-relative{position:relative !important}.position-sticky{position:sticky !important}.position-initial{position:initial !important}.position-inherit{position:inherit !important}.resize-none{resize:none !important}.resize-both{resize:both !important}.resize-horizontal{resize:horizontal !important}.resize-vertical{resize:vertical !important}.resize-initial{resize:initial !important}.resize-inherit{resize:inherit !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-justify{text-align:justify !important}.text-start{text-align:start !important}.text-end{text-align:end !important}.color-grey{color:#979797 !important}.color-white{color:white !important}.color-black{color:black !important}.color-primary{color:#314a93 !important}.color-success{color:#297d51 !important}.color-warning{color:#956d28 !important}.color-error{color:#972727 !important}.color-grey-darken-5{color:#8f8f8f !important}.color-grey-lighten-5{color:#9c9c9c !important}.color-white-darken-5{color:#f2f2f2 !important}.color-white-lighten-5{color:#fff !important}.color-black-darken-5{color:#000 !important}.color-black-lighten-5{color:#0d0d0d !important}.color-primary-darken-5{color:#2f468c !important}.color-primary-lighten-5{color:#3b5398 !important}.color-success-darken-5{color:#27774d !important}.color-success-lighten-5{color:#34845a !important}.color-warning-darken-5{color:#8e6826 !important}.color-warning-lighten-5{color:#9a7433 !important}.color-error-darken-5{color:#8f2525 !important}.color-error-lighten-5{color:#9c3232 !important}.color-grey-darken-10{color:#888 !important}.color-grey-lighten-10{color:#a1a1a1 !important}.color-white-darken-10{color:#e6e6e6 !important}.color-white-lighten-10{color:#fff !important}.color-black-darken-10{color:#000 !important}.color-black-lighten-10{color:#1a1a1a !important}.color-primary-darken-10{color:#2c4384 !important}.color-primary-lighten-10{color:#465c9e !important}.color-success-darken-10{color:#257149 !important}.color-success-lighten-10{color:#3e8a62 !important}.color-warning-darken-10{color:#866224 !important}.color-warning-lighten-10{color:#a07c3e !important}.color-error-darken-10{color:#882323 !important}.color-error-lighten-10{color:#a13d3d !important}.color-grey-darken-15{color:gray !important}.color-grey-lighten-15{color:#a7a7a7 !important}.color-white-darken-15{color:#d9d9d9 !important}.color-white-lighten-15{color:#fff !important}.color-black-darken-15{color:#000 !important}.color-black-lighten-15{color:#262626 !important}.color-primary-darken-15{color:#2a3f7d !important}.color-primary-lighten-15{color:#5065a3 !important}.color-success-darken-15{color:#236a45 !important}.color-success-lighten-15{color:#49916b !important}.color-warning-darken-15{color:#7f5d22 !important}.color-warning-lighten-15{color:#a58348 !important}.color-error-darken-15{color:#802121 !important}.color-error-lighten-15{color:#a74747 !important}.color-grey-darken-20{color:#797979 !important}.color-grey-lighten-20{color:#acacac !important}.color-white-darken-20{color:#ccc !important}.color-white-lighten-20{color:#fff !important}.color-black-darken-20{color:#000 !important}.color-black-lighten-20{color:#333 !important}.color-primary-darken-20{color:#273b76 !important}.color-primary-lighten-20{color:#5a6ea9 !important}.color-success-darken-20{color:#216441 !important}.color-success-lighten-20{color:#549774 !important}.color-warning-darken-20{color:#775720 !important}.color-warning-lighten-20{color:#aa8a53 !important}.color-error-darken-20{color:#791f1f !important}.color-error-lighten-20{color:#ac5252 !important}.color-grey-darken-25{color:#717171 !important}.color-grey-lighten-25{color:#b1b1b1 !important}.color-white-darken-25{color:#bfbfbf !important}.color-white-lighten-25{color:#fff !important}.color-black-darken-25{color:#000 !important}.color-black-lighten-25{color:#404040 !important}.color-primary-darken-25{color:#25386e !important}.color-primary-lighten-25{color:#6577ae !important}.color-success-darken-25{color:#1f5e3d !important}.color-success-lighten-25{color:#5f9e7d !important}.color-warning-darken-25{color:#70521e !important}.color-warning-lighten-25{color:#b0925e !important}.color-error-darken-25{color:#711d1d !important}.color-error-lighten-25{color:#b15d5d !important}.color-grey-darken-30{color:#6a6a6a !important}.color-grey-lighten-30{color:#b6b6b6 !important}.color-white-darken-30{color:#b3b3b3 !important}.color-white-lighten-30{color:#fff !important}.color-black-darken-30{color:#000 !important}.color-black-lighten-30{color:#4d4d4d !important}.color-primary-darken-30{color:#223467 !important}.color-primary-lighten-30{color:#6f80b3 !important}.color-success-darken-30{color:#1d5839 !important}.color-success-lighten-30{color:#69a485 !important}.color-warning-darken-30{color:#684c1c !important}.color-warning-lighten-30{color:#b59969 !important}.color-error-darken-30{color:#6a1b1b !important}.color-error-lighten-30{color:#b66868 !important}.color-grey-darken-35{color:#626262 !important}.color-grey-lighten-35{color:#bbb !important}.color-white-darken-35{color:#a6a6a6 !important}.color-white-lighten-35{color:#fff !important}.color-black-darken-35{color:#000 !important}.color-black-lighten-35{color:#595959 !important}.color-primary-darken-35{color:#203060 !important}.color-primary-lighten-35{color:#7989b9 !important}.color-success-darken-35{color:#1b5135 !important}.color-success-lighten-35{color:#74ab8e !important}.color-warning-darken-35{color:#61471a !important}.color-warning-lighten-35{color:#baa073 !important}.color-error-darken-35{color:#621919 !important}.color-error-lighten-35{color:#bb7373 !important}.underline{text-decoration:underline !important}.overline{text-decoration:overline !important}.line-through{text-decoration:line-through !important}.text-uppercase{text-transform:uppercase !important}.text-lowercase{text-transform:lowercase !important}.text-capitalize{text-transform:capitalize !important}.user-select-none{user-select:none !important}.user-select-auto{user-select:auto !important}.user-select-text{user-select:text !important}.user-select-all{user-select:all !important}.width-min-content{width:min-content !important}.width-max-content{width:max-content !important}.width-fit-content{width:fit-content !important}.width-25{width:25% !important}.width-33{width:33% !important}.width-50{width:50% !important}.width-66{width:66% !important}.width-75{width:75% !important}.width-100{width:100% !important}.tiny-width{width:1rem !important}.mini-width{width:2rem !important}.small-width{width:4rem !important}.large-width{width:8rem !important}.big-width{width:10rem !important}.huge-width{width:12rem !important}.massive-width{width:18rem !important}.giant-width{width:24rem !important}.z--1{z-index:-1 !important}.z-0{z-index:0 !important}.z-1{z-index:1 !important}.z-10{z-index:10 !important}.z-20{z-index:20 !important}.z-30{z-index:30 !important}.z-40{z-index:40 !important}.z-50{z-index:50 !important}.z-100{z-index:100 !important}.z-999{z-index:999 !important}.z-9999{z-index:9999 !important}.z-99999{z-index:99999 !important}.centered{margin:0 auto}.align.right{text-align:right !important}.align.left{text-align:left !important}.align.center{text-align:center !important}.align.justify{text-align:justify !important}.float.right{float:right}.float.left{float:left}.full.width{width:100%;max-width:100%;min-width:100%}.full.height{height:100%;min-height:100%;max-height:100%}.vh-100{height:100vh}.vw-100{width:100vw}.ungap{gap:0}.fade{opacity:0}.hide{display:none !important}.spacer{flex-grow:1 !important;outline:none}.avatar{display:inline-block;border-radius:50%}.reset{padding:0 !important;margin:0 !important}.reverse{transform:rotateY(180deg);unicode-bidi:bidi-override;direction:rtl}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transparent{background:rgba(0,0,0,0) !important}.pure,.pure>div{background:rgba(0,0,0,0) !important;border:none;box-shadow:none !important}[disabled],:disabled,.disabled{opacity:.49;cursor:default;pointer-events:none}.bordered{border:1px solid #c6c6c6}.borderless{border:none !important}.rounded{border-radius:4px}.radiusless{border-radius:0 !important}.shadowed{box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}.shadowless{box-shadow:none !important}.inset-0{top:0;right:0;bottom:0;left:0}.inset-auto{top:auto;right:auto;bottom:auto;left:auto} diff --git a/package.json b/package.json deleted file mode 100644 index 60a37542..00000000 --- a/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "Punica-CSS-Framework", - "description": "Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support.", - "version": "2.8.20", - "homepage": "http://www.punicacss.com/", - "author": "CodeForms (https://github.com/codeforms)", - "license": "MIT", - "keywords": [ - "css", "framework", "sass", "responsive", "customizable", "multi-theme" - ], - "scripts": { - "prod": "sass src/punica.scss dist/punica.min.css --no-source-map --style compressed", - "unminify": "sass src/punica.scss dist/punica.css --no-source-map", - "watch": "npm run prod -- -w" - }, - "dependencies": { - "dart-sass": "^1.25.0" - } -} diff --git a/src/_global/_getters.scss b/src/Core/Global/Getters.scss similarity index 65% rename from src/_global/_getters.scss rename to src/Core/Global/Getters.scss index f6114b9b..8fe367e5 100644 --- a/src/_global/_getters.scss +++ b/src/Core/Global/Getters.scss @@ -1,9 +1,11 @@ /// -/// Punica CSS Framework : Global Getter Functions +/// Punica CSS Framework +/// Core/Global/Getters.scss /// -@use "../options" as option; -@use "../classnames" as class; +@use "../../options" as option; +@use "../../classnames" as class; +@use "Helpers"; /// /// Get options value by key @@ -15,7 +17,8 @@ /// /// @return boolean /// -@function options($keys...) { +@function options($keys...) +{ @if null == map-get(option.$options, nth($keys, 1)) { @return debug-message("#{nth($keys, 1)}", 'options'); } @@ -43,7 +46,8 @@ } /// -/// Get component/element variables from options +/// Get default variable of a specific component/element +/// from the options.scss API file /// /// @param {String} $node /// @param {String} $key(s) @@ -53,7 +57,8 @@ /// /// @return mixed /// -@function variables($node, $keys...) { +@function variables($node, $keys...) +{ $variables: map-get(map-get(options($node), 'variables'), nth($keys, 1)); @if null == $variables { @@ -72,7 +77,8 @@ } /// -/// Get class name +/// Get class name of a specific component/element +/// from the classnames.scss API file /// /// @param {String} $node /// @param {String} $key @@ -82,7 +88,8 @@ /// /// @return string /// -@function class($node, $key) { +@function class($node, $key) +{ @if null == map-get(class.$classnames, $node) { @return debug-message("#{$node}", 'classnames'); } @@ -94,41 +101,4 @@ } @return map-get($classnames, $key); -} - -///////////////////////////////////////////////////////// -/// Helper Functions -///////////////////////////////////////////////////////// -/// -/// Debugging title -/// -/// @return string -/// -@function debug-title() { - @return '[ INVALID KEY ] :'; -} - -/// -/// Debugging text -/// -/// @param {String} $file -/// -/// @return text -/// -@function debug-text($file) { - @return 'key is not found in the #{$file}.scss API file.'; -} - -/// -/// Debugging message -/// -/// @param {Text} $message -/// @param {String} $file -/// -/// @return text -/// -@function debug-message($message, $file) { - $message: debug-title() + ' " #{$message} " ' + debug-text($file); - - @warn $message; @error $message; } \ No newline at end of file diff --git a/src/Core/Global/Helpers.scss b/src/Core/Global/Helpers.scss new file mode 100644 index 00000000..a61ee8a3 --- /dev/null +++ b/src/Core/Global/Helpers.scss @@ -0,0 +1,41 @@ +/// +/// Punica CSS Framework +/// Core/Global/Helpers.scss +// + +/// +/// Debugging title +/// +/// @return string +/// +@function debug-title() +{ + @return '[ INVALID KEY ] :'; +} + +/// +/// Debugging text +/// +/// @param {String} $file +/// +/// @return text +/// +@function debug-text($file) +{ + @return 'key is not found in the #{$file}.scss API file.'; +} + +/// +/// Debugging message +/// +/// @param {Text} $message +/// @param {String} $file +/// +/// @return text +/// +@function debug-message($message, $file) +{ + $message: debug-title() + ' " #{$message} " ' + debug-text($file); + + @warn $message; @error $message; +} \ No newline at end of file diff --git a/src/_global/mixins.scss b/src/Core/Global/Mixins.scss similarity index 93% rename from src/_global/mixins.scss rename to src/Core/Global/Mixins.scss index ea9007e6..ad773a8d 100644 --- a/src/_global/mixins.scss +++ b/src/Core/Global/Mixins.scss @@ -1,8 +1,9 @@ /// -/// Punica CSS Framework : Global Mixins +/// Punica CSS Framework +/// Core/Global/Mixins.scss /// -@use "variables"; +@use "Variables" as variables; /// /// Breakpoints diff --git a/src/_global/variables.scss b/src/Core/Global/Variables.scss similarity index 87% rename from src/_global/variables.scss rename to src/Core/Global/Variables.scss index 529cd239..1779772a 100644 --- a/src/_global/variables.scss +++ b/src/Core/Global/Variables.scss @@ -1,5 +1,6 @@ /// -/// Punica CSS Framework : Global Variables +/// Punica CSS Framework +/// Core/Global/Variables.scss /// /// diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss new file mode 100644 index 00000000..b96e8331 --- /dev/null +++ b/src/Core/Theme/Getters.scss @@ -0,0 +1,168 @@ +/// +/// Punica CSS Framework +/// Core/Theme/Getters.scss +/// + +@use "../../options" as option; +@use "../Global/Getters" as get; + +/// +/// Get Active Theme +/// @param {String} $theme +/// +@mixin get-theme($theme: 'default') +{ + $set-theme: if(map-has-key(themes.$themes, $theme), $theme, theme-not-found($theme)); + $theme-map: map-get(themes.$themes, $set-theme) !global; + @content; + $theme-map: null !global; +} + +/// +/// Get active theme's value by key(s) +/// +/// @param {String} $node +/// @param {String} $key +/// @param {String} $child +/// @param {String} $sub +/// +/// @example theme('name') +/// @example theme('color', 'primary') +/// @example theme('elements', 'button', 'font-weight') +/// @example theme('elements', 'button', 'secondary', 'background') +/// +/// @return mixed +/// +@function theme($node, $key: null, $child: null, $sub: null) +{ + $value: if(map-has-key($theme-map, $node), map-get($theme-map, $node), null); + + @if ($value != null) and $key { + $value: if(map-has-key($value, $key), map-get($value, $key), null); + + @if ($value != null) and $child { + $value: if(map-has-key($value, $child), map-get($value, $child), null); + + @if ($value != null) and $sub { + $value: if(map-has-key($value, $sub), map-get($value, $sub), null); + } + } + } + + @return $value; +} + +/// +/// Get a specific component's variable +/// +/// @param {String(s)} $keys +/// +/// @return mixed +/// +@function components($keys...) +{ + @return set_variable('components', $keys...); +} + +/// +/// Get a specific element's variable +/// +/// @param {String(s)} $keys +/// +/// @return mixed +/// +@function elements($keys...) +{ + @return set_variable('elements', $keys...); +} + +/// +/// Get features of Component/Elements +/// from theme map or options.scss API file +/// +/// @param {String} $node +/// @param {String} $module +/// @param {String} $feature +/// +/// @return bool +/// +@function features($node, $module, $feature : null) +{ + @if theme($node, $module, 'features', $feature) != null { + @return theme($node, $module, 'features', $feature); + }; + + @return map-get(map-get(get.options($module), 'features'), $feature); +} + +/// +/// Is component/element enabled? +/// +/// @param {String} $node +/// @param {String} $module +/// +/// @return bool +/// +@function enabled($node, $module) +{ + @if theme($node, $module, 'enabled') != null { + @return theme($node, $module, 'enabled'); + }; + + @return get.options($module, 'enabled'); +} + +/// +/// Set variable +/// +/// @param {String} $module +/// @param {String(s)} $keys +/// +/// @return mixed +/// +@function set_variable($module, $keys...) +{ + @if theme($module, nth($keys, 1), nth($keys, 2)) { + $value : theme($module, nth($keys, 1), nth($keys, 2)); + + @if length($keys) > 2 { + $value: theme($module, nth($keys, 1), nth($keys, 2), nth($keys, 3)); + } + + @if($value != null) { + @return $value + }; + + @return get_default_variable($keys); + } @else { + @return get_default_variable($keys); + } +} + +/// +/// Get default variables +/// from the options.scss API file +/// +/// @param {String(s)} $keys +/// +/// @return mixed +/// +@function get_default_variable($keys) +{ + $value: get.variables(nth($keys, 1), nth($keys, 2)); + + @if length($keys) > 2 { + $value: get.variables(nth($keys, 1), nth($keys, 2), nth($keys, 3)); + } + + @return $value; +}; + +/// +/// @param {String} $theme +/// +@function theme-not-found($theme) +{ + $error: "Invalid theme name: #{$theme}. Punica's theme map does not contains a value associated with #{$theme}. Please check the 'themes.scss' file."; + @error $error; +} \ No newline at end of file diff --git a/src/_themes/_setters.scss b/src/Core/Theme/Setters.scss similarity index 94% rename from src/_themes/_setters.scss rename to src/Core/Theme/Setters.scss index 75c5fcbf..ad68aabf 100644 --- a/src/_themes/_setters.scss +++ b/src/Core/Theme/Setters.scss @@ -1,8 +1,9 @@ /// -/// Punica CSS Framework : Theme Setter Functions +/// Punica CSS Framework +/// Core/Theme/Setters.scss /// -@use "_getters" as *; +@use "Getters" as *; /// /// Shadow @@ -49,7 +50,8 @@ /// /// Set default border /// -@function set-border() { +@function set-border() +{ @return theme('border', 'width') theme('border', 'style') theme('border', 'color'); }; diff --git a/src/Elements/Icon/Icon.scss b/src/Elements/Icon/Icon.scss deleted file mode 100644 index 93d79cc3..00000000 --- a/src/Elements/Icon/Icon.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Icon -/// - -@use "../../_global/_getters" as *; - -/// if icon is enable -@if options('icon', 'enable') { - .#{class('icon', 'class-name')} { - font-size: variables('icon', 'font-size'); - line-height: variables('icon', 'line-height'); - vertical-align: variables('icon', 'vertical-align'); - } -} \ No newline at end of file diff --git a/src/Elements/Icon/variables.scss b/src/Elements/Icon/variables.scss deleted file mode 100644 index 9ec465ac..00000000 --- a/src/Elements/Icon/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Icon -> Variables -/// \ No newline at end of file diff --git a/src/Layout/Grid/Grid.scss b/src/Layout/Grid/Grid.scss deleted file mode 100644 index 200a4b76..00000000 --- a/src/Layout/Grid/Grid.scss +++ /dev/null @@ -1,68 +0,0 @@ -/// -/// Punica CSS Framework -/// Layout : Grid -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "variables" as *; - -/// if grid is enable -@if options('grid', 'enable') { - .#{class('grid', 'container')} { - width: variables('grid', 'container', 'width'); - margin: variables('grid', 'container', 'margin'); - padding: 0 variables('grid', 'container', 'padding'); - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('grid', 'container')} { - padding: 0 calc(variables('grid', 'container', 'padding') / 3); - } - } - .#{class('grid', 'row')} { - display: grid; - grid-gap: variables('grid', 'gap'); - grid-template-columns: repeat(variables('grid', 'columns', 'size'), 1fr); - &> [class^="#{class('grid', 'column')}"] { - height: fit-content; - padding: variables('grid', 'columns', 'padding'); - min-height: variables('grid', 'columns', 'min-height'); - } - /// Equal height - @if options('grid', 'features', 'equal') { - &.#{class('grid', 'equal')} > [class^="#{class('grid', 'column')}"] { - height: auto; - } - } - } - // Default Grid System - @for $id from 1 through variables('grid', 'columns', 'size') { - .#{class('grid', 'column')}-#{$id} { - grid-column: span #{$id}; - } - } - // Breakpoints - @each $label, $breakpoint in $viewports { - @include breakpoints($breakpoint) { - @for $id from 1 through variables('grid', 'columns', 'size') { - .#{class('grid', 'column')}-#{$label}-#{$id} { - grid-column: span #{$id}; - } - } - } - } - // Offset - @if options('grid', 'features', 'offset') { - @each $label, $breakpoint in $viewports { - @include breakpoints($breakpoint) { - @for $id from 1 through variables('grid', 'columns', 'size') { - @for $offset-id from 2 through variables('grid', 'columns', 'size') { - .#{class('grid', 'column')}-#{$label}-#{$id}.#{class('grid', 'offset')}-#{$label}-#{$offset-id} { - grid-column: #{$offset-id} / span #{$id}; - } - } - } - } - } - } -} diff --git a/src/Layout/Grid/variables.scss b/src/Layout/Grid/variables.scss deleted file mode 100644 index 3fae7132..00000000 --- a/src/Layout/Grid/variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -/// -/// Punica CSS Framework -/// Layout : Grid -> Variables -/// - -@use "../../_global/_getters" as *; - -/// PREFERENCES ========================================= -$viewports: ( - (class('grid', 'extra-small'), variables('grid', 'breakpoints', 'extra-small')), - (class('grid', 'small'), variables('grid', 'breakpoints', 'small')), - (class('grid', 'medium'), variables('grid', 'breakpoints', 'medium')), - (class('grid', 'large'), variables('grid', 'breakpoints', 'large')), - (class('grid', 'extra-large'), variables('grid', 'breakpoints', 'extra-large')), - (class('grid', 'extra-extra-large'), variables('grid', 'breakpoints', 'extra-extra-large')) -); diff --git a/src/Layout/index.scss b/src/Layout/index.scss deleted file mode 100644 index 21eb7179..00000000 --- a/src/Layout/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -/// -/// Punica CSS Framework -/// Layout -/// - -@forward "Base/Base"; -@forward "Grid/Grid"; \ No newline at end of file diff --git a/src/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss similarity index 68% rename from src/Components/Alert/Alert.scss rename to src/Modules/Components/Alert/Alert.scss index 7122e1cd..a2029a8a 100644 --- a/src/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -3,21 +3,21 @@ /// Components : Alert /// -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if alert is enable -@if options('alert', 'enable') { +@if enabled('components', 'alert') { .#{class('alert', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { display: block; @include border(); border-radius: theme('border', 'radius'); - padding: variables('alert', 'padding'); - margin: variables('alert', 'margin'); - width: variables('alert', 'width'); + padding: components('alert', 'padding'); + margin: components('alert', 'margin'); + width: components('alert', 'margin'); font-weight: bold; a { color: theme('color', 'text'); @@ -33,13 +33,13 @@ } >i, >.#{class('icon', 'class-name')} { - vertical-align: variables('alert', 'icon', 'vertical-align'); + vertical-align: components('alert', 'icon', 'vertical-align'); } } /// /// STYLES /// - @if options('alert', 'features', 'styles') { + @if features('components', 'alert', 'styles') { @each $style-name, $bg-color in variables.$styles { @include set-style($bg-color, theme('color', 'negative'), $style-name) { border-color: darken($bg-color, 5%); @@ -49,7 +49,7 @@ /// /// SIZES /// - @if options('alert', 'features', 'sizes') { + @if features('components', 'alert', 'sizes') { @each $size-name, $font-size, $padding in variables.$sizes { @include set-size($font-size, $padding, $size-name); } diff --git a/src/Components/Alert/variables.scss b/src/Modules/Components/Alert/variables.scss similarity index 93% rename from src/Components/Alert/variables.scss rename to src/Modules/Components/Alert/variables.scss index 60224975..4b5b1f9c 100644 --- a/src/Components/Alert/variables.scss +++ b/src/Modules/Components/Alert/variables.scss @@ -3,7 +3,7 @@ /// Components : Alert -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss similarity index 73% rename from src/Components/Badge/Badge.scss rename to src/Modules/Components/Badge/Badge.scss index 62bd4a98..1725a343 100644 --- a/src/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -3,13 +3,13 @@ /// Components : Badge /// -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if badge is enable -@if options('badge', 'enable') { +@if enabled('components', 'badge') { .#{class('badge', 'name')} { @include set-style(theme('color', 'secondary'), theme('color', 'text')) { position: relative; @@ -18,14 +18,14 @@ justify-content: center; align-items: center; font-weight: bold; - border-radius: variables('badge', 'border-radius'); + border-radius: components('badge', 'border-radius'); border: theme('border', 'width') theme('border', 'style') darken(theme('color', 'secondary'), 6.5%); }; @include set-size(1em, 1px 6px); /// /// STYLES /// - @if options('badge', 'features', 'styles') { + @if features('components', 'badge', 'styles') { @each $name, $bg-color in variables.$styles { @include set-style($bg-color, theme('color', 'negative'), $name) { border-color: darken($bg-color, 6.5%); @@ -35,7 +35,7 @@ /// /// SIZES /// - @if options('badge', 'features', 'sizes') { + @if features('components', 'badge', 'sizes') { @each $size-name, $font-size, $padding in variables.$sizes { @include set-size($font-size, $padding, $size-name); } diff --git a/src/Components/Badge/variables.scss b/src/Modules/Components/Badge/variables.scss similarity index 95% rename from src/Components/Badge/variables.scss rename to src/Modules/Components/Badge/variables.scss index 73812644..5be5d2d5 100644 --- a/src/Components/Badge/variables.scss +++ b/src/Modules/Components/Badge/variables.scss @@ -3,7 +3,7 @@ /// Components : Badge -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Billboard/Billboard.scss b/src/Modules/Components/Billboard/Billboard.scss similarity index 75% rename from src/Components/Billboard/Billboard.scss rename to src/Modules/Components/Billboard/Billboard.scss index 256fded1..67342747 100644 --- a/src/Components/Billboard/Billboard.scss +++ b/src/Modules/Components/Billboard/Billboard.scss @@ -3,28 +3,28 @@ /// Components : Billboard /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if billboard is enable -@if options('billboard', 'enable') { +@if enabled('components', 'billboard') { .#{class('billboard', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { display: flex; flex-direction: row; justify-content: space-between; align-items: center; - padding: variables('billboard', 'padding'); + padding: components('billboard', 'padding'); border-color: darken(theme('color', 'background'), 4.5%); @include border(); }; /// /// STYLES /// - @if options('billboard', 'features', 'styles') { + @if features('components', 'billboard', 'styles') { @each $style-name, $bg-color in variables.$styles { @include set-style($bg-color, theme('color', 'negative'), $style-name) { border-color: darken($bg-color, 4.5%); @@ -34,7 +34,7 @@ /// /// SIZES /// - @if options('billboard', 'features', 'sizes') { + @if features('components', 'billboard', 'sizes') { @each $size-name, $padding, $font-size in variables.$sizes { @include set-size($font-size, $padding, $size-name) { .#{class('billboard', 'body')} { @@ -50,7 +50,7 @@ flex: 0 0 auto; } .#{class('billboard', 'body')} { - padding: variables('billboard', 'body', 'padding'); + padding: components('billboard', 'body', 'padding'); flex: 1 1 auto; display: flex; justify-content: center; @@ -59,7 +59,7 @@ /// /// COVER /// - @if options('billboard', 'features', 'cover') { + @if features('components', 'billboard', 'cover') { &.#{class('billboard', 'cover')} { min-height: 100vh; max-height: 100%; @@ -74,7 +74,7 @@ /// /// /// - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(components('grid', 'breakpoints', 'medium'), 'max-width') { .#{class('billboard', 'name')} { padding: 2.5rem 1rem; flex-direction: column; @@ -89,7 +89,7 @@ /// /// SIZES /// - @if options('billboard', 'features', 'sizes') { + @if features('components', 'billboard', 'sizes') { @each $size, $padding, $font-size in variables.$responsive-sizes { &.#{$size} { padding: $padding; diff --git a/src/Components/Billboard/variables.scss b/src/Modules/Components/Billboard/variables.scss similarity index 95% rename from src/Components/Billboard/variables.scss rename to src/Modules/Components/Billboard/variables.scss index 89df6c2d..9ed90248 100644 --- a/src/Components/Billboard/variables.scss +++ b/src/Modules/Components/Billboard/variables.scss @@ -3,7 +3,7 @@ /// Components : Billboard -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss similarity index 52% rename from src/Components/Breadcrumb/Breadcrumb.scss rename to src/Modules/Components/Breadcrumb/Breadcrumb.scss index d1013bd0..4bad8372 100644 --- a/src/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -3,40 +3,37 @@ /// Components : Breadcrumb /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if breadcrumb is enable -@if options('breadcrumb', 'enable') { +@if enabled('components', 'breadcrumb') { .#{class('breadcrumb', 'name')} { display: inline-block; white-space: nowrap; a.#{class('breadcrumb', 'item')}, .#{class('breadcrumb', 'item')} { text-decoration: none; - font-size: inherit; - font-weight: variables('breadcrumb', 'font-weight'); + font-size: .9785rem; + font-weight: components('breadcrumb', 'font-weight'); &:focus,&:hover,&:active,&.active { color: theme('color', 'primary'); } &::after { - font-family: '#{variables('icon', 'font-family')}'; - content: variables('icon', 'breadcrumb', 'seperator'); // [*] + content: components('breadcrumb', 'seperator'); color: theme('color', 'primary'); - padding: variables('breadcrumb', 'seperator', 'padding'); - vertical-align: variables('breadcrumb', 'seperator', 'vertical-align'); - font-size: variables('breadcrumb', 'seperator', 'font-size'); - cursor: variables('breadcrumb', 'seperator', 'cursor'); + font-size: 1rem; + cursor: default; } &:first-child { margin-left: 0; } &.#{class('breadcrumb', 'active')} { color: theme('color', 'primary'); - font-weight: variables('breadcrumb', 'active-weight'); + font-weight: components('breadcrumb', 'active-weight'); &::after { content: none; } @@ -45,7 +42,7 @@ /// /// SIZES /// - @if options('breadcrumb', 'features', 'sizes') { + @if features('components', 'breadcrumb', 'sizes') { // size, font-size, seperator-padding, seperator-size @each $size, $font-size, $seperator-padding, $seperator-size in variables.$sizes { &.#{$size} { @@ -63,7 +60,7 @@ /// /// /// - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { .#{class('breadcrumb', 'name')} { .#{class('breadcrumb', 'item')} { &:after { @@ -74,8 +71,3 @@ } } } -/* -REFERENCES ****************************************** -[*] Defined at options.scss file -> 'icon' -https://material.io/resources/icons/ -*****************************************************/ diff --git a/src/Components/Breadcrumb/variables.scss b/src/Modules/Components/Breadcrumb/variables.scss similarity index 65% rename from src/Components/Breadcrumb/variables.scss rename to src/Modules/Components/Breadcrumb/variables.scss index 76ad1d61..85009809 100644 --- a/src/Components/Breadcrumb/variables.scss +++ b/src/Modules/Components/Breadcrumb/variables.scss @@ -7,15 +7,15 @@ $sizes: ( ( 'small', // size name (class) - .9589em, // font-size + .986em, // font-size .15em, // seperator-padding - 1.25rem // seperator-size + null // seperator-size ), ( 'large', // size name (class) - 1.18em, // font-size - .18em, // seperator-padding - 1.7rem // seperator-size + 1.38em, // font-size + .15em, // seperator-padding + null // seperator-size ) ); diff --git a/src/Elements/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss similarity index 69% rename from src/Elements/Caption/Caption.scss rename to src/Modules/Components/Caption/Caption.scss index b017b544..ad28c685 100644 --- a/src/Elements/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -1,36 +1,36 @@ /// /// Punica CSS Framework -/// Elements : Caption +/// Components : Caption /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_setters" as *; -@use "../../_themes/_getters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if caption is enable -@if options('caption', 'enable') { +@if enabled('elements', 'caption') { .#{class('caption', 'name')} { display: flex; align-items: center; - margin: variables('caption', 'margin'); - font-size: variables('caption', 'font-size'); + margin: elements('caption', 'margin'); + font-size: elements('caption', 'font-size'); font-weight: theme('typography', 'header-weight'); line-height: theme('typography', 'line-height') - .2; text-align: left; >img, >.#{class('icon', 'class-name')}, >i { - margin-right: variables('caption', 'media', 'margin'); + margin-right: elements('caption', 'media', 'margin'); } >.#{class('icon', 'class-name')}, >i { - font-size: variables('caption', 'font-size') * 1.4; + font-size: elements('caption', 'font-size') * 1.4; } &.#{class('caption', 'divided')} { border-bottom: set-border(); - padding-bottom: variables('caption', 'media', 'margin'); + padding-bottom: elements('caption', 'media', 'margin'); } &>span, &>div { @@ -52,7 +52,7 @@ /// /// SIZES /// - @if options('caption', 'features', 'sizes') { + @if features('elements', 'caption', 'sizes') { @each $size-name, $margin, $font-size, $font-weight in variables.$caption-sizes { @include set-size($font-size, null, $size-name) { margin: $margin; @@ -65,7 +65,7 @@ } } // - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(layouts('grid', 'breakpoints', 'medium'), 'max-width') { flex-direction: column; text-align: center; margin: inherit; diff --git a/src/Elements/Caption/variables.scss b/src/Modules/Components/Caption/variables.scss similarity index 84% rename from src/Elements/Caption/variables.scss rename to src/Modules/Components/Caption/variables.scss index a44ca1cb..c1c7e54f 100644 --- a/src/Elements/Caption/variables.scss +++ b/src/Modules/Components/Caption/variables.scss @@ -1,9 +1,9 @@ /// /// Punica CSS Framework -/// Elements : Caption -> Variables +/// Components : Caption -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// SIZES =============================================== $caption-sizes: ( diff --git a/src/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss similarity index 68% rename from src/Components/Card/Card.scss rename to src/Modules/Components/Card/Card.scss index 13ffea6c..4bb6d2d3 100644 --- a/src/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -3,16 +3,16 @@ /// Components : Card /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_global/variables" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "../../Elements/Typography/variables" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Variables" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; +@use "../../../Modules/Elements/Typography/variables" as *; @use "variables"; /// if card is enable -@if options('card', 'enable') { +@if enabled('components', 'card') { .#{class('card', 'cards')} { display: flex; flex-wrap: wrap; @@ -20,13 +20,13 @@ /// /// CARD GROUPS /// - @if options('card', 'features', 'group') { + @if features('components', 'card', 'group') { @each $name, $number in $grids { .#{class('card', 'cards')}.#{$name} { &>.#{class('card', 'name')} { flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{variables('card', 'group', 'margin')})); height: auto; - margin: variables('card', 'group', 'margin'); + margin: components('card', 'group', 'margin'); } } } @@ -36,21 +36,21 @@ background-color: if(theme('components', 'card', 'background'), theme('components', 'card', 'background'), theme('color', 'background')); // has card border? - @if options('card', 'features', 'border') { + @if features('components', 'card', 'border') { @include border(); /// border radius border-radius: if(theme('components', 'card', 'radius'), theme('components', 'card', 'radius'), theme('border', 'radius')); } // has card shadow? - @if options('card', 'features', 'shadow') { + @if features('components', 'card', 'shadow') { @include shadow(); } display: flex; flex-direction: column; - width: variables('card', 'width'); // for only a single card - height: variables('card', 'height'); + width: components('card', 'width'); // for only a single card + height: components('card', 'height'); overflow: hidden; >.#{class('card', 'body')} .#{class('card', 'title')}, >.#{class('card', 'title')} { @@ -64,7 +64,7 @@ >.#{class('card', 'title')}, >.#{class('card', 'description')}, >.#{class('card', 'actions')} { - padding: variables('card', 'padding'); + padding: components('card', 'padding'); } >.#{class('card', 'description')} { flex: 1 1 auto; @@ -73,7 +73,7 @@ /// /// MEDIA /// - @if options('card', 'features', 'media') { + @if features('components', 'card', 'media') { &>.#{class('card', 'media')} { display: flex; flex-wrap: wrap; @@ -85,23 +85,23 @@ /// /// MEDIA GROUP /// - @if options('card', 'features', 'media-group') { + @if features('components', 'card', 'media-group') { @include media-group-specs(class('card', 'media'), 0); } } /// /// HORIZONTAL CARDS /// - @if options('card', 'features', 'horizontal') { + @if features('components', 'card', 'horizontal') { &.#{class('card', 'horizontal')} { flex-direction: row; width: 100%; align-items: center; - margin-bottom: variables('card', 'horizontal', 'margin-bottom'); + margin-bottom: components('card', 'horizontal', 'margin-bottom'); /// /// MEDIA /// - @if options('card', 'features', 'media') { + @if features('components', 'card', 'media') { >.#{class('card', 'media')} { align-self: normal; width: fit-content; @@ -115,7 +115,7 @@ flex: inherit; .#{class('card', 'title')}, .#{class('card', 'description')} { - padding: calc(#{variables('card', 'padding')} / 2) #{variables('card', 'padding')}; + padding: calc(#{components('card', 'padding')} / 2) #{components('card', 'padding')}; } .#{class('card', 'description')} { flex: 1; @@ -124,7 +124,7 @@ } } } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(layouts('grid', 'breakpoints', 'medium'), 'max-width') { .#{class('card', 'name')}, .#{class('card', 'cards')} > .#{class('card', 'name')} { flex: 0 0 100% !important; @@ -134,7 +134,7 @@ /// /// HORIZONTAL CARDS /// - @if options('card', 'features', 'horizontal') { + @if features('components', 'card', 'horizontal') { .#{class('card', 'name')}.#{class('card', 'horizontal')} { flex-direction: column; } diff --git a/src/Components/Card/variables.scss b/src/Modules/Components/Card/variables.scss similarity index 100% rename from src/Components/Card/variables.scss rename to src/Modules/Components/Card/variables.scss diff --git a/src/Elements/Label/Label.scss b/src/Modules/Components/Label/Label.scss similarity index 69% rename from src/Elements/Label/Label.scss rename to src/Modules/Components/Label/Label.scss index 22ab1e86..b3051ef8 100644 --- a/src/Elements/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -1,28 +1,28 @@ /// /// Punica CSS Framework -/// Elements : Label +/// Components : Label /// -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if label is enable -@if options('label', 'enable') { +@if enabled('elements', 'label') { a.#{class('label', 'name')}, .#{class('label', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { display: inline-block; font-weight: bold; line-height: 1.2; - margin: variables('label', 'margin'); + margin: elements('label', 'margin'); border-radius: theme('border', 'radius'); text-decoration: none; @include border(); @include shadow(0, .155em, 0, rgba(0, 0, 0, 0.095)); border-color: theme('border', 'color'); - @include set-size(variables('label', 'font-size'), variables('label', 'padding')); + @include set-size(elements('label', 'font-size'), elements('label', 'padding')); >i, >.material-icons { vertical-align: text-top; @@ -31,7 +31,7 @@ /// /// STYLES /// - @if options('label', 'features', 'styles') { + @if features('elements', 'label', 'styles') { @each $style-name, $bg-color in variables.$styles { @include set-style($bg-color, theme('color', 'negative'), $style-name) { border-color: darken($bg-color, 7%); @@ -41,7 +41,7 @@ /// /// SIZES /// - @if options('label', 'features', 'sizes') { + @if features('elements', 'label', 'sizes') { @each $size-name, $padding, $font-size in variables.$sizes { @include set-size($font-size, $padding, $size-name); } diff --git a/src/Elements/Label/variables.scss b/src/Modules/Components/Label/variables.scss similarity index 88% rename from src/Elements/Label/variables.scss rename to src/Modules/Components/Label/variables.scss index a967e218..28f7a23e 100644 --- a/src/Elements/Label/variables.scss +++ b/src/Modules/Components/Label/variables.scss @@ -1,9 +1,9 @@ /// /// Punica CSS Framework -/// Elements : Label -> Variables +/// Components : Label -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/List/List.scss b/src/Modules/Components/List/List.scss similarity index 57% rename from src/Components/List/List.scss rename to src/Modules/Components/List/List.scss index 984e36a6..4c573d5a 100644 --- a/src/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -3,27 +3,27 @@ /// Components : List /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if list is enable -@if options('list', 'enable') { +@if enabled('components', 'list') { .#{class('list', 'name')} { list-style: none; - margin: variables('list', 'margin'); + margin: components('list', 'margin'); >.#{class('list', 'item')} { display: flex; align-items: center; - padding: variables('list', 'item', 'padding'); - margin: variables('list', 'item', 'margin'); - transition: variables('list', 'item', 'transition'); + padding: components('list', 'item', 'padding'); + margin: components('list', 'item', 'margin'); + transition: components('list', 'item', 'transition'); >img, >.#{class('icon', 'class-name')}, >i { - margin-right: variables('list', 'media', 'margin-right'); + margin-right: components('list', 'media', 'margin-right'); } &>span, &>div { @@ -33,28 +33,28 @@ } >.#{class('list', 'body')} { flex: 1; - line-height: variables('list', 'body', 'line-height'); - text-align: variables('list', 'body', 'text-align'); + line-height: components('list', 'body', 'line-height'); + text-align: components('list', 'body', 'text-align'); display: initial; >.#{class('list', 'title')}, >.#{class('list', 'subtitle')} { display: block; } >.#{class('list', 'title')} { - font-size: variables('list', 'title', 'font-size'); + font-size: components('list', 'title', 'font-size'); font-weight: theme('typography', 'header-weight'); - line-height: variables('list', 'body', 'line-height'); + line-height: components('list', 'body', 'line-height'); } >.#{class('list', 'subtitle')} { - font-size: variables('list', 'subtitle', 'font-size'); + font-size: components('list', 'subtitle', 'font-size'); font-weight: theme('typography', 'font-weight'); color: theme('color', 'primary'); - margin-bottom: variables('list', 'subtitle', 'margin-bottom'); + margin-bottom: components('list', 'subtitle', 'margin-bottom'); } } >.#{class('list', 'actions')} { - width: variables('list', 'actions', 'width'); - margin-left: variables('list', 'actions', 'margin-left'); + width: components('list', 'actions', 'width'); + margin-left: components('list', 'actions', 'margin-left'); } &.#{class('list', 'active')} { background: darken(theme('color', 'background'), 11%); @@ -63,7 +63,7 @@ /// /// DIVIDED /// - @if options('list', 'features', 'divided') { + @if features('components', 'list', 'divided') { &.#{class('list', 'divided')} { >.#{class('list', 'item')} { border-bottom: set-border(); @@ -76,7 +76,7 @@ /// /// STRIPED /// - @if options('list', 'features', 'striped') { + @if features('components', 'list', 'striped') { &.#{class('list', 'striped')} { >.#{class('list', 'item')} { &:nth-of-type(odd) { @@ -88,12 +88,12 @@ /// /// HOVERED /// - @if options('list', 'features', 'hovered') { + @if features('components', 'list', 'hovered') { &.#{class('list', 'hovered')} { >.#{class('list', 'item')} { &:hover { background: theme('color', 'secondary'); - transition: variables('list', 'item', 'transition'); + transition: components('list', 'item', 'transition'); } } } diff --git a/src/Components/List/variables.scss b/src/Modules/Components/List/variables.scss similarity index 100% rename from src/Components/List/variables.scss rename to src/Modules/Components/List/variables.scss diff --git a/src/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss similarity index 50% rename from src/Components/Menu/Menu.scss rename to src/Modules/Components/Menu/Menu.scss index 396a9ea5..831f68e3 100644 --- a/src/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -3,82 +3,82 @@ /// Components : Menu /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if menu is enable -@if options('menu', 'enable') { +@if enabled('components', 'menu') { .#{class('menu', 'name')} { background-color: if(theme('components', 'menu', 'background'), theme('components', 'menu', 'background'), lighten(theme('color', 'background'), 2.5%)); - border-radius: variables('menu', 'border-radius'); + border-radius: components('menu', 'border-radius'); list-style: none; - margin: variables('menu', 'margin'); - width: variables('menu', 'width'); + margin: components('menu', 'margin'); + width: components('menu', 'width'); min-width: max-content; - padding: variables('menu', 'padding'); + padding: components('menu', 'padding'); @include shadow(); z-index: 300; // menu title .#{class('menu', 'title')} { - font-size: variables('menu', 'title', 'font-size'); - min-height: variables('menu', 'title', 'min-height'); + font-size: components('menu', 'title', 'font-size'); + min-height: components('menu', 'title', 'min-height'); color: theme('color', 'text'); - padding: variables('menu', 'title', 'padding'); + padding: components('menu', 'title', 'padding'); font-weight: theme('typography', 'header-weight'); - letter-spacing: variables('menu', 'title', 'letter-spacing'); + letter-spacing: components('menu', 'title', 'letter-spacing'); } // menu item .#{class('menu', 'item')} { padding: 0; // default container position: relative; text-decoration: none; - text-align: variables('menu', 'item', 'text-align'); + text-align: components('menu', 'item', 'text-align'); & > a { color: theme('color', 'text'); display: block; - width: variables('menu', 'item', 'width'); - padding: variables('menu', 'item', 'padding'); + width: components('menu', 'item', 'width'); + padding: components('menu', 'item', 'padding'); text-decoration: none; - font-size: variables('menu', 'item', 'font-size'); + font-size: components('menu', 'item', 'font-size'); font-weight: theme('typography', 'font-weight'); - transition: variables('menu', 'item', 'transition'); + transition: components('menu', 'item', 'transition'); &:hover { background: theme('color', 'secondary'); color: theme('color', 'text'); - transition: variables('menu', 'item', 'transition'); + transition: components('menu', 'item', 'transition'); } &:active, &:focus, &.#{class('menu', 'active')} { background: theme('color', 'secondary'); color: theme('color', 'text'); - transition: variables('menu', 'item', 'transition'); + transition: components('menu', 'item', 'transition'); } } i, span.#{class('icon', 'class-name')} { color: theme('color', 'grey'); - font-size: variables('menu', 'icon', 'font-size'); - margin-right: variables('menu', 'icon', 'margin-right'); - vertical-align: variables('menu', 'icon', 'vertical-align'); + font-size: components('menu', 'icon', 'font-size'); + margin-right: components('menu', 'icon', 'margin-right'); + vertical-align: components('menu', 'icon', 'vertical-align'); } .#{class('menu', 'name')} { - padding: variables('menu', 'item', 'sub-padding'); + padding: components('menu', 'item', 'sub-padding'); } } // menu badge .#{class('menu', 'badge')} { position: absolute; - right: variables('menu', 'badge', 'right'); - top: variables('menu', 'badge', 'top'); - padding: variables('menu', 'badge', 'padding'); - font-size: variables('menu', 'badge', 'font-size'); + right: components('menu', 'badge', 'right'); + top: components('menu', 'badge', 'top'); + padding: components('menu', 'badge', 'padding'); + font-size: components('menu', 'badge', 'font-size'); } // small menu &.#{class('menu', 'small')} > .#{class('menu', 'item')} a { - font-size: variables('menu', 'item', 'small-size'); + font-size: components('menu', 'item', 'small-size'); } // divided menu &.#{class('menu', 'divided')} { diff --git a/src/Components/Menu/variables.scss b/src/Modules/Components/Menu/variables.scss similarity index 100% rename from src/Components/Menu/variables.scss rename to src/Modules/Components/Menu/variables.scss diff --git a/src/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss similarity index 79% rename from src/Components/Navbar/Navbar.scss rename to src/Modules/Components/Navbar/Navbar.scss index b48cf77e..8874c30f 100644 --- a/src/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -3,51 +3,51 @@ /// Components : Navbar /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "mixins"; @use "variables"; /// if navbar is enable -@if options('navbar', 'enable') { +@if enabled('components', 'navbar') { .#{class('navbar', 'spacer')} { - margin-top: variables('navbar', 'spacer-top'); + margin-top: components('navbar', 'spacer-top'); } .#{class('navbar', 'name')} { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; - min-height: variables('navbar', 'min-height'); + min-height: components('navbar', 'min-height'); background: theme('color', 'primary'); color: theme('color', 'negative'); width: 100%; // grid container .#{class('grid', 'container')} { display: flex; - width: variables('grid', 'container', 'width'); // options->grid + width: elements('grid', 'container', 'width'); // options->grid } // navbar brand .#{class('navbar', 'brand')} { - padding: variables('navbar', 'brand', 'padding'); + padding: components('navbar', 'brand', 'padding'); display: flex; justify-content: center; min-height: 100%; align-items: center; - margin-right: variables('navbar', 'brand', 'margin-right'); + margin-right: components('navbar', 'brand', 'margin-right'); white-space: nowrap; img { - width: variables('navbar', 'brand', 'img-width'); + width: components('navbar', 'brand', 'img-width'); } a, a:visited { - font-size: variables('navbar', 'font-size'); + font-size: components('navbar', 'font-size'); text-decoration: none; color: theme('color', 'negative'); display: flex; - font-weight: variables('navbar', 'brand', 'font-weight'); + font-weight: components('navbar', 'brand', 'font-weight'); } } // navbar burger @@ -57,12 +57,11 @@ } .#{class('navbar', 'burger')} { &::before { - content: "#{variables('icon', 'navbar', 'open')}"; // [*] - font-family: "#{variables('icon', 'font-family')}"; // [*] - font-size: variables('navbar', 'burger', 'icon-size'); + content: "\2630"; + font-size: components('navbar', 'burger', 'icon-size'); display: none; - min-height: variables('navbar', 'min-height'); - max-height: variables('navbar', 'min-height'); + min-height: components('navbar', 'min-height'); + max-height: components('navbar', 'min-height'); position: absolute; cursor: pointer; right: 0; @@ -97,7 +96,7 @@ /// /// DIVIDED NAVBAR /// - @if options('navbar', 'features', 'divided') { + @if features('components', 'navbar', 'divided') { &.#{class('navbar', 'divided')} { @include mixins.navbar-divided(); .#{class('button', 'group')} { @@ -106,7 +105,7 @@ border: solid darken(theme('color', 'primary'), 7.15%); } } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { .#{class('button', 'group')} { .#{class('button', 'name')}, .#{class('button', 'dropdown')} .#{class('button', 'name')} { @@ -150,9 +149,9 @@ &.#{class('button', 'active')} { color: theme('color', 'negative'); background: darken(theme('color', 'primary'), 7%); - transition: variables('button', 'transition'); + transition: components('button', 'transition'); &:hover { - transition: variables('button', 'transition'); + transition: components('button', 'transition'); background: darken(theme('color', 'primary'), 10%); } } @@ -165,15 +164,15 @@ } .#{class('button', 'name')}, .#{class('button', 'dropdown')} .#{class('button', 'name')} { - font-size: variables('navbar', 'font-size'); - padding: variables('navbar', 'button-padding'); + font-size: components('navbar', 'font-size'); + padding: components('navbar', 'button-padding'); font-weight: theme('components','navbar', 'font-weight'); } /// /// GRADIENT /// - @if options('navbar', 'features', 'gradient') { + @if features('components', 'navbar', 'gradient') { &.#{class('navbar', 'gradient')} { background: linear-gradient( to top, @@ -196,7 +195,7 @@ /// /// NAVBAR THEMES /// - @if options('navbar', 'features', 'themes') { + @if features('components', 'navbar', 'themes') { @each $theme-name, $bg-color, $text-color, $input-bg, $input-color, $input-border-color, $divider-color in variables.$themes { &.#{$theme-name} { @include mixins.navbar-themes($bg-color, $text-color, $input-bg, $input-color, $input-border-color, $divider-color); @@ -206,7 +205,7 @@ /// /// NAVBAR SIZES /// - @if options('navbar', 'features', 'sizes') { + @if features('components', 'navbar', 'sizes') { @each $size-name, $min-height, $font-size, $button-padding, $spacer-top in variables.$sizes { &.#{$size-name} { min-height: $min-height; @@ -218,7 +217,7 @@ @at-root .#{class('navbar', 'spacer')}-#{$size-name} { margin-top: $spacer-top !important; } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { @at-root .#{class('navbar', 'spacer')}-#{$size-name} { margin-top: div($spacer-top, 2) !important; } @@ -228,14 +227,14 @@ } } // - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { .#{class('navbar', 'spacer')} { margin-top: 0; } .#{class('navbar', 'name')} { // grid container .#{class('grid', 'container')} { - padding: 0 div(variables('grid', 'container', 'padding'), 2); + padding: 0 div(elements('grid', 'container', 'padding'), 2); } &.#{class('navbar', 'fixed')} { position: relative; @@ -245,7 +244,7 @@ display: block; width: 100%; height: 0; - top: variables('navbar', 'min-height'); + top: components('navbar', 'min-height'); left: 0; overflow-x: auto; overflow-y: hidden; @@ -284,9 +283,9 @@ align-items: center; justify-content: center; &::before { - content: "#{variables('icon', 'navbar', 'close')}"; // [*] - padding: variables('navbar', 'burger', 'padding'); - font-size: variables('navbar', 'burger', 'icon-size'); + content: "\2715"; + padding: components('navbar', 'burger', 'padding'); + font-size: components('navbar', 'burger', 'icon-size'); display: flex; align-items: center; justify-content: center; @@ -296,7 +295,7 @@ /// /// NAVBAR SIZES /// - @if options('navbar', 'features', 'sizes') { + @if features('components', 'navbar', 'sizes') { @each $size-name, $min-height, $font-size, $button-padding, $spacer-top in variables.$sizes { &.#{$size-name} { & .#{class('navbar', 'burger')}, @@ -317,16 +316,11 @@ height: auto; } input[type=checkbox]##{class('navbar', 'burger')}:not(:checked) ~ .#{class('navbar', 'burger')}::before { - content: "#{variables('icon', 'navbar', 'open')}"; // [*] + content: "\2630"; // open } input[type=checkbox]##{class('navbar', 'burger')}:checked ~ .#{class('navbar', 'burger')}::before { - content: "#{variables('icon', 'navbar', 'close')}"; // [*] + content: "\2715"; // close } } } -} -/* -REFERENCES ****************************************** -[*] Defined at options.scss file -> 'icon' -https://material.io/resources/icons/ -*****************************************************/ \ No newline at end of file +} \ No newline at end of file diff --git a/src/Components/Navbar/mixins.scss b/src/Modules/Components/Navbar/mixins.scss similarity index 91% rename from src/Components/Navbar/mixins.scss rename to src/Modules/Components/Navbar/mixins.scss index a60eb57c..598b3ce7 100644 --- a/src/Components/Navbar/mixins.scss +++ b/src/Modules/Components/Navbar/mixins.scss @@ -3,8 +3,8 @@ /// Components : Navbar -> Mixins /// -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Theme/Getters" as *; /// /// Navbar Themes @@ -28,7 +28,7 @@ /// /// GRADIENT /// - @if options('navbar', 'features', 'gradient') { + @if features('components', 'navbar', 'gradient') { &.#{class('navbar', 'gradient')} { background: linear-gradient( to top, @@ -86,9 +86,9 @@ &.#{class('button', 'active')} { color: $text-color; background: darken($bg-color, 7%); - transition: variables('button', 'transition'); + transition: components('button', 'transition'); &:hover { - transition: variables('button', 'transition'); + transition: components('button', 'transition'); background: darken($bg-color, 10%); } } @@ -97,7 +97,7 @@ /// /// DIVIDED NAVBAR /// - @if options('navbar', 'features', 'divided') { + @if features('components', 'navbar', 'divided') { &.#{class('navbar', 'divided')} { .#{class('button', 'group')} { .#{class('button', 'name')}, diff --git a/src/Components/Navbar/variables.scss b/src/Modules/Components/Navbar/variables.scss similarity index 97% rename from src/Components/Navbar/variables.scss rename to src/Modules/Components/Navbar/variables.scss index 5acc9ac6..77732003 100644 --- a/src/Components/Navbar/variables.scss +++ b/src/Modules/Components/Navbar/variables.scss @@ -3,7 +3,7 @@ /// Components : Navbar -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== // you can add your own custom styles. diff --git a/src/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss similarity index 77% rename from src/Components/Panel/Panel.scss rename to src/Modules/Components/Panel/Panel.scss index 5bd6cbde..a9975277 100644 --- a/src/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -3,34 +3,34 @@ /// Components : Panel /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if panel is enable -@if options('panel', 'enable') { +@if enabled('components', 'panel') { .#{class('panel', 'name')} { display: flex; flex-direction: column; // has panel border? - @if options('panel', 'features', 'border') { + @if features('components', 'panel', 'border') { @include border(); /// border radius border-radius: if(theme('components', 'panel', 'radius'), theme('components', 'panel', 'radius'), theme('border', 'radius')); } // has panel shadow? - @if options('panel', 'features', 'shadow') { + @if features('components', 'panel', 'shadow') { @include shadow(); } /// background color background-color: if(theme('components', 'panel', 'background'), theme('components', 'panel', 'background'), theme('color', 'background')); - margin: variables('panel', 'margin'); + margin: components('panel', 'margin'); &>.#{class('panel', 'header')}, &>.#{class('panel', 'bottom')} { display: flex; @@ -45,7 +45,7 @@ } &>.#{class('panel', 'header')} { border-bottom: set-border(); - padding: variables('panel', 'title-padding'); + padding: components('panel', 'title-padding'); &.dashed { border-bottom-style: dashed; } @@ -59,12 +59,12 @@ } &>.#{class('panel', 'content')} { flex: 1 1 auto; - padding: variables('panel', 'padding'); + padding: components('panel', 'padding'); height: auto; /// /// MEDIA /// - @if options('panel', 'features', 'media') { + @if features('components', 'panel', 'media') { &>.#{class('panel', 'media')} { min-width: 0; flex: auto; @@ -79,7 +79,7 @@ /// /// MEDIA GROUP /// - @if options('panel', 'features', 'media-group') { + @if features('components', 'panel', 'media-group') { @include media-group-specs(class('panel', 'media')); } } @@ -95,12 +95,12 @@ &>.#{class('panel', 'bottom')} { min-height: 50px; border-top: set-border(); - padding: variables('panel', 'padding'); + padding: components('panel', 'padding'); } /// /// SIZES /// - @if options('panel', 'features', 'sizes') { + @if features('components', 'panel', 'sizes') { @each $size-name, $font-size, $padding in variables.$sizes { &.#{$size-name} { >.#{class('panel', 'header')} { diff --git a/src/Components/Panel/variables.scss b/src/Modules/Components/Panel/variables.scss similarity index 100% rename from src/Components/Panel/variables.scss rename to src/Modules/Components/Panel/variables.scss diff --git a/src/Components/Process/Process.scss b/src/Modules/Components/Process/Process.scss similarity index 62% rename from src/Components/Process/Process.scss rename to src/Modules/Components/Process/Process.scss index 45e1e2e3..9837fc3e 100644 --- a/src/Components/Process/Process.scss +++ b/src/Modules/Components/Process/Process.scss @@ -3,24 +3,24 @@ /// Components : Process /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "mixins"; @use "variables"; /// if process is enable -@if options('process', 'enable') { +@if enabled('components', 'process') { .#{class('process', 'name')} { display: flex; flex-wrap: nowrap; - margin: variables('process', 'margin'); + margin: components('process', 'margin'); width: 100%; list-style: none; .#{class('process', 'item')} { flex: 1 1 0; - min-height: variables('process', 'min-height'); + min-height: components('process', 'min-height'); position: relative; align-items: center; justify-content: center; @@ -31,7 +31,7 @@ &:not(:first-child)::before { background: theme('color', 'primary'); content: ""; - height: variables('process', 'stepbar', 'height'); + height: components('process', 'stepbar', 'height'); left: -50%; position: absolute; top: 0; @@ -49,8 +49,8 @@ background: theme('color', 'primary'); top: 0; left: 50%; - height: variables('process', 'stickbar', 'height'); - width: variables('process', 'stickbar', 'width'); + height: components('process', 'stickbar', 'height'); + width: components('process', 'stickbar', 'width'); z-index: 1; } &:first-child::before { @@ -61,13 +61,12 @@ a { color: theme('color', 'primary'); &::after { - content: "#{variables('icon', 'process', 'current')}"; // [*] - font-family: "#{variables('icon', 'font-family')}"; // [*] + content: "\2756"; position: absolute; - top: calc(-15px - #{variables('process', 'icon-size')}); - left: calc(50% - ((#{variables('process', 'stickbar', 'width')} * 10) / 2)); + top: calc(-15px - #{components('process', 'icon-size')}); + left: calc(50% - ((#{components('process', 'stickbar', 'width')} * 10) / 2)); color: theme('color', 'primary'); - font-size: variables('process', 'icon-size'); + font-size: components('process', 'icon-size'); } } &~.#{class('process', 'item')} { @@ -89,7 +88,7 @@ /// /// STYLES /// - @if options('process', 'features', 'styles') { + @if features('components', 'process', 'styles') { @each $type, $bg-color in variables.$styles { &.#{$type} { @include mixins.process-styles($bg-color); @@ -99,20 +98,15 @@ /// /// VERTICAL PROCESS /// - @if options('process', 'features', 'vertical') { + @if features('components', 'process', 'vertical') { &.#{class('process', 'vertical')} { @include mixins.process-vertical(); } } // vertical style is setted as "true" for mobile devices - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { @include mixins.process-vertical(); } } -} -/* -REFERENCES ****************************************** -[*] Defined at options.scss file -> 'icon' -https://material.io/resources/icons/ -*****************************************************/ \ No newline at end of file +} \ No newline at end of file diff --git a/src/Components/Process/mixins.scss b/src/Modules/Components/Process/mixins.scss similarity index 80% rename from src/Components/Process/mixins.scss rename to src/Modules/Components/Process/mixins.scss index 4c411204..bb45334b 100644 --- a/src/Components/Process/mixins.scss +++ b/src/Modules/Components/Process/mixins.scss @@ -3,9 +3,9 @@ /// Components : Process -> Mixins /// -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; /// /// Process Styles @@ -44,7 +44,7 @@ @mixin process-vertical() { display: flex; padding: 1.25em 2em 2.85em; - margin: variables('process', 'vertical', 'margin'); + margin: components('process', 'vertical', 'margin'); flex-direction: column; align-items: flex-start; .#{class('process', 'item')} { @@ -59,13 +59,13 @@ border-top: set-border(); } &:not(:first-child)::before { - width: variables('process', 'stickbar', 'width'); + width: components('process', 'stickbar', 'width'); height: 100%; left: 0; } a { &::before { - width: variables('process', 'vertical', 'stickbar-width'); + width: components('process', 'vertical', 'stickbar-width'); } &:first-child::before { left: 0; @@ -77,7 +77,7 @@ font-weight: bold; &::after { top: 15px; - left: calc(-15px - #{variables('process', 'icon-size')}); + left: calc(-15px - #{components('process', 'icon-size')}); } } } diff --git a/src/Components/Process/variables.scss b/src/Modules/Components/Process/variables.scss similarity index 89% rename from src/Components/Process/variables.scss rename to src/Modules/Components/Process/variables.scss index 602e4667..b81ab94d 100644 --- a/src/Components/Process/variables.scss +++ b/src/Modules/Components/Process/variables.scss @@ -3,7 +3,7 @@ /// Components : Process -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Progress/Progress.scss b/src/Modules/Components/Progress/Progress.scss similarity index 51% rename from src/Components/Progress/Progress.scss rename to src/Modules/Components/Progress/Progress.scss index bc44e2be..9f96d1a6 100644 --- a/src/Components/Progress/Progress.scss +++ b/src/Modules/Components/Progress/Progress.scss @@ -3,37 +3,37 @@ /// Components : Progress /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if progress is enable -@if options('progress', 'enable') { +@if enabled('components', 'progress') { .#{class('progress', 'name')} { - width: variables('progress', 'width'); - height: variables('progress', 'height'); + width: components('progress', 'width'); + height: components('progress', 'height'); background: theme('color', 'secondary'); @include shadow(0, 1px, 2px, rgba(0, 0, 0, 0.15), inset); - border-radius: variables('progress', 'border-radius'); + border-radius: components('progress', 'border-radius'); appearance: none; &::-webkit-progress-bar { background: transparent; - border-radius: variables('progress', 'border-radius'); + border-radius: components('progress', 'border-radius'); } &::-webkit-progress-value { background: theme('color', 'primary'); - border-radius: variables('progress', 'border-radius'); + border-radius: components('progress', 'border-radius'); } &::-moz-progress-bar { background: theme('color', 'primary'); - border-radius: variables('progress', 'border-radius'); + border-radius: components('progress', 'border-radius'); } /// /// STYLES /// - @if options('progress', 'features', 'styles') { + @if features('components', 'progress', 'styles') { @each $type, $color in variables.$styles { &.#{$type}::-webkit-progress-value { background: $color; diff --git a/src/Components/Progress/variables.scss b/src/Modules/Components/Progress/variables.scss similarity index 89% rename from src/Components/Progress/variables.scss rename to src/Modules/Components/Progress/variables.scss index 51cc2ecc..e6eea717 100644 --- a/src/Components/Progress/variables.scss +++ b/src/Modules/Components/Progress/variables.scss @@ -3,7 +3,7 @@ /// Components : Progress -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Stats/Stats.scss b/src/Modules/Components/Stats/Stats.scss similarity index 59% rename from src/Components/Stats/Stats.scss rename to src/Modules/Components/Stats/Stats.scss index aab46c40..62b93feb 100644 --- a/src/Components/Stats/Stats.scss +++ b/src/Modules/Components/Stats/Stats.scss @@ -3,28 +3,28 @@ /// Components : Stats /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if stats is enable -@if options('stats', 'enable') { +@if enabled('components', 'stats') { .#{class('stats', 'name')}, a.#{class('stats', 'name')} { display: inline-flex; flex-direction: column; background-color: transparent; - margin: variables('stats', 'margin'); - border-width: variables('stats', 'border-width'); + margin: components('stats', 'margin'); + border-width: components('stats', 'border-width'); border-color: theme('border', 'color'); border-style: theme('border', 'style'); - border-radius: variables('stats', 'border-radius'); - padding: variables('stats', 'padding'); - line-height: variables('stats', 'line-height'); + border-radius: components('stats', 'border-radius'); + padding: components('stats', 'padding'); + line-height: components('stats', 'line-height'); text-decoration: none; - transition: variables('stats', 'transition'); + transition: components('stats', 'transition'); >.#{class('stats', 'title')}, >.#{class('stats', 'subtitle')}, >.#{class('stats', 'value')} { @@ -32,18 +32,18 @@ flex-direction: column; } >.#{class('stats', 'title')} { - font-size: variables('stats', 'title', 'font-size'); + font-size: components('stats', 'title', 'font-size'); } >.#{class('stats', 'subtitle')} { - font-size: variables('stats', 'subtitle', 'font-size'); - margin-top: variables('stats', 'subtitle', 'margin-top'); + font-size: components('stats', 'subtitle', 'font-size'); + margin-top: components('stats', 'subtitle', 'margin-top'); color: theme('color', 'grey'); } >.#{class('stats', 'value')} { - font-weight: variables('stats', 'value', 'font-weight'); - font-size: variables('stats', 'value', 'font-size'); + font-weight: components('stats', 'value', 'font-weight'); + font-size: components('stats', 'value', 'font-size'); flex-direction: row; - line-height: variables('stats', 'value', 'line-height'); + line-height: components('stats', 'value', 'line-height'); align-items: center; >img, >.#{class('icon', 'class-name')}, @@ -51,14 +51,14 @@ font-weight: normal; display: inline-block; vertical-align: baseline; - font-size: variables('stats', 'media', 'font-size'); - margin-right: variables('stats', 'media', 'margin-right'); + font-size: components('stats', 'media', 'font-size'); + margin-right: components('stats', 'media', 'margin-right'); } } /// /// STYLES /// - @if options('stats', 'features', 'styles') { + @if features('components', 'stats', 'styles') { @each $style-name, $bg-color in variables.$styles { @include set-style($bg-color, theme('color', 'negative'), $style-name) { border-color: $bg-color; diff --git a/src/Components/Stats/variables.scss b/src/Modules/Components/Stats/variables.scss similarity index 90% rename from src/Components/Stats/variables.scss rename to src/Modules/Components/Stats/variables.scss index 05ab2d45..34e361c1 100644 --- a/src/Components/Stats/variables.scss +++ b/src/Modules/Components/Stats/variables.scss @@ -3,7 +3,7 @@ /// Components : Stats -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss similarity index 71% rename from src/Components/Tabnav/Tabnav.scss rename to src/Modules/Components/Tabnav/Tabnav.scss index d3a7488a..705ea06f 100755 --- a/src/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -3,21 +3,21 @@ /// Components : Tabnav /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "mixins"; @use "variables"; /// if tabnav is enable -@if options('tabnav', 'enable') { +@if enabled('components', 'tabnav') { .#{class('tabnav', 'name')} { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; - border-bottom: variables('tabnav', 'border-width') theme('border', 'style') theme('border', 'color'); + border-bottom: components('tabnav', 'border-width') theme('border', 'style') theme('border', 'color'); padding: 0; &>.#{class('button', 'group')} { box-shadow: none; @@ -34,8 +34,8 @@ color: theme('color', 'text'); padding: .935rem 1.4rem; box-shadow: none; - border-bottom: variables('tabnav', 'border-width') solid transparent; - margin-bottom: -#{variables('tabnav', 'border-width')}; + border-bottom: components('tabnav', 'border-width') solid transparent; + margin-bottom: -#{components('tabnav', 'border-width')}; &:hover { color: theme('color', 'text'); border-bottom-color: theme('color', 'grey'); @@ -50,17 +50,17 @@ } } i, [class^="#{class('icon', 'class-name')}"] { - font-size: variables('button', 'icon', 'font-size'); + font-size: components('button', 'icon', 'font-size'); } } /// Bottom Tabnav - @if options('tabnav', 'features', 'bottom-position') { + @if features('components', 'tabnav', 'bottom-position') { &.#{class('tabnav', 'bottom')} { border-bottom: 0; - border-top: variables('tabnav', 'border-width') theme('border', 'style') theme('color', 'secondary'); + border-top: components('tabnav', 'border-width') theme('border', 'style') theme('color', 'secondary'); @include mixins.tab-button-styles() { - margin-top: -#{variables('tabnav', 'border-width')}; - border-top: variables('tabnav', 'border-width') solid transparent; + margin-top: -#{components('tabnav', 'border-width')}; + border-top: components('tabnav', 'border-width') solid transparent; border-bottom: 0; margin-bottom: 0; &:hover { @@ -75,7 +75,7 @@ /// /// STYLES /// - @if options('tabnav', 'features', 'styles') { + @if features('components', 'tabnav', 'styles') { @each $type-name, $color in variables.$styles { &.#{$type-name} { .#{class('button', 'name')}, @@ -88,7 +88,7 @@ } } /// Bottom Tabnav - @if options('tabnav', 'features', 'bottom-position') { + @if features('components', 'tabnav', 'bottom-position') { &.#{$type-name}.#{class('tabnav', 'bottom')} { .#{class('button', 'name')}, a.#{class('button', 'name')}, diff --git a/src/Components/Tabnav/mixins.scss b/src/Modules/Components/Tabnav/mixins.scss similarity index 94% rename from src/Components/Tabnav/mixins.scss rename to src/Modules/Components/Tabnav/mixins.scss index 8923d038..4f1aede4 100644 --- a/src/Components/Tabnav/mixins.scss +++ b/src/Modules/Components/Tabnav/mixins.scss @@ -3,7 +3,7 @@ /// Components : Tabnav -> Mixins /// -@use "../../_global/_getters" as *; +@use "../../../Core/Global/Getters" as *; /// /// Default button styles in Tabnav diff --git a/src/Components/Tabnav/variables.scss b/src/Modules/Components/Tabnav/variables.scss similarity index 91% rename from src/Components/Tabnav/variables.scss rename to src/Modules/Components/Tabnav/variables.scss index 4f173250..54a3448a 100644 --- a/src/Components/Tabnav/variables.scss +++ b/src/Modules/Components/Tabnav/variables.scss @@ -3,7 +3,7 @@ /// Components : Tabnav -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss similarity index 77% rename from src/Components/Timeline/Timeline.scss rename to src/Modules/Components/Timeline/Timeline.scss index 8919fd23..f357c27c 100644 --- a/src/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -3,18 +3,18 @@ /// Components : Timeline /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if timeline is enable -@if options('timeline', 'enable') { +@if enabled('components', 'timeline') { .#{class('timeline', 'name')} { .#{class('timeline', 'item')} { display: flex; - padding: variables('timeline', 'item', 'padding'); + padding: components('timeline', 'item', 'padding'); position: relative; flex-direction: column; justify-content: center; @@ -25,7 +25,7 @@ top: 0; bottom: 0; left: 0; - width: variables('timeline', 'border-width'); + width: components('timeline', 'border-width'); background-color: theme('border', 'color'); } &:target .#{class('timeline', 'type')} { @@ -36,10 +36,10 @@ position: absolute; z-index: 1; display: flex; - width: variables('timeline', 'type-width'); - height: variables('timeline', 'type-width'); + width: components('timeline', 'type-width'); + height: components('timeline', 'type-width'); top: 13px; - left: -(calc(variables('timeline', 'type-width') / 2px) - variables('timeline', 'border-width')); + left: -(calc(components('timeline', 'type-width') / 2px) - components('timeline', 'border-width')); align-items: center; background-color: theme('color', 'secondary'); border: 2px theme('border', 'style') theme('border', 'color'); @@ -50,7 +50,7 @@ /// /// STYLES /// - @if options('timeline', 'features', 'styles') { + @if features('components', 'timeline', 'styles') { @each $type, $bg-color, $color in variables.$styles { &.#{$type} { background-color: $bg-color; @@ -84,7 +84,7 @@ /// /// MEDIA /// - @if options('timeline', 'features', 'media') { + @if features('components', 'timeline', 'timeline') { .#{class('timeline', 'media')} { margin-top: 16px; display: flex; @@ -97,7 +97,7 @@ /// /// MEDIA GROUP /// - @if options('timeline', 'features', 'media-group') { + @if features('components', 'timeline', 'media-group') { @include media-group-specs(class('timeline', 'media')); } } diff --git a/src/Components/Timeline/variables.scss b/src/Modules/Components/Timeline/variables.scss similarity index 94% rename from src/Components/Timeline/variables.scss rename to src/Modules/Components/Timeline/variables.scss index 580c1e84..803127b1 100644 --- a/src/Components/Timeline/variables.scss +++ b/src/Modules/Components/Timeline/variables.scss @@ -3,7 +3,7 @@ /// Components : Timeline -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== $styles: ( diff --git a/src/Components/Tooltip/Tooltip.scss b/src/Modules/Components/Tooltip/Tooltip.scss similarity index 81% rename from src/Components/Tooltip/Tooltip.scss rename to src/Modules/Components/Tooltip/Tooltip.scss index 5b684dd1..bd721fea 100644 --- a/src/Components/Tooltip/Tooltip.scss +++ b/src/Modules/Components/Tooltip/Tooltip.scss @@ -3,14 +3,14 @@ /// Components : Tooltip /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// if tooltip is enable -@if options('tooltip', 'enable') { +@if enabled('components', 'tooltip') { .#{class('tooltip', 'name')} { display: inline-flex; justify-content: center; @@ -23,17 +23,17 @@ align-items: center; justify-content: center; color: theme('color', 'negative'); - font-size: variables('tooltip', 'font-size'); - font-weight: variables('tooltip', 'font-weight'); + font-size: components('tooltip', 'font-size'); + font-weight: components('tooltip', 'font-weight'); visibility: hidden; background-color: theme('color', 'dark'); border-radius: theme('border', 'radius'); - min-width: variables('tooltip', 'min-width'); - max-width: variables('tooltip', 'max-width'); - padding: variables('tooltip', 'padding'); + min-width: components('tooltip', 'min-width'); + max-width: components('tooltip', 'max-width'); + padding: components('tooltip', 'padding'); top: 120%; opacity: 0; - transition: variables('tooltip', 'transition'); + transition: components('tooltip', 'transition'); z-index: 1; &::after { content: ""; diff --git a/src/Components/Tooltip/variables.scss b/src/Modules/Components/Tooltip/variables.scss similarity index 100% rename from src/Components/Tooltip/variables.scss rename to src/Modules/Components/Tooltip/variables.scss diff --git a/src/Components/index.scss b/src/Modules/Components/index.scss similarity index 89% rename from src/Components/index.scss rename to src/Modules/Components/index.scss index 7ad3a5cf..5a0fffac 100644 --- a/src/Components/index.scss +++ b/src/Modules/Components/index.scss @@ -7,7 +7,9 @@ @forward "Badge/Badge"; @forward "Billboard/Billboard"; @forward "Breadcrumb/Breadcrumb"; +@forward "Caption/Caption"; @forward "Card/Card"; +@forward "Label/Label"; @forward "List/List"; @forward "Menu/Menu"; @forward "Navbar/Navbar"; diff --git a/src/Layout/Base/Base.scss b/src/Modules/Elements/Base/Base.scss similarity index 84% rename from src/Layout/Base/Base.scss rename to src/Modules/Elements/Base/Base.scss index 72e8e4c0..518b8316 100644 --- a/src/Layout/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -3,19 +3,9 @@ /// Layout : Base /// -@use "../../_themes/_getters" as *; -@use "../../Elements/Typography/variables"; - -/*! - * PUNICA CSS - #{theme('name')} - * v2.8.20 build 1054 - * - * @link http://www.punicacss.com - * @link http://github.com/codeforms/Punica-CSS-Framework - * - * Released under the MIT license - * @link http://opensource.org/licenses/MIT - */ +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../Typography/variables"; *, *:after, @@ -23,6 +13,11 @@ box-sizing: inherit; border: 0 solid theme('border', 'color'); } +*, +*::before, +*::after { + box-sizing: border-box; +} * { margin: 0; padding: 0; @@ -50,6 +45,11 @@ html, body { padding: 0; margin: 0; border: none; + scroll-behavior: smooth; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; } ::selection { background-color: theme('color', 'primary'); diff --git a/src/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss similarity index 71% rename from src/Elements/Button/Button.scss rename to src/Modules/Elements/Button/Button.scss index fd14a387..6fc4dc81 100644 --- a/src/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -3,26 +3,26 @@ /// Elements : Button /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "../../Elements/Typography/variables" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; +@use "../../../Modules/Elements/Typography/variables" as *; @use "variables" as *; @use "mixins" as *; /// if button is enable -@if options('button', 'enable') { +@if enabled('elements', 'button') { a.#{class('button', 'name')}, .#{class('button', 'name')} { display: inline-flex; font-family: $font-family; // typography > variables - font-size: variables('button', 'font-size'); - font-weight: theme('elements', 'button', 'font-weight'); + font-size: elements('button', 'font-size'); + font-weight: elements('button', 'font-weight'); text-decoration: none; white-space: nowrap; outline: none; - width: variables('button', 'width'); + width: elements('button', 'width'); background: theme('color', 'background'); background-image: none; @include border(); @@ -34,9 +34,9 @@ box-sizing: border-box; cursor: pointer; - line-height: variables('button', 'line-height'); - padding: variables('button', 'padding'); - transition: variables('button', 'transition'); + line-height: elements('button', 'line-height'); + padding: elements('button', 'padding'); + transition: elements('button', 'transition'); user-select: none; box-shadow: none; align-items: center; @@ -45,7 +45,7 @@ text-align: center; &:focus, &:hover { - transition: variables('button', 'transition'); + transition: elements('button', 'transition'); background-image: none; } &:hover { @@ -59,7 +59,7 @@ /// /// GRADIENT /// - @if options('button', 'features', 'gradient') { + @if features('elements', 'button', 'gradient') { &.#{class('button', 'gradient')} { z-index: 1; position: relative; @@ -109,19 +109,19 @@ width: auto; } i, [class^="#{class('icon', 'class-name')}"] { - font-size: variables('button', 'icon', 'font-size'); + font-size: elements('button', 'icon', 'font-size'); color: theme('color', 'text'); text-shadow: none; } /// /// STYLES /// - @if options('button', 'features', 'styles') { + @if features('elements', 'button', 'styles') { @each $theme-name, $theme-color, $border-color in $button-styles { &.#{$theme-name} { @include button-styles($theme-color, $border-color); } - @if options('button', 'features', 'outlined') { + @if features('elements', 'button', 'outlined') { &.#{$theme-name}.#{class('button', 'outlined')} { @include button-styles($theme-color, $border-color, true); } @@ -135,29 +135,20 @@ /// /// SIZES /// - @if options('button', 'features', 'sizes') { + @if features('elements', 'button', 'sizes') { @include button-sizes(); } - - /// - /// SECONDARY BUTTON - /// - @if options('button', 'features', 'secondary') { - &.#{class('button', 'secondary')} { - @include secondary-button(); - } - } } /// /// BUTTON GROUPS /// - @if options('button', 'features', 'group') { + @if features('elements', 'button', 'group') { @include button-group(); } /// /// DROPDOWN /// - @if options('button', 'features', 'dropdown') { + @if features('elements', 'button', 'dropdown') { @include dropdown(); } } diff --git a/src/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss similarity index 86% rename from src/Elements/Button/mixins.scss rename to src/Modules/Elements/Button/mixins.scss index 76d96a55..e7e6417c 100644 --- a/src/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -3,10 +3,10 @@ /// Elements : Button -> Mixins /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_setters" as *; -@use "../../_themes/_getters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; @use "variables"; /// @@ -110,7 +110,7 @@ /// /// BUTTON GROUPS /// - @if options('button', 'features', 'group') { + @if features('elements', 'button', 'group') { &>.#{class('button', 'group')} { &>.#{class('button', 'dropdown-toggle')}:nth-last-child(2) { border-bottom-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); @@ -121,7 +121,7 @@ /// /// SIZES /// - @if options('button', 'features', 'sizes') { + @if features('elements', 'button', 'sizes') { @include button-sizes(true); } } @@ -154,14 +154,6 @@ margin-left: -#{theme('border', 'width')}; } } - /// - /// SECONDARY BUTTON - /// - @if options('button', 'features', 'secondary') { - &.#{class('button', 'secondary')} > .#{class('button', 'name')} { - @include secondary-button(); - } - } &.#{class('button', 'block')} { display: flex; width: auto; @@ -172,13 +164,13 @@ /// /// SIZES /// - @if options('button', 'features', 'sizes') { + @if features('elements', 'button', 'sizes') { @include button-sizes(true); } /// /// STYLES /// - @if options('button', 'features', 'sizes') { + @if features('elements', 'button', 'styles') { @each $theme-name, $theme-color in variables.$button-styles { &.#{$theme-name} > .#{class('button', 'name')}, &.#{$theme-name} > .#{class('button', 'dropdown')} > .#{class('button', 'name')} { @@ -191,7 +183,7 @@ /// /// DROPDOWN /// - @if options('button', 'features', 'dropdown') { + @if features('elements', 'button', 'dropdown') { .#{class('button', 'dropdown')}:last-child:not(:first-child), .#{class('button', 'dropdown')}:last-child:not(:first-child) > .#{class('button', 'name')} { border-bottom-left-radius: 0; @@ -209,14 +201,14 @@ margin-left: -1px; } } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { //button-class-group box-shadow: none; } /// /// VERTICAL BUTTONS /// - @if options('button', 'features', 'vertical') { + @if features('elements', 'button', 'vertical') { &.#{class('button', 'vertical')} { flex-flow: column; >.#{class('button', 'name')}, @@ -238,7 +230,7 @@ /// /// DROPDOWN FOR VERTICAL BUTTONS /// - @if options('button', 'features', 'dropdown') { + @if features('elements', 'button', 'dropdown') { &>.#{class('button', 'dropdown')}:last-child:not(:first-child), &>.#{class('button', 'dropdown')}:last-child:not(:first-child) > .#{class('button', 'name')}, &>.#{class('button', 'dropdown')}:not(:first-child):not(:last-child) > .#{class('button', 'name')} { @@ -249,7 +241,7 @@ /// /// STYLES /// - @if options('button', 'features', 'styles') { + @if features('elements', 'button', 'styles') { @each $theme-name, $theme-color in variables.$button-styles { &>.#{$theme-name}.#{class('button', 'name')}, &>.#{class('button', 'dropdown')} > .#{$theme-name}.#{class('button', 'name')} { @@ -314,7 +306,7 @@ /// Gradient is not for outlined style /// @if $outlined != true { - @if options('button', 'features', 'gradient') { + @if features('elements', 'button', 'gradient') { &.#{class('button', 'gradient')} { background: $bg-color; z-index: 1; @@ -399,32 +391,6 @@ } } -/// -/// Secondary Button -/// -@mixin secondary-button( - $color: theme('elements', 'button', 'secondary', 'color'), - $hover-color: theme('elements', 'button', 'secondary', 'hover-color'), - $hover-bg: theme('elements', 'button', 'secondary', 'hover-bg'), - $border-color: theme('elements', 'button', 'secondary', 'border-color'), -) { - $setColor: if($color, $color, theme('color', 'text')); - color: $setColor; - border-color: if($border-color, $border-color, theme('border', 'color')); - background: theme('elements', 'button', 'secondary', 'background'); - &:focus, - &:hover, - &:active, - &.#{class('button', 'active')} { - color: if($hover-color, $hover-color, $setColor); - background: theme('elements', 'button', 'secondary', 'hover-bg'); - //z-index: 1; - } - i, [class^="#{class('icon', 'class-name')}"] { - color: $setColor; - } -} - /// /// Link Button /// diff --git a/src/Elements/Button/variables.scss b/src/Modules/Elements/Button/variables.scss similarity index 96% rename from src/Elements/Button/variables.scss rename to src/Modules/Elements/Button/variables.scss index b1f23374..f5b92739 100644 --- a/src/Elements/Button/variables.scss +++ b/src/Modules/Elements/Button/variables.scss @@ -3,7 +3,7 @@ /// Elements : Button -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; // SIZES ================================================ $button-sizes: ( diff --git a/src/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss similarity index 63% rename from src/Elements/Form/Form.scss rename to src/Modules/Elements/Form/Form.scss index 94d36c23..4c3d8351 100644 --- a/src/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -3,43 +3,44 @@ /// Elements : Form /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_global/variables" as *; -@use "../../_themes/_getters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Variables" as *; +@use "../../../Core/Theme/Getters" as *; @use "variables"; @use "mixins"; /// if form is enable -@if options('form', 'enable') { +@if enabled('elements', 'form') { @include mixins.form-inputs() { -webkit-appearance: none; background-color: theme('input', 'background'); border-width: theme('border', 'width'); border-style: theme('border', 'style'); border-color: if(theme('input', 'border-color'), theme('input', 'border-color'), theme('border', 'color')); - height: variables('form', 'input', 'height'); - border-radius: variables('form', 'input', 'border-radius'); + height: if(theme('input', 'height'), theme('input', 'height'), elements('form', 'input', 'height')); + border-radius: if(theme('input', 'border-radius'), theme('input', 'border-radius'), elements('form', 'input', 'border-radius')); outline: theme('input', 'outline-width') solid transparent; box-shadow: none; box-sizing: inherit; outline-offset: -#{theme('input', 'outline-width')}; - padding: variables('form', 'input', 'padding'); + padding: if(theme('input', 'padding'), theme('input', 'padding'), elements('form', 'input', 'padding')); width: 100%; max-width: 100%; font-family: inherit; color: if(theme('input', 'color'), theme('input', 'color'), theme('color', 'text')); - font-size: variables('form', 'input', 'font-size'); + font-size: if(theme('input', 'font-size'), theme('input', 'font-size'), elements('form', 'input', 'font-size')); transition: theme('input', 'transition'); &:focus { outline: theme('input', 'outline-width') solid theme('input', 'outline-color'); outline-offset: -#{theme('input', 'outline-width')}; background-color: lighten(theme('input', 'background'), 5.5%); + z-index: 0; } /// /// VALIDATION STYLES /// - @if options('form', 'features', 'validation-styles') { + @if features('elements', 'form', 'validation-styles') { @each $style-name, $style-color in variables.$input-styles { &.#{$style-name} { color: $style-color; @@ -82,10 +83,10 @@ .#{class('form', 'name')} { position: relative; max-width: 100%; - padding: variables('form', 'padding'); + padding: elements('form', 'padding'); .#{class('form', 'item')} { height: fit-content; - margin: variables('form', 'item', 'margin'); + margin: elements('form', 'item', 'margin'); display: inline-flex; flex-wrap: wrap; width: 100%; @@ -94,9 +95,9 @@ align-items: center; @at-root .#{class('form', 'name')} label, &>label { - margin: variables('form', 'label', 'margin'); + margin: elements('form', 'label', 'margin'); color: theme('color', 'text'); - font-size: variables('form', 'label', 'font-size'); + font-size: elements('form', 'label', 'font-size'); font-weight: theme('input', 'label-weight'); text-transform: none; height: fit-content; @@ -104,7 +105,7 @@ /// /// Custom file input /// - @if options('form', 'features', 'upload') { + @if features('elements', 'form', 'upload') { > input[type="file"] { opacity: 0; position: absolute; @@ -117,7 +118,7 @@ /// /// FORM GROUPS /// - @if options('form', 'features', 'group') { + @if features('elements', 'form', 'group') { @at-root .#{class('form', 'name')} .#{class('form', 'group')}, &>.#{class('form', 'group')} { display: flex; @@ -130,13 +131,14 @@ &:not(:first-child):not(:last-child) { margin-left: -1px; margin-right: 0; + border-radius: 0; } } >.#{class('button', 'group')} { box-shadow: none; } >.#{class('button', 'name')} { - height: variables('form', 'input', 'height'); + padding: if(theme('input', 'padding'), theme('input', 'padding'), elements('form', 'input', 'padding')); box-shadow: none; &:first-child { border-bottom-right-radius: 0; @@ -147,24 +149,34 @@ border-top-left-radius: 0; } } + @include mixins.form-inputs() { + &:first-child { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + &:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } } } } .#{class('form', 'items')} { - margin: variables('form', 'items', 'margin'); + margin: elements('form', 'items', 'margin'); display: flex; flex-wrap: wrap; &>.#{class('form', 'item')} { - margin: variables('form', 'item', 'margin'); + margin: elements('form', 'item', 'margin'); } } @each $name, $number in $grids { .#{$name}.#{class('form', 'items')} { >.#{class('form', 'item')} { - flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{variables('form', 'item', 'margin')})); + flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{elements('form', 'item', 'margin')})); } } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(layouts('grid', 'breakpoints', 'medium'), 'max-width') { .#{$name}.#{class('form', 'name')} { .#{$name}.#{class('form', 'items')} { >.#{class('form', 'item')} { @@ -177,7 +189,7 @@ /// /// INPUT SIZES /// - @if options('form', 'features', 'sizes') { + @if features('elements', 'form', 'sizes') { @each $size-name, $font-size, $input-height, $button-padding, $button-font-size in variables.$input-sizes { &.#{$size-name} { @include mixins.form-inputs() { @@ -201,63 +213,41 @@ /// /// CHECKBOX & RADIO /// - @if options('form', 'features', 'checkbox-radio') { + @if features('elements', 'form', 'checkbox-radio') { .#{class('form', 'radio')}, .#{class('form', 'checkbox')} { - position: relative; - label { - padding: variables('form', 'radio-checkbox', 'label-padding'); - cursor: pointer; - user-select: none; - font-weight: theme('typography', 'font-weight'); - margin: 0; - } + display: grid; + grid-template-columns: 1em auto; + gap: 1rem; input { - left: 0; - opacity: 0; - position: absolute; - top: 0; - } - input + label::before, - input + label::after { - position: absolute; - transition: opacity 0.11s ease-in-out; - font-family: '#{variables('icon', 'font-family')}'; - font-style: normal; - font-weight: normal; - text-transform: none; - font-size: variables('form', 'radio-checkbox', 'font-size'); - top: variables('form', 'radio-checkbox', 'top'); - left: variables('form', 'radio-checkbox', 'left'); - } - input + label::before { - opacity: 1; - } - input + label::after { - opacity: 0; - } - input:checked + label::after { - opacity: 1; - } - } - .#{class('form', 'checkbox')} { - input + label::before { - content: variables('icon', 'form', 'checkbox-before'); - color: theme('color', 'text'); - } - input + label::after { - content: variables('icon', 'form', 'checkbox-after'); - color: theme('color', 'primary'); - } - } - .#{class('form', 'radio')} { - input + label::before { - content: variables('icon', 'form', 'radio-before'); - color: theme('color', 'text'); + display: grid; + place-content: center; + margin: 0; + width: 1.6em; + height: 1.6em; + border: 0.15em solid theme('border', 'color'); + -webkit-appearance: none; + appearance: none; + &::before { + content: ""; + width: 0.7em; + height: 0.7em; + transform: scale(0); + background-color: theme('color', 'primary'); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + } + &:checked::before { + transform: scale(1.5); + } + &:disabled { + cursor: not-allowed; + } } - input + label::after { - content: variables('icon', 'form', 'radio-after'); - color: theme('color', 'primary'); + input[type="radio"] { + border-radius: 500px; + &::before { + clip-path: ellipse(45% 45% at 50% 50%);; + } } } } diff --git a/src/Elements/Form/mixins.scss b/src/Modules/Elements/Form/mixins.scss similarity index 100% rename from src/Elements/Form/mixins.scss rename to src/Modules/Elements/Form/mixins.scss diff --git a/src/Elements/Form/variables.scss b/src/Modules/Elements/Form/variables.scss similarity index 94% rename from src/Elements/Form/variables.scss rename to src/Modules/Elements/Form/variables.scss index d61818a5..f3019043 100644 --- a/src/Elements/Form/variables.scss +++ b/src/Modules/Elements/Form/variables.scss @@ -3,7 +3,7 @@ /// Elements : Form -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// SIZES =============================================== // [*] referenced from button variables diff --git a/src/Modules/Elements/Grid/Grid.scss b/src/Modules/Elements/Grid/Grid.scss new file mode 100644 index 00000000..c8aa15f3 --- /dev/null +++ b/src/Modules/Elements/Grid/Grid.scss @@ -0,0 +1,71 @@ +/// +/// Punica CSS Framework +/// Elements : Grid +/// + +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "variables" as *; + +/// if grid is enable +@if enabled('elements', 'grid') { + $column-size: elements('grid', 'columns', 'size'); + + .#{class('grid', 'container')} { + width: elements('grid', 'container', 'width'); + margin: elements('grid', 'container', 'margin'); + padding: 0 elements('grid', 'container', 'padding'); + } + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { + .#{class('grid', 'container')} { + padding: 0 calc(elements('grid', 'container', 'padding') / 3); + } + } + .#{class('grid', 'row')} { + display: grid; + grid-gap: elements('grid', 'gap'); + grid-template-columns: repeat($column-size, 1fr); + &> [class^="#{class('grid', 'column')}"] { + height: fit-content; + padding: elements('grid', 'columns', 'padding'); + min-height: elements('grid', 'columns', 'min-height'); + } + /// Equal height + @if features('elements', 'grid', 'equal') { + &.#{class('grid', 'equal')} > [class^="#{class('grid', 'column')}"] { + height: auto; + } + } + } + // Default Grid System + @for $id from 1 through $column-size { + .#{class('grid', 'column')}-#{$id} { + grid-column: span #{$id}; + } + } + // Breakpoints + @each $label, $breakpoint in $viewports { + @include breakpoints($breakpoint) { + @for $id from 1 through $column-size { + .#{class('grid', 'column')}-#{$label}-#{$id} { + grid-column: span #{$id}; + } + } + } + } + // Offset + @if features('elements', 'grid', 'offset') { + @each $label, $breakpoint in $viewports { + @include breakpoints($breakpoint) { + @for $id from 1 through $column-size { + @for $offset-id from 2 through $column-size { + .#{class('grid', 'column')}-#{$label}-#{$id}.#{class('grid', 'offset')}-#{$label}-#{$offset-id} { + grid-column: #{$offset-id} / span #{$id}; + } + } + } + } + } + } +} diff --git a/src/Modules/Elements/Grid/variables.scss b/src/Modules/Elements/Grid/variables.scss new file mode 100644 index 00000000..136ccaa9 --- /dev/null +++ b/src/Modules/Elements/Grid/variables.scss @@ -0,0 +1,17 @@ +/// +/// Punica CSS Framework +/// Layout : Grid -> Variables +/// + +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Global/Getters" as *; + +/// PREFERENCES ========================================= +$viewports: ( + (class('grid', 'extra-small'), elements('grid', 'breakpoints', 'extra-small')), + (class('grid', 'small'), elements('grid', 'breakpoints', 'small')), + (class('grid', 'medium'), elements('grid', 'breakpoints', 'medium')), + (class('grid', 'large'), elements('grid', 'breakpoints', 'large')), + (class('grid', 'extra-large'), elements('grid', 'breakpoints', 'extra-large')), + (class('grid', 'extra-extra-large'), elements('grid', 'breakpoints', 'extra-extra-large')) +); diff --git a/src/Elements/Table/Table.scss b/src/Modules/Elements/Table/Table.scss similarity index 77% rename from src/Elements/Table/Table.scss rename to src/Modules/Elements/Table/Table.scss index 20ac1a7b..df554b91 100644 --- a/src/Elements/Table/Table.scss +++ b/src/Modules/Elements/Table/Table.scss @@ -3,12 +3,12 @@ /// Elements : Table /// -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Theme/Setters" as *; /// if table is enable -@if options('table', 'enable') { +@if enabled('elements', 'table') { .#{class('table', 'name')} { position: relative; border-collapse: collapse; @@ -22,13 +22,13 @@ color: theme('color', 'text'); font-size: 1rem; font-weight: bold; - padding: variables('table', 'th', 'padding'); + padding: elements('table', 'th', 'padding'); border-bottom: theme('border', 'width') theme('border', 'style') theme('color', 'text'); } /// /// STRIPED /// - @if options('table', 'features', 'striped') { + @if features('elements', 'table', 'striped') { &.#{class('table', 'striped')} { tr, tbody tr { @@ -44,7 +44,7 @@ /// /// HOVERED /// - @if options('table', 'features', 'hovered') { + @if features('elements', 'table', 'hovered') { &.#{class('table', 'hovered')} { tr, tbody tr { @@ -66,7 +66,7 @@ td, th { border-bottom: set-border(); - padding: variables('table', 'td', 'padding'); + padding: elements('table', 'td', 'padding'); text-align: inherit; } thead tr { @@ -75,7 +75,7 @@ border-bottom-color: theme('border', 'color'); font-weight: theme('typography', 'font-weight'); color: theme('color', 'grey'); - padding: variables('table', 'th', 'padding'); + padding: elements('table', 'th', 'padding'); } } } diff --git a/src/Elements/Table/variables.scss b/src/Modules/Elements/Table/variables.scss similarity index 100% rename from src/Elements/Table/variables.scss rename to src/Modules/Elements/Table/variables.scss diff --git a/src/Elements/Typography/Typography.scss b/src/Modules/Elements/Typography/Typography.scss similarity index 83% rename from src/Elements/Typography/Typography.scss rename to src/Modules/Elements/Typography/Typography.scss index 42ea45be..0baf76ed 100644 --- a/src/Elements/Typography/Typography.scss +++ b/src/Modules/Elements/Typography/Typography.scss @@ -3,9 +3,9 @@ /// Elements : Typography /// -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; +@use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Theme/Getters" as *; @use "variables"; /// Headers @@ -15,13 +15,14 @@ color: inherit; line-height: 2; margin-bottom: 1em; + overflow-wrap: break-word; } #{$header}, .#{$header} { font-size: $font-size; font-weight: theme('typography', 'header-weight'); } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { #{$header}, .#{$header} { font-size: $responsive-size; diff --git a/src/Elements/Typography/variables.scss b/src/Modules/Elements/Typography/variables.scss similarity index 96% rename from src/Elements/Typography/variables.scss rename to src/Modules/Elements/Typography/variables.scss index 4d60fc4c..efde7927 100644 --- a/src/Elements/Typography/variables.scss +++ b/src/Modules/Elements/Typography/variables.scss @@ -3,7 +3,7 @@ /// Elements : Typography -> Variables /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; /// /// Google Fonts diff --git a/src/Elements/index.scss b/src/Modules/Elements/index.scss similarity index 56% rename from src/Elements/index.scss rename to src/Modules/Elements/index.scss index 5eeb60cd..538f2c24 100644 --- a/src/Elements/index.scss +++ b/src/Modules/Elements/index.scss @@ -3,10 +3,9 @@ /// Elements /// -@forward "Button/Button"; -@forward "Caption/Caption"; -@forward "Form/Form"; +@forward "Base/Base"; @forward "Typography/Typography"; @forward "Table/Table"; -@forward "Icon/Icon"; -@forward "Label/Label"; \ No newline at end of file +@forward "Form/Form"; +@forward "Grid/Grid"; +@forward "Button/Button"; \ No newline at end of file diff --git a/src/Utilities/_config/_specs.scss b/src/Modules/Utilities/_config/_specs.scss similarity index 100% rename from src/Utilities/_config/_specs.scss rename to src/Modules/Utilities/_config/_specs.scss diff --git a/src/Utilities/_config/align-content.scss b/src/Modules/Utilities/_config/align-content.scss similarity index 100% rename from src/Utilities/_config/align-content.scss rename to src/Modules/Utilities/_config/align-content.scss diff --git a/src/Utilities/_config/align-items.scss b/src/Modules/Utilities/_config/align-items.scss similarity index 100% rename from src/Utilities/_config/align-items.scss rename to src/Modules/Utilities/_config/align-items.scss diff --git a/src/Utilities/_config/align-self.scss b/src/Modules/Utilities/_config/align-self.scss similarity index 100% rename from src/Utilities/_config/align-self.scss rename to src/Modules/Utilities/_config/align-self.scss diff --git a/src/Utilities/_config/backdrop-filter.scss b/src/Modules/Utilities/_config/backdrop-filter.scss similarity index 100% rename from src/Utilities/_config/backdrop-filter.scss rename to src/Modules/Utilities/_config/backdrop-filter.scss diff --git a/src/Utilities/_config/bg-colors.scss b/src/Modules/Utilities/_config/bg-colors.scss similarity index 94% rename from src/Utilities/_config/bg-colors.scss rename to src/Modules/Utilities/_config/bg-colors.scss index b232018d..e4c0e4ab 100644 --- a/src/Utilities/_config/bg-colors.scss +++ b/src/Modules/Utilities/_config/bg-colors.scss @@ -7,7 +7,7 @@ /// including padding and border (but not the margin). /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; $bg-colors: ( // class name, value diff --git a/src/Utilities/_config/border-radius.scss b/src/Modules/Utilities/_config/border-radius.scss similarity index 100% rename from src/Utilities/_config/border-radius.scss rename to src/Modules/Utilities/_config/border-radius.scss diff --git a/src/Utilities/_config/border-style.scss b/src/Modules/Utilities/_config/border-style.scss similarity index 100% rename from src/Utilities/_config/border-style.scss rename to src/Modules/Utilities/_config/border-style.scss diff --git a/src/Utilities/_config/border.scss b/src/Modules/Utilities/_config/border.scss similarity index 100% rename from src/Utilities/_config/border.scss rename to src/Modules/Utilities/_config/border.scss diff --git a/src/Utilities/_config/cursors.scss b/src/Modules/Utilities/_config/cursors.scss similarity index 100% rename from src/Utilities/_config/cursors.scss rename to src/Modules/Utilities/_config/cursors.scss diff --git a/src/Utilities/_config/display-filter.scss b/src/Modules/Utilities/_config/display-filter.scss similarity index 100% rename from src/Utilities/_config/display-filter.scss rename to src/Modules/Utilities/_config/display-filter.scss diff --git a/src/Utilities/_config/display.scss b/src/Modules/Utilities/_config/display.scss similarity index 100% rename from src/Utilities/_config/display.scss rename to src/Modules/Utilities/_config/display.scss diff --git a/src/Utilities/_config/flex-direction.scss b/src/Modules/Utilities/_config/flex-direction.scss similarity index 100% rename from src/Utilities/_config/flex-direction.scss rename to src/Modules/Utilities/_config/flex-direction.scss diff --git a/src/Utilities/_config/flex-grow.scss b/src/Modules/Utilities/_config/flex-grow.scss similarity index 100% rename from src/Utilities/_config/flex-grow.scss rename to src/Modules/Utilities/_config/flex-grow.scss diff --git a/src/Utilities/_config/flex-shrink.scss b/src/Modules/Utilities/_config/flex-shrink.scss similarity index 100% rename from src/Utilities/_config/flex-shrink.scss rename to src/Modules/Utilities/_config/flex-shrink.scss diff --git a/src/Utilities/_config/flex-wrap.scss b/src/Modules/Utilities/_config/flex-wrap.scss similarity index 100% rename from src/Utilities/_config/flex-wrap.scss rename to src/Modules/Utilities/_config/flex-wrap.scss diff --git a/src/Utilities/_config/flex.scss b/src/Modules/Utilities/_config/flex.scss similarity index 100% rename from src/Utilities/_config/flex.scss rename to src/Modules/Utilities/_config/flex.scss diff --git a/src/Utilities/_config/float.scss b/src/Modules/Utilities/_config/float.scss similarity index 100% rename from src/Utilities/_config/float.scss rename to src/Modules/Utilities/_config/float.scss diff --git a/src/Utilities/_config/font-sizes.scss b/src/Modules/Utilities/_config/font-sizes.scss similarity index 100% rename from src/Utilities/_config/font-sizes.scss rename to src/Modules/Utilities/_config/font-sizes.scss diff --git a/src/Utilities/_config/font-weight.scss b/src/Modules/Utilities/_config/font-weight.scss similarity index 100% rename from src/Utilities/_config/font-weight.scss rename to src/Modules/Utilities/_config/font-weight.scss diff --git a/src/Utilities/_config/height.scss b/src/Modules/Utilities/_config/height.scss similarity index 100% rename from src/Utilities/_config/height.scss rename to src/Modules/Utilities/_config/height.scss diff --git a/src/Utilities/_config/inset.scss b/src/Modules/Utilities/_config/inset.scss similarity index 100% rename from src/Utilities/_config/inset.scss rename to src/Modules/Utilities/_config/inset.scss diff --git a/src/Utilities/_config/justify-content.scss b/src/Modules/Utilities/_config/justify-content.scss similarity index 100% rename from src/Utilities/_config/justify-content.scss rename to src/Modules/Utilities/_config/justify-content.scss diff --git a/src/Utilities/_config/justify-items.scss b/src/Modules/Utilities/_config/justify-items.scss similarity index 100% rename from src/Utilities/_config/justify-items.scss rename to src/Modules/Utilities/_config/justify-items.scss diff --git a/src/Utilities/_config/justify-self.scss b/src/Modules/Utilities/_config/justify-self.scss similarity index 100% rename from src/Utilities/_config/justify-self.scss rename to src/Modules/Utilities/_config/justify-self.scss diff --git a/src/Utilities/_config/line-height.scss b/src/Modules/Utilities/_config/line-height.scss similarity index 100% rename from src/Utilities/_config/line-height.scss rename to src/Modules/Utilities/_config/line-height.scss diff --git a/src/Utilities/_config/margin.scss b/src/Modules/Utilities/_config/margin.scss similarity index 100% rename from src/Utilities/_config/margin.scss rename to src/Modules/Utilities/_config/margin.scss diff --git a/src/Utilities/_config/object-fit.scss b/src/Modules/Utilities/_config/object-fit.scss similarity index 100% rename from src/Utilities/_config/object-fit.scss rename to src/Modules/Utilities/_config/object-fit.scss diff --git a/src/Utilities/_config/order.scss b/src/Modules/Utilities/_config/order.scss similarity index 100% rename from src/Utilities/_config/order.scss rename to src/Modules/Utilities/_config/order.scss diff --git a/src/Utilities/_config/overflow.scss b/src/Modules/Utilities/_config/overflow.scss similarity index 100% rename from src/Utilities/_config/overflow.scss rename to src/Modules/Utilities/_config/overflow.scss diff --git a/src/Utilities/_config/padding.scss b/src/Modules/Utilities/_config/padding.scss similarity index 100% rename from src/Utilities/_config/padding.scss rename to src/Modules/Utilities/_config/padding.scss diff --git a/src/Utilities/_config/place-content.scss b/src/Modules/Utilities/_config/place-content.scss similarity index 100% rename from src/Utilities/_config/place-content.scss rename to src/Modules/Utilities/_config/place-content.scss diff --git a/src/Utilities/_config/place-items.scss b/src/Modules/Utilities/_config/place-items.scss similarity index 100% rename from src/Utilities/_config/place-items.scss rename to src/Modules/Utilities/_config/place-items.scss diff --git a/src/Utilities/_config/place-self.scss b/src/Modules/Utilities/_config/place-self.scss similarity index 100% rename from src/Utilities/_config/place-self.scss rename to src/Modules/Utilities/_config/place-self.scss diff --git a/src/Utilities/_config/position.scss b/src/Modules/Utilities/_config/position.scss similarity index 100% rename from src/Utilities/_config/position.scss rename to src/Modules/Utilities/_config/position.scss diff --git a/src/Utilities/_config/resize.scss b/src/Modules/Utilities/_config/resize.scss similarity index 100% rename from src/Utilities/_config/resize.scss rename to src/Modules/Utilities/_config/resize.scss diff --git a/src/Utilities/_config/text-align.scss b/src/Modules/Utilities/_config/text-align.scss similarity index 100% rename from src/Utilities/_config/text-align.scss rename to src/Modules/Utilities/_config/text-align.scss diff --git a/src/Utilities/_config/text-colors.scss b/src/Modules/Utilities/_config/text-colors.scss similarity index 90% rename from src/Utilities/_config/text-colors.scss rename to src/Modules/Utilities/_config/text-colors.scss index 8fe85373..838eac81 100644 --- a/src/Utilities/_config/text-colors.scss +++ b/src/Modules/Utilities/_config/text-colors.scss @@ -4,7 +4,7 @@ /// The color property specifies the color of text. /// -@use "../../_themes/_getters" as *; +@use "../../../Core/Theme/Getters" as *; $text-colors: ( // class name, value diff --git a/src/Utilities/_config/text-decoration.scss b/src/Modules/Utilities/_config/text-decoration.scss similarity index 100% rename from src/Utilities/_config/text-decoration.scss rename to src/Modules/Utilities/_config/text-decoration.scss diff --git a/src/Utilities/_config/text-transform.scss b/src/Modules/Utilities/_config/text-transform.scss similarity index 100% rename from src/Utilities/_config/text-transform.scss rename to src/Modules/Utilities/_config/text-transform.scss diff --git a/src/Utilities/_config/user-select.scss b/src/Modules/Utilities/_config/user-select.scss similarity index 100% rename from src/Utilities/_config/user-select.scss rename to src/Modules/Utilities/_config/user-select.scss diff --git a/src/Utilities/_config/width.scss b/src/Modules/Utilities/_config/width.scss similarity index 100% rename from src/Utilities/_config/width.scss rename to src/Modules/Utilities/_config/width.scss diff --git a/src/Utilities/_config/z-index.scss b/src/Modules/Utilities/_config/z-index.scss similarity index 100% rename from src/Utilities/_config/z-index.scss rename to src/Modules/Utilities/_config/z-index.scss diff --git a/src/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss similarity index 97% rename from src/Utilities/helpers.scss rename to src/Modules/Utilities/helpers.scss index 3cda7b9e..bd1fa435 100644 --- a/src/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -3,11 +3,12 @@ /// Utilities : Helpers /// +@use "../../Core/Global/Getters" as *; +@use "../../Core/Theme/Getters" as *; @use "variables" as *; @use "mixins" as *; -@use "../_global/_getters" as *; -@if options('helpers', 'enable') { +@if enabled('utilities', 'helpers') { /// Align Items @include setHelperList($align-items, "align-items", "!important"); diff --git a/src/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss similarity index 98% rename from src/Utilities/mixins.scss rename to src/Modules/Utilities/mixins.scss index 922b3486..14811d9a 100644 --- a/src/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -3,8 +3,8 @@ /// Utilities : Helpers -> Mixins /// -@use "../_themes/_setters" as *; -@use "../_themes/_getters" as *; +@use "../../Core/Theme/Getters" as *; +@use "../../Core/Theme/Setters" as *; @use "_config/specs" as *; /// diff --git a/src/Utilities/variables.scss b/src/Modules/Utilities/variables.scss similarity index 100% rename from src/Utilities/variables.scss rename to src/Modules/Utilities/variables.scss diff --git a/src/_themes/_getters.scss b/src/_themes/_getters.scss deleted file mode 100644 index b24a7c58..00000000 --- a/src/_themes/_getters.scss +++ /dev/null @@ -1,51 +0,0 @@ -/// -/// Punica CSS Framework : Theme Getter Functions -/// - -/// -/// Get Active Theme -/// @param {String} $theme -/// -@mixin get-theme($theme: 'default') { - $set-theme: if(map-has-key(themes.$themes, $theme), $theme, theme-not-found($theme)); - $theme-map: map-get(themes.$themes, $set-theme) !global; - @content; - $theme-map: null !global; -} - -/// -/// Get active theme's value by key -/// -/// @param {String} $node -/// @param {String} $key -/// @param {String} $child -/// @param {String} $sub -/// -/// @example theme('name') -/// @example theme('color', 'primary') -/// @example theme('elements', 'button', 'font-weight') -/// @example theme('elements', 'button', 'secondary', 'background') -/// -@function theme($node, $key: null, $child: null, $sub: null) { - $value: map-get($theme-map, $node); - - @if $key { - $value: map-get($value, $key); - @if $child { - $value: map-get($value, $child); - @if $sub { - $value: map-get($value, $sub); - } - } - } - - @return $value; -} - -/// -/// @param {String} $theme -/// -@function theme-not-found($theme) { - $error: "Invalid theme name: #{$theme}. Punica's theme map does not contains a value associated with #{$theme}. Please check the '_themes/index.scss' file."; - @error $error; -} \ No newline at end of file diff --git a/src/_themes/index.scss b/src/_themes/index.scss deleted file mode 100644 index 6e382558..00000000 --- a/src/_themes/index.scss +++ /dev/null @@ -1,88 +0,0 @@ -/// -/// Punica CSS Framework : Themes -/// - -$themes: ( - default: ( - 'name' : 'Default Theme', - 'type' : 'light', // light or dark (required*), - 'google-font': ( - 'name' : 'IBM+Plex+Sans+Hebrew', // or Source+Sans+Pro etc - 'weights' : '400;600;700', - ), - 'typography': ( - 'font-family' : 'IBM Plex Sans Hebrew', - 'font-size' : 13px, - 'font-weight' : 400, - 'line-height' : 1.7, - 'header-weight' : 700, - ), - 'color': ( - 'text' : #202123, - 'background' : white, - 'primary' : #314a93, - 'success' : #297d51, - 'warning' : #956d28, - 'error' : #972727, - 'active' : #dcdcdc, - 'negative' : white, - 'grey' : #979797, - 'secondary' : #e6e6e6, - 'dark' : #252831, - ), - 'border': ( - 'color' : #c6c6c6, - 'width' : 1px, - 'style' : solid, - 'radius' : 4px, - ), - 'shadow': ( - 'horizontal' : 0, - 'vertical' : 2px, - 'blur' : 4px, - 'spread' : 0, - 'color' : rgba(0, 0, 0, 0.20), - ), - 'input': ( - 'color' : null, // (null = color > text) - 'background' : white, - 'border-color' : null, // (null = border > color) - 'outline-color' : #252831, - 'outline-width' : 2px, - 'label-weight' : 600, - 'transition' : .35s - ), - 'components': ( - 'navbar': ( - 'font-weight': 700 - ), - 'tabnav': ( - 'font-weight': 600 - ), - 'card': ( - 'background' : null, // (null = color > background) - 'radius' : null // (null = border > radius) - ), - 'panel': ( - 'background' : null, // (null = color > background) - 'radius' : null // (null = border > radius) - ), - 'menu': ( - 'background': null, // (null = color > background) - ) - ), - 'elements': ( - 'button': ( - 'font-weight' : 700, - 'radius' : null, // (null = border > radius) - 'secondary': ( - 'color' : null, - 'background' : linear-gradient(to top, #e6e6e6 0%,#ffffff 100%), - 'hover-color' : null, - 'hover-bg' : linear-gradient(to bottom, #e6e6e6 0%,#ffffff 100%), - 'border-color' : null - ) - ), - ) - ) -); \ No newline at end of file diff --git a/src/classnames.scss b/src/classnames.scss index 0f0111fb..ea6fc71b 100755 --- a/src/classnames.scss +++ b/src/classnames.scss @@ -1,5 +1,6 @@ /// -/// Punica CSS Framework : Class Names +/// Punica CSS Framework +/// Default class names /// $classnames: ( ///////////////////////////////////////////////////////// @@ -22,6 +23,11 @@ $classnames: ( 'item' : 'item', 'active': 'active' ), + 'caption': ( + 'name' : 'caption', + 'centered': 'centered', + 'divided' : 'divided' + ), 'card': ( 'name' : 'card', 'cards' : 'cards', @@ -33,6 +39,9 @@ $classnames: ( 'horizontal' : 'horizontal', 'actions' : 'actions', ), + 'label': ( + 'name': 'label' + ), 'list': ( 'name' : 'list', 'item' : 'item', @@ -121,7 +130,6 @@ $classnames: ( 'group' : 'buttons', 'link' : 'link', 'outlined' : 'outlined', - 'secondary' : 'secondary', 'active' : 'active', 'inactive' : 'inactive', 'block' : 'block', @@ -136,11 +144,6 @@ $classnames: ( 'dropdown-toggle' : 'toggle', 'dropdown-clickable': 'clickable' ), - 'caption': ( - 'name' : 'caption', - 'centered': 'centered', - 'divided' : 'divided' - ), 'form': ( 'name' : 'form', 'items' : 'items', @@ -149,21 +152,6 @@ $classnames: ( 'radio' : 'radio', 'group' : 'group', ), - 'icon': ( - 'class-name': 'material-symbols-outlined' - ), - 'label': ( - 'name': 'label' - ), - 'table': ( - 'name' : 'table', - 'striped': 'striped', - 'hovered': 'hovered', - 'active' : 'active' - ), - 'typography': (), - ///////////////////////////////////////////////////////// - /// Layout 'grid': ( 'row' : 'row', 'container' : 'container', @@ -178,4 +166,14 @@ $classnames: ( 'extra-large' : 'xl', 'extra-extra-large' : 'xxl' ), + 'table': ( + 'name' : 'table', + 'striped': 'striped', + 'hovered': 'hovered', + 'active' : 'active' + ), + 'typography': (), + 'icon': ( + 'class-name': 'material-symbols-outlined' + ), ) \ No newline at end of file diff --git a/src/options.scss b/src/options.scss index 211e836d..84344843 100755 --- a/src/options.scss +++ b/src/options.scss @@ -1,49 +1,14 @@ /// -/// Punica CSS Framework : Options & Variables +/// Punica CSS Framework +/// Default Options & Variables +/// You can override the all following default variables from your theme map. /// $options: ( - /// - /// LAYOUT - /// - /// total estimated size is [59KB] if the grid - /// and it's features enabled. - /// - 'grid': ( - 'enable': true, // estimated 59KB with offset feature - 'features': ( - 'equal' : true, // equal height - 'offset': true // [!] increases the size (estimated 52KB) - ), - 'variables': ( - 'gap' : 6px, - 'columns': ( - 'size' : 16, - 'padding' : .3rem, - 'min-height': .125rem - ), - 'container': ( - 'width' : 100%, - 'padding': 40px, - 'margin' : 0 auto - ), - 'breakpoints': ( - 'extra-small' : 0, - 'small' : 500px, - 'medium' : 768px, - 'large' : 992px, - 'extra-large' : 1260px, - 'extra-extra-large' : 1400px - ) - ) - ), /// /// COMPONENTS /// - /// total estimated size is [41KB] if all components - /// and it's features enabled. - /// 'alert': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features': ( 'styles': true, 'sizes' : true @@ -58,7 +23,7 @@ $options: ( ) ), 'badge': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features': ( 'styles': true, 'sizes' : true @@ -68,7 +33,7 @@ $options: ( ) ), 'billboard': ( - 'enable': true, // estimated 2KB + 'enabled': true, 'features': ( 'styles': true, 'sizes' : true, @@ -82,23 +47,31 @@ $options: ( ) ), 'breadcrumb': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features': ( 'sizes': true ), 'variables': ( - 'font-weight' : bold, + 'font-weight' : normal, 'active-weight': bold, - 'seperator' : ( // icon - 'padding' : 0 .25em, - 'vertical-align': middle, - 'font-size' : 1.4rem, - 'cursor' : auto - ) + 'seperator' : "\276D" + ) + ), + 'caption': ( + 'enabled': true, + 'features': ( + 'sizes': true, + ), + 'variables': ( + 'margin' : 1.3em .2rem, + 'font-size': 1.95rem, + 'media' : ( + 'margin': .559em, + ), ) ), 'card': ( - 'enable': true, // estimated 5KB + 'enabled': true, 'features': ( 'group' : true, 'horizontal' : true, @@ -119,8 +92,20 @@ $options: ( ) ) ), + 'label': ( + 'enabled': true, + 'features': ( + 'styles': true, + 'sizes' : true + ), + 'variables': ( + 'font-size': .9195em, + 'padding' : 0.28rem 0.9rem, + 'margin' : .1rem .05rem + ) + ), 'list': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features': ( 'divided': true, 'hovered': true, @@ -155,7 +140,7 @@ $options: ( ) ), 'menu': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features': (), 'variables': ( 'width' : 100%, @@ -191,7 +176,7 @@ $options: ( ) ), 'navbar': ( - 'enable': true, // estimated 8KB + 'enabled': true, 'features': ( 'themes' : true, 'sizes' : true, @@ -216,7 +201,7 @@ $options: ( ) ), 'panel': ( - 'enable': true, // estimated 5KB + 'enabled': true, 'features': ( 'media' : true, 'media-group': true, @@ -231,7 +216,7 @@ $options: ( ) ), 'process': ( - 'enable': true, // estimated 4KB + 'enabled': true, 'features': ( 'styles' : true, 'vertical': true @@ -254,7 +239,7 @@ $options: ( ) ), 'progress': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features': ( 'styles': true ), @@ -265,7 +250,7 @@ $options: ( ) ), 'stats': ( - 'enable': true, // estimated 2KB + 'enabled': true, 'features': ( 'styles': true ), @@ -295,7 +280,7 @@ $options: ( ) ), 'tabnav': ( - 'enable': true, // estimated 5KB + 'enabled': true, 'features': ( 'styles' : true, 'bottom-position': true @@ -305,7 +290,7 @@ $options: ( ) ), 'timeline': ( - 'enable': true, // estimated 5KB + 'enabled': true, 'features': ( 'styles' : true, 'media' : true, @@ -320,7 +305,7 @@ $options: ( ) ), 'tooltip': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features' : (), 'variables': ( 'font-size' : .9em, @@ -334,11 +319,8 @@ $options: ( /// /// ELEMENTS /// - /// total estimated size is [60kb] if all elements - /// and it's features enabled. - /// 'button': ( - 'enable': true, // estimated 50KB + 'enabled': true, 'features': ( 'group' : true, 'vertical' : true, @@ -350,6 +332,7 @@ $options: ( 'gradient' : true ), 'variables': ( + 'font-weight': 600, 'font-size' : 1em, 'line-height': 1, 'width' : min-content, @@ -360,21 +343,8 @@ $options: ( ) ) ), - 'caption': ( - 'enable': true, // estimated 1KB - 'features': ( - 'sizes': true, - ), - 'variables': ( - 'margin' : 1.3em .2rem, - 'font-size': 1.95rem, - 'media' : ( - 'margin': .559em, - ), - ) - ), 'form': ( - 'enable': true, // estimated 9KB + 'enabled': true, 'features': ( 'group' : true, 'sizes' : true, @@ -408,46 +378,36 @@ $options: ( ) ) ), - 'icon': ( - 'enable': true, // estimated 1KB - 'features' : (), + 'grid': ( + 'enabled': true, + 'features': ( + 'equal' : true, // equal height + 'offset': true // [!] increases the size + ), 'variables': ( - 'font-family' : 'Material Symbols Outlined', - 'font-size' : 1.12rem, - 'line-height' : 1, - 'vertical-align': middle, - 'form': ( - 'radio-before' : 'radio_button_unchecked', - 'radio-after' : 'radio_button_checked', - 'checkbox-before': 'check_box_outline_blank', - 'checkbox-after' : 'check_box' - ), - 'breadcrumb': ( - 'seperator': 'keyboard_arrow_right' + 'gap' : 6px, + 'columns': ( + 'size' : 16, + 'padding' : .3rem, + 'min-height': .125rem ), - 'navbar': ( - 'open' : 'dehaze', - 'close': 'close' + 'container': ( + 'width' : 100%, + 'padding': 40px, + 'margin' : 0 auto ), - 'process': ( - 'current': 'beenhere' + 'breakpoints': ( + 'extra-small' : 0, + 'small' : 500px, + 'medium' : 768px, + 'large' : 992px, + 'extra-large' : 1260px, + 'extra-extra-large' : 1400px ) ) ), - 'label': ( - 'enable': true, // estimated 1KB - 'features': ( - 'styles': true, - 'sizes' : true - ), - 'variables': ( - 'font-size': .9195em, - 'padding' : 0.28rem 0.9rem, - 'margin' : .1rem .05rem - ) - ), 'table': ( - 'enable': true, // estimated 1KB + 'enabled': true, 'features': ( 'hovered': true, 'striped': true @@ -464,11 +424,8 @@ $options: ( /// /// UTILITIES /// - /// total estimated size is [35KB] if all helpers - /// and it's features enabled. - /// 'helpers': ( - 'enable' : true, + 'enabled' : true, 'features' : (), 'variables': () ) diff --git a/src/punica.scss b/src/punica.scss index 8e93597d..572b4c6b 100755 --- a/src/punica.scss +++ b/src/punica.scss @@ -1,32 +1,29 @@ -/// +/// /// Punica CSS Framework /// -/// @link http://www.punicacss.com -/// @link http://github.com/codeforms/Punica-CSS-Framework -/// -/// Released under the MIT license -/// @link http://opensource.org/licenses/MIT -/// -/// ====================================================== - $active-theme: default; // _themes/index -/// ====================================================== - -@use "_themes/_getters" as *; -@use "_themes/index" as get; - -$theme: if(map-has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); -$theme-map: map-get(get.$themes, $theme) !global; +@use "Core/Theme/Getters" as *; +@use "themes" as get; /// ====================================================== -@use "Layout/index" as layout; -@use "Elements/index" as elements; -@use "Components/index" as components; -@use "Utilities/helpers"; + $active-theme: default; +/// ====================================================== + $theme: if(map-has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); + $theme-map: map-get(get.$themes, $theme) !global; /// ====================================================== -@debug "DONE \1F5F8"; -@debug "The #{$theme} theme is compiled successfully."; +/*! + * PUNICA CSS - #{theme('name')} + * v3.0.0 Beta build 1054 + * + * @link http://github.com/codeforms/Punica-CSS-Framework + * + * Released under the MIT license + * @link http://opensource.org/licenses/MIT + */ -$theme-map: null !global; -/// ====================================================== \ No newline at end of file +@use "Modules/Elements/index" as elements; +@use "Modules/Components/index" as components; +@use "Modules/Utilities/helpers"; +@debug "#{theme('name')} is compiled successfully."; +$theme-map: null !global; \ No newline at end of file diff --git a/src/themes.scss b/src/themes.scss new file mode 100644 index 00000000..75642570 --- /dev/null +++ b/src/themes.scss @@ -0,0 +1,138 @@ +/// +/// Punica CSS Framework : Themes +/// + +$themes: ( + default: ( + 'name' : 'Default Theme', + 'type' : 'light', // light or dark (required*), + 'google-font': ( + 'name' : 'IBM+Plex+Sans+Hebrew', // or Source+Sans+Pro etc + 'weights' : '400;600;700', + ), + 'typography': ( + 'font-family' : 'IBM Plex Sans Hebrew', + 'font-size' : 13px, + 'font-weight' : 400, + 'line-height' : 1.7, + 'header-weight' : 700, + ), + 'color': ( + 'text' : #202123, + 'background' : white, + 'primary' : #314a93, + 'success' : #297d51, + 'warning' : #956d28, + 'error' : #972727, + 'active' : #dcdcdc, + 'negative' : white, + 'grey' : #979797, + 'secondary' : #e6e6e6, + 'dark' : #252831, + ), + 'border': ( + 'color' : #c6c6c6, + 'width' : 1px, + 'style' : solid, + 'radius' : 4px, + ), + 'shadow': ( + 'horizontal' : 0, + 'vertical' : 2px, + 'blur' : 4px, + 'spread' : 0, + 'color' : rgba(0, 0, 0, 0.20), + ), + 'input': ( + 'color' : null, // (null = color > text) + 'background' : white, + 'border-color' : null, // (null = border > color) + 'outline-color' : #252831, + 'outline-width' : 2px, + 'label-weight' : 600, + 'transition' : .35s, + ), + 'components': ( + 'navbar': ( + 'font-weight': 700 + ), + 'tabnav': ( + 'font-weight': 600 + ) + ), + 'elements': ( + 'button': ( + 'font-weight' : 700 + ), + ), + 'utilities': () + ), + dark: ( + 'name' : 'Dark Theme', + 'type' : 'dark', // light or dark (required*), + 'google-font': ( + 'name' : 'IBM+Plex+Sans+Hebrew', // or Source+Sans+Pro etc + 'weights' : '400;600;700', + ), + 'typography': ( + 'font-family' : 'IBM Plex Sans Hebrew', + 'font-size' : 13px, + 'font-weight' : 400, + 'line-height' : 1.7, + 'header-weight' : 700, + ), + 'color': ( + 'text' : white, + 'background' : #252831, + 'primary' : #3e5bb2, + 'success' : #2f8f5d, + 'warning' : #ab7d2d, + 'error' : #ba3d3d, + 'active' : lighten(#252831, 3.7%), + 'negative' : white, + 'grey' : #6d758c, + 'secondary' : lighten(#252831, 5%), + 'dark' : lighten(#252831, 4.5%), + ), + 'border': ( + 'color' : lighten(#252831, 17%), + 'width' : 1px, + 'style' : solid, + 'radius' : 4px, + ), + 'shadow': ( + 'horizontal' : 0, + 'vertical' : 1px, + 'blur' : 4px, + 'spread' : 0, + 'color' : rgba(0, 0, 0, 0.20), + ), + 'input': ( + 'color' : null, // (null = color > text) + 'background' : lighten(#252831, 4.5%), + 'border-color' : null, // (null = border > color) + 'outline-color' : white, + 'outline-width' : 2px, + 'label-weight' : 600, + 'transition' : .35s + ), + 'components': ( + 'navbar': ( + 'font-weight': 700 + ), + 'tabnav': ( + 'font-weight': 600 + ), + 'card': ( + 'background' : lighten(#252831, 1.75%) + ) + ), + 'elements': ( + 'button': ( + 'font-weight' : 700 + ), + ), + 'utilities': () + ), + // add your custom theme map here. +); \ No newline at end of file From c6b4f76bc4dd23a716bfe39e0172b91d34ea2bba Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 9 Sep 2024 07:20:11 +0300 Subject: [PATCH 002/154] fixed Core/Theme/Getters --- src/Core/Theme/Getters.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index b96e8331..18343993 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -132,11 +132,9 @@ @if($value != null) { @return $value }; - - @return get_default_variable($keys); - } @else { - @return get_default_variable($keys); } + + @return get_default_variable($keys); } /// From 96096dc95df2c38deaf7d180a4c42cc29fffe38f Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Fri, 13 Sep 2024 08:49:40 +0300 Subject: [PATCH 003/154] deleted progress component --- src/Modules/Components/Progress/Progress.scss | 44 ------------------- .../Components/Progress/variables.scss | 15 ------- src/Modules/Components/index.scss | 1 - 3 files changed, 60 deletions(-) delete mode 100644 src/Modules/Components/Progress/Progress.scss delete mode 100644 src/Modules/Components/Progress/variables.scss diff --git a/src/Modules/Components/Progress/Progress.scss b/src/Modules/Components/Progress/Progress.scss deleted file mode 100644 index 9f96d1a6..00000000 --- a/src/Modules/Components/Progress/Progress.scss +++ /dev/null @@ -1,44 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Progress -/// - -@use "../../../Core/Global/Getters" as *; -@use "../../../Core/Global/Mixins" as *; -@use "../../../Core/Theme/Getters" as *; -@use "../../../Core/Theme/Setters" as *; -@use "variables"; - -/// if progress is enable -@if enabled('components', 'progress') { - .#{class('progress', 'name')} { - width: components('progress', 'width'); - height: components('progress', 'height'); - background: theme('color', 'secondary'); - @include shadow(0, 1px, 2px, rgba(0, 0, 0, 0.15), inset); - border-radius: components('progress', 'border-radius'); - appearance: none; - &::-webkit-progress-bar { - background: transparent; - border-radius: components('progress', 'border-radius'); - } - &::-webkit-progress-value { - background: theme('color', 'primary'); - border-radius: components('progress', 'border-radius'); - } - &::-moz-progress-bar { - background: theme('color', 'primary'); - border-radius: components('progress', 'border-radius'); - } - /// - /// STYLES - /// - @if features('components', 'progress', 'styles') { - @each $type, $color in variables.$styles { - &.#{$type}::-webkit-progress-value { - background: $color; - } - } - } - } -} diff --git a/src/Modules/Components/Progress/variables.scss b/src/Modules/Components/Progress/variables.scss deleted file mode 100644 index e6eea717..00000000 --- a/src/Modules/Components/Progress/variables.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Progress -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), color theme - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'text'), -); diff --git a/src/Modules/Components/index.scss b/src/Modules/Components/index.scss index 5a0fffac..2d3c3f63 100644 --- a/src/Modules/Components/index.scss +++ b/src/Modules/Components/index.scss @@ -15,7 +15,6 @@ @forward "Navbar/Navbar"; @forward "Panel/Panel"; @forward "Process/Process"; -@forward "Progress/Progress"; @forward "Stats/Stats"; @forward "Tabnav/Tabnav"; @forward "Timeline/Timeline"; From e79acbb1a6a36c80af6358477e17fbf4d3412d92 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Fri, 13 Sep 2024 08:57:59 +0300 Subject: [PATCH 004/154] updated core/modules --- src/Core/Global/Colors.scss | 10 ++++++++++ src/Core/Theme/Getters.scss | 1 - src/Modules/Components/Alert/Alert.scss | 2 +- src/Modules/Components/Badge/Badge.scss | 7 ++++--- .../Components/Billboard/Billboard.scss | 2 +- src/Modules/Components/Card/Card.scss | 7 ++++++- src/Modules/Components/Label/Label.scss | 2 +- src/Modules/Components/List/List.scss | 5 +++-- src/Modules/Components/Menu/Menu.scss | 11 ++++++++--- src/Modules/Components/Navbar/Navbar.scss | 19 ++++++++++--------- src/Modules/Components/Navbar/variables.scss | 7 ++++--- src/Modules/Components/Stats/Stats.scss | 10 ++++++++-- src/Modules/Components/Tabnav/Tabnav.scss | 15 ++++++++++++--- src/Modules/Components/Timeline/Timeline.scss | 3 ++- .../Components/Timeline/variables.scss | 11 ++++++----- src/Modules/Components/Tooltip/Tooltip.scss | 2 +- src/Modules/Elements/Base/Base.scss | 2 +- src/Modules/Elements/Button/Button.scss | 8 ++++---- src/Modules/Elements/Button/mixins.scss | 12 ++++++------ src/Modules/Elements/Table/Table.scss | 15 ++++++++++----- src/Modules/Utilities/_config/bg-colors.scss | 4 ++-- .../Utilities/_config/text-colors.scss | 3 ++- src/options.scss | 1 - src/themes.scss | 14 +++----------- 24 files changed, 105 insertions(+), 68 deletions(-) create mode 100644 src/Core/Global/Colors.scss diff --git a/src/Core/Global/Colors.scss b/src/Core/Global/Colors.scss new file mode 100644 index 00000000..5aaad866 --- /dev/null +++ b/src/Core/Global/Colors.scss @@ -0,0 +1,10 @@ +/// +/// Punica CSS Framework +/// Core/Global/Colors.scss +/// + +@use "../Theme/Getters" as *; + +// Secondary color variables +$grey : mix(theme('color', 'text'), theme('color', 'background'), 14.5%); +$negative : invert(theme('color', 'text'), 100%); \ No newline at end of file diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 18343993..3ada3a5c 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -29,7 +29,6 @@ /// @example theme('name') /// @example theme('color', 'primary') /// @example theme('elements', 'button', 'font-weight') -/// @example theme('elements', 'button', 'secondary', 'background') /// /// @return mixed /// diff --git a/src/Modules/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss index a2029a8a..74c2f49f 100644 --- a/src/Modules/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -41,7 +41,7 @@ /// @if features('components', 'alert', 'styles') { @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { + @include set-style($bg-color, white, $style-name) { border-color: darken($bg-color, 5%); }; } diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index 1725a343..ab81ec33 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -4,6 +4,7 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "variables"; @@ -11,7 +12,7 @@ /// if badge is enable @if enabled('components', 'badge') { .#{class('badge', 'name')} { - @include set-style(theme('color', 'secondary'), theme('color', 'text')) { + @include set-style(color.$grey, theme('color', 'text')) { position: relative; white-space: nowrap; display: inline-flex; @@ -19,7 +20,7 @@ align-items: center; font-weight: bold; border-radius: components('badge', 'border-radius'); - border: theme('border', 'width') theme('border', 'style') darken(theme('color', 'secondary'), 6.5%); + border: theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%); }; @include set-size(1em, 1px 6px); /// @@ -27,7 +28,7 @@ /// @if features('components', 'badge', 'styles') { @each $name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $name) { + @include set-style($bg-color, white, $name) { border-color: darken($bg-color, 6.5%); }; } diff --git a/src/Modules/Components/Billboard/Billboard.scss b/src/Modules/Components/Billboard/Billboard.scss index 67342747..5483189d 100644 --- a/src/Modules/Components/Billboard/Billboard.scss +++ b/src/Modules/Components/Billboard/Billboard.scss @@ -26,7 +26,7 @@ /// @if features('components', 'billboard', 'styles') { @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { + @include set-style($bg-color, white, $style-name) { border-color: darken($bg-color, 4.5%); }; } diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index 4bb6d2d3..fa6183aa 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -6,6 +6,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Variables" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "../../../Modules/Elements/Typography/variables" as *; @@ -57,7 +58,11 @@ color: theme('color', 'text'); line-height: initial; &>.#{class('card', 'subtitle')} { - color: theme('color', 'grey'); + @if theme('type') == 'light' { + color: darken(color.$grey, 20%); + } @else if theme('type') == 'dark' { + color: lighten(color.$grey, 20%); + } flex: 1 1 auto; } } diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index b3051ef8..5a9dfa3f 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -33,7 +33,7 @@ /// @if features('elements', 'label', 'styles') { @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { + @include set-style($bg-color, white, $style-name) { border-color: darken($bg-color, 7%); }; } diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index 4c573d5a..bd85d96a 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "variables"; @@ -80,7 +81,7 @@ &.#{class('list', 'striped')} { >.#{class('list', 'item')} { &:nth-of-type(odd) { - background: theme('color', 'secondary'); + background: color.$grey; } } } @@ -92,7 +93,7 @@ &.#{class('list', 'hovered')} { >.#{class('list', 'item')} { &:hover { - background: theme('color', 'secondary'); + background: color.$grey; transition: components('list', 'item', 'transition'); } } diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index 831f68e3..250469da 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "variables"; @@ -46,20 +47,24 @@ font-weight: theme('typography', 'font-weight'); transition: components('menu', 'item', 'transition'); &:hover { - background: theme('color', 'secondary'); + background: color.$grey; color: theme('color', 'text'); transition: components('menu', 'item', 'transition'); } &:active, &:focus, &.#{class('menu', 'active')} { - background: theme('color', 'secondary'); + background: color.$grey; color: theme('color', 'text'); transition: components('menu', 'item', 'transition'); } } i, span.#{class('icon', 'class-name')} { - color: theme('color', 'grey'); + @if theme('type') == 'light' { + color: darken(color.$grey, 28%); + } @else if theme('type') == 'dark' { + color: lighten(color.$grey, 28%); + } font-size: components('menu', 'icon', 'font-size'); margin-right: components('menu', 'icon', 'margin-right'); vertical-align: components('menu', 'icon', 'vertical-align'); diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 8874c30f..80675dce 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "mixins"; @@ -22,7 +23,7 @@ justify-content: space-between; min-height: components('navbar', 'min-height'); background: theme('color', 'primary'); - color: theme('color', 'negative'); + color: white; width: 100%; // grid container .#{class('grid', 'container')} { @@ -45,7 +46,7 @@ a:visited { font-size: components('navbar', 'font-size'); text-decoration: none; - color: theme('color', 'negative'); + color: white; display: flex; font-weight: components('navbar', 'brand', 'font-weight'); } @@ -84,10 +85,10 @@ } input[type='text'] { background-color: darken(theme('color', 'primary'), 7%); - color: theme('color', 'negative'); + color: white; border-color: lighten(theme('color', 'primary'), 8%); &::placeholder { - color: theme('color', 'negative'); + color: white; } &:focus { outline: theme('input', 'outline-width') solid lighten(theme('color', 'primary'), 26%); @@ -134,12 +135,12 @@ .#{class('button', 'dropdown')} .#{class('button', 'name')} { background: transparent; border-color: transparent; - color: theme('color', 'negative'); + color: white; min-height: 100%; border-radius: 0; border: 0; i, span.#{class('icon', 'class-name')} { - color: theme('color', 'negative'); + color: white; } &:hover { background: darken(theme('color', 'primary'), 10.15%); @@ -147,7 +148,7 @@ } &:active, &.#{class('button', 'active')} { - color: theme('color', 'negative'); + color: white; background: darken(theme('color', 'primary'), 7%); transition: components('button', 'transition'); &:hover { @@ -248,7 +249,7 @@ left: 0; overflow-x: auto; overflow-y: hidden; - background: theme('color', 'secondary'); + background: color.$grey; z-index: 1; margin: 0 !important; padding: 0 !important; @@ -268,7 +269,7 @@ .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')} .#{class('button', 'name')}, .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'name')} { color: theme('color', 'text'); - background: theme('color', 'secondary'); + background: color.$grey; i, span.#{class('icon', 'class-name')} { display: none; } diff --git a/src/Modules/Components/Navbar/variables.scss b/src/Modules/Components/Navbar/variables.scss index 77732003..1b66e789 100644 --- a/src/Modules/Components/Navbar/variables.scss +++ b/src/Modules/Components/Navbar/variables.scss @@ -3,6 +3,7 @@ /// Components : Navbar -> Variables /// +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== @@ -15,14 +16,14 @@ $themes: ( white, // input bg #303232, // input color theme('color', 'dark'), // input border color - theme('color', 'grey') // divider color + color.$grey // divider color ), ( "dark", // theme name (class) theme('color', 'dark'), // bg color - theme('color', 'negative'), // text color + white, // text color lighten(theme('color', 'dark'), 7%), // input bg - theme('color', 'negative'), // input color + white, // input color lighten(theme('color', 'dark'), 25.75%), // input border color lighten(theme('color', 'dark'), 12.55%) // divider color ) diff --git a/src/Modules/Components/Stats/Stats.scss b/src/Modules/Components/Stats/Stats.scss index 62b93feb..511089b7 100644 --- a/src/Modules/Components/Stats/Stats.scss +++ b/src/Modules/Components/Stats/Stats.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "variables"; @@ -37,7 +38,12 @@ >.#{class('stats', 'subtitle')} { font-size: components('stats', 'subtitle', 'font-size'); margin-top: components('stats', 'subtitle', 'margin-top'); - color: theme('color', 'grey'); + + @if theme('type') == 'light' { + color: darken(color.$grey, 20%); + } @else if theme('type') == 'dark' { + color: lighten(color.$grey, 20%); + } } >.#{class('stats', 'value')} { font-weight: components('stats', 'value', 'font-weight'); @@ -60,7 +66,7 @@ /// @if features('components', 'stats', 'styles') { @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { + @include set-style($bg-color, white, $style-name) { border-color: $bg-color; background: transparent; color: inherit; diff --git a/src/Modules/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss index 705ea06f..f9c95cfa 100755 --- a/src/Modules/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "mixins"; @@ -38,7 +39,11 @@ margin-bottom: -#{components('tabnav', 'border-width')}; &:hover { color: theme('color', 'text'); - border-bottom-color: theme('color', 'grey'); + @if theme('type') == 'light' { + border-bottom-color: darken(color.$grey, 20%); + } @else if theme('type') == 'dark' { + border-bottom-color: lighten(color.$grey, 20%); + } } &:focus { background: transparent; @@ -57,14 +62,18 @@ @if features('components', 'tabnav', 'bottom-position') { &.#{class('tabnav', 'bottom')} { border-bottom: 0; - border-top: components('tabnav', 'border-width') theme('border', 'style') theme('color', 'secondary'); + border-top: components('tabnav', 'border-width') theme('border', 'style') color.$grey; @include mixins.tab-button-styles() { margin-top: -#{components('tabnav', 'border-width')}; border-top: components('tabnav', 'border-width') solid transparent; border-bottom: 0; margin-bottom: 0; &:hover { - border-top-color: theme('color', 'grey'); + @if theme('type') == 'light' { + border-top-color: darken(color.$grey, 20%); + } @else if theme('type') == 'dark' { + border-top-color: lighten(color.$grey, 20%); + } } &.#{class('tabnav', 'active')} { border-top-color: theme('color', 'primary'); diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index f357c27c..706f5c63 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "variables"; @@ -41,7 +42,7 @@ top: 13px; left: -(calc(components('timeline', 'type-width') / 2px) - components('timeline', 'border-width')); align-items: center; - background-color: theme('color', 'secondary'); + background-color: color.$grey; border: 2px theme('border', 'style') theme('border', 'color'); border-radius: 50%; justify-content: center; diff --git a/src/Modules/Components/Timeline/variables.scss b/src/Modules/Components/Timeline/variables.scss index 803127b1..553c4523 100644 --- a/src/Modules/Components/Timeline/variables.scss +++ b/src/Modules/Components/Timeline/variables.scss @@ -3,6 +3,7 @@ /// Components : Timeline -> Variables /// +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; /// STYLES ============================================== @@ -10,26 +11,26 @@ $styles: ( ( "primary", // style name (class) theme('color', 'primary'), // bg color - theme('color', 'negative') // text color + white // text color ), ( "success", // style name (class) theme('color', 'success'), // bg color - theme('color', 'negative') // text color + white // text color ), ( "warning", // style name (class) theme('color', 'warning'), // bg color - theme('color', 'negative') // text color + white // text color ), ( "error", // style name (class) theme('color', 'error'), // bg color - theme('color', 'negative') // text color + white // text color ), ( "dark", // style name (class) theme('color', 'text'), // bg color - theme('color', 'grey') // text color + lighten(color.$grey, 20%) // text color ), ); \ No newline at end of file diff --git a/src/Modules/Components/Tooltip/Tooltip.scss b/src/Modules/Components/Tooltip/Tooltip.scss index bd721fea..99dacfba 100644 --- a/src/Modules/Components/Tooltip/Tooltip.scss +++ b/src/Modules/Components/Tooltip/Tooltip.scss @@ -22,7 +22,7 @@ display: flex; align-items: center; justify-content: center; - color: theme('color', 'negative'); + color: white; font-size: components('tooltip', 'font-size'); font-weight: components('tooltip', 'font-weight'); visibility: hidden; diff --git a/src/Modules/Elements/Base/Base.scss b/src/Modules/Elements/Base/Base.scss index 518b8316..0d693eee 100644 --- a/src/Modules/Elements/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -53,7 +53,7 @@ html, body { } ::selection { background-color: theme('color', 'primary'); - color: theme('color', 'negative'); + color: white; } ::placeholder { color: theme('color', 'text'); diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index 6fc4dc81..efdc54da 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "../../../Modules/Elements/Typography/variables" as *; @@ -49,7 +50,7 @@ background-image: none; } &:hover { - background: theme('color', 'secondary'); + background: color.$grey; } &:active, &:focus { @@ -88,13 +89,12 @@ &.#{class('button', 'active')} { color: theme('color', 'text'); - background: theme('color', 'active'); + background: color.$grey; background-image: none; text-decoration: none; &:focus, &:hover { - color: theme('color', 'text'); - background: lighten(theme('color', 'active'), 4%); + background: lighten(color.$grey, 5%); } } &.#{class('button', 'inactive')} { diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index e7e6417c..446767c3 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -269,7 +269,7 @@ /// OUTLINED STYLE /// @if $outlined { - $textcolor: if(theme('type') == 'dark', theme('color', 'negative'), $bg-color); + $textcolor: if(theme('type') == 'dark', white, $bg-color); background: transparent; color: $textcolor; i, [class^="#{class('icon', 'class-name')}"] { @@ -277,24 +277,24 @@ } } @else { background: $bg-color; - color: theme('color', 'negative'); + color: white; i, [class^="#{class('icon', 'class-name')}"] { - color: theme('color', 'negative'); + color: white; } } text-shadow: 0 1px 1px darken($bg-color, 6%); border: theme('border', 'width') theme('border', 'style') $border-color; &:hover { background: lighten($bg-color, 7.5%); - color: theme('color', 'negative'); + color: white; i, [class^="#{class('icon', 'class-name')}"] { - color: theme('color', 'negative'); + color: white; } } &:active, &.#{class('button', 'active')} { background: lighten($bg-color, 7.5%); - color: theme('color', 'negative'); + color: white; &:focus, &:hover { background: lighten($bg-color, 12.5%); diff --git a/src/Modules/Elements/Table/Table.scss b/src/Modules/Elements/Table/Table.scss index df554b91..b989f686 100644 --- a/src/Modules/Elements/Table/Table.scss +++ b/src/Modules/Elements/Table/Table.scss @@ -4,6 +4,7 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @@ -33,10 +34,10 @@ tr, tbody tr { &.#{class('table', 'active')} { - background: theme('color', 'secondary'); + background: color.$grey; } &:nth-of-type(odd) { - background: theme('color', 'secondary'); + background: color.$grey; } } } @@ -49,7 +50,7 @@ tr, tbody tr { &:hover { - background: theme('color', 'secondary'); + background: color.$grey; color: theme('color', 'text'); } } @@ -60,7 +61,7 @@ transition: all 0.3s; &.#{class('table', 'active')}, &.#{class('table', 'active')}:hover { - background: theme('color', 'secondary'); + background: color.$grey; } } td, @@ -74,7 +75,11 @@ th { border-bottom-color: theme('border', 'color'); font-weight: theme('typography', 'font-weight'); - color: theme('color', 'grey'); + @if theme('type') == 'light' { + color: darken(color.$grey, 20%); + } @else if theme('type') == 'dark' { + color: lighten(color.$grey, 20%); + } padding: elements('table', 'th', 'padding'); } } diff --git a/src/Modules/Utilities/_config/bg-colors.scss b/src/Modules/Utilities/_config/bg-colors.scss index e4c0e4ab..f7f72352 100644 --- a/src/Modules/Utilities/_config/bg-colors.scss +++ b/src/Modules/Utilities/_config/bg-colors.scss @@ -7,13 +7,13 @@ /// including padding and border (but not the margin). /// +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; $bg-colors: ( // class name, value ("bg-color", theme('color', 'background')), - ("bg-grey", theme('color', 'grey')), - ("bg-secondary", theme('color', 'secondary')), + ("bg-grey", color.$grey), ("bg-white", white), ("bg-black", black), ("bg-dark", theme('color', 'dark')), diff --git a/src/Modules/Utilities/_config/text-colors.scss b/src/Modules/Utilities/_config/text-colors.scss index 838eac81..a9ee3931 100644 --- a/src/Modules/Utilities/_config/text-colors.scss +++ b/src/Modules/Utilities/_config/text-colors.scss @@ -4,11 +4,12 @@ /// The color property specifies the color of text. /// +@use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; $text-colors: ( // class name, value - ("color-grey", theme('color', 'grey')), + ("color-grey", color.$grey), ("color-white", white), ("color-black", black), ("color-primary", theme('color', 'primary')), diff --git a/src/options.scss b/src/options.scss index 84344843..3345b745 100755 --- a/src/options.scss +++ b/src/options.scss @@ -327,7 +327,6 @@ $options: ( 'styles' : true, 'sizes' : true, 'outlined' : true, - 'secondary': true, 'dropdown' : true, 'gradient' : true ), diff --git a/src/themes.scss b/src/themes.scss index 75642570..fad5150a 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -24,11 +24,7 @@ $themes: ( 'success' : #297d51, 'warning' : #956d28, 'error' : #972727, - 'active' : #dcdcdc, - 'negative' : white, - 'grey' : #979797, - 'secondary' : #e6e6e6, - 'dark' : #252831, + 'dark' : #252831 ), 'border': ( 'color' : #c6c6c6, @@ -88,11 +84,7 @@ $themes: ( 'success' : #2f8f5d, 'warning' : #ab7d2d, 'error' : #ba3d3d, - 'active' : lighten(#252831, 3.7%), - 'negative' : white, - 'grey' : #6d758c, - 'secondary' : lighten(#252831, 5%), - 'dark' : lighten(#252831, 4.5%), + 'dark' : lighten(#252831, 4.5%) ), 'border': ( 'color' : lighten(#252831, 17%), @@ -134,5 +126,5 @@ $themes: ( ), 'utilities': () ), - // add your custom theme map here. + // you can add your custom theme map here. ); \ No newline at end of file From 1eb3597db9fb1e2e79ff524989b81dac7c54c008 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 14 Sep 2024 08:49:53 +0300 Subject: [PATCH 005/154] updated for 3.0-beta --- README.md | 1 - src/Core/Global/Colors.scss | 3 +- .../Components/Breadcrumb/Breadcrumb.scss | 6 ++- .../Components/Breadcrumb/variables.scss | 10 ++-- src/Modules/Components/Caption/Caption.scss | 2 +- src/Modules/Components/Caption/variables.scss | 2 +- src/Modules/Components/List/List.scss | 2 +- src/Modules/Components/Menu/Menu.scss | 2 +- src/Modules/Components/Panel/Panel.scss | 2 +- src/Modules/Elements/Form/Form.scss | 34 +++++++------ .../Elements/Typography/Typography.scss | 2 +- src/options.scss | 11 +++- src/themes.scss | 51 ++++++++----------- 13 files changed, 66 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index fdce2fc5..b85f152f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ ## Punica CSS Framework 3.0 Beta

- Documentation | Nightly Builds | Templates | Changelog diff --git a/src/Core/Global/Colors.scss b/src/Core/Global/Colors.scss index 5aaad866..01d27d5b 100644 --- a/src/Core/Global/Colors.scss +++ b/src/Core/Global/Colors.scss @@ -6,5 +6,4 @@ @use "../Theme/Getters" as *; // Secondary color variables -$grey : mix(theme('color', 'text'), theme('color', 'background'), 14.5%); -$negative : invert(theme('color', 'text'), 100%); \ No newline at end of file +$grey : mix(theme('color', 'text'), theme('color', 'background'), 14.5%); \ No newline at end of file diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index 4bad8372..b4f6e3ef 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -17,7 +17,7 @@ a.#{class('breadcrumb', 'item')}, .#{class('breadcrumb', 'item')} { text-decoration: none; - font-size: .9785rem; + font-size: components('breadcrumb', 'font-size'); font-weight: components('breadcrumb', 'font-weight'); &:focus,&:hover,&:active,&.active { color: theme('color', 'primary'); @@ -27,6 +27,7 @@ color: theme('color', 'primary'); font-size: 1rem; cursor: default; + padding: .3em; } &:first-child { margin-left: 0; @@ -44,12 +45,13 @@ /// @if features('components', 'breadcrumb', 'sizes') { // size, font-size, seperator-padding, seperator-size - @each $size, $font-size, $seperator-padding, $seperator-size in variables.$sizes { + @each $size, $font-size, $seperator-padding, $seperator-size, $valign in variables.$sizes { &.#{$size} { .#{class('breadcrumb', 'item')} { font-size: $font-size; &::after { padding: $seperator-padding; + vertical-align: $valign; font-size: $seperator-size; } } diff --git a/src/Modules/Components/Breadcrumb/variables.scss b/src/Modules/Components/Breadcrumb/variables.scss index 85009809..1355b0fd 100644 --- a/src/Modules/Components/Breadcrumb/variables.scss +++ b/src/Modules/Components/Breadcrumb/variables.scss @@ -8,14 +8,16 @@ $sizes: ( ( 'small', // size name (class) .986em, // font-size - .15em, // seperator-padding - null // seperator-size + .3em, // seperator-padding + null, // seperator-size + unset, // vertical align ), ( 'large', // size name (class) 1.38em, // font-size - .15em, // seperator-padding - null // seperator-size + .3em, // seperator-padding + null, // seperator-size + text-bottom, // vertical align ) ); diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index ad28c685..5d10b7d4 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -16,7 +16,7 @@ align-items: center; margin: elements('caption', 'margin'); font-size: elements('caption', 'font-size'); - font-weight: theme('typography', 'header-weight'); + font-weight: bold; line-height: theme('typography', 'line-height') - .2; text-align: left; >img, diff --git a/src/Modules/Components/Caption/variables.scss b/src/Modules/Components/Caption/variables.scss index c1c7e54f..eb00c2ee 100644 --- a/src/Modules/Components/Caption/variables.scss +++ b/src/Modules/Components/Caption/variables.scss @@ -17,6 +17,6 @@ $caption-sizes: ( "large", // size name (class) 1.4em .3rem, // margin 2.35rem, // font-size - theme('typography', 'header-weight') // font-weight + bold // font-weight ) ); \ No newline at end of file diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index bd85d96a..17c0a83a 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -43,7 +43,7 @@ } >.#{class('list', 'title')} { font-size: components('list', 'title', 'font-size'); - font-weight: theme('typography', 'header-weight'); + font-weight: bold; line-height: components('list', 'body', 'line-height'); } >.#{class('list', 'subtitle')} { diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index 250469da..bf878b80 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -28,7 +28,7 @@ min-height: components('menu', 'title', 'min-height'); color: theme('color', 'text'); padding: components('menu', 'title', 'padding'); - font-weight: theme('typography', 'header-weight'); + font-weight: bold; letter-spacing: components('menu', 'title', 'letter-spacing'); } // menu item diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index a9975277..235ca198 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -54,7 +54,7 @@ } >.#{class('panel', 'title')} { font-size: 1.185rem; - font-weight: theme('typography', 'header-weight'); + font-weight: bold; } } &>.#{class('panel', 'content')} { diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 4c3d8351..dec48d52 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -14,27 +14,28 @@ @if enabled('elements', 'form') { @include mixins.form-inputs() { -webkit-appearance: none; - background-color: theme('input', 'background'); + background-color: elements('form', 'input', 'background'); border-width: theme('border', 'width'); border-style: theme('border', 'style'); - border-color: if(theme('input', 'border-color'), theme('input', 'border-color'), theme('border', 'color')); - height: if(theme('input', 'height'), theme('input', 'height'), elements('form', 'input', 'height')); - border-radius: if(theme('input', 'border-radius'), theme('input', 'border-radius'), elements('form', 'input', 'border-radius')); - outline: theme('input', 'outline-width') solid transparent; + border-color: elements('form', 'input', 'border-color'); + height: elements('form', 'input', 'height'); + border-radius: elements('form', 'input', 'border-radius'); + outline: elements('form', 'input', 'outline-width') solid transparent; box-shadow: none; box-sizing: inherit; - outline-offset: -#{theme('input', 'outline-width')}; - padding: if(theme('input', 'padding'), theme('input', 'padding'), elements('form', 'input', 'padding')); + outline-offset: -#{elements('form', 'input', 'outline-width')}; + padding: elements('form', 'input', 'padding'); width: 100%; max-width: 100%; font-family: inherit; - color: if(theme('input', 'color'), theme('input', 'color'), theme('color', 'text')); - font-size: if(theme('input', 'font-size'), theme('input', 'font-size'), elements('form', 'input', 'font-size')); - transition: theme('input', 'transition'); + color: elements('form', 'input', 'color'); + font-size: elements('form', 'input', 'font-size'); + transition: elements('form', 'input', 'transition'); &:focus { - outline: theme('input', 'outline-width') solid theme('input', 'outline-color'); - outline-offset: -#{theme('input', 'outline-width')}; - background-color: lighten(theme('input', 'background'), 5.5%); + outline-color: elements('form', 'input', 'outline-color'); + outline-width: elements('form', 'input', 'outline-width'); + outline-offset: -#{elements('form', 'input', 'outline-width')}; + background-color: elements('form', 'input', 'background'); z-index: 0; } /// @@ -44,7 +45,10 @@ @each $style-name, $style-color in variables.$input-styles { &.#{$style-name} { color: $style-color; - outline-color: $style-color; + border-color: $style-color; + &:focus { + outline-color: $style-color; + } } } } @@ -98,7 +102,7 @@ margin: elements('form', 'label', 'margin'); color: theme('color', 'text'); font-size: elements('form', 'label', 'font-size'); - font-weight: theme('input', 'label-weight'); + font-weight: bold; text-transform: none; height: fit-content; } diff --git a/src/Modules/Elements/Typography/Typography.scss b/src/Modules/Elements/Typography/Typography.scss index 0baf76ed..64102831 100644 --- a/src/Modules/Elements/Typography/Typography.scss +++ b/src/Modules/Elements/Typography/Typography.scss @@ -20,7 +20,7 @@ #{$header}, .#{$header} { font-size: $font-size; - font-weight: theme('typography', 'header-weight'); + font-weight: bold; } @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { #{$header}, diff --git a/src/options.scss b/src/options.scss index 3345b745..0e8dcf53 100755 --- a/src/options.scss +++ b/src/options.scss @@ -52,6 +52,7 @@ $options: ( 'sizes': true ), 'variables': ( + 'font-size' : 1.1rem, 'font-weight' : normal, 'active-weight': bold, 'seperator' : "\276D" @@ -354,10 +355,16 @@ $options: ( 'variables': ( 'padding': 0 16px, 'input' : ( - 'height' : 2.5rem, + 'color' : initial, + 'background' : initial, + 'border-color' : initial, + 'height' : initial, 'padding' : .4rem .5rem, 'font-size' : 1.088em, - 'border-radius': 0 + 'border-radius': 0, + 'transition' : .35s, + 'outline-color' : initial, + 'outline-width' : 2px ), 'items': ( 'margin': 6px 0 .75em diff --git a/src/themes.scss b/src/themes.scss index fad5150a..2e96a9ee 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -7,20 +7,19 @@ $themes: ( 'name' : 'Default Theme', 'type' : 'light', // light or dark (required*), 'google-font': ( - 'name' : 'IBM+Plex+Sans+Hebrew', // or Source+Sans+Pro etc - 'weights' : '400;600;700', + 'name' : 'Reddit+Sans+Condensed', // or Source+Sans+Pro etc + 'weights' : '300;400;600', ), 'typography': ( - 'font-family' : 'IBM Plex Sans Hebrew', - 'font-size' : 13px, + 'font-family' : 'Reddit Sans Condensed', + 'font-size' : .965rem, 'font-weight' : 400, - 'line-height' : 1.7, - 'header-weight' : 700, + 'line-height' : 1.7 ), 'color': ( 'text' : #202123, 'background' : white, - 'primary' : #314a93, + 'primary' : #4572d8, 'success' : #297d51, 'warning' : #956d28, 'error' : #972727, @@ -39,27 +38,23 @@ $themes: ( 'spread' : 0, 'color' : rgba(0, 0, 0, 0.20), ), - 'input': ( - 'color' : null, // (null = color > text) - 'background' : white, - 'border-color' : null, // (null = border > color) - 'outline-color' : #252831, - 'outline-width' : 2px, - 'label-weight' : 600, - 'transition' : .35s, - ), 'components': ( 'navbar': ( - 'font-weight': 700 + 'font-weight': 600 ), 'tabnav': ( 'font-weight': 600 ) ), 'elements': ( - 'button': ( - 'font-weight' : 700 + 'form': ( + 'input': ( + 'border-color' : #c6c6c6 + ), ), + 'button': ( + 'font-weight' : 600 + ) ), 'utilities': () ), @@ -74,8 +69,7 @@ $themes: ( 'font-family' : 'IBM Plex Sans Hebrew', 'font-size' : 13px, 'font-weight' : 400, - 'line-height' : 1.7, - 'header-weight' : 700, + 'line-height' : 1.7 ), 'color': ( 'text' : white, @@ -99,15 +93,6 @@ $themes: ( 'spread' : 0, 'color' : rgba(0, 0, 0, 0.20), ), - 'input': ( - 'color' : null, // (null = color > text) - 'background' : lighten(#252831, 4.5%), - 'border-color' : null, // (null = border > color) - 'outline-color' : white, - 'outline-width' : 2px, - 'label-weight' : 600, - 'transition' : .35s - ), 'components': ( 'navbar': ( 'font-weight': 700 @@ -123,6 +108,12 @@ $themes: ( 'button': ( 'font-weight' : 700 ), + 'form': ( + 'input': ( + 'background' : lighten(#252831, 4.5%), + 'outline-color' : white, + ), + ) ), 'utilities': () ), From 388c5a6034d52d464a7ecebb8e3e14a1068def37 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 15 Sep 2024 08:14:05 +0300 Subject: [PATCH 006/154] updated for 3.0-beta b106 --- src/Modules/Elements/Form/variables.scss | 1 - src/Modules/Elements/Grid/Grid.scss | 2 +- src/classnames.scss | 14 ++++-- src/options.scss | 9 ++-- src/themes.scss | 55 ++++++++---------------- 5 files changed, 36 insertions(+), 45 deletions(-) diff --git a/src/Modules/Elements/Form/variables.scss b/src/Modules/Elements/Form/variables.scss index f3019043..288f1c28 100644 --- a/src/Modules/Elements/Form/variables.scss +++ b/src/Modules/Elements/Form/variables.scss @@ -6,7 +6,6 @@ @use "../../../Core/Theme/Getters" as *; /// SIZES =============================================== -// [*] referenced from button variables $input-sizes: ( ( 'small', // class name diff --git a/src/Modules/Elements/Grid/Grid.scss b/src/Modules/Elements/Grid/Grid.scss index c8aa15f3..65d9a6f4 100644 --- a/src/Modules/Elements/Grid/Grid.scss +++ b/src/Modules/Elements/Grid/Grid.scss @@ -45,7 +45,7 @@ } } // Breakpoints - @each $label, $breakpoint in $viewports { + @each $label, $breakpoint in $viewports { @include breakpoints($breakpoint) { @for $id from 1 through $column-size { .#{class('grid', 'column')}-#{$label}-#{$id} { diff --git a/src/classnames.scss b/src/classnames.scss index ea6fc71b..6659de83 100755 --- a/src/classnames.scss +++ b/src/classnames.scss @@ -2,9 +2,13 @@ /// Punica CSS Framework /// Default class names /// +/// Note: You can change the all following +/// default class names as you wish. +/// $classnames: ( - ///////////////////////////////////////////////////////// - /// Components + /// + /// COMPONENTS + /// 'alert': ( 'name' : 'alert', 'active': 'active' @@ -123,8 +127,9 @@ $classnames: ( 'left' : 'left', 'top' : 'top', ), - ///////////////////////////////////////////////////////// - /// Elements + /// + /// ELEMENTS + /// 'button': ( 'name' : 'button', 'group' : 'buttons', @@ -174,6 +179,7 @@ $classnames: ( ), 'typography': (), 'icon': ( + // change the class name according to your icon library. 'class-name': 'material-symbols-outlined' ), ) \ No newline at end of file diff --git a/src/options.scss b/src/options.scss index 0e8dcf53..c155871f 100755 --- a/src/options.scss +++ b/src/options.scss @@ -1,7 +1,9 @@ /// /// Punica CSS Framework /// Default Options & Variables -/// You can override the all following default variables from your theme map. +/// +/// Note: You can also override/change the all following +/// default variables from your theme map. /// $options: ( /// @@ -189,6 +191,7 @@ $options: ( 'spacer-top' : 105px, // min-height + 25px 'font-size' : 1.128em, 'button-padding': .935rem 1.4rem, + // for only text 'brand': ( 'padding' : 0, 'margin-right': 1rem, @@ -332,7 +335,7 @@ $options: ( 'gradient' : true ), 'variables': ( - 'font-weight': 600, + 'font-weight': bold, 'font-size' : 1em, 'line-height': 1, 'width' : min-content, @@ -357,7 +360,7 @@ $options: ( 'input' : ( 'color' : initial, 'background' : initial, - 'border-color' : initial, + 'border-color' : inherit, 'height' : initial, 'padding' : .4rem .5rem, 'font-size' : 1.088em, diff --git a/src/themes.scss b/src/themes.scss index 2e96a9ee..ed5c56ba 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -1,5 +1,6 @@ /// /// Punica CSS Framework : Themes +/// Note: you can also add your custom theme map here. /// $themes: ( @@ -7,7 +8,7 @@ $themes: ( 'name' : 'Default Theme', 'type' : 'light', // light or dark (required*), 'google-font': ( - 'name' : 'Reddit+Sans+Condensed', // or Source+Sans+Pro etc + 'name' : 'Reddit+Sans+Condensed', 'weights' : '300;400;600', ), 'typography': ( @@ -20,49 +21,37 @@ $themes: ( 'text' : #202123, 'background' : white, 'primary' : #4572d8, - 'success' : #297d51, - 'warning' : #956d28, - 'error' : #972727, - 'dark' : #252831 + 'success' : #4aa847, + 'warning' : #cc9042, + 'error' : #ca4040, + 'dark' : #4b505e ), 'border': ( 'color' : #c6c6c6, 'width' : 1px, 'style' : solid, - 'radius' : 4px, + 'radius' : 2px, ), 'shadow': ( 'horizontal' : 0, 'vertical' : 2px, 'blur' : 4px, 'spread' : 0, - 'color' : rgba(0, 0, 0, 0.20), - ), - 'components': ( - 'navbar': ( - 'font-weight': 600 - ), - 'tabnav': ( - 'font-weight': 600 - ) - ), - 'elements': ( - 'form': ( - 'input': ( - 'border-color' : #c6c6c6 - ), - ), - 'button': ( - 'font-weight' : 600 - ) + 'color' : rgba(0, 0, 0, 0.14), ), + ////////////////////////////////////////////////////////// + // You can use this section to override/change + // the all default variables in the options.scss API file. + 'components': (), + 'elements': (), 'utilities': () + ////////////////////////////////////////////////////////// ), dark: ( 'name' : 'Dark Theme', 'type' : 'dark', // light or dark (required*), 'google-font': ( - 'name' : 'IBM+Plex+Sans+Hebrew', // or Source+Sans+Pro etc + 'name' : 'IBM+Plex+Sans+Hebrew', 'weights' : '400;600;700', ), 'typography': ( @@ -93,21 +82,15 @@ $themes: ( 'spread' : 0, 'color' : rgba(0, 0, 0, 0.20), ), + ////////////////////////////////////////////////////////// + // You can use this section to override/change + // the all default variables in the options.scss API file. 'components': ( - 'navbar': ( - 'font-weight': 700 - ), - 'tabnav': ( - 'font-weight': 600 - ), 'card': ( 'background' : lighten(#252831, 1.75%) ) ), 'elements': ( - 'button': ( - 'font-weight' : 700 - ), 'form': ( 'input': ( 'background' : lighten(#252831, 4.5%), @@ -116,6 +99,6 @@ $themes: ( ) ), 'utilities': () + ////////////////////////////////////////////////////////// ), - // you can add your custom theme map here. ); \ No newline at end of file From bc76bd4d218282b52fcaa1b4d2a3d85800727930 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 15 Sep 2024 08:20:54 +0300 Subject: [PATCH 007/154] b107: unnecessary comment deleted --- src/options.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/options.scss b/src/options.scss index c155871f..b46241ae 100755 --- a/src/options.scss +++ b/src/options.scss @@ -191,7 +191,6 @@ $options: ( 'spacer-top' : 105px, // min-height + 25px 'font-size' : 1.128em, 'button-padding': .935rem 1.4rem, - // for only text 'brand': ( 'padding' : 0, 'margin-right': 1rem, From 7c4b37f3c27b8c59db5e9f5533ccba67216aa653 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 17 Sep 2024 08:50:52 +0300 Subject: [PATCH 008/154] b108 --- src/Modules/Components/Card/Card.scss | 2 +- src/Modules/Elements/Form/Form.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index fa6183aa..869f99eb 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -25,7 +25,7 @@ @each $name, $number in $grids { .#{class('card', 'cards')}.#{$name} { &>.#{class('card', 'name')} { - flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{variables('card', 'group', 'margin')})); + flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{components('card', 'group', 'margin')})); height: auto; margin: components('card', 'group', 'margin'); } diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index dec48d52..59231d06 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -142,7 +142,7 @@ box-shadow: none; } >.#{class('button', 'name')} { - padding: if(theme('input', 'padding'), theme('input', 'padding'), elements('form', 'input', 'padding')); + padding: elements('form', 'input', 'padding'); box-shadow: none; &:first-child { border-bottom-right-radius: 0; @@ -250,7 +250,7 @@ input[type="radio"] { border-radius: 500px; &::before { - clip-path: ellipse(45% 45% at 50% 50%);; + clip-path: ellipse(45% 45% at 50% 50%); } } } From 99ec631c0365880c30d0332a08bbd91c8d8ce7dd Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 18 Sep 2024 16:45:04 +0300 Subject: [PATCH 009/154] b109 --- src/Core/Global/Getters.scss | 1 + src/Core/Theme/Getters.scss | 32 +++++++++++++------ src/Modules/Components/Alert/Alert.scss | 1 - src/Modules/Components/Badge/Badge.scss | 1 - .../Components/Billboard/Billboard.scss | 1 - .../Components/Breadcrumb/Breadcrumb.scss | 1 - src/Modules/Components/Caption/Caption.scss | 1 - src/Modules/Components/Card/Card.scss | 1 - src/Modules/Components/Label/Label.scss | 1 - src/Modules/Components/List/List.scss | 1 - src/Modules/Components/Menu/Menu.scss | 1 - src/Modules/Components/Navbar/Navbar.scss | 1 - src/Modules/Components/Panel/Panel.scss | 1 - src/Modules/Components/Process/Process.scss | 1 - src/Modules/Components/Stats/Stats.scss | 1 - src/Modules/Components/Tabnav/Tabnav.scss | 1 - src/Modules/Components/Timeline/Timeline.scss | 1 - src/Modules/Components/Tooltip/Tooltip.scss | 1 - src/Modules/Elements/Button/Button.scss | 1 - src/Modules/Elements/Form/Form.scss | 1 - src/Modules/Elements/Grid/Grid.scss | 1 - src/Modules/Elements/Table/Table.scss | 1 - src/themes.scss | 25 ++++++++++++--- 23 files changed, 45 insertions(+), 33 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 8fe367e5..deea5e74 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -9,6 +9,7 @@ /// /// Get options value by key +/// from the options.scss API file /// /// @param {String(s)} $keys /// diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 3ada3a5c..6666e061 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -19,7 +19,7 @@ } /// -/// Get active theme's value by key(s) +/// Get active theme's value by key(s) from the theme map /// /// @param {String} $node /// @param {String} $key @@ -52,9 +52,14 @@ } /// -/// Get a specific component's variable +/// Get a specific component's variable from the theme map +/// or from the options.scss API file, +/// which contains the default variables. /// /// @param {String(s)} $keys +/// +/// @example components('card', 'padding') +/// @example components('card', 'group', 'margin') /// /// @return mixed /// @@ -64,10 +69,15 @@ } /// -/// Get a specific element's variable +/// Get a specific element's variable from the theme map +/// or from the options.scss API file, +/// which contains the default variables. /// /// @param {String(s)} $keys /// +/// @example elements('button', 'font-weight') +/// @example elements('form', 'input', 'color') +/// /// @return mixed /// @function elements($keys...) @@ -76,12 +86,16 @@ } /// -/// Get features of Component/Elements -/// from theme map or options.scss API file +/// Get features of Component/Elements from the theme map +/// or from the options.scss API file, +/// which contains the default variables. /// /// @param {String} $node /// @param {String} $module /// @param {String} $feature +/// +/// @example features('components', 'card', 'horizontal') +/// @example features('elements', 'button', 'gradient') /// /// @return bool /// @@ -89,7 +103,7 @@ { @if theme($node, $module, 'features', $feature) != null { @return theme($node, $module, 'features', $feature); - }; + } @return map-get(map-get(get.options($module), 'features'), $feature); } @@ -106,7 +120,7 @@ { @if theme($node, $module, 'enabled') != null { @return theme($node, $module, 'enabled'); - }; + } @return get.options($module, 'enabled'); } @@ -130,7 +144,7 @@ @if($value != null) { @return $value - }; + } } @return get_default_variable($keys); @@ -153,7 +167,7 @@ } @return $value; -}; +} /// /// @param {String} $theme diff --git a/src/Modules/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss index 74c2f49f..05f9a79f 100644 --- a/src/Modules/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -8,7 +8,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if alert is enable @if enabled('components', 'alert') { .#{class('alert', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index ab81ec33..2b1a034a 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -9,7 +9,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if badge is enable @if enabled('components', 'badge') { .#{class('badge', 'name')} { @include set-style(color.$grey, theme('color', 'text')) { diff --git a/src/Modules/Components/Billboard/Billboard.scss b/src/Modules/Components/Billboard/Billboard.scss index 5483189d..3e914110 100644 --- a/src/Modules/Components/Billboard/Billboard.scss +++ b/src/Modules/Components/Billboard/Billboard.scss @@ -9,7 +9,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if billboard is enable @if enabled('components', 'billboard') { .#{class('billboard', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index b4f6e3ef..843e8aa3 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -9,7 +9,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if breadcrumb is enable @if enabled('components', 'breadcrumb') { .#{class('breadcrumb', 'name')} { display: inline-block; diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index 5d10b7d4..7683643b 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -9,7 +9,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if caption is enable @if enabled('elements', 'caption') { .#{class('caption', 'name')} { display: flex; diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index 869f99eb..3fb09d55 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -12,7 +12,6 @@ @use "../../../Modules/Elements/Typography/variables" as *; @use "variables"; -/// if card is enable @if enabled('components', 'card') { .#{class('card', 'cards')} { display: flex; diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index 5a9dfa3f..96552d33 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -8,7 +8,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if label is enable @if enabled('elements', 'label') { a.#{class('label', 'name')}, .#{class('label', 'name')} { diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index 17c0a83a..a0f68495 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -10,7 +10,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if list is enable @if enabled('components', 'list') { .#{class('list', 'name')} { list-style: none; diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index bf878b80..71bd97de 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -10,7 +10,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if menu is enable @if enabled('components', 'menu') { .#{class('menu', 'name')} { background-color: if(theme('components', 'menu', 'background'), theme('components', 'menu', 'background'), lighten(theme('color', 'background'), 2.5%)); diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 80675dce..03b158b4 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -11,7 +11,6 @@ @use "mixins"; @use "variables"; -/// if navbar is enable @if enabled('components', 'navbar') { .#{class('navbar', 'spacer')} { margin-top: components('navbar', 'spacer-top'); diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index 235ca198..eba82fc6 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -9,7 +9,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if panel is enable @if enabled('components', 'panel') { .#{class('panel', 'name')} { display: flex; diff --git a/src/Modules/Components/Process/Process.scss b/src/Modules/Components/Process/Process.scss index 9837fc3e..2b7d3e32 100644 --- a/src/Modules/Components/Process/Process.scss +++ b/src/Modules/Components/Process/Process.scss @@ -10,7 +10,6 @@ @use "mixins"; @use "variables"; -/// if process is enable @if enabled('components', 'process') { .#{class('process', 'name')} { display: flex; diff --git a/src/Modules/Components/Stats/Stats.scss b/src/Modules/Components/Stats/Stats.scss index 511089b7..0d486c4e 100644 --- a/src/Modules/Components/Stats/Stats.scss +++ b/src/Modules/Components/Stats/Stats.scss @@ -10,7 +10,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if stats is enable @if enabled('components', 'stats') { .#{class('stats', 'name')}, a.#{class('stats', 'name')} { diff --git a/src/Modules/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss index f9c95cfa..812dd310 100755 --- a/src/Modules/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -11,7 +11,6 @@ @use "mixins"; @use "variables"; -/// if tabnav is enable @if enabled('components', 'tabnav') { .#{class('tabnav', 'name')} { position: relative; diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index 706f5c63..ac7caa98 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -10,7 +10,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if timeline is enable @if enabled('components', 'timeline') { .#{class('timeline', 'name')} { .#{class('timeline', 'item')} { diff --git a/src/Modules/Components/Tooltip/Tooltip.scss b/src/Modules/Components/Tooltip/Tooltip.scss index 99dacfba..3cc50070 100644 --- a/src/Modules/Components/Tooltip/Tooltip.scss +++ b/src/Modules/Components/Tooltip/Tooltip.scss @@ -9,7 +9,6 @@ @use "../../../Core/Theme/Setters" as *; @use "variables"; -/// if tooltip is enable @if enabled('components', 'tooltip') { .#{class('tooltip', 'name')} { display: inline-flex; diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index efdc54da..2d15aec7 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -12,7 +12,6 @@ @use "variables" as *; @use "mixins" as *; -/// if button is enable @if enabled('elements', 'button') { a.#{class('button', 'name')}, .#{class('button', 'name')} { diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 59231d06..8ed96570 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -10,7 +10,6 @@ @use "variables"; @use "mixins"; -/// if form is enable @if enabled('elements', 'form') { @include mixins.form-inputs() { -webkit-appearance: none; diff --git a/src/Modules/Elements/Grid/Grid.scss b/src/Modules/Elements/Grid/Grid.scss index 65d9a6f4..cb975a0a 100644 --- a/src/Modules/Elements/Grid/Grid.scss +++ b/src/Modules/Elements/Grid/Grid.scss @@ -8,7 +8,6 @@ @use "../../../Core/Global/Mixins" as *; @use "variables" as *; -/// if grid is enable @if enabled('elements', 'grid') { $column-size: elements('grid', 'columns', 'size'); diff --git a/src/Modules/Elements/Table/Table.scss b/src/Modules/Elements/Table/Table.scss index b989f686..d2be9466 100644 --- a/src/Modules/Elements/Table/Table.scss +++ b/src/Modules/Elements/Table/Table.scss @@ -8,7 +8,6 @@ @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -/// if table is enable @if enabled('elements', 'table') { .#{class('table', 'name')} { position: relative; diff --git a/src/themes.scss b/src/themes.scss index ed5c56ba..091b537f 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -2,6 +2,9 @@ /// Punica CSS Framework : Themes /// Note: you can also add your custom theme map here. /// +/// If you want to compile your own theme map, don't forget to change +/// the "$active-theme" variable in the punica.scss file. +/// $themes: ( default: ( @@ -41,9 +44,23 @@ $themes: ( ), ////////////////////////////////////////////////////////// // You can use this section to override/change - // the all default variables in the options.scss API file. - 'components': (), - 'elements': (), + // the all default "variables" in the options.scss API file. + 'components': ( + /* + 'card': ( + 'background': grey + ) + */ + ), + 'elements': ( + /* + 'form': ( + 'input': ( + 'background': white + ), + ) + */ + ), 'utilities': () ////////////////////////////////////////////////////////// ), @@ -84,7 +101,7 @@ $themes: ( ), ////////////////////////////////////////////////////////// // You can use this section to override/change - // the all default variables in the options.scss API file. + // the all default "variables" in the options.scss API file. 'components': ( 'card': ( 'background' : lighten(#252831, 1.75%) From 5e1e6c869079aa37263f382dbb0537b8a2cb877b Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 21 Sep 2024 17:21:17 +0300 Subject: [PATCH 010/154] b110 --- src/Core/Global/Helpers.scss | 9 +++++ src/Core/Theme/Getters.scss | 26 +++----------- src/Modules/Components/Alert/Alert.scss | 2 +- src/Modules/Components/Badge/Badge.scss | 2 +- src/Modules/Components/Label/Label.scss | 2 +- src/Modules/Components/Navbar/Navbar.scss | 13 +------ src/Modules/Components/Navbar/variables.scss | 3 -- src/Modules/Elements/Button/variables.scss | 10 +++--- src/options.scss | 4 +-- src/punica.scss | 5 +-- src/themes.scss | 37 ++++++++++++++------ 11 files changed, 55 insertions(+), 58 deletions(-) diff --git a/src/Core/Global/Helpers.scss b/src/Core/Global/Helpers.scss index a61ee8a3..76d032dd 100644 --- a/src/Core/Global/Helpers.scss +++ b/src/Core/Global/Helpers.scss @@ -38,4 +38,13 @@ $message: debug-title() + ' " #{$message} " ' + debug-text($file); @warn $message; @error $message; +} + +/// +/// @param {String} $theme +/// +@function theme-not-found($theme) +{ + $error: "Invalid theme name: #{$theme}. Punica's theme map does not contains a value associated with #{$theme}. Please check the 'themes.scss' file."; + @error $error; } \ No newline at end of file diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 6666e061..3259cd3f 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -5,18 +5,11 @@ @use "../../options" as option; @use "../Global/Getters" as get; +@use "../../themes" as themes; -/// -/// Get Active Theme -/// @param {String} $theme -/// -@mixin get-theme($theme: 'default') -{ - $set-theme: if(map-has-key(themes.$themes, $theme), $theme, theme-not-found($theme)); - $theme-map: map-get(themes.$themes, $set-theme) !global; - @content; - $theme-map: null !global; -} +/// ====================================================== + $theme-map: null !default; +/// ====================================================== /// /// Get active theme's value by key(s) from the theme map @@ -86,7 +79,7 @@ } /// -/// Get features of Component/Elements from the theme map +/// Get features of Components/Elements from the theme map /// or from the options.scss API file, /// which contains the default variables. /// @@ -167,13 +160,4 @@ } @return $value; -} - -/// -/// @param {String} $theme -/// -@function theme-not-found($theme) -{ - $error: "Invalid theme name: #{$theme}. Punica's theme map does not contains a value associated with #{$theme}. Please check the 'themes.scss' file."; - @error $error; } \ No newline at end of file diff --git a/src/Modules/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss index 05f9a79f..868b769c 100644 --- a/src/Modules/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -41,7 +41,7 @@ @if features('components', 'alert', 'styles') { @each $style-name, $bg-color in variables.$styles { @include set-style($bg-color, white, $style-name) { - border-color: darken($bg-color, 5%); + border-color: darken($bg-color, 3%); }; } } diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index 2b1a034a..cfac5dbb 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -28,7 +28,7 @@ @if features('components', 'badge', 'styles') { @each $name, $bg-color in variables.$styles { @include set-style($bg-color, white, $name) { - border-color: darken($bg-color, 6.5%); + border-color: darken($bg-color, 3%); }; } } diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index 96552d33..ed6cbc34 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -33,7 +33,7 @@ @if features('elements', 'label', 'styles') { @each $style-name, $bg-color in variables.$styles { @include set-style($bg-color, white, $style-name) { - border-color: darken($bg-color, 7%); + border-color: darken($bg-color, 3%); }; } } diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 03b158b4..63c68609 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -12,9 +12,6 @@ @use "variables"; @if enabled('components', 'navbar') { - .#{class('navbar', 'spacer')} { - margin-top: components('navbar', 'spacer-top'); - } .#{class('navbar', 'name')} { display: flex; flex-wrap: wrap; @@ -206,7 +203,7 @@ /// NAVBAR SIZES /// @if features('components', 'navbar', 'sizes') { - @each $size-name, $min-height, $font-size, $button-padding, $spacer-top in variables.$sizes { + @each $size-name, $min-height, $font-size, $button-padding in variables.$sizes { &.#{$size-name} { min-height: $min-height; & .#{class('button', 'name')}, @@ -214,14 +211,6 @@ font-size: $font-size; padding: $button-padding; } - @at-root .#{class('navbar', 'spacer')}-#{$size-name} { - margin-top: $spacer-top !important; - } - @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { - @at-root .#{class('navbar', 'spacer')}-#{$size-name} { - margin-top: div($spacer-top, 2) !important; - } - } } } } diff --git a/src/Modules/Components/Navbar/variables.scss b/src/Modules/Components/Navbar/variables.scss index 1b66e789..902ef678 100644 --- a/src/Modules/Components/Navbar/variables.scss +++ b/src/Modules/Components/Navbar/variables.scss @@ -37,20 +37,17 @@ $sizes: ( 45px, // min-height .9839em, // button font-size .445rem .9rem, // button padding - 70px // top spacer for navbar (min-height + 25px) ), ( "small", // size name (class) 65px, // min-height 1em, // button font-size .645rem 1.4rem, // button padding - 90px // top spacer for navbar (min-height + 25px) ), ( "large", // size name (class) 95px, // min-height 1.28em, // button font-size .645rem 1.4rem, // button padding - 115px // top spacer for navbar (min-height + 25px) ) ); diff --git a/src/Modules/Elements/Button/variables.scss b/src/Modules/Elements/Button/variables.scss index f5b92739..36175e61 100644 --- a/src/Modules/Elements/Button/variables.scss +++ b/src/Modules/Elements/Button/variables.scss @@ -39,26 +39,26 @@ $button-styles: ( ( 'primary', // class name theme('color', 'primary'), // bg color - lighten(theme('color', 'primary'), 7%) // border color + lighten(theme('color', 'primary'), 4%) // border color ), ( 'success', // class name theme('color', 'success'), // bg color - lighten(theme('color', 'success'), 7%) // border color + lighten(theme('color', 'success'), 4%) // border color ), ( 'warning', // class name theme('color', 'warning'), // bg color - lighten(theme('color', 'warning'), 7%) // border color + lighten(theme('color', 'warning'), 4%) // border color ), ( 'error', // class name theme('color', 'error'), // bg color - lighten(theme('color', 'error'), 7%) // border color + lighten(theme('color', 'error'), 4%) // border color ), ( 'dark', // class name theme('color', 'dark'), // bg color - lighten(theme('color', 'dark'), 7%) // border color + lighten(theme('color', 'dark'), 4%) // border color ) ); diff --git a/src/options.scss b/src/options.scss index b46241ae..bdfe99ab 100755 --- a/src/options.scss +++ b/src/options.scss @@ -163,7 +163,7 @@ $options: ( 'font-size' : 1em, 'small-size' : .945em, 'transition' : background .15s, - 'sub-padding': .4rem + 'sub-padding': .4rem // padding of sub items ), 'icon': ( 'font-size' : 1.2rem, @@ -357,7 +357,7 @@ $options: ( 'variables': ( 'padding': 0 16px, 'input' : ( - 'color' : initial, + 'color' : inherit, 'background' : initial, 'border-color' : inherit, 'height' : initial, diff --git a/src/punica.scss b/src/punica.scss index 572b4c6b..3cfc64b1 100755 --- a/src/punica.scss +++ b/src/punica.scss @@ -3,6 +3,7 @@ /// @use "Core/Theme/Getters" as *; +@use "Core/Global/Helpers" as *; @use "themes" as get; /// ====================================================== @@ -13,8 +14,8 @@ /// ====================================================== /*! - * PUNICA CSS - #{theme('name')} - * v3.0.0 Beta build 1054 + * Punica CSS Framework - #{theme('name')} + * v3.0.0 Beta * * @link http://github.com/codeforms/Punica-CSS-Framework * diff --git a/src/themes.scss b/src/themes.scss index 091b537f..d10952b1 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -7,6 +7,9 @@ /// $themes: ( + /* + Default Theme + */ default: ( 'name' : 'Default Theme', 'type' : 'light', // light or dark (required*), @@ -23,10 +26,10 @@ $themes: ( 'color': ( 'text' : #202123, 'background' : white, - 'primary' : #4572d8, - 'success' : #4aa847, - 'warning' : #cc9042, - 'error' : #ca4040, + 'primary' : #3f61ac, + 'success' : #508434, + 'warning' : #b08142, + 'error' : #b34040, 'dark' : #4b505e ), 'border': ( @@ -47,23 +50,37 @@ $themes: ( // the all default "variables" in the options.scss API file. 'components': ( /* - 'card': ( - 'background': grey + 'navbar': ( + 'brand': ( + 'img-width': 9rem + ) + ), + 'alert': ( + 'enabled': false ) */ ), 'elements': ( /* - 'form': ( - 'input': ( - 'background': white + 'button': ( + 'features': ( + 'gradient': false ), ) */ ), - 'utilities': () + 'utilities': ( + /* + 'helpers': ( + 'enabled': false + ) + */ + ) ////////////////////////////////////////////////////////// ), + /* + Dark Theme + */ dark: ( 'name' : 'Dark Theme', 'type' : 'dark', // light or dark (required*), From ec2e5de732bf25f2a2e9ebd33bde324d1ae701fa Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 25 Sep 2024 21:36:06 +0300 Subject: [PATCH 011/154] b111 --- src/Core/Global/Options.scss | 125 +++++++ src/Core/Theme/Getters.scss | 122 ------ src/Modules/Components/Alert/Alert.scss | 6 +- src/Modules/Components/Alert/variables.scss | 30 -- src/Modules/Components/Badge/Badge.scss | 6 +- src/Modules/Components/Badge/variables.scss | 35 -- .../Components/Billboard/Billboard.scss | 8 +- .../Components/Billboard/variables.scss | 42 --- .../Components/Breadcrumb/Breadcrumb.scss | 4 +- .../Components/Breadcrumb/variables.scss | 23 -- src/Modules/Components/Caption/Caption.scss | 4 +- src/Modules/Components/Caption/variables.scss | 22 -- src/Modules/Components/Card/Card.scss | 2 +- src/Modules/Components/Card/variables.scss | 5 - src/Modules/Components/Label/Label.scss | 6 +- src/Modules/Components/Label/variables.scss | 30 -- src/Modules/Components/List/List.scss | 2 +- src/Modules/Components/List/variables.scss | 4 - src/Modules/Components/Menu/Menu.scss | 2 +- src/Modules/Components/Menu/variables.scss | 4 - src/Modules/Components/Navbar/Navbar.scss | 10 +- src/Modules/Components/Navbar/variables.scss | 53 --- src/Modules/Components/Panel/Panel.scss | 7 +- src/Modules/Components/Panel/variables.scss | 18 - src/Modules/Components/Process/Process.scss | 5 +- src/Modules/Components/Process/mixins.scss | 1 + src/Modules/Components/Process/variables.scss | 15 - src/Modules/Components/Stats/Stats.scss | 4 +- src/Modules/Components/Stats/variables.scss | 16 - src/Modules/Components/Tabnav/Tabnav.scss | 4 +- src/Modules/Components/Tabnav/variables.scss | 26 -- src/Modules/Components/Timeline/Timeline.scss | 4 +- .../Components/Timeline/variables.scss | 36 -- src/Modules/Components/Tooltip/Tooltip.scss | 2 +- src/Modules/Components/Tooltip/variables.scss | 4 - src/Modules/Elements/Button/Button.scss | 11 +- src/Modules/Elements/Button/mixins.scss | 8 +- src/Modules/Elements/Button/variables.scss | 64 ---- src/Modules/Elements/Form/Form.scss | 6 +- src/Modules/Elements/Form/variables.scss | 37 -- src/Modules/Elements/Grid/Grid.scss | 2 + src/Modules/Elements/Grid/variables.scss | 1 + src/Modules/Elements/Table/Table.scss | 1 + src/Modules/Elements/Table/variables.scss | 4 - .../Elements/Typography/Typography.scss | 14 +- src/options.scss | 348 +++++++++++++++++- 46 files changed, 512 insertions(+), 671 deletions(-) create mode 100644 src/Core/Global/Options.scss delete mode 100644 src/Modules/Components/Alert/variables.scss delete mode 100644 src/Modules/Components/Badge/variables.scss delete mode 100644 src/Modules/Components/Billboard/variables.scss delete mode 100644 src/Modules/Components/Breadcrumb/variables.scss delete mode 100644 src/Modules/Components/Caption/variables.scss delete mode 100644 src/Modules/Components/Card/variables.scss delete mode 100644 src/Modules/Components/Label/variables.scss delete mode 100644 src/Modules/Components/List/variables.scss delete mode 100644 src/Modules/Components/Menu/variables.scss delete mode 100644 src/Modules/Components/Navbar/variables.scss delete mode 100644 src/Modules/Components/Panel/variables.scss delete mode 100644 src/Modules/Components/Process/variables.scss delete mode 100644 src/Modules/Components/Stats/variables.scss delete mode 100644 src/Modules/Components/Tabnav/variables.scss delete mode 100644 src/Modules/Components/Timeline/variables.scss delete mode 100644 src/Modules/Components/Tooltip/variables.scss delete mode 100644 src/Modules/Elements/Button/variables.scss delete mode 100644 src/Modules/Elements/Form/variables.scss delete mode 100644 src/Modules/Elements/Table/variables.scss diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss new file mode 100644 index 00000000..177b1233 --- /dev/null +++ b/src/Core/Global/Options.scss @@ -0,0 +1,125 @@ +/// +/// Punica CSS Framework +/// Core/Theme/Options.scss +/// + +@use "../Theme/Getters" as *; +@use "Getters" as get; + +/// +/// Get a specific component's variable from the theme map +/// or from the options.scss API file, +/// which contains the default variables. +/// +/// @param {String(s)} $keys +/// +/// @example components('card', 'padding') +/// @example components('card', 'group', 'margin') +/// +/// @return mixed +/// +@function components($keys...) +{ + @return set_variable('components', $keys...); +} + +/// +/// Get a specific element's variable from the theme map +/// or from the options.scss API file, +/// which contains the default variables. +/// +/// @param {String(s)} $keys +/// +/// @example elements('button', 'font-weight') +/// @example elements('form', 'input', 'color') +/// +/// @return mixed +/// +@function elements($keys...) +{ + @return set_variable('elements', $keys...); +} + +/// +/// Get features of Components/Elements from the theme map +/// or from the options.scss API file, +/// which contains the default variables. +/// +/// @param {String} $node +/// @param {String} $module +/// @param {String} $feature +/// +/// @example features('components', 'card', 'horizontal') +/// @example features('elements', 'button', 'gradient') +/// +/// @return bool +/// +@function features($node, $module, $feature : null) +{ + @if theme($node, $module, 'features', $feature) != null { + @return theme($node, $module, 'features', $feature); + } + + @return map-get(map-get(get.options($module), 'features'), $feature); +} + +/// +/// Is component/element enabled? +/// +/// @param {String} $node +/// @param {String} $module +/// +/// @return bool +/// +@function enabled($node, $module) +{ + @if theme($node, $module, 'enabled') != null { + @return theme($node, $module, 'enabled'); + } + + @return get.options($module, 'enabled'); +} + +/// +/// Set variable +/// +/// @param {String} $module +/// @param {String(s)} $keys +/// +/// @return mixed +/// +@function set_variable($module, $keys...) +{ + @if theme($module, nth($keys, 1), nth($keys, 2)) { + $value : theme($module, nth($keys, 1), nth($keys, 2)); + + @if length($keys) > 2 { + $value: theme($module, nth($keys, 1), nth($keys, 2), nth($keys, 3)); + } + + @if($value != null) { + @return $value + } + } + + @return get_default_variable($keys); +} + +/// +/// Get default variables +/// from the options.scss API file +/// +/// @param {String(s)} $keys +/// +/// @return mixed +/// +@function get_default_variable($keys) +{ + $value: get.variables(nth($keys, 1), nth($keys, 2)); + + @if length($keys) > 2 { + $value: get.variables(nth($keys, 1), nth($keys, 2), nth($keys, 3)); + } + + @return $value; +} \ No newline at end of file diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 3259cd3f..2be3594d 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -3,10 +3,6 @@ /// Core/Theme/Getters.scss /// -@use "../../options" as option; -@use "../Global/Getters" as get; -@use "../../themes" as themes; - /// ====================================================== $theme-map: null !default; /// ====================================================== @@ -43,121 +39,3 @@ @return $value; } - -/// -/// Get a specific component's variable from the theme map -/// or from the options.scss API file, -/// which contains the default variables. -/// -/// @param {String(s)} $keys -/// -/// @example components('card', 'padding') -/// @example components('card', 'group', 'margin') -/// -/// @return mixed -/// -@function components($keys...) -{ - @return set_variable('components', $keys...); -} - -/// -/// Get a specific element's variable from the theme map -/// or from the options.scss API file, -/// which contains the default variables. -/// -/// @param {String(s)} $keys -/// -/// @example elements('button', 'font-weight') -/// @example elements('form', 'input', 'color') -/// -/// @return mixed -/// -@function elements($keys...) -{ - @return set_variable('elements', $keys...); -} - -/// -/// Get features of Components/Elements from the theme map -/// or from the options.scss API file, -/// which contains the default variables. -/// -/// @param {String} $node -/// @param {String} $module -/// @param {String} $feature -/// -/// @example features('components', 'card', 'horizontal') -/// @example features('elements', 'button', 'gradient') -/// -/// @return bool -/// -@function features($node, $module, $feature : null) -{ - @if theme($node, $module, 'features', $feature) != null { - @return theme($node, $module, 'features', $feature); - } - - @return map-get(map-get(get.options($module), 'features'), $feature); -} - -/// -/// Is component/element enabled? -/// -/// @param {String} $node -/// @param {String} $module -/// -/// @return bool -/// -@function enabled($node, $module) -{ - @if theme($node, $module, 'enabled') != null { - @return theme($node, $module, 'enabled'); - } - - @return get.options($module, 'enabled'); -} - -/// -/// Set variable -/// -/// @param {String} $module -/// @param {String(s)} $keys -/// -/// @return mixed -/// -@function set_variable($module, $keys...) -{ - @if theme($module, nth($keys, 1), nth($keys, 2)) { - $value : theme($module, nth($keys, 1), nth($keys, 2)); - - @if length($keys) > 2 { - $value: theme($module, nth($keys, 1), nth($keys, 2), nth($keys, 3)); - } - - @if($value != null) { - @return $value - } - } - - @return get_default_variable($keys); -} - -/// -/// Get default variables -/// from the options.scss API file -/// -/// @param {String(s)} $keys -/// -/// @return mixed -/// -@function get_default_variable($keys) -{ - $value: get.variables(nth($keys, 1), nth($keys, 2)); - - @if length($keys) > 2 { - $value: get.variables(nth($keys, 1), nth($keys, 2), nth($keys, 3)); - } - - @return $value; -} \ No newline at end of file diff --git a/src/Modules/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss index 868b769c..52d6f714 100644 --- a/src/Modules/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -4,9 +4,9 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'alert') { .#{class('alert', 'name')} { @@ -39,7 +39,7 @@ /// STYLES /// @if features('components', 'alert', 'styles') { - @each $style-name, $bg-color in variables.$styles { + @each $style-name, $bg-color in components('alert', 'styles') { @include set-style($bg-color, white, $style-name) { border-color: darken($bg-color, 3%); }; @@ -49,7 +49,7 @@ /// SIZES /// @if features('components', 'alert', 'sizes') { - @each $size-name, $font-size, $padding in variables.$sizes { + @each $size-name, $font-size, $padding in components('alert', 'sizes') { @include set-size($font-size, $padding, $size-name); } } diff --git a/src/Modules/Components/Alert/variables.scss b/src/Modules/Components/Alert/variables.scss deleted file mode 100644 index 4b5b1f9c..00000000 --- a/src/Modules/Components/Alert/variables.scss +++ /dev/null @@ -1,30 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Alert -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "small", // size name (class) - .749rem, // font-size - .4rem // padding - ), - ( - "large", // size name (class) - 1.1rem, // font-size - .8rem // padding - ) -); \ No newline at end of file diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index cfac5dbb..9d87b60e 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'badge') { .#{class('badge', 'name')} { @@ -26,7 +26,7 @@ /// STYLES /// @if features('components', 'badge', 'styles') { - @each $name, $bg-color in variables.$styles { + @each $name, $bg-color in components('badge', 'styles') { @include set-style($bg-color, white, $name) { border-color: darken($bg-color, 3%); }; @@ -36,7 +36,7 @@ /// SIZES /// @if features('components', 'badge', 'sizes') { - @each $size-name, $font-size, $padding in variables.$sizes { + @each $size-name, $font-size, $padding in components('badge', 'sizes') { @include set-size($font-size, $padding, $size-name); } } diff --git a/src/Modules/Components/Badge/variables.scss b/src/Modules/Components/Badge/variables.scss deleted file mode 100644 index 5be5d2d5..00000000 --- a/src/Modules/Components/Badge/variables.scss +++ /dev/null @@ -1,35 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Badge -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "tiny", // size name (class) - .659rem!important, // font-size - 0 4px!important // padding - ), - ( - "small", // size name (class) - .749rem!important, // font-size - 1px 4px!important // padding - ), - ( - "large", // size name (class) - 1.1rem!important, // font-size - 2px 8px!important // padding - ) -); \ No newline at end of file diff --git a/src/Modules/Components/Billboard/Billboard.scss b/src/Modules/Components/Billboard/Billboard.scss index 3e914110..9d88fd5f 100644 --- a/src/Modules/Components/Billboard/Billboard.scss +++ b/src/Modules/Components/Billboard/Billboard.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'billboard') { .#{class('billboard', 'name')} { @@ -24,7 +24,7 @@ /// STYLES /// @if features('components', 'billboard', 'styles') { - @each $style-name, $bg-color in variables.$styles { + @each $style-name, $bg-color in components('billboard', 'styles') { @include set-style($bg-color, white, $style-name) { border-color: darken($bg-color, 4.5%); }; @@ -34,7 +34,7 @@ /// SIZES /// @if features('components', 'billboard', 'sizes') { - @each $size-name, $padding, $font-size in variables.$sizes { + @each $size-name, $padding, $font-size in components('billboard', 'sizes') { @include set-size($font-size, $padding, $size-name) { .#{class('billboard', 'body')} { padding: $padding; @@ -89,7 +89,7 @@ /// SIZES /// @if features('components', 'billboard', 'sizes') { - @each $size, $padding, $font-size in variables.$responsive-sizes { + @each $size, $padding, $font-size in components('billboard', 'responsive-sizes') { &.#{$size} { padding: $padding; .#{class('billboard', 'body')} { diff --git a/src/Modules/Components/Billboard/variables.scss b/src/Modules/Components/Billboard/variables.scss deleted file mode 100644 index 9ed90248..00000000 --- a/src/Modules/Components/Billboard/variables.scss +++ /dev/null @@ -1,42 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Billboard -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "small", // size name (class) - 2.5rem 1.5rem, // padding - 1em // font-size - ), - ( - "large", // size name (class) - 7.5rem 4rem, // padding - 1.6em // font-size - ) -); -$responsive-sizes: ( - ( - "small", // size name (class) - 1rem, // padding - 1em // font-size - ), - ( - "large", // size name (class) - 1rem, // padding - 1.358em // font-size - ) -); \ No newline at end of file diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index 843e8aa3..b8e52c66 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'breadcrumb') { .#{class('breadcrumb', 'name')} { @@ -44,7 +44,7 @@ /// @if features('components', 'breadcrumb', 'sizes') { // size, font-size, seperator-padding, seperator-size - @each $size, $font-size, $seperator-padding, $seperator-size, $valign in variables.$sizes { + @each $size, $font-size, $seperator-padding, $seperator-size, $valign in components('breadcrumb', 'sizes') { &.#{$size} { .#{class('breadcrumb', 'item')} { font-size: $font-size; diff --git a/src/Modules/Components/Breadcrumb/variables.scss b/src/Modules/Components/Breadcrumb/variables.scss deleted file mode 100644 index 1355b0fd..00000000 --- a/src/Modules/Components/Breadcrumb/variables.scss +++ /dev/null @@ -1,23 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Breadcrumb -> Variables -/// - -/// SIZES =============================================== -$sizes: ( - ( - 'small', // size name (class) - .986em, // font-size - .3em, // seperator-padding - null, // seperator-size - unset, // vertical align - ), - ( - 'large', // size name (class) - 1.38em, // font-size - .3em, // seperator-padding - null, // seperator-size - text-bottom, // vertical align - ) -); - diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index 7683643b..295cce85 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('elements', 'caption') { .#{class('caption', 'name')} { @@ -52,7 +52,7 @@ /// SIZES /// @if features('elements', 'caption', 'sizes') { - @each $size-name, $margin, $font-size, $font-weight in variables.$caption-sizes { + @each $size-name, $margin, $font-size, $font-weight in components('caption', 'sizes') { @include set-size($font-size, null, $size-name) { margin: $margin; font-weight: $font-weight; diff --git a/src/Modules/Components/Caption/variables.scss b/src/Modules/Components/Caption/variables.scss deleted file mode 100644 index eb00c2ee..00000000 --- a/src/Modules/Components/Caption/variables.scss +++ /dev/null @@ -1,22 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Caption -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// SIZES =============================================== -$caption-sizes: ( - ( - "small", // size name (class) - 1em .1rem, // margin - 1.65rem, // font-size - theme('typography', 'font-weight') // font-weight - ), - ( - "large", // size name (class) - 1.4em .3rem, // margin - 2.35rem, // font-size - bold // font-weight - ) -); \ No newline at end of file diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index 3fb09d55..e089673a 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -4,13 +4,13 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Variables" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "../../../Modules/Elements/Typography/variables" as *; -@use "variables"; @if enabled('components', 'card') { .#{class('card', 'cards')} { diff --git a/src/Modules/Components/Card/variables.scss b/src/Modules/Components/Card/variables.scss deleted file mode 100644 index 77c6496b..00000000 --- a/src/Modules/Components/Card/variables.scss +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Card -> Variables -/// - diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index ed6cbc34..df01d991 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -4,9 +4,9 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('elements', 'label') { a.#{class('label', 'name')}, @@ -31,7 +31,7 @@ /// STYLES /// @if features('elements', 'label', 'styles') { - @each $style-name, $bg-color in variables.$styles { + @each $style-name, $bg-color in components('label', 'styles') { @include set-style($bg-color, white, $style-name) { border-color: darken($bg-color, 3%); }; @@ -41,7 +41,7 @@ /// SIZES /// @if features('elements', 'label', 'sizes') { - @each $size-name, $padding, $font-size in variables.$sizes { + @each $size-name, $padding, $font-size in components('label', 'sizes') { @include set-size($font-size, $padding, $size-name); } } diff --git a/src/Modules/Components/Label/variables.scss b/src/Modules/Components/Label/variables.scss deleted file mode 100644 index 28f7a23e..00000000 --- a/src/Modules/Components/Label/variables.scss +++ /dev/null @@ -1,30 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Label -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "small", // size name (class) - .18rem .85rem, // padding - .8195em // font-size - ), - ( - "large", // size name (class) - .415rem 1.159rem, // padding - 1em // font-size - ) -); \ No newline at end of file diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index a0f68495..94623508 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -4,11 +4,11 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'list') { .#{class('list', 'name')} { diff --git a/src/Modules/Components/List/variables.scss b/src/Modules/Components/List/variables.scss deleted file mode 100644 index 5fbdf3ed..00000000 --- a/src/Modules/Components/List/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : List -> Variables -/// diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index 71bd97de..840e9a6c 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -4,11 +4,11 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'menu') { .#{class('menu', 'name')} { diff --git a/src/Modules/Components/Menu/variables.scss b/src/Modules/Components/Menu/variables.scss deleted file mode 100644 index cfbac376..00000000 --- a/src/Modules/Components/Menu/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Menu -> Variables -/// \ No newline at end of file diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 63c68609..c15f6d8e 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -4,12 +4,12 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "mixins"; -@use "variables"; @if enabled('components', 'navbar') { .#{class('navbar', 'name')} { @@ -165,7 +165,6 @@ padding: components('navbar', 'button-padding'); font-weight: theme('components','navbar', 'font-weight'); } - /// /// GRADIENT /// @@ -188,12 +187,11 @@ background: linear-gradient(-135deg, lighten(theme('color', 'primary'), 7.5%), theme('color', 'primary')); } } - /// /// NAVBAR THEMES /// @if features('components', 'navbar', 'themes') { - @each $theme-name, $bg-color, $text-color, $input-bg, $input-color, $input-border-color, $divider-color in variables.$themes { + @each $theme-name, $bg-color, $text-color, $input-bg, $input-color, $input-border-color, $divider-color in components('navbar', 'styles') { &.#{$theme-name} { @include mixins.navbar-themes($bg-color, $text-color, $input-bg, $input-color, $input-border-color, $divider-color); } @@ -203,7 +201,7 @@ /// NAVBAR SIZES /// @if features('components', 'navbar', 'sizes') { - @each $size-name, $min-height, $font-size, $button-padding in variables.$sizes { + @each $size-name, $min-height, $font-size, $button-padding in components('navbar', 'sizes') { &.#{$size-name} { min-height: $min-height; & .#{class('button', 'name')}, @@ -285,7 +283,7 @@ /// NAVBAR SIZES /// @if features('components', 'navbar', 'sizes') { - @each $size-name, $min-height, $font-size, $button-padding, $spacer-top in variables.$sizes { + @each $size-name, $min-height, $font-size, $button-padding, $spacer-top in components('navbar', 'styles') { &.#{$size-name} { & .#{class('navbar', 'burger')}, & .#{class('navbar', 'burger')}::before { diff --git a/src/Modules/Components/Navbar/variables.scss b/src/Modules/Components/Navbar/variables.scss deleted file mode 100644 index 902ef678..00000000 --- a/src/Modules/Components/Navbar/variables.scss +++ /dev/null @@ -1,53 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Navbar -> Variables -/// - -@use "../../../Core/Global/Colors" as color; -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -// you can add your own custom styles. -$themes: ( - ( - "light", // theme name (class) - white, // bg color - #303232, // text color - white, // input bg - #303232, // input color - theme('color', 'dark'), // input border color - color.$grey // divider color - ), - ( - "dark", // theme name (class) - theme('color', 'dark'), // bg color - white, // text color - lighten(theme('color', 'dark'), 7%), // input bg - white, // input color - lighten(theme('color', 'dark'), 25.75%), // input border color - lighten(theme('color', 'dark'), 12.55%) // divider color - ) -); - -/// SIZES =============================================== -// you can add your own custom sizes. -$sizes: ( - ( - "mini", // size name (class) - 45px, // min-height - .9839em, // button font-size - .445rem .9rem, // button padding - ), - ( - "small", // size name (class) - 65px, // min-height - 1em, // button font-size - .645rem 1.4rem, // button padding - ), - ( - "large", // size name (class) - 95px, // min-height - 1.28em, // button font-size - .645rem 1.4rem, // button padding - ) -); diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index eba82fc6..dc2e82ef 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'panel') { .#{class('panel', 'name')} { @@ -17,7 +17,6 @@ // has panel border? @if features('components', 'panel', 'border') { @include border(); - /// border radius border-radius: if(theme('components', 'panel', 'radius'), theme('components', 'panel', 'radius'), theme('border', 'radius')); } @@ -26,9 +25,7 @@ @include shadow(); } - /// background color background-color: if(theme('components', 'panel', 'background'), theme('components', 'panel', 'background'), theme('color', 'background')); - margin: components('panel', 'margin'); &>.#{class('panel', 'header')}, &>.#{class('panel', 'bottom')} { @@ -100,7 +97,7 @@ /// SIZES /// @if features('components', 'panel', 'sizes') { - @each $size-name, $font-size, $padding in variables.$sizes { + @each $size-name, $font-size, $padding in components('panel', 'sizes') { &.#{$size-name} { >.#{class('panel', 'header')} { padding: $padding; diff --git a/src/Modules/Components/Panel/variables.scss b/src/Modules/Components/Panel/variables.scss deleted file mode 100644 index c14236fa..00000000 --- a/src/Modules/Components/Panel/variables.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Panel -> Variables -/// - -/// SIZES =============================================== -$sizes: ( - ( - "mini", // size name (class) - .985rem, // font-size (title) - 4px 8px // padding (title/content/bottom) - ), - ( - "small", // size name (class) - 1.038rem, // font-size (title) - 8px 12px // padding (title/content/bottom) - ) -); \ No newline at end of file diff --git a/src/Modules/Components/Process/Process.scss b/src/Modules/Components/Process/Process.scss index 2b7d3e32..ffb24249 100644 --- a/src/Modules/Components/Process/Process.scss +++ b/src/Modules/Components/Process/Process.scss @@ -4,11 +4,11 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "mixins"; -@use "variables"; @if enabled('components', 'process') { .#{class('process', 'name')} { @@ -88,7 +88,7 @@ /// STYLES /// @if features('components', 'process', 'styles') { - @each $type, $bg-color in variables.$styles { + @each $type, $bg-color in components('process', 'styles') { &.#{$type} { @include mixins.process-styles($bg-color); } @@ -102,7 +102,6 @@ @include mixins.process-vertical(); } } - // vertical style is setted as "true" for mobile devices @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { @include mixins.process-vertical(); diff --git a/src/Modules/Components/Process/mixins.scss b/src/Modules/Components/Process/mixins.scss index bb45334b..cd383802 100644 --- a/src/Modules/Components/Process/mixins.scss +++ b/src/Modules/Components/Process/mixins.scss @@ -4,6 +4,7 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; diff --git a/src/Modules/Components/Process/variables.scss b/src/Modules/Components/Process/variables.scss deleted file mode 100644 index b81ab94d..00000000 --- a/src/Modules/Components/Process/variables.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Process -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), color theme - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'text'), -); diff --git a/src/Modules/Components/Stats/Stats.scss b/src/Modules/Components/Stats/Stats.scss index 0d486c4e..6ce321b5 100644 --- a/src/Modules/Components/Stats/Stats.scss +++ b/src/Modules/Components/Stats/Stats.scss @@ -4,11 +4,11 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'stats') { .#{class('stats', 'name')}, @@ -64,7 +64,7 @@ /// STYLES /// @if features('components', 'stats', 'styles') { - @each $style-name, $bg-color in variables.$styles { + @each $style-name, $bg-color in components('stats', 'styles') { @include set-style($bg-color, white, $style-name) { border-color: $bg-color; background: transparent; diff --git a/src/Modules/Components/Stats/variables.scss b/src/Modules/Components/Stats/variables.scss deleted file mode 100644 index 34e361c1..00000000 --- a/src/Modules/Components/Stats/variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Stats -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : lighten(theme('color', 'dark'), 7.85%), -); \ No newline at end of file diff --git a/src/Modules/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss index 812dd310..072d24ff 100755 --- a/src/Modules/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -4,12 +4,12 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "mixins"; -@use "variables"; @if enabled('components', 'tabnav') { .#{class('tabnav', 'name')} { @@ -84,7 +84,7 @@ /// STYLES /// @if features('components', 'tabnav', 'styles') { - @each $type-name, $color in variables.$styles { + @each $type-name, $color in components('tabnav', 'styles') { &.#{$type-name} { .#{class('button', 'name')}, a.#{class('button', 'name')}, diff --git a/src/Modules/Components/Tabnav/variables.scss b/src/Modules/Components/Tabnav/variables.scss deleted file mode 100644 index 54a3448a..00000000 --- a/src/Modules/Components/Tabnav/variables.scss +++ /dev/null @@ -1,26 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Tabnav -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - ( - 'success', // style name (class) - theme('color', 'success') // color - ), - ( - 'warning', // style name (class) - theme('color', 'warning') // color - ), - ( - 'error', // style name (class) - theme('color', 'error') // color - ), - ( - 'dark', // style name (class) - theme('color', 'text') // color - ) -); \ No newline at end of file diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index ac7caa98..f3b9bb77 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -4,11 +4,11 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'timeline') { .#{class('timeline', 'name')} { @@ -51,7 +51,7 @@ /// STYLES /// @if features('components', 'timeline', 'styles') { - @each $type, $bg-color, $color in variables.$styles { + @each $type, $bg-color, $color in components('timeline', 'styles') { &.#{$type} { background-color: $bg-color; color: $color; diff --git a/src/Modules/Components/Timeline/variables.scss b/src/Modules/Components/Timeline/variables.scss deleted file mode 100644 index 553c4523..00000000 --- a/src/Modules/Components/Timeline/variables.scss +++ /dev/null @@ -1,36 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Timeline -> Variables -/// - -@use "../../../Core/Global/Colors" as color; -@use "../../../Core/Theme/Getters" as *; - -/// STYLES ============================================== -$styles: ( - ( - "primary", // style name (class) - theme('color', 'primary'), // bg color - white // text color - ), - ( - "success", // style name (class) - theme('color', 'success'), // bg color - white // text color - ), - ( - "warning", // style name (class) - theme('color', 'warning'), // bg color - white // text color - ), - ( - "error", // style name (class) - theme('color', 'error'), // bg color - white // text color - ), - ( - "dark", // style name (class) - theme('color', 'text'), // bg color - lighten(color.$grey, 20%) // text color - ), -); \ No newline at end of file diff --git a/src/Modules/Components/Tooltip/Tooltip.scss b/src/Modules/Components/Tooltip/Tooltip.scss index 3cc50070..9e515982 100644 --- a/src/Modules/Components/Tooltip/Tooltip.scss +++ b/src/Modules/Components/Tooltip/Tooltip.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; @if enabled('components', 'tooltip') { .#{class('tooltip', 'name')} { diff --git a/src/Modules/Components/Tooltip/variables.scss b/src/Modules/Components/Tooltip/variables.scss deleted file mode 100644 index 52b84502..00000000 --- a/src/Modules/Components/Tooltip/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Tooltip -> Variables -/// diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index 2d15aec7..67cb5414 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -4,12 +4,12 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @use "../../../Modules/Elements/Typography/variables" as *; -@use "variables" as *; @use "mixins" as *; @if enabled('elements', 'button') { @@ -28,10 +28,7 @@ @include border(); appearance: none; color: theme('color', 'text'); - - /// border radius border-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - box-sizing: border-box; cursor: pointer; line-height: elements('button', 'line-height'); @@ -55,7 +52,6 @@ &:focus { background: theme('color', 'background'); } - /// /// GRADIENT /// @@ -85,7 +81,6 @@ } } } - &.#{class('button', 'active')} { color: theme('color', 'text'); background: color.$grey; @@ -116,7 +111,7 @@ /// STYLES /// @if features('elements', 'button', 'styles') { - @each $theme-name, $theme-color, $border-color in $button-styles { + @each $theme-name, $theme-color, $border-color in elements('button', 'styles') { &.#{$theme-name} { @include button-styles($theme-color, $border-color); } @@ -127,10 +122,8 @@ } } } - // Button Link @include link-button(); - /// /// SIZES /// diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 446767c3..52eedd41 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@use "variables"; /// /// Dropdown @@ -171,7 +171,7 @@ /// STYLES /// @if features('elements', 'button', 'styles') { - @each $theme-name, $theme-color in variables.$button-styles { + @each $theme-name, $theme-color in elements('button', 'styles') { &.#{$theme-name} > .#{class('button', 'name')}, &.#{$theme-name} > .#{class('button', 'dropdown')} > .#{class('button', 'name')} { @include button-styles($theme-color, darken($theme-color, 7%)); @@ -242,7 +242,7 @@ /// STYLES /// @if features('elements', 'button', 'styles') { - @each $theme-name, $theme-color in variables.$button-styles { + @each $theme-name, $theme-color in elements('button', 'styles') { &>.#{$theme-name}.#{class('button', 'name')}, &>.#{class('button', 'dropdown')} > .#{$theme-name}.#{class('button', 'name')} { border: theme('border', 'width') solid darken($theme-color, 6%); @@ -375,7 +375,7 @@ /// @param {Boolean} $class-name /// @mixin button-sizes($class-name: false) { - @each $name, $font-size, $padding in variables.$button-sizes { + @each $name, $font-size, $padding in elements('button', 'sizes') { @if $class-name { &.#{$name} > .#{class('button', 'name')}, &.#{$name} > .#{class('button', 'dropdown')} > .#{class('button', 'name')} { diff --git a/src/Modules/Elements/Button/variables.scss b/src/Modules/Elements/Button/variables.scss deleted file mode 100644 index 36175e61..00000000 --- a/src/Modules/Elements/Button/variables.scss +++ /dev/null @@ -1,64 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Button -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -// SIZES ================================================ -$button-sizes: ( - ( - "tiny", // size name (class) - .809em, // font-size - .415rem .5rem // padding - ), - ( - "mini", // size name (class) - .909em, // font-size - .445rem .9rem // padding - ), - ( - "small", // size name (class) - .979em, // font-size - .645rem 1.4rem // padding - ), - ( - "large", // size name (class) - 1.25em, // font-size - 1.15rem 2.1rem // padding - ), - ( - "huge", // size name (class) - 1.45em, // font-size - 1.3rem 2.4rem // padding - ) -); - -/// STYLES ============================================== -$button-styles: ( - ( - 'primary', // class name - theme('color', 'primary'), // bg color - lighten(theme('color', 'primary'), 4%) // border color - ), - ( - 'success', // class name - theme('color', 'success'), // bg color - lighten(theme('color', 'success'), 4%) // border color - ), - ( - 'warning', // class name - theme('color', 'warning'), // bg color - lighten(theme('color', 'warning'), 4%) // border color - ), - ( - 'error', // class name - theme('color', 'error'), // bg color - lighten(theme('color', 'error'), 4%) // border color - ), - ( - 'dark', // class name - theme('color', 'dark'), // bg color - lighten(theme('color', 'dark'), 4%) // border color - ) -); diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 8ed96570..795d292e 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -4,10 +4,10 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Variables" as *; @use "../../../Core/Theme/Getters" as *; -@use "variables"; @use "mixins"; @if enabled('elements', 'form') { @@ -41,7 +41,7 @@ /// VALIDATION STYLES /// @if features('elements', 'form', 'validation-styles') { - @each $style-name, $style-color in variables.$input-styles { + @each $style-name, $style-color in elements('form', 'styles') { &.#{$style-name} { color: $style-color; border-color: $style-color; @@ -193,7 +193,7 @@ /// INPUT SIZES /// @if features('elements', 'form', 'sizes') { - @each $size-name, $font-size, $input-height, $button-padding, $button-font-size in variables.$input-sizes { + @each $size-name, $font-size, $input-height, $button-padding, $button-font-size in elements('button', 'sizes') { &.#{$size-name} { @include mixins.form-inputs() { height: $input-height; diff --git a/src/Modules/Elements/Form/variables.scss b/src/Modules/Elements/Form/variables.scss deleted file mode 100644 index 288f1c28..00000000 --- a/src/Modules/Elements/Form/variables.scss +++ /dev/null @@ -1,37 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Form -> Variables -/// - -@use "../../../Core/Theme/Getters" as *; - -/// SIZES =============================================== -$input-sizes: ( - ( - 'small', // class name - 1em, // font-size - 1.9rem, // input height - .645rem 1.4rem, // button padding[*] - .979em // button font size[*] - ), - ( - 'large', // class name - 1.2em, // font-size - 2.9rem, // input height - 1.15rem 2.1rem, // button padding[*] - 1.25em // button font size[*] - ) -); - -/// STYLES ============================================== -// for input validations -$input-styles: ( - ( - 'success', // class name - theme('color', 'success') // color - ), - ( - 'error', // class name - theme('color', 'error') // color - ) -); diff --git a/src/Modules/Elements/Grid/Grid.scss b/src/Modules/Elements/Grid/Grid.scss index cb975a0a..16fb5f18 100644 --- a/src/Modules/Elements/Grid/Grid.scss +++ b/src/Modules/Elements/Grid/Grid.scss @@ -4,7 +4,9 @@ /// @use "../../../Core/Theme/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "variables" as *; diff --git a/src/Modules/Elements/Grid/variables.scss b/src/Modules/Elements/Grid/variables.scss index 136ccaa9..6a9c2212 100644 --- a/src/Modules/Elements/Grid/variables.scss +++ b/src/Modules/Elements/Grid/variables.scss @@ -5,6 +5,7 @@ @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; /// PREFERENCES ========================================= $viewports: ( diff --git a/src/Modules/Elements/Table/Table.scss b/src/Modules/Elements/Table/Table.scss index d2be9466..4d7afe32 100644 --- a/src/Modules/Elements/Table/Table.scss +++ b/src/Modules/Elements/Table/Table.scss @@ -4,6 +4,7 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; diff --git a/src/Modules/Elements/Table/variables.scss b/src/Modules/Elements/Table/variables.scss deleted file mode 100644 index 81c50620..00000000 --- a/src/Modules/Elements/Table/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Table -> Variables -/// \ No newline at end of file diff --git a/src/Modules/Elements/Typography/Typography.scss b/src/Modules/Elements/Typography/Typography.scss index 64102831..e102968a 100644 --- a/src/Modules/Elements/Typography/Typography.scss +++ b/src/Modules/Elements/Typography/Typography.scss @@ -65,19 +65,19 @@ blockquote { color: theme('color', 'text'); } small { - font-size: 86%; + font-size: 86%; } sub, sup { - font-size: 78%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 78%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } \ No newline at end of file diff --git a/src/options.scss b/src/options.scss index bdfe99ab..96c15f08 100755 --- a/src/options.scss +++ b/src/options.scss @@ -5,6 +5,10 @@ /// Note: You can also override/change the all following /// default variables from your theme map. /// + +@use "Core/Theme/Getters" as *; +@use "Core/Global/Colors" as color; + $options: ( /// /// COMPONENTS @@ -21,8 +25,28 @@ $options: ( 'width' : 100%, 'icon': ( 'vertical-align': text-top + ), + 'styles': ( + // style name (class), theme variable + "primary" : theme('color', 'primary'), + "success" : theme('color', 'success'), + "warning" : theme('color', 'warning'), + "error" : theme('color', 'error'), + "dark" : theme('color', 'dark'), + ), + 'sizes': ( + ( + "small", // size name (class) + .749rem, // font-size + .4rem // padding + ), + ( + "large", // size name (class) + 1.1rem, // font-size + .8rem // padding + ) ) - ) + ), ), 'badge': ( 'enabled': true, @@ -31,7 +55,32 @@ $options: ( 'sizes' : true ), 'variables': ( - 'border-radius': 500px + 'border-radius': 500px, + 'styles': ( + // style name (class), theme variable + "primary" : theme('color', 'primary'), + "success" : theme('color', 'success'), + "warning" : theme('color', 'warning'), + "error" : theme('color', 'error'), + "dark" : theme('color', 'dark'), + ), + 'sizes': ( + ( + "tiny", // size name (class) + .659rem!important, // font-size + 0 4px!important // padding + ), + ( + "small", // size name (class) + .749rem!important, // font-size + 1px 4px!important // padding + ), + ( + "large", // size name (class) + 1.1rem!important, // font-size + 2px 8px!important // padding + ) + ) ) ), 'billboard': ( @@ -45,6 +94,38 @@ $options: ( 'padding': 4.5rem 2.5rem, 'body' : ( 'padding': 4.5rem 2.5rem + ), + 'styles': ( + // style name (class), theme variable + "primary" : theme('color', 'primary'), + "success" : theme('color', 'success'), + "warning" : theme('color', 'warning'), + "error" : theme('color', 'error'), + "dark" : theme('color', 'dark'), + ), + 'sizes': ( + ( + "small", // size name (class) + 2.5rem 1.5rem, // padding + 1em // font-size + ), + ( + "large", // size name (class) + 7.5rem 4rem, // padding + 1.6em // font-size + ) + ), + 'responsive-sizes': ( + ( + "small", // size name (class) + 1rem, // padding + 1em // font-size + ), + ( + "large", // size name (class) + 1rem, // padding + 1.358em // font-size + ) ) ) ), @@ -57,7 +138,23 @@ $options: ( 'font-size' : 1.1rem, 'font-weight' : normal, 'active-weight': bold, - 'seperator' : "\276D" + 'seperator' : "\276D", + 'sizes': ( + ( + 'small', // size name (class) + .986em, // font-size + .3em, // seperator-padding + null, // seperator-size + unset, // vertical align + ), + ( + 'large', // size name (class) + 1.38em, // font-size + .3em, // seperator-padding + null, // seperator-size + text-bottom, // vertical align + ) + ) ) ), 'caption': ( @@ -71,6 +168,20 @@ $options: ( 'media' : ( 'margin': .559em, ), + 'sizes': ( + ( + "small", // size name (class) + 1em .1rem, // margin + 1.65rem, // font-size + theme('typography', 'font-weight') // font-weight + ), + ( + "large", // size name (class) + 1.4em .3rem, // margin + 2.35rem, // font-size + bold // font-weight + ) + ) ) ), 'card': ( @@ -104,7 +215,27 @@ $options: ( 'variables': ( 'font-size': .9195em, 'padding' : 0.28rem 0.9rem, - 'margin' : .1rem .05rem + 'margin' : .1rem .05rem, + 'styles': ( + // style name (class), theme variable + "primary" : theme('color', 'primary'), + "success" : theme('color', 'success'), + "warning" : theme('color', 'warning'), + "error" : theme('color', 'error'), + "dark" : theme('color', 'dark'), + ), + 'sizes': ( + ( + "small", // size name (class) + .18rem .85rem, // padding + .8195em // font-size + ), + ( + "large", // size name (class) + .415rem 1.159rem, // padding + 1em // font-size + ) + ) ) ), 'list': ( @@ -200,6 +331,46 @@ $options: ( 'burger': ( 'padding' : 0 1.5rem, 'icon-size': 2.459rem + ), + 'styles': ( + ( + "light", // theme name (class) + white, // bg color + #303232, // text color + white, // input bg + #303232, // input color + theme('color', 'dark'), // input border color + color.$grey // divider color + ), + ( + "dark", // theme name (class) + theme('color', 'dark'), // bg color + white, // text color + lighten(theme('color', 'dark'), 7%), // input bg + white, // input color + lighten(theme('color', 'dark'), 25.75%), // input border color + lighten(theme('color', 'dark'), 12.55%) // divider color + ) + ), + 'sizes': ( + ( + "mini", // size name (class) + 45px, // min-height + .9839em, // button font-size + .445rem .9rem, // button padding + ), + ( + "small", // size name (class) + 65px, // min-height + 1em, // button font-size + .645rem 1.4rem, // button padding + ), + ( + "large", // size name (class) + 95px, // min-height + 1.28em, // button font-size + .645rem 1.4rem, // button padding + ) ) ) ), @@ -215,7 +386,19 @@ $options: ( 'variables': ( 'padding' : 16px, 'margin' : 16px 0, - 'title-padding': 12px 16px + 'title-padding': 12px 16px, + 'sizes': ( + ( + "mini", // size name (class) + .985rem, // font-size (title) + 4px 8px // padding (title/content/bottom) + ), + ( + "small", // size name (class) + 1.038rem, // font-size (title) + 8px 12px // padding (title/content/bottom) + ) + ) ) ), 'process': ( @@ -238,20 +421,16 @@ $options: ( 'vertical': ( 'margin' : 1em 0, 'stickbar-width': 9px + ), + 'styles': ( + // style name (class), color theme + "success" : theme('color', 'success'), + "warning" : theme('color', 'warning'), + "error" : theme('color', 'error'), + "dark" : theme('color', 'text'), ) ) ), - 'progress': ( - 'enabled': true, - 'features': ( - 'styles': true - ), - 'variables': ( - 'width' : 100%, - 'height' : 12px, - 'border-radius': 16px - ) - ), 'stats': ( 'enabled': true, 'features': ( @@ -279,6 +458,14 @@ $options: ( 'media': ( 'font-size' : 1em, // icon 'margin-right': .5em + ), + 'styles': ( + // style name (class), theme variable + "primary" : theme('color', 'primary'), + "success" : theme('color', 'success'), + "warning" : theme('color', 'warning'), + "error" : theme('color', 'error'), + "dark" : lighten(theme('color', 'dark'), 7.85%), ) ) ), @@ -289,7 +476,25 @@ $options: ( 'bottom-position': true ), 'variables': ( - 'border-width': 2px + 'border-width': 2px, + 'styles': ( + ( + 'success', // style name (class) + theme('color', 'success') // color + ), + ( + 'warning', // style name (class) + theme('color', 'warning') // color + ), + ( + 'error', // style name (class) + theme('color', 'error') // color + ), + ( + 'dark', // style name (class) + theme('color', 'text') // color + ) + ) ) ), 'timeline': ( @@ -304,6 +509,33 @@ $options: ( 'border-width': 1px, 'item': ( 'padding': 1.25em 2em 2.85em + ), + 'styles': ( + ( + "primary", // style name (class) + theme('color', 'primary'), // bg color + white // text color + ), + ( + "success", // style name (class) + theme('color', 'success'), // bg color + white // text color + ), + ( + "warning", // style name (class) + theme('color', 'warning'), // bg color + white // text color + ), + ( + "error", // style name (class) + theme('color', 'error'), // bg color + white // text color + ), + ( + "dark", // style name (class) + theme('color', 'text'), // bg color + lighten(color.$grey, 20%) // text color + ), ) ) ), @@ -342,6 +574,60 @@ $options: ( 'transition' : .2s, 'icon': ( 'font-size': 1.12rem + ), + 'styles': ( + ( + 'primary', // class name + theme('color', 'primary'), // bg color + lighten(theme('color', 'primary'), 4%) // border color + ), + ( + 'success', // class name + theme('color', 'success'), // bg color + lighten(theme('color', 'success'), 4%) // border color + ), + ( + 'warning', // class name + theme('color', 'warning'), // bg color + lighten(theme('color', 'warning'), 4%) // border color + ), + ( + 'error', // class name + theme('color', 'error'), // bg color + lighten(theme('color', 'error'), 4%) // border color + ), + ( + 'dark', // class name + theme('color', 'dark'), // bg color + lighten(theme('color', 'dark'), 4%) // border color + ) + ), + 'sizes': ( + ( + "tiny", // size name (class) + .809em, // font-size + .415rem .5rem // padding + ), + ( + "mini", // size name (class) + .909em, // font-size + .445rem .9rem // padding + ), + ( + "small", // size name (class) + .979em, // font-size + .645rem 1.4rem // padding + ), + ( + "large", // size name (class) + 1.25em, // font-size + 1.15rem 2.1rem // padding + ), + ( + "huge", // size name (class) + 1.45em, // font-size + 1.3rem 2.4rem // padding + ) ) ) ), @@ -383,6 +669,34 @@ $options: ( 'top' : -8px, 'left' : 0, 'label-padding': 0 1.2rem 0 1.7rem + ), + // for input validations + 'styles': ( + ( + 'success', // class name + theme('color', 'success') // color + ), + ( + 'error', // class name + theme('color', 'error') // color + ) + ), + // input sizes + 'sizes': ( + ( + 'small', // class name + 1em, // font-size + 1.9rem, // input height + .645rem 1.4rem, // button padding[*] + .979em // button font size[*] + ), + ( + 'large', // class name + 1.2em, // font-size + 2.9rem, // input height + 1.15rem 2.1rem, // button padding[*] + 1.25em // button font size[*] + ) ) ) ), From 5ba6c684473785708b1ed04de1609aa882e04adb Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 3 Oct 2024 18:40:46 +0300 Subject: [PATCH 012/154] b112 --- src/Core/Global/Options.scss | 2 +- src/Modules/Elements/Base/Base.scss | 43 +++++++++++++++---- src/Modules/Elements/Form/Form.scss | 16 ++++--- .../Elements/Typography/Typography.scss | 9 +++- src/Modules/Utilities/_config/height.scss | 12 ++++-- .../Utilities/_config/text-colors.scss | 3 +- src/Modules/Utilities/_config/width.scss | 7 ++- src/Modules/Utilities/mixins.scss | 13 +++--- src/options.scss | 12 +++--- 9 files changed, 79 insertions(+), 38 deletions(-) diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 177b1233..01693440 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -1,6 +1,6 @@ /// /// Punica CSS Framework -/// Core/Theme/Options.scss +/// Core/Global/Options.scss /// @use "../Theme/Getters" as *; diff --git a/src/Modules/Elements/Base/Base.scss b/src/Modules/Elements/Base/Base.scss index 0d693eee..260ebe20 100644 --- a/src/Modules/Elements/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -47,9 +47,9 @@ html, body { border: none; scroll-behavior: smooth; text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - font-smoothing: antialiased; - -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; } ::selection { background-color: theme('color', 'primary'); @@ -70,10 +70,11 @@ a { } } hr { - margin: 15px 0; - background-color: theme('border', 'color'); - border: none; - height: 1px; + border: 0; + border-top: 0.1rem solid theme('border', 'color'); + margin: 2.0rem 0; + box-sizing: content-box; + overflow: visible; } /* List */ ul, ol { @@ -99,13 +100,18 @@ dl { } /* embedded content */ img, +picture, +svg, canvas, embed, object, video { max-width: 100%; height: auto; - box-sizing: border-box; + vertical-align: middle; + font-style: italic; + background-repeat: no-repeat; + background-size: cover; } img { border-style: none; @@ -113,6 +119,16 @@ img { iframe { outline: 0; } +pre { + font-family: monospace, monospace; + font-size: 1em; + code { + border-radius: 0; + display: block; + padding: 1rem 1.5rem; + white-space: pre; + } +} :not(pre)>code, :not(pre)>kbd, :not(pre)>samp { @@ -120,4 +136,15 @@ iframe { white-space: nowrap; padding: 2px 6px; font-size: 1em; +} +[hidden], +.hidden { + display: none; +} +[disabled], +:disabled, +.disabled { + opacity: .49; + cursor: default; + pointer-events: none; } \ No newline at end of file diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 795d292e..d2190631 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -56,7 +56,7 @@ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNnoiLz48L3N2Zz4="); background-repeat: no-repeat; - background-position: right 10px center; + background-position: right 1rem center; &[multiple] { background: none; height: auto; @@ -66,15 +66,17 @@ min-height: 6.5rem; resize: vertical; } + fieldset { + border-width: 0; + padding: 0.6em; + } label, legend { display: block; - font-size: 1rem; - font-weight: theme('typography', 'font-weight'); - } - fieldset { - border-width: 0; - padding: 0; + font-size: 1.3rem; + font-weight: bold; + margin-bottom: .7rem; + white-space: normal; } input[type='checkbox'], input[type='radio'] { diff --git a/src/Modules/Elements/Typography/Typography.scss b/src/Modules/Elements/Typography/Typography.scss index e102968a..2cddf790 100644 --- a/src/Modules/Elements/Typography/Typography.scss +++ b/src/Modules/Elements/Typography/Typography.scss @@ -16,6 +16,7 @@ line-height: 2; margin-bottom: 1em; overflow-wrap: break-word; + text-wrap: balance; } #{$header}, .#{$header} { @@ -48,6 +49,10 @@ h6.bordered, p { margin: 0 0 1em; font-size: 1rem; + text-wrap: pretty; +} +b, strong { + font-weight: bolder; } a, ins, u { text-decoration-skip: ink edges; @@ -65,11 +70,11 @@ blockquote { color: theme('color', 'text'); } small { - font-size: 86%; + font-size: 80%; } sub, sup { - font-size: 78%; + font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; diff --git a/src/Modules/Utilities/_config/height.scss b/src/Modules/Utilities/_config/height.scss index dfc77927..4a0ba98e 100644 --- a/src/Modules/Utilities/_config/height.scss +++ b/src/Modules/Utilities/_config/height.scss @@ -8,8 +8,12 @@ $height-helpers: ( ("height-min-content", min-content), ("height-max-content", max-content), ("height-fit-content", fit-content), - ("height-25", 25%), - ("height-50", 50%), - ("height-75", 75%), - ("height-100", 100%), + ("height-2", 2rem), + ("height-3", 3rem), + ("height-4", 4rem), + ("height-5", 5rem), + ("height-10", 10rem), + ("height-15", 15rem), + ("height-20", 20rem), + ("height-25", 25rem) ); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/text-colors.scss b/src/Modules/Utilities/_config/text-colors.scss index a9ee3931..5d7fa9e9 100644 --- a/src/Modules/Utilities/_config/text-colors.scss +++ b/src/Modules/Utilities/_config/text-colors.scss @@ -15,5 +15,6 @@ $text-colors: ( ("color-primary", theme('color', 'primary')), ("color-success", theme('color', 'success')), ("color-warning", theme('color', 'warning')), - ("color-error", theme('color', 'error')) + ("color-error", theme('color', 'error')), + ("color-dark", theme('color', 'dark')) ); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/width.scss b/src/Modules/Utilities/_config/width.scss index 5b641d82..d046b403 100644 --- a/src/Modules/Utilities/_config/width.scss +++ b/src/Modules/Utilities/_config/width.scss @@ -8,10 +8,15 @@ $width-helpers: ( ("width-min-content", min-content), ("width-max-content", max-content), ("width-fit-content", fit-content), + ("width-2", 2rem), + ("width-3", 3rem), + ("width-4", 4rem), + ("width-5", 5rem), + ("width-10", 10rem), ("width-25", 25%), ("width-33", 33%), ("width-50", 50%), ("width-66", 66%), ("width-75", 75%), - ("width-100", 100%), + ("width-100", 100%) ); \ No newline at end of file diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index 14811d9a..eb42ccfa 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -210,7 +210,6 @@ gap: 0; } .fade {opacity: 0;} - .hide {display: none !important;} /* seperator for flex */ .spacer { flex-grow: 1!important; @@ -241,13 +240,6 @@ border: none; box-shadow: none !important } - [disabled], - :disabled, - .disabled { - opacity: .49; - cursor: default; - pointer-events: none; - } .bordered {@include border();} .borderless {border: none !important;} .rounded {border-radius: theme('border', 'radius');} @@ -266,4 +258,9 @@ bottom: auto; left: auto; } + .clearfix:after { + clear: both; + content: ' '; + display: table; + } } \ No newline at end of file diff --git a/src/options.scss b/src/options.scss index 96c15f08..66f69b6f 100755 --- a/src/options.scss +++ b/src/options.scss @@ -655,10 +655,10 @@ $options: ( 'outline-width' : 2px ), 'items': ( - 'margin': 6px 0 .75em + 'margin': .345em 0 .55em ), 'item': ( - 'margin': 6px + 'margin': .345em 0 .55em ), 'label': ( 'font-size': .8579rem, @@ -687,15 +687,15 @@ $options: ( 'small', // class name 1em, // font-size 1.9rem, // input height - .645rem 1.4rem, // button padding[*] - .979em // button font size[*] + .645rem 1.4rem, // button padding + .979em // button font size ), ( 'large', // class name 1.2em, // font-size 2.9rem, // input height - 1.15rem 2.1rem, // button padding[*] - 1.25em // button font size[*] + 1.15rem 2.1rem, // button padding + 1.25em // button font size ) ) ) From af4d49f1ada42b497ada65426fd459dc8b495e2d Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 3 Oct 2024 18:59:43 +0300 Subject: [PATCH 013/154] b113 --- src/Modules/Utilities/_config/height.scss | 22 ++++++++++++-------- src/Modules/Utilities/_config/width.scss | 25 +++++++++++++---------- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/Modules/Utilities/_config/height.scss b/src/Modules/Utilities/_config/height.scss index 4a0ba98e..aa531c66 100644 --- a/src/Modules/Utilities/_config/height.scss +++ b/src/Modules/Utilities/_config/height.scss @@ -8,12 +8,18 @@ $height-helpers: ( ("height-min-content", min-content), ("height-max-content", max-content), ("height-fit-content", fit-content), - ("height-2", 2rem), - ("height-3", 3rem), - ("height-4", 4rem), - ("height-5", 5rem), - ("height-10", 10rem), - ("height-15", 15rem), - ("height-20", 20rem), - ("height-25", 25rem) + ("height-2", 2rem), // 32px + ("height-3", 3rem), // 48px + ("height-4", 4rem), // 64px + ("height-5", 5rem), // 80px + ("height-10", 10rem), // 160px + ("height-15", 15rem), // 240px + ("height-20", 20rem), // 320px + ("height-25", 25rem), // 400px + ("height-30", 30rem), // 480px + ("height-35", 35rem), // 560px + ("height-40", 40rem), // 640px + ("height-45", 45rem), // 720px + ("height-50", 50rem), // 800px + ("height-75", 75rem) // 1200px ); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/width.scss b/src/Modules/Utilities/_config/width.scss index d046b403..1d869a06 100644 --- a/src/Modules/Utilities/_config/width.scss +++ b/src/Modules/Utilities/_config/width.scss @@ -8,15 +8,18 @@ $width-helpers: ( ("width-min-content", min-content), ("width-max-content", max-content), ("width-fit-content", fit-content), - ("width-2", 2rem), - ("width-3", 3rem), - ("width-4", 4rem), - ("width-5", 5rem), - ("width-10", 10rem), - ("width-25", 25%), - ("width-33", 33%), - ("width-50", 50%), - ("width-66", 66%), - ("width-75", 75%), - ("width-100", 100%) + ("width-2", 2rem), // 32px + ("width-3", 3rem), // 48px + ("width-4", 4rem), // 64px + ("width-5", 5rem), // 80px + ("width-10", 10rem), // 160px + ("width-15", 15rem), // 240px + ("width-20", 20rem), // 320px + ("width-25", 25rem), // 400px + ("width-30", 30rem), // 480px + ("width-35", 35rem), // 560px + ("width-40", 40rem), // 640px + ("width-45", 45rem), // 720px + ("width-50", 50rem), // 800px + ("width-75", 75rem) // 1200px ); \ No newline at end of file From 65f858ec379040379c45ab0ee83a2b1457e2b6d1 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Fri, 4 Oct 2024 23:49:34 +0300 Subject: [PATCH 014/154] 114 --- src/Modules/Components/Alert/Alert.scss | 8 +- src/Modules/Components/Badge/Badge.scss | 6 +- .../Components/Billboard/Billboard.scss | 2 +- .../Components/Breadcrumb/Breadcrumb.scss | 2 +- src/Modules/Components/Caption/Caption.scss | 5 +- src/Modules/Components/Card/Card.scss | 14 +- src/Modules/Components/Label/Label.scss | 13 +- src/Modules/Components/List/List.scss | 6 +- src/Modules/Components/Menu/Menu.scss | 14 +- src/Modules/Components/Navbar/Navbar.scss | 34 +- src/Modules/Components/Panel/Panel.scss | 6 +- src/Modules/Components/Process/Process.scss | 2 +- src/Modules/Components/Stats/Stats.scss | 8 +- src/Modules/Components/Tabnav/Tabnav.scss | 14 +- src/Modules/Components/Timeline/Timeline.scss | 4 +- src/Modules/Components/Tooltip/Tooltip.scss | 14 +- src/Modules/Elements/Button/Button.scss | 25 +- src/Modules/Elements/Button/mixins.scss | 10 +- src/Modules/Elements/Form/Form.scss | 23 +- src/Modules/Elements/Grid/Grid.scss | 1 - src/options.scss | 378 ++++++++++-------- src/themes.scss | 6 +- 22 files changed, 323 insertions(+), 272 deletions(-) diff --git a/src/Modules/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss index 52d6f714..b57825cc 100644 --- a/src/Modules/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -12,12 +12,12 @@ .#{class('alert', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { display: block; - @include border(); - border-radius: theme('border', 'radius'); padding: components('alert', 'padding'); margin: components('alert', 'margin'); - width: components('alert', 'margin'); - font-weight: bold; + width: components('alert', 'width'); + font-weight: components('alert', 'font-weight'); + @include border(); + border-radius: components('alert', 'border-radius'); a { color: theme('color', 'text'); text-decoration: underline; diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index 9d87b60e..8cdc8916 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -13,13 +13,13 @@ .#{class('badge', 'name')} { @include set-style(color.$grey, theme('color', 'text')) { position: relative; - white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; - font-weight: bold; + font-weight: components('badge', 'font-weight'); + white-space: components('badge', 'white-space'); + border: components('badge', 'border'); border-radius: components('badge', 'border-radius'); - border: theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%); }; @include set-size(1em, 1px 6px); /// diff --git a/src/Modules/Components/Billboard/Billboard.scss b/src/Modules/Components/Billboard/Billboard.scss index 9d88fd5f..8a79f4b8 100644 --- a/src/Modules/Components/Billboard/Billboard.scss +++ b/src/Modules/Components/Billboard/Billboard.scss @@ -17,7 +17,7 @@ justify-content: space-between; align-items: center; padding: components('billboard', 'padding'); - border-color: darken(theme('color', 'background'), 4.5%); + border-color: components('billboard', 'border-color'); @include border(); }; /// diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index b8e52c66..0aaaba0e 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -32,7 +32,7 @@ margin-left: 0; } &.#{class('breadcrumb', 'active')} { - color: theme('color', 'primary'); + color: components('breadcrumb', 'active-color'); font-weight: components('breadcrumb', 'active-weight'); &::after { content: none; diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index 295cce85..ea282613 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -6,7 +6,6 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; -@use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @if enabled('elements', 'caption') { @@ -15,8 +14,8 @@ align-items: center; margin: elements('caption', 'margin'); font-size: elements('caption', 'font-size'); - font-weight: bold; - line-height: theme('typography', 'line-height') - .2; + font-weight: elements('caption', 'font-weight'); + line-height: elements('caption', 'line-height'); text-align: left; >img, >.#{class('icon', 'class-name')}, diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index e089673a..284a0d18 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -32,14 +32,12 @@ } } .#{class('card', 'name')} { - /// background color - background-color: if(theme('components', 'card', 'background'), theme('components', 'card', 'background'), theme('color', 'background')); + background-color: components('card', 'background-color'); // has card border? @if features('components', 'card', 'border') { - @include border(); - /// border radius - border-radius: if(theme('components', 'card', 'radius'), theme('components', 'card', 'radius'), theme('border', 'radius')); + border: components('card', 'border'); + border-radius: components('card', 'border-radius'); } // has card shadow? @@ -54,8 +52,8 @@ overflow: hidden; >.#{class('card', 'body')} .#{class('card', 'title')}, >.#{class('card', 'title')} { - color: theme('color', 'text'); - line-height: initial; + color: components('card', 'title', 'color'); + line-height: components('card', 'title', 'line-height'); &>.#{class('card', 'subtitle')} { @if theme('type') == 'light' { color: darken(color.$grey, 20%); @@ -72,7 +70,7 @@ } >.#{class('card', 'description')} { flex: 1 1 auto; - color: theme('color', 'text'); + color: components('card', 'description', 'text'); } /// /// MEDIA diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index df01d991..8b017bdd 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -13,17 +13,16 @@ .#{class('label', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { display: inline-block; - font-weight: bold; - line-height: 1.2; + font-weight: elements('label', 'font-weight'); + line-height: elements('label', 'line-height'); margin: elements('label', 'margin'); - border-radius: theme('border', 'radius'); - text-decoration: none; + border-radius: elements('label', 'border-radius'); + text-decoration: elements('label', 'text-decoration'); @include border(); @include shadow(0, .155em, 0, rgba(0, 0, 0, 0.095)); - border-color: theme('border', 'color'); + border-color: elements('label', 'border-color'); @include set-size(elements('label', 'font-size'), elements('label', 'padding')); - >i, - >.material-icons { + >i { vertical-align: text-top; } }; diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index 94623508..129ffa92 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -42,13 +42,13 @@ } >.#{class('list', 'title')} { font-size: components('list', 'title', 'font-size'); - font-weight: bold; + font-weight: components('list', 'title', 'font-weight'); line-height: components('list', 'body', 'line-height'); } >.#{class('list', 'subtitle')} { font-size: components('list', 'subtitle', 'font-size'); - font-weight: theme('typography', 'font-weight'); - color: theme('color', 'primary'); + font-weight: components('list', 'subtitle', 'font-weight'); + color: components('list', 'subtitle', 'color'); margin-bottom: components('list', 'subtitle', 'margin-bottom'); } } diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index 840e9a6c..f5aefae4 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -12,22 +12,22 @@ @if enabled('components', 'menu') { .#{class('menu', 'name')} { - background-color: if(theme('components', 'menu', 'background'), theme('components', 'menu', 'background'), lighten(theme('color', 'background'), 2.5%)); + background-color: components('menu', 'background'); border-radius: components('menu', 'border-radius'); - list-style: none; margin: components('menu', 'margin'); width: components('menu', 'width'); - min-width: max-content; padding: components('menu', 'padding'); + min-width: max-content; + list-style: none; @include shadow(); z-index: 300; // menu title .#{class('menu', 'title')} { font-size: components('menu', 'title', 'font-size'); min-height: components('menu', 'title', 'min-height'); - color: theme('color', 'text'); + color: components('menu', 'title', 'color'); padding: components('menu', 'title', 'padding'); - font-weight: bold; + font-weight: components('menu', 'title', 'font-weight'); letter-spacing: components('menu', 'title', 'letter-spacing'); } // menu item @@ -37,11 +37,11 @@ text-decoration: none; text-align: components('menu', 'item', 'text-align'); & > a { - color: theme('color', 'text'); display: block; + text-decoration: none; + color: theme('color', 'text'); width: components('menu', 'item', 'width'); padding: components('menu', 'item', 'padding'); - text-decoration: none; font-size: components('menu', 'item', 'font-size'); font-weight: theme('typography', 'font-weight'); transition: components('menu', 'item', 'transition'); diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index c15f6d8e..99b03710 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -18,9 +18,9 @@ align-items: stretch; justify-content: space-between; min-height: components('navbar', 'min-height'); - background: theme('color', 'primary'); - color: white; - width: 100%; + background: components('navbar', 'background'); + color: components('navbar', 'color'); + width: components('navbar', 'width'); // grid container .#{class('grid', 'container')} { display: flex; @@ -80,14 +80,14 @@ justify-content: flex-end; } input[type='text'] { - background-color: darken(theme('color', 'primary'), 7%); + background-color: darken(components('navbar', 'background'), 7%); color: white; - border-color: lighten(theme('color', 'primary'), 8%); + border-color: lighten(components('navbar', 'background'), 8%); &::placeholder { color: white; } &:focus { - outline: theme('input', 'outline-width') solid lighten(theme('color', 'primary'), 26%); + outline: theme('input', 'outline-width') solid lighten(components('navbar', 'background'), 26%); } } /// @@ -99,7 +99,7 @@ .#{class('button', 'group')} { .#{class('button', 'name')}, .#{class('button', 'dropdown')} .#{class('button', 'name')} { - border: solid darken(theme('color', 'primary'), 7.15%); + border: solid darken(components('navbar', 'background'), 7.15%); } } @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { @@ -139,17 +139,17 @@ color: white; } &:hover { - background: darken(theme('color', 'primary'), 10.15%); + background: darken(components('navbar', 'background'), 10.15%); border-radius: 0; } &:active, &.#{class('button', 'active')} { color: white; - background: darken(theme('color', 'primary'), 7%); + background: darken(components('navbar', 'background'), 7%); transition: components('button', 'transition'); &:hover { transition: components('button', 'transition'); - background: darken(theme('color', 'primary'), 10%); + background: darken(components('navbar', 'background'), 10%); } } } @@ -163,7 +163,7 @@ .#{class('button', 'dropdown')} .#{class('button', 'name')} { font-size: components('navbar', 'font-size'); padding: components('navbar', 'button-padding'); - font-weight: theme('components','navbar', 'font-weight'); + font-weight: components('navbar', 'font-weight'); } /// /// GRADIENT @@ -172,19 +172,19 @@ &.#{class('navbar', 'gradient')} { background: linear-gradient( to top, - theme('color', 'primary') 0%, - lighten(theme('color', 'primary'), 11.5%) 2%, - darken(theme('color', 'primary'), 3%) 97%, - lighten(theme('color', 'primary'), 11.5%) 100% + components('navbar', 'background') 0%, + lighten(components('navbar', 'background'), 11.5%) 2%, + darken(components('navbar', 'background'), 3%) 97%, + lighten(components('navbar', 'background'), 11.5%) 100% ); } /// Gradient Left-To-Right &.#{class('navbar', 'gradient')}#{'-ltr'} { - background: linear-gradient(135deg, lighten(theme('color', 'primary'), 7.5%), theme('color', 'primary')); + background: linear-gradient(135deg, lighten(components('navbar', 'background'), 7.5%), components('navbar', 'background')); } /// Gradient Right-To-Left &.#{class('navbar', 'gradient')}#{'-rtl'} { - background: linear-gradient(-135deg, lighten(theme('color', 'primary'), 7.5%), theme('color', 'primary')); + background: linear-gradient(-135deg, lighten(components('navbar', 'background'), 7.5%), components('navbar', 'background')); } } /// diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index dc2e82ef..8de1613d 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -16,8 +16,8 @@ // has panel border? @if features('components', 'panel', 'border') { - @include border(); - border-radius: if(theme('components', 'panel', 'radius'), theme('components', 'panel', 'radius'), theme('border', 'radius')); + border: components('panel', 'border'); + border-radius: components('panel', 'border-radius'); } // has panel shadow? @@ -25,7 +25,7 @@ @include shadow(); } - background-color: if(theme('components', 'panel', 'background'), theme('components', 'panel', 'background'), theme('color', 'background')); + background-color: components('panel', 'background-color'); margin: components('panel', 'margin'); &>.#{class('panel', 'header')}, &>.#{class('panel', 'bottom')} { diff --git a/src/Modules/Components/Process/Process.scss b/src/Modules/Components/Process/Process.scss index ffb24249..ef37ab33 100644 --- a/src/Modules/Components/Process/Process.scss +++ b/src/Modules/Components/Process/Process.scss @@ -60,7 +60,7 @@ a { color: theme('color', 'primary'); &::after { - content: "\2756"; + content: "\2756"; // HTML Symbols position: absolute; top: calc(-15px - #{components('process', 'icon-size')}); left: calc(50% - ((#{components('process', 'stickbar', 'width')} * 10) / 2)); diff --git a/src/Modules/Components/Stats/Stats.scss b/src/Modules/Components/Stats/Stats.scss index 6ce321b5..3fbecf7d 100644 --- a/src/Modules/Components/Stats/Stats.scss +++ b/src/Modules/Components/Stats/Stats.scss @@ -18,8 +18,8 @@ background-color: transparent; margin: components('stats', 'margin'); border-width: components('stats', 'border-width'); - border-color: theme('border', 'color'); - border-style: theme('border', 'style'); + border-color: components('stats', 'border-color'); + border-style: components('stats', 'border-style'); border-radius: components('stats', 'border-radius'); padding: components('stats', 'padding'); line-height: components('stats', 'line-height'); @@ -45,11 +45,11 @@ } } >.#{class('stats', 'value')} { + flex-direction: row; + align-items: center; font-weight: components('stats', 'value', 'font-weight'); font-size: components('stats', 'value', 'font-size'); - flex-direction: row; line-height: components('stats', 'value', 'line-height'); - align-items: center; >img, >.#{class('icon', 'class-name')}, >i { diff --git a/src/Modules/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss index 072d24ff..da98a7af 100755 --- a/src/Modules/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -25,15 +25,15 @@ } /// Default button styles in Tabnav @include mixins.tab-button-styles() { - background: transparent; border: none; - border-radius: 0 !important; - line-height: unset; - font-size: 1.025em; - font-weight: theme('components', 'tabnav', 'font-weight'); - color: theme('color', 'text'); - padding: .935rem 1.4rem; box-shadow: none; + background: transparent; + border-radius: 0 !important; + line-height: components('tabnav', 'line-height'); + font-size: components('tabnav', 'font-size'); + font-weight: components('tabnav', 'font-weight'); + color: components('tabnav', 'color'); + padding: components('tabnav', 'padding'); border-bottom: components('tabnav', 'border-width') solid transparent; margin-bottom: -#{components('tabnav', 'border-width')}; &:hover { diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index f3b9bb77..ceae1c71 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -26,7 +26,7 @@ bottom: 0; left: 0; width: components('timeline', 'border-width'); - background-color: theme('border', 'color'); + background-color: components('timeline', 'item', 'background-color'); } &:target .#{class('timeline', 'type')} { border-color: theme('color', 'primary'); @@ -84,7 +84,7 @@ /// /// MEDIA /// - @if features('components', 'timeline', 'timeline') { + @if features('components', 'timeline', 'media') { .#{class('timeline', 'media')} { margin-top: 16px; display: flex; diff --git a/src/Modules/Components/Tooltip/Tooltip.scss b/src/Modules/Components/Tooltip/Tooltip.scss index 9e515982..48b1d7dc 100644 --- a/src/Modules/Components/Tooltip/Tooltip.scss +++ b/src/Modules/Components/Tooltip/Tooltip.scss @@ -6,8 +6,6 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; -@use "../../../Core/Theme/Getters" as *; -@use "../../../Core/Theme/Setters" as *; @if enabled('components', 'tooltip') { .#{class('tooltip', 'name')} { @@ -25,8 +23,8 @@ font-size: components('tooltip', 'font-size'); font-weight: components('tooltip', 'font-weight'); visibility: hidden; - background-color: theme('color', 'dark'); - border-radius: theme('border', 'radius'); + background-color: components('tooltip', 'background-color'); + border-radius: components('tooltip', 'border-radius'); min-width: components('tooltip', 'min-width'); max-width: components('tooltip', 'max-width'); padding: components('tooltip', 'padding'); @@ -43,7 +41,7 @@ margin-left: -5px; border-width: 5px; border-style: solid; - border-color: transparent transparent theme('color', 'dark') transparent; + border-color: transparent transparent components('tooltip', 'background-color') transparent; } } &.#{class('tooltip', 'left')}, @@ -62,7 +60,7 @@ &::after { right: 100%; left: auto; - border-color: transparent theme('color', 'dark') transparent transparent; + border-color: transparent components('tooltip', 'background-color') transparent transparent; } } } @@ -73,7 +71,7 @@ left: 100%; right: auto; margin: auto -5px auto auto ; - border-color: transparent transparent transparent theme('color', 'dark'); + border-color: transparent transparent transparent components('tooltip', 'background-color'); } } } @@ -82,7 +80,7 @@ bottom: 120%; &::after { top: 100%; - border-color: theme('color', 'dark') transparent transparent transparent; + border-color: components('tooltip', 'background-color') transparent transparent transparent; } } } diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index 67cb5414..55cc6227 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -7,28 +7,25 @@ @use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; -@use "../../../Core/Theme/Getters" as *; -@use "../../../Core/Theme/Setters" as *; -@use "../../../Modules/Elements/Typography/variables" as *; @use "mixins" as *; @if enabled('elements', 'button') { a.#{class('button', 'name')}, .#{class('button', 'name')} { display: inline-flex; - font-family: $font-family; // typography > variables + font-family: elements('button', 'font-family'); font-size: elements('button', 'font-size'); font-weight: elements('button', 'font-weight'); text-decoration: none; white-space: nowrap; outline: none; width: elements('button', 'width'); - background: theme('color', 'background'); + background: elements('button', 'background'); background-image: none; - @include border(); appearance: none; - color: theme('color', 'text'); - border-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); + color: elements('button', 'color'); + border: elements('button', 'border'); + border-radius: elements('button', 'border-radius'); box-sizing: border-box; cursor: pointer; line-height: elements('button', 'line-height'); @@ -50,7 +47,7 @@ } &:active, &:focus { - background: theme('color', 'background'); + background: elements('button', 'background'); } /// /// GRADIENT @@ -59,7 +56,7 @@ &.#{class('button', 'gradient')} { z-index: 1; position: relative; - @include set-gradient(theme('color', 'background')); + @include set-gradient(elements('button', 'background')); &:before { position: absolute; content: ""; @@ -70,19 +67,19 @@ opacity: 0; transition: opacity 0.25s; z-index: -1; - @include set-gradient(theme('color', 'background'), to bottom, 23%); + @include set-gradient(elements('button', 'background'), to bottom, 23%); } &:hover::before { opacity: 1; } &:active::before, &:focus::before { - @include set-gradient(theme('color', 'background'), to bottom, 27%); + @include set-gradient(elements('button', 'background'), to bottom, 27%); } } } &.#{class('button', 'active')} { - color: theme('color', 'text'); + color: elements('button', 'color'); background: color.$grey; background-image: none; text-decoration: none; @@ -104,7 +101,7 @@ } i, [class^="#{class('icon', 'class-name')}"] { font-size: elements('button', 'icon', 'font-size'); - color: theme('color', 'text'); + color: elements('button', 'color'); text-shadow: none; } /// diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 52eedd41..0589ae73 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -113,8 +113,8 @@ @if features('elements', 'button', 'group') { &>.#{class('button', 'group')} { &>.#{class('button', 'dropdown-toggle')}:nth-last-child(2) { - border-bottom-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - border-top-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); + border-bottom-right-radius: elements('button', 'border-radius'); + border-top-right-radius: elements('button', 'border-radius'); } } } @@ -135,7 +135,7 @@ display: inline-flex; flex-wrap: wrap; flex-shrink: 0; - border-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); + border-radius: elements('button', 'border-radius'); @include shadow(); width: fit-content; .#{class('button', 'name')} { @@ -193,8 +193,8 @@ .#{class('button', 'dropdown')}:last-child, .#{class('button', 'dropdown')}:last-child > .#{class('button', 'name')}:first-child, .#{class('button', 'dropdown')}:last-child > .#{class('button', 'name')}:last-child { - border-bottom-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - border-top-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); + border-bottom-right-radius: elements('button', 'border-radius'); + border-top-right-radius: elements('button', 'border-radius'); } .#{class('button', 'dropdown')}:not(:first-child):not(:last-child) > .#{class('button', 'name')} { border-radius: 0; diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index d2190631..33629e73 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -7,15 +7,14 @@ @use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Variables" as *; -@use "../../../Core/Theme/Getters" as *; @use "mixins"; @if enabled('elements', 'form') { @include mixins.form-inputs() { -webkit-appearance: none; - background-color: elements('form', 'input', 'background'); - border-width: theme('border', 'width'); - border-style: theme('border', 'style'); + background-color: elements('form', 'input', 'background-color'); + border-width: elements('form', 'input', 'border-width'); + border-style: elements('form', 'input', 'border-style'); border-color: elements('form', 'input', 'border-color'); height: elements('form', 'input', 'height'); border-radius: elements('form', 'input', 'border-radius'); @@ -34,7 +33,7 @@ outline-color: elements('form', 'input', 'outline-color'); outline-width: elements('form', 'input', 'outline-width'); outline-offset: -#{elements('form', 'input', 'outline-width')}; - background-color: elements('form', 'input', 'background'); + background-color: elements('form', 'input', 'background-color'); z-index: 0; } /// @@ -101,7 +100,7 @@ @at-root .#{class('form', 'name')} label, &>label { margin: elements('form', 'label', 'margin'); - color: theme('color', 'text'); + color: elements('form', 'label', 'color'); font-size: elements('form', 'label', 'font-size'); font-weight: bold; text-transform: none; @@ -228,9 +227,9 @@ display: grid; place-content: center; margin: 0; - width: 1.6em; - height: 1.6em; - border: 0.15em solid theme('border', 'color'); + width: elements('form', 'radio-checkbox', 'width'); + height: elements('form', 'radio-checkbox', 'height'); + border: elements('form', 'radio-checkbox', 'border'); -webkit-appearance: none; appearance: none; &::before { @@ -238,8 +237,8 @@ width: 0.7em; height: 0.7em; transform: scale(0); - background-color: theme('color', 'primary'); - clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + background-color: elements('form', 'radio-checkbox', 'color'); + clip-path: elements('form', 'radio-checkbox', 'checkbox-clip-path'); } &:checked::before { transform: scale(1.5); @@ -251,7 +250,7 @@ input[type="radio"] { border-radius: 500px; &::before { - clip-path: ellipse(45% 45% at 50% 50%); + clip-path: elements('form', 'radio-checkbox', 'radio-clip-path'); } } } diff --git a/src/Modules/Elements/Grid/Grid.scss b/src/Modules/Elements/Grid/Grid.scss index 16fb5f18..6ad0972a 100644 --- a/src/Modules/Elements/Grid/Grid.scss +++ b/src/Modules/Elements/Grid/Grid.scss @@ -3,7 +3,6 @@ /// Elements : Grid /// -@use "../../../Core/Theme/Getters" as *; @use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; diff --git a/src/options.scss b/src/options.scss index 66f69b6f..9e616aba 100755 --- a/src/options.scss +++ b/src/options.scss @@ -8,6 +8,7 @@ @use "Core/Theme/Getters" as *; @use "Core/Global/Colors" as color; +@use "Modules/Elements/Typography/variables" as *; $options: ( /// @@ -20,9 +21,11 @@ $options: ( 'sizes' : true ), 'variables': ( - 'padding': .6rem, - 'margin' : 0 0 8px, - 'width' : 100%, + 'padding' : .6rem, + 'margin' : 0 0 8px, + 'width' : 100%, + 'font-weight' : bold, + 'border-radius' : theme('border', 'radius'), 'icon': ( 'vertical-align': text-top ), @@ -55,7 +58,10 @@ $options: ( 'sizes' : true ), 'variables': ( - 'border-radius': 500px, + 'border-radius' : 500px, + 'white-space' : nowrap, + 'font-weight' : bold, + 'border' : theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%), 'styles': ( // style name (class), theme variable "primary" : theme('color', 'primary'), @@ -91,8 +97,9 @@ $options: ( 'cover' : true ), 'variables': ( - 'padding': 4.5rem 2.5rem, - 'body' : ( + 'padding' : 4.5rem 2.5rem, + 'border-color' : darken(theme('color', 'background'), 4.5%), + 'body': ( 'padding': 4.5rem 2.5rem ), 'styles': ( @@ -135,10 +142,11 @@ $options: ( 'sizes': true ), 'variables': ( - 'font-size' : 1.1rem, - 'font-weight' : normal, - 'active-weight': bold, - 'seperator' : "\276D", + 'font-size' : 1.1rem, + 'font-weight' : normal, + 'active-weight' : bold, + 'active-color' : theme('color', 'primary'), + 'seperator' : "\276D", // HTML Symbols 'sizes': ( ( 'small', // size name (class) @@ -163,9 +171,11 @@ $options: ( 'sizes': true, ), 'variables': ( - 'margin' : 1.3em .2rem, - 'font-size': 1.95rem, - 'media' : ( + 'margin' : 1.3em .2rem, + 'font-size' : 1.95rem, + 'font-weight' : bold, + 'line-height' : theme('typography', 'line-height') - .2, + 'media': ( 'margin': .559em, ), 'sizes': ( @@ -187,22 +197,32 @@ $options: ( 'card': ( 'enabled': true, 'features': ( - 'group' : true, - 'horizontal' : true, - 'media' : true, - 'media-group': true, - 'border' : true, - 'shadow' : true + 'group' : true, + 'horizontal' : true, + 'media' : true, + 'media-group' : true, + 'border' : true, + 'shadow' : true ), 'variables': ( - 'width' : 240px, // for only a single card - 'height' : 100%, - 'padding': 16px, + 'width' : 240px, // for only a single card + 'height' : 100%, + 'padding' : 1rem, + 'border' : theme('border', 'width') theme('border', 'style') theme('border', 'color'), + 'border-radius' : theme('border', 'radius'), + 'background-color' : theme('color', 'background'), + 'title' : ( + 'color' : theme('color', 'text'), + 'line-height' : initial + ), + 'description': ( + 'color': theme('color', 'text') + ), 'group' : ( - 'margin': 10px // margin for each card + 'margin': .74rem // margin for each card ), 'horizontal': ( - 'margin-bottom': 15px + 'margin-bottom': 1rem ) ) ), @@ -213,9 +233,14 @@ $options: ( 'sizes' : true ), 'variables': ( - 'font-size': .9195em, - 'padding' : 0.28rem 0.9rem, - 'margin' : .1rem .05rem, + 'font-size' : .9195em, + 'font-weight' : bold, + 'line-height' : 1.2, + 'padding' : 0.28rem 0.9rem, + 'margin' : .1rem .05rem, + 'border-color' : theme('border', 'color'), + 'border-radius' : theme('border', 'radius'), + 'text-decoration' : none, 'styles': ( // style name (class), theme variable "primary" : theme('color', 'primary'), @@ -247,29 +272,32 @@ $options: ( ), 'variables': ( 'margin': 1rem 0, - 'item' : ( - 'padding' : .55em, - 'margin' : 0, + 'item': ( + 'padding' : .55em, + 'margin' : 0, 'transition': .15s ), 'media': ( 'margin-right': 1rem ), 'body': ( - 'line-height': 1.4, - 'text-align' : left + 'line-height' : 1.4, + 'text-align' : left ), 'title': ( - 'font-size' : 1.28rem, - 'line-height': 1 + 'font-size' : 1.28rem, + 'font-weight' : bold, + 'line-height' : 1 ), 'subtitle': ( - 'font-size' : .889em, - 'margin-bottom': 7px + 'color' : theme('color', 'primary'), + 'font-size' : .889em, + 'font-weight' : theme('typography', 'font-weight'), + 'margin-bottom' : 7px ), 'actions': ( - 'width' : auto, - 'margin-left': 1rem + 'width' : auto, + 'margin-left' : 1rem ) ) ), @@ -277,60 +305,67 @@ $options: ( 'enabled': true, 'features': (), 'variables': ( - 'width' : 100%, - 'padding' : .9rem, - 'margin' : 0, - 'border-radius': 0, - 'title' : ( - 'font-size' : 1.25em, - 'min-height' : 2rem, - 'padding' : .6rem 0, + 'width' : 100%, + 'padding' : .9rem, + 'margin' : 0, + 'border-radius' : 0, + 'background' : lighten(theme('color', 'background'), 2.5%), + 'title': ( + 'font-size' : 1.25em, + 'font-weight' : bold, + 'color' : theme('color', 'text'), + 'min-height' : 2rem, + 'padding' : .6rem 0, 'letter-spacing': -.015rem ), 'item': ( - 'width' : 100%, - 'text-align' : left, - 'padding' : .28rem .9rem, - 'font-size' : 1em, - 'small-size' : .945em, - 'transition' : background .15s, - 'sub-padding': .4rem // padding of sub items + 'width' : 100%, + 'text-align' : left, + 'padding' : .28rem .9rem, + 'font-size' : 1em, + 'small-size' : .945em, + 'transition' : background .15s, + 'sub-padding' : .4rem // padding of sub items ), 'icon': ( - 'font-size' : 1.2rem, - 'margin-right' : 10px, + 'font-size' : 1.2rem, + 'margin-right' : 10px, 'vertical-align': text-bottom ), 'badge': ( - 'right' : 0, - 'top' : 4px, - 'padding' : 0 4px, - 'font-size': .93em + 'right' : 0, + 'top' : 4px, + 'padding' : 0 4px, + 'font-size' : .93em ) ) ), 'navbar': ( 'enabled': true, 'features': ( - 'themes' : true, - 'sizes' : true, - 'divided' : true, - 'gradient' : true + 'themes' : true, + 'sizes' : true, + 'divided' : true, + 'gradient' : true ), 'variables': ( - 'min-height' : 80px, - 'spacer-top' : 105px, // min-height + 25px - 'font-size' : 1.128em, + 'min-height' : 80px, + 'spacer-top' : 105px, // min-height + 25px + 'font-size' : 1.128em, + 'color' : white, + 'background' : theme('color', 'primary'), + 'width' : 100%, 'button-padding': .935rem 1.4rem, + 'font-weight' : bold, 'brand': ( - 'padding' : 0, - 'margin-right': 1rem, - 'font-weight' : bold, - 'img-width' : 7rem + 'padding' : 0, + 'margin-right' : 1rem, + 'font-weight' : bold, + 'img-width' : 7rem ), 'burger': ( - 'padding' : 0 1.5rem, - 'icon-size': 2.459rem + 'padding' : 0 1.5rem, + 'icon-size' : 2.459rem ), 'styles': ( ( @@ -377,26 +412,29 @@ $options: ( 'panel': ( 'enabled': true, 'features': ( - 'media' : true, - 'media-group': true, - 'border' : true, - 'shadow' : true, - 'sizes' : true + 'media' : true, + 'media-group' : true, + 'border' : true, + 'shadow' : true, + 'sizes' : true ), 'variables': ( - 'padding' : 16px, - 'margin' : 16px 0, - 'title-padding': 12px 16px, + 'padding' : 1rem, + 'margin' : 1rem 0, + 'title-padding' : .85rem 1rem, + 'border' : theme('border', 'width') theme('border', 'style') theme('border', 'color'), + 'border-radius' : theme('border', 'radius'), + 'background-color' : theme('color', 'background'), 'sizes': ( ( "mini", // size name (class) .985rem, // font-size (title) - 4px 8px // padding (title/content/bottom) + .25rem .9rem // padding (title/content/bottom) ), ( "small", // size name (class) 1.038rem, // font-size (title) - 8px 12px // padding (title/content/bottom) + .5rem .9rem // padding (title/content/bottom) ) ) ) @@ -404,22 +442,22 @@ $options: ( 'process': ( 'enabled': true, 'features': ( - 'styles' : true, - 'vertical': true + 'styles' : true, + 'vertical' : true ), 'variables': ( - 'margin' : 1em 0 5em, + 'margin' : 1em 0 5em, 'min-height': 4rem, // for each item 'icon-size' : 1.8rem, 'stepbar': ( 'height': 6px, ), 'stickbar': ( - 'width' : 3px, + 'width' : 3px, 'height': .8rem ), 'vertical': ( - 'margin' : 1em 0, + 'margin' : 1em 0, 'stickbar-width': 9px ), 'styles': ( @@ -437,27 +475,29 @@ $options: ( 'styles': true ), 'variables': ( - 'margin' : 0 1.1em .8em, - 'padding' : 8px 2.76em, - 'border-radius': 4px, - 'line-height' : 2.1em, - 'border-width' : 1px, - 'transition' : .15s, - 'title' : ( + 'margin' : 0 1.1em .8em, + 'padding' : 8px 2.76em, + 'border-radius' : 4px, + 'line-height' : 2.1em, + 'border-width' : 1px, + 'border-style' : theme('border', 'style'), + 'border-color' : theme('border', 'color'), + 'transition' : .15s, + 'title': ( 'font-size': 1.1em ), 'value': ( - 'font-size' : 1.65rem, - 'font-weight': bold, - 'line-height': 1.2 + 'font-size' : 1.65rem, + 'font-weight' : bold, + 'line-height' : 1.2 ), 'subtitle': ( - 'font-size' : .816rem, + 'font-size' : .816rem, 'margin-top': -4px ), 'media': ( - 'font-size' : 1em, // icon - 'margin-right': .5em + 'font-size' : 1em, // icon + 'margin-right' : .5em ), 'styles': ( // style name (class), theme variable @@ -472,11 +512,16 @@ $options: ( 'tabnav': ( 'enabled': true, 'features': ( - 'styles' : true, - 'bottom-position': true + 'styles' : true, + 'bottom-position' : true ), 'variables': ( - 'border-width': 2px, + 'color' : theme('color', 'text'), + 'border-width' : 2px, + 'font-size' : 1.025em, + 'font-weight' : bold, + 'line-height' : unset, + 'padding' : .935rem 1.4rem, 'styles': ( ( 'success', // style name (class) @@ -500,15 +545,16 @@ $options: ( 'timeline': ( 'enabled': true, 'features': ( - 'styles' : true, - 'media' : true, - 'media-group': true + 'styles' : true, + 'media' : true, + 'media-group' : true ), 'variables': ( - 'type-width' : 32px, - 'border-width': 1px, + 'type-width' : 32px, + 'border-width' : 1px, 'item': ( - 'padding': 1.25em 2em 2.85em + 'background-color' : color.$grey, + 'padding' : 1.25em 2em 2.85em, ), 'styles': ( ( @@ -543,12 +589,14 @@ $options: ( 'enabled': true, 'features' : (), 'variables': ( - 'font-size' : .9em, - 'font-weight': bold, - 'min-width' : 100px, - 'max-width' : 180px, - 'padding' : 5px, - 'transition' : opacity 0.18s + 'font-size' : .9em, + 'font-weight' : bold, + 'min-width' : 100px, + 'max-width' : 180px, + 'padding' : 5px, + 'transition' : opacity 0.18s, + 'background-color' : theme('color', 'dark'), + 'border-radius' : theme('border', 'radius') ) ), /// @@ -557,21 +605,26 @@ $options: ( 'button': ( 'enabled': true, 'features': ( - 'group' : true, - 'vertical' : true, - 'styles' : true, - 'sizes' : true, - 'outlined' : true, - 'dropdown' : true, - 'gradient' : true + 'group' : true, + 'vertical' : true, + 'styles' : true, + 'sizes' : true, + 'outlined' : true, + 'dropdown' : true, + 'gradient' : true ), 'variables': ( - 'font-weight': bold, - 'font-size' : 1em, - 'line-height': 1, - 'width' : min-content, - 'padding' : .935rem 1.6rem, - 'transition' : .2s, + 'font-family' : $font-family, + 'font-weight' : bold, + 'font-size' : 1em, + 'line-height' : 1, + 'width' : min-content, + 'padding' : .935rem 1.6rem, + 'transition' : .2s, + 'color' : theme('color', 'text'), + 'background' : theme('color', 'background'), + 'border' : theme('border', 'width') theme('border', 'style') theme('border', 'color'), + 'border-radius' : theme('border', 'radius'), 'icon': ( 'font-size': 1.12rem ), @@ -634,25 +687,27 @@ $options: ( 'form': ( 'enabled': true, 'features': ( - 'group' : true, - 'sizes' : true, - 'validation-styles': true, - 'checkbox-radio' : true, - 'upload' : true + 'group' : true, + 'sizes' : true, + 'validation-styles' : true, + 'checkbox-radio' : true, + 'upload' : true ), 'variables': ( 'padding': 0 16px, 'input' : ( - 'color' : inherit, - 'background' : initial, - 'border-color' : inherit, - 'height' : initial, - 'padding' : .4rem .5rem, - 'font-size' : 1.088em, - 'border-radius': 0, - 'transition' : .35s, - 'outline-color' : initial, - 'outline-width' : 2px + 'color' : inherit, + 'background-color' : initial, + 'border-color' : inherit, + 'height' : initial, + 'padding' : .4rem .5rem, + 'font-size' : 1.088em, + 'border-width' : theme('border', 'width'), + 'border-style' : theme('border', 'style'), + 'border-radius' : 0, + 'transition' : .35s, + 'outline-color' : initial, + 'outline-width' : 2px ), 'items': ( 'margin': .345em 0 .55em @@ -661,14 +716,21 @@ $options: ( 'margin': .345em 0 .55em ), 'label': ( - 'font-size': .8579rem, - 'margin' : 0 + 'color' : theme('color', 'text'), + 'font-size' : .8579rem, + 'margin' : 0 ), 'radio-checkbox': ( - 'font-size' : 1.35rem, - 'top' : -8px, - 'left' : 0, - 'label-padding': 0 1.2rem 0 1.7rem + 'color' : theme('color', 'primary'), + 'width' : 1.6em, + 'height' : 1.6em, + 'border' : 0.15em solid theme('border', 'color'), + 'font-size' : 1.35rem, + 'top' : -8px, + 'left' : 0, + 'label-padding' : 0 1.2rem 0 1.7rem, + 'radio-clip-path' : ellipse(45% 45% at 50% 50%), + 'checkbox-clip-path' : polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%), ), // for input validations 'styles': ( @@ -707,10 +769,10 @@ $options: ( 'offset': true // [!] increases the size ), 'variables': ( - 'gap' : 6px, + 'gap': 6px, 'columns': ( - 'size' : 16, - 'padding' : .3rem, + 'size' : 16, + 'padding' : .3rem, 'min-height': .125rem ), 'container': ( @@ -720,9 +782,9 @@ $options: ( ), 'breakpoints': ( 'extra-small' : 0, - 'small' : 500px, - 'medium' : 768px, - 'large' : 992px, + 'small' : 500px, + 'medium' : 768px, + 'large' : 992px, 'extra-large' : 1260px, 'extra-extra-large' : 1400px ) @@ -747,8 +809,8 @@ $options: ( /// UTILITIES /// 'helpers': ( - 'enabled' : true, - 'features' : (), - 'variables': () + 'enabled' : true, + 'features' : (), + 'variables' : () ) ) !default; \ No newline at end of file diff --git a/src/themes.scss b/src/themes.scss index d10952b1..62109b70 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -121,14 +121,14 @@ $themes: ( // the all default "variables" in the options.scss API file. 'components': ( 'card': ( - 'background' : lighten(#252831, 1.75%) + 'background-color' : lighten(#252831, 1.75%) ) ), 'elements': ( 'form': ( 'input': ( - 'background' : lighten(#252831, 4.5%), - 'outline-color' : white, + 'background-color' : lighten(#252831, 4.5%), + 'outline-color' : white, ), ) ), From 033511a022ecf94757b7e794bc7d2354f5112291 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 5 Oct 2024 18:26:03 +0300 Subject: [PATCH 015/154] b115 --- src/Modules/Components/Navbar/Navbar.scss | 12 ++++++------ src/options.scss | 7 ++++--- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 99b03710..3b86be43 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -54,12 +54,12 @@ } .#{class('navbar', 'burger')} { &::before { - content: "\2630"; - font-size: components('navbar', 'burger', 'icon-size'); display: none; + position: absolute; + content: components('navbar', 'burger', 'symbol-open'); + font-size: components('navbar', 'burger', 'icon-size'); min-height: components('navbar', 'min-height'); max-height: components('navbar', 'min-height'); - position: absolute; cursor: pointer; right: 0; top: 0; @@ -270,7 +270,7 @@ align-items: center; justify-content: center; &::before { - content: "\2715"; + content: components('navbar', 'burger', 'symbol-close'); padding: components('navbar', 'burger', 'padding'); font-size: components('navbar', 'burger', 'icon-size'); display: flex; @@ -303,10 +303,10 @@ height: auto; } input[type=checkbox]##{class('navbar', 'burger')}:not(:checked) ~ .#{class('navbar', 'burger')}::before { - content: "\2630"; // open + content: components('navbar', 'burger', 'symbol-open'); // open } input[type=checkbox]##{class('navbar', 'burger')}:checked ~ .#{class('navbar', 'burger')}::before { - content: "\2715"; // close + content: components('navbar', 'burger', 'symbol-close'); // close } } } diff --git a/src/options.scss b/src/options.scss index 9e616aba..9ffe11d2 100755 --- a/src/options.scss +++ b/src/options.scss @@ -350,7 +350,6 @@ $options: ( ), 'variables': ( 'min-height' : 80px, - 'spacer-top' : 105px, // min-height + 25px 'font-size' : 1.128em, 'color' : white, 'background' : theme('color', 'primary'), @@ -364,8 +363,10 @@ $options: ( 'img-width' : 7rem ), 'burger': ( - 'padding' : 0 1.5rem, - 'icon-size' : 2.459rem + 'padding' : 0 1.5rem, + 'icon-size' : 2.459rem, + 'symbol-open' : "\2630", // HTML Symbols + 'symbol-close' : "\2715" // HTML Symbols ), 'styles': ( ( From dd724a82bc6de691583fb04a54da8f01bbb37934 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 5 Oct 2024 19:25:05 +0300 Subject: [PATCH 016/154] b116 --- src/Modules/Components/Caption/Caption.scss | 18 ++++++++--------- src/Modules/Components/Label/Label.scss | 22 ++++++++++----------- src/options.scss | 2 +- src/themes.scss | 12 +++++------ 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index ea282613..99441f62 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -8,27 +8,27 @@ @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Setters" as *; -@if enabled('elements', 'caption') { +@if enabled('components', 'caption') { .#{class('caption', 'name')} { display: flex; align-items: center; - margin: elements('caption', 'margin'); - font-size: elements('caption', 'font-size'); - font-weight: elements('caption', 'font-weight'); - line-height: elements('caption', 'line-height'); + margin: components('caption', 'margin'); + font-size: components('caption', 'font-size'); + font-weight: components('caption', 'font-weight'); + line-height: components('caption', 'line-height'); text-align: left; >img, >.#{class('icon', 'class-name')}, >i { - margin-right: elements('caption', 'media', 'margin'); + margin-right: components('caption', 'media', 'margin'); } >.#{class('icon', 'class-name')}, >i { - font-size: elements('caption', 'font-size') * 1.4; + font-size: components('caption', 'font-size') * 1.4; } &.#{class('caption', 'divided')} { border-bottom: set-border(); - padding-bottom: elements('caption', 'media', 'margin'); + padding-bottom: components('caption', 'media', 'margin'); } &>span, &>div { @@ -50,7 +50,7 @@ /// /// SIZES /// - @if features('elements', 'caption', 'sizes') { + @if features('components', 'caption', 'sizes') { @each $size-name, $margin, $font-size, $font-weight in components('caption', 'sizes') { @include set-size($font-size, null, $size-name) { margin: $margin; diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index 8b017bdd..1994dccd 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -8,20 +8,20 @@ @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; -@if enabled('elements', 'label') { +@if enabled('components', 'label') { a.#{class('label', 'name')}, .#{class('label', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { display: inline-block; - font-weight: elements('label', 'font-weight'); - line-height: elements('label', 'line-height'); - margin: elements('label', 'margin'); - border-radius: elements('label', 'border-radius'); - text-decoration: elements('label', 'text-decoration'); + font-weight: components('label', 'font-weight'); + line-height: components('label', 'line-height'); + margin: components('label', 'margin'); + border-radius: components('label', 'border-radius'); + text-decoration: components('label', 'text-decoration'); @include border(); - @include shadow(0, .155em, 0, rgba(0, 0, 0, 0.095)); - border-color: elements('label', 'border-color'); - @include set-size(elements('label', 'font-size'), elements('label', 'padding')); + @include shadow(0, .155em, 0, 0, rgba(0, 0, 0, 0.095)); + border-color: components('label', 'border-color'); + @include set-size(components('label', 'font-size'), components('label', 'padding')); >i { vertical-align: text-top; } @@ -29,7 +29,7 @@ /// /// STYLES /// - @if features('elements', 'label', 'styles') { + @if features('components', 'label', 'styles') { @each $style-name, $bg-color in components('label', 'styles') { @include set-style($bg-color, white, $style-name) { border-color: darken($bg-color, 3%); @@ -39,7 +39,7 @@ /// /// SIZES /// - @if features('elements', 'label', 'sizes') { + @if features('components', 'label', 'sizes') { @each $size-name, $padding, $font-size in components('label', 'sizes') { @include set-size($font-size, $padding, $size-name); } diff --git a/src/options.scss b/src/options.scss index 9ffe11d2..aa3f9763 100755 --- a/src/options.scss +++ b/src/options.scss @@ -615,7 +615,7 @@ $options: ( 'gradient' : true ), 'variables': ( - 'font-family' : $font-family, + 'font-family' : $font-family, // Typography -> variables 'font-weight' : bold, 'font-size' : 1em, 'line-height' : 1, diff --git a/src/themes.scss b/src/themes.scss index 62109b70..8395ea01 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -7,9 +7,9 @@ /// $themes: ( - /* - Default Theme - */ + // + // 01. Default Theme + // default: ( 'name' : 'Default Theme', 'type' : 'light', // light or dark (required*), @@ -78,9 +78,9 @@ $themes: ( ) ////////////////////////////////////////////////////////// ), - /* - Dark Theme - */ + // + // 02. Dark Theme + // dark: ( 'name' : 'Dark Theme', 'type' : 'dark', // light or dark (required*), From 417b107e45ab6abfececa45a45b2a43d0f505a58 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 10 Oct 2024 16:03:52 +0300 Subject: [PATCH 017/154] b117 --- src/Modules/Utilities/_config/_specs.scss | 25 ---------- .../Utilities/_config/align-content.scss | 19 ------- .../Utilities/_config/align-items.scss | 16 ------ src/Modules/Utilities/_config/align-self.scss | 18 ------- .../Utilities/_config/backdrop-filter.scss | 30 ------------ src/Modules/Utilities/_config/bg-colors.scss | 24 --------- .../Utilities/_config/border-radius.scss | 10 ---- .../Utilities/_config/border-style.scss | 15 ------ src/Modules/Utilities/_config/border.scss | 14 ------ src/Modules/Utilities/_config/cursors.scss | 18 ------- .../Utilities/_config/display-filter.scss | 11 ----- src/Modules/Utilities/_config/display.scss | 21 -------- .../Utilities/_config/flex-direction.scss | 15 ------ src/Modules/Utilities/_config/flex-grow.scss | 11 ----- .../Utilities/_config/flex-shrink.scss | 11 ----- src/Modules/Utilities/_config/flex-wrap.scss | 11 ----- src/Modules/Utilities/_config/flex.scss | 14 ------ src/Modules/Utilities/_config/float.scss | 12 ----- src/Modules/Utilities/_config/font-sizes.scss | 15 ------ .../Utilities/_config/font-weight.scss | 10 ---- src/Modules/Utilities/_config/height.scss | 25 ---------- src/Modules/Utilities/_config/inset.scss | 13 ----- .../Utilities/_config/justify-content.scss | 18 ------- .../Utilities/_config/justify-items.scss | 18 ------- .../Utilities/_config/justify-self.scss | 21 -------- .../Utilities/_config/line-height.scss | 9 ---- src/Modules/Utilities/_config/margin.scss | 13 ----- src/Modules/Utilities/_config/object-fit.scss | 19 ------- src/Modules/Utilities/_config/order.scss | 11 ----- src/Modules/Utilities/_config/overflow.scss | 20 -------- src/Modules/Utilities/_config/padding.scss | 14 ------ .../Utilities/_config/place-content.scss | 19 ------- .../Utilities/_config/place-items.scss | 15 ------ src/Modules/Utilities/_config/place-self.scss | 17 ------- src/Modules/Utilities/_config/position.scss | 17 ------- src/Modules/Utilities/_config/resize.scss | 15 ------ src/Modules/Utilities/_config/text-align.scss | 14 ------ .../Utilities/_config/text-colors.scss | 20 -------- .../Utilities/_config/text-decoration.scss | 11 ----- .../Utilities/_config/text-transform.scss | 12 ----- .../Utilities/_config/user-select.scss | 13 ----- src/Modules/Utilities/_config/width.scss | 25 ---------- src/Modules/Utilities/_config/z-index.scss | 11 ----- src/Modules/Utilities/variables.scss | 49 ------------------- 44 files changed, 739 deletions(-) delete mode 100644 src/Modules/Utilities/_config/_specs.scss delete mode 100644 src/Modules/Utilities/_config/align-content.scss delete mode 100644 src/Modules/Utilities/_config/align-items.scss delete mode 100644 src/Modules/Utilities/_config/align-self.scss delete mode 100644 src/Modules/Utilities/_config/backdrop-filter.scss delete mode 100644 src/Modules/Utilities/_config/bg-colors.scss delete mode 100644 src/Modules/Utilities/_config/border-radius.scss delete mode 100644 src/Modules/Utilities/_config/border-style.scss delete mode 100644 src/Modules/Utilities/_config/border.scss delete mode 100644 src/Modules/Utilities/_config/cursors.scss delete mode 100644 src/Modules/Utilities/_config/display-filter.scss delete mode 100644 src/Modules/Utilities/_config/display.scss delete mode 100644 src/Modules/Utilities/_config/flex-direction.scss delete mode 100644 src/Modules/Utilities/_config/flex-grow.scss delete mode 100644 src/Modules/Utilities/_config/flex-shrink.scss delete mode 100644 src/Modules/Utilities/_config/flex-wrap.scss delete mode 100644 src/Modules/Utilities/_config/flex.scss delete mode 100644 src/Modules/Utilities/_config/float.scss delete mode 100644 src/Modules/Utilities/_config/font-sizes.scss delete mode 100644 src/Modules/Utilities/_config/font-weight.scss delete mode 100644 src/Modules/Utilities/_config/height.scss delete mode 100644 src/Modules/Utilities/_config/inset.scss delete mode 100644 src/Modules/Utilities/_config/justify-content.scss delete mode 100644 src/Modules/Utilities/_config/justify-items.scss delete mode 100644 src/Modules/Utilities/_config/justify-self.scss delete mode 100644 src/Modules/Utilities/_config/line-height.scss delete mode 100644 src/Modules/Utilities/_config/margin.scss delete mode 100644 src/Modules/Utilities/_config/object-fit.scss delete mode 100644 src/Modules/Utilities/_config/order.scss delete mode 100644 src/Modules/Utilities/_config/overflow.scss delete mode 100644 src/Modules/Utilities/_config/padding.scss delete mode 100644 src/Modules/Utilities/_config/place-content.scss delete mode 100644 src/Modules/Utilities/_config/place-items.scss delete mode 100644 src/Modules/Utilities/_config/place-self.scss delete mode 100644 src/Modules/Utilities/_config/position.scss delete mode 100644 src/Modules/Utilities/_config/resize.scss delete mode 100644 src/Modules/Utilities/_config/text-align.scss delete mode 100644 src/Modules/Utilities/_config/text-colors.scss delete mode 100644 src/Modules/Utilities/_config/text-decoration.scss delete mode 100644 src/Modules/Utilities/_config/text-transform.scss delete mode 100644 src/Modules/Utilities/_config/user-select.scss delete mode 100644 src/Modules/Utilities/_config/width.scss delete mode 100644 src/Modules/Utilities/_config/z-index.scss delete mode 100644 src/Modules/Utilities/variables.scss diff --git a/src/Modules/Utilities/_config/_specs.scss b/src/Modules/Utilities/_config/_specs.scss deleted file mode 100644 index 305161c4..00000000 --- a/src/Modules/Utilities/_config/_specs.scss +++ /dev/null @@ -1,25 +0,0 @@ -/// -/// Punica CSS Framework -/// Utilities : Helpers -> Specs -/// - -$specs: ( - "spaces" : (0,5,10,15,20,30,40,50,75,100,125,150,175,200), // padding and margin (px) - "font-weight" : (100,200,300,400,500,600,700,800,900,normal,bold,bolder,lighter), - "borders" : (0,1,2,3,4,5), // border width (px) - "border-radius" : (2,4,8,10,12,14,16,500), // (px) - "orders" : (1,2,3,4,5), - "line-height" : (0,1,2,3,4,5), - "z-index" : (-1,0,1,10,20,30,40,50,100,999,9999,99999), - "sizes" : ( - // used for padding, margin, width and height - ("tiny", 1rem), // 16px - ("mini", 2rem), // 32px - ("small", 4rem), // 64px - ("large", 8rem), // 128px - ("big", 10rem), // 160px - ("huge", 12rem), // 190px - ("massive", 18rem), // 288px - ("giant", 24rem) // 384px - ), -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/align-content.scss b/src/Modules/Utilities/_config/align-content.scss deleted file mode 100644 index f6487d53..00000000 --- a/src/Modules/Utilities/_config/align-content.scss +++ /dev/null @@ -1,19 +0,0 @@ -/// -/// Align Content -/// -/// The align-content property specifies -/// how flex lines are distributed along the -/// cross axis in a flexbox container. -/// -$align-content: ( - // class name, value - ("align-content-stretch", stretch), - ("align-content-center", center), - ("align-content-start", flex-start), - ("align-content-end", flex-end), - ("align-content-between", space-between), - ("align-content-around", space-around), - ("align-content-evenly", space-evenly), - ("align-content-initial", initial), - ("align-content-inherit", inherit) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/align-items.scss b/src/Modules/Utilities/_config/align-items.scss deleted file mode 100644 index 6688b9b4..00000000 --- a/src/Modules/Utilities/_config/align-items.scss +++ /dev/null @@ -1,16 +0,0 @@ -/// -/// Align Items -/// -/// The align-items property specifies the default alignment -/// for items inside a flexbox or grid container. -/// -$align-items: ( - // class name, value - ("align-items-baseline", baseline), - ("align-items-start", flex-start), - ("align-items-end", flex-end), - ("align-items-center", center), - ("align-items-stretch", stretch), - ("align-items-initial", initial), - ("align-items-inherit", inherit) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/align-self.scss b/src/Modules/Utilities/_config/align-self.scss deleted file mode 100644 index f94e8712..00000000 --- a/src/Modules/Utilities/_config/align-self.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Align Self -/// -/// The align-self property specifies the alignment -/// in the block direction for the selected item -/// inside a flexbox or grid container. -/// -$align-self: ( - // class name, value - ("align-self-auto", auto), - ("align-self-baseline", baseline), - ("align-self-start", flex-start), - ("align-self-end", flex-end), - ("align-self-center", center), - ("align-self-stretch", stretch), - ("align-self-initial", initial), - ("align-self-inherit", inherit) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/backdrop-filter.scss b/src/Modules/Utilities/_config/backdrop-filter.scss deleted file mode 100644 index 81d30735..00000000 --- a/src/Modules/Utilities/_config/backdrop-filter.scss +++ /dev/null @@ -1,30 +0,0 @@ -/// -/// Backdrop Filter -/// -/// The backdrop-filter property is used to apply -/// a graphical effect to the area behind an element. -/// -$backdrop-blur-ranges: ( - // (values, suffixes) - (4px,4)(7px,7)(10px,10)(12px,12)(16px,16)(20px,20) -); -$backdrop-blur: ( - // class name (prefix), filter function - ("backdrop-blur-", "blur"), -); -$backdrop-filter-ranges: ( - // (values, suffixes) - (0,0)(.25,25)(.5,50)(.75,75)(1,100)(1.25,125)(1.5,150)(1.75,175)(2,200) -); -$backdrop-filters: ( - // class name (prefix), filter function - ("backdrop-brightness-", "brightness"), - ("backdrop-contrast-", "contrast"), - //("backdrop-shadow-", "drop-shadow"), - ("backdrop-grayscale-", "grayscale"), - //("backdrop-hue-", "hue-rotate"), - ("backdrop-invert-", "invert"), - ("backdrop-opacity-", "opacity"), - ("backdrop-saturate-", "saturate"), - ("backdrop-sepia-", "sepia"), -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/bg-colors.scss b/src/Modules/Utilities/_config/bg-colors.scss deleted file mode 100644 index f7f72352..00000000 --- a/src/Modules/Utilities/_config/bg-colors.scss +++ /dev/null @@ -1,24 +0,0 @@ -/// -/// Background Colors -/// -/// The background-color property sets -/// the background color of an element. The background of -/// an element is the total size of the element, -/// including padding and border (but not the margin). -/// - -@use "../../../Core/Global/Colors" as color; -@use "../../../Core/Theme/Getters" as *; - -$bg-colors: ( - // class name, value - ("bg-color", theme('color', 'background')), - ("bg-grey", color.$grey), - ("bg-white", white), - ("bg-black", black), - ("bg-dark", theme('color', 'dark')), - ("bg-primary", theme('color', 'primary')), - ("bg-success", theme('color', 'success')), - ("bg-warning", theme('color', 'warning')), - ("bg-error", theme('color', 'error')) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/border-radius.scss b/src/Modules/Utilities/_config/border-radius.scss deleted file mode 100644 index 5245cbde..00000000 --- a/src/Modules/Utilities/_config/border-radius.scss +++ /dev/null @@ -1,10 +0,0 @@ -/// -/// Border Radius -/// -/// The border-radius property defines -/// the radius of the element's corners. -/// -$border-radius: ( - // class name (prefix), property - "radius-": "border-radius" -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/border-style.scss b/src/Modules/Utilities/_config/border-style.scss deleted file mode 100644 index 91154136..00000000 --- a/src/Modules/Utilities/_config/border-style.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Border Styles -/// -/// The border-style property sets -/// the style of an element's four borders. -/// -$border-styles: ( - // class name, value - ("border-solid", solid), - ("border-dashed", dashed), - ("border-dotted", dotted), - ("border-double", double), - ("border-groove", groove), - ("border-ridge", ridge) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/border.scss b/src/Modules/Utilities/_config/border.scss deleted file mode 100644 index 8153ac52..00000000 --- a/src/Modules/Utilities/_config/border.scss +++ /dev/null @@ -1,14 +0,0 @@ -/// -/// Border -/// -/// The border property is a shorthand property for -/// border-width, border-style and border-color. -/// -$borders:( - // class name (prefix), property - ("border-", "border-width") - ("border-top-", "border-top-width") - ("border-right-", "border-right-width") - ("border-bottom-", "border-bottom-width") - ("border-left-", "border-left-width") -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/cursors.scss b/src/Modules/Utilities/_config/cursors.scss deleted file mode 100644 index 41a26454..00000000 --- a/src/Modules/Utilities/_config/cursors.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Cursor -/// -/// The cursor property specifies the mouse cursor -/// to be displayed when pointing over an element. -/// -$cursors: ( - // class name, value - ("cursor-alias", alias), - ("cursor-default", default), - ("cursor-grab", grab), - ("cursor-help", help), - ("cursor-move", move), - ("cursor-pointer", pointer), - ("cursor-wait", wait), - ("cursor-zoom-in", zoom-in), - ("cursor-zoom-out", zoom-out) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/display-filter.scss b/src/Modules/Utilities/_config/display-filter.scss deleted file mode 100644 index deb928e1..00000000 --- a/src/Modules/Utilities/_config/display-filter.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Filter -/// -/// The filter property defines visual effects -/// (like blur and saturation) to an element (often ). -/// -$display-filters: ( - // class name, property, value - ("filter-invert", "filter", invert(100%)), - ("filter-gray", "filter", grayscale(100%)), -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/display.scss b/src/Modules/Utilities/_config/display.scss deleted file mode 100644 index dca31eca..00000000 --- a/src/Modules/Utilities/_config/display.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// -/// Display -/// -/// The display property specifies the -/// display behavior (the type of rendering box) of an element. -/// -$display-properties: ( - // class name, value - ("display-inline", inline), - ("display-flex", flex), - ("display-inline-flex", inline-flex), - ("display-grid", grid), - ("display-inline-grid", inline-grid), - ("display-block", block), - ("display-inline-block", inline-block), - ("display-table", table), - ("display-inline-table", inline-table), - ("display-table-row", table-row), - ("display-table-column", table-column), - ("display-table-cell", table-cell) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/flex-direction.scss b/src/Modules/Utilities/_config/flex-direction.scss deleted file mode 100644 index 2d4d0f4a..00000000 --- a/src/Modules/Utilities/_config/flex-direction.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Flex Direction -/// -/// The flex-direction property specifies -/// the direction of the flexible items. -/// -$flex-directions: ( - // class name, value - ("flex-direction-row", row), - ("flex-direction-row-reverse", row-reverse), - ("flex-direction-column", column), - ("flex-direction-column-reverse", column-reverse), - ("flex-direction-initial", initial), - ("flex-direction-inherit", inherit) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/flex-grow.scss b/src/Modules/Utilities/_config/flex-grow.scss deleted file mode 100644 index bf540dc8..00000000 --- a/src/Modules/Utilities/_config/flex-grow.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Flex Grow -/// -/// The flex-grow property specifies how much the item -/// will grow relative to the rest of the flexible items -/// inside the same container. -/// -$flex-grow: ( - ("flex-grow", 1), - ("flex-grow-0", 0) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/flex-shrink.scss b/src/Modules/Utilities/_config/flex-shrink.scss deleted file mode 100644 index 0705322d..00000000 --- a/src/Modules/Utilities/_config/flex-shrink.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Flex Shrink -/// -/// The flex-shrink property specifies how the item -/// will shrink relative to the rest of the flexible items -/// inside the same container. -/// -$flex-shrink: ( - ("flex-shrink", 1), - ("flex-shrink-0", 0) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/flex-wrap.scss b/src/Modules/Utilities/_config/flex-wrap.scss deleted file mode 100644 index 2cc311d1..00000000 --- a/src/Modules/Utilities/_config/flex-wrap.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Flex Wrap -/// -/// The flex-wrap property specifies whether -/// the flexible items should wrap or not. -/// -$flex-wrap: ( - ("flex-wrap", wrap), - ("flex-wrap-reverse", wrap-reverse), - ("flex-nowrap", nowrap) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/flex.scss b/src/Modules/Utilities/_config/flex.scss deleted file mode 100644 index fd551c22..00000000 --- a/src/Modules/Utilities/_config/flex.scss +++ /dev/null @@ -1,14 +0,0 @@ -/// -/// Flex -/// -/// The flex property sets the flexible length on flexible items. -/// The flex property is a shorthand property for flex-grow, flex-shrink -/// and flex-basis. -/// -$flex-helpers: ( - // class name, value - ("flex-1", 1 1 0%), - ("flex-auto", 1 1 auto), - ("flex-initial", 0 1 auto), - ("flex-none", none) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/float.scss b/src/Modules/Utilities/_config/float.scss deleted file mode 100644 index 1efc55db..00000000 --- a/src/Modules/Utilities/_config/float.scss +++ /dev/null @@ -1,12 +0,0 @@ -/// -/// Float -/// -/// The float property specifies whether an element should -/// float to the left, right, or not at all. -/// -$float-helpers: ( - // class name, value - ("float-right", right), - ("float-left", left), - ("float-none", none) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/font-sizes.scss b/src/Modules/Utilities/_config/font-sizes.scss deleted file mode 100644 index e11bfdc2..00000000 --- a/src/Modules/Utilities/_config/font-sizes.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Font Size -/// -/// The font-size property sets the size of a font. -/// -$font-sizes: ( - // class name, value - ("mini-text", 60%), - ("tiny-text", 73%), - ("small-text", 85%), - ("large-text", 120%), - ("big-text", 175%), - ("huge-text", 200%), - ("giant-text", 350%) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/font-weight.scss b/src/Modules/Utilities/_config/font-weight.scss deleted file mode 100644 index ae146a0a..00000000 --- a/src/Modules/Utilities/_config/font-weight.scss +++ /dev/null @@ -1,10 +0,0 @@ -/// -/// Font Weight -/// -/// The font-weight property sets how thick -/// or thin characters in text should be displayed. -/// -$font-weights: ( - // class name (prefix), property - "weight-": "font-weight" -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/height.scss b/src/Modules/Utilities/_config/height.scss deleted file mode 100644 index aa531c66..00000000 --- a/src/Modules/Utilities/_config/height.scss +++ /dev/null @@ -1,25 +0,0 @@ -/// -/// Height -/// -/// The height property sets the height of an element. -/// -$height-helpers: ( - // class name, value - ("height-min-content", min-content), - ("height-max-content", max-content), - ("height-fit-content", fit-content), - ("height-2", 2rem), // 32px - ("height-3", 3rem), // 48px - ("height-4", 4rem), // 64px - ("height-5", 5rem), // 80px - ("height-10", 10rem), // 160px - ("height-15", 15rem), // 240px - ("height-20", 20rem), // 320px - ("height-25", 25rem), // 400px - ("height-30", 30rem), // 480px - ("height-35", 35rem), // 560px - ("height-40", 40rem), // 640px - ("height-45", 45rem), // 720px - ("height-50", 50rem), // 800px - ("height-75", 75rem) // 1200px -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/inset.scss b/src/Modules/Utilities/_config/inset.scss deleted file mode 100644 index 9268ad2b..00000000 --- a/src/Modules/Utilities/_config/inset.scss +++ /dev/null @@ -1,13 +0,0 @@ -/// -/// Inset -/// -/// The inset property sets the distance -/// between an element and the parent element. -/// -$insets: ( - // class name, [values] - 'top'(0, auto), - 'bottom'(0, auto), - 'left'(0, auto), - 'right'(0, auto), -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/justify-content.scss b/src/Modules/Utilities/_config/justify-content.scss deleted file mode 100644 index 20264223..00000000 --- a/src/Modules/Utilities/_config/justify-content.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Justify Content -/// -/// The justify-content property aligns the flexible -/// container's items when the items do not use -/// all available space on the main-axis (horizontally). -/// -$justify-content: ( - // class name, value - ("justify-content-baseline", baseline), - ("justify-content-start", flex-start), - ("justify-content-end", flex-end), - ("justify-content-center", center), - ("justify-content-between", space-between), - ("justify-content-around", space-around), - ("justify-content-initial", initial), - ("justify-content-inherit", inherit) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/justify-items.scss b/src/Modules/Utilities/_config/justify-items.scss deleted file mode 100644 index 3c6b0bdb..00000000 --- a/src/Modules/Utilities/_config/justify-items.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Justify Items -/// -/// The justify-items property is set -/// on the grid container to give child elements (grid items) -/// alignment in the inline direction. -/// -$justify-items: ( - // class name, value - ("justify-items-stretch", stretch), - ("justify-items-start", start), - ("justify-items-left", left), - ("justify-items-center", center), - ("justify-items-end", end), - ("justify-items-right", right), - ("justify-items-initial", initial), - ("justify-items-inherit", inherit) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/justify-self.scss b/src/Modules/Utilities/_config/justify-self.scss deleted file mode 100644 index 04bc7c6c..00000000 --- a/src/Modules/Utilities/_config/justify-self.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// -/// Justify Self -/// -/// The justify-self property aligns a grid item -/// within its grid cell in the inline direction. -/// -$justify-self: ( - // class name, value - ("justify-self-auto", auto), - ("justify-self-normal", normal), - ("justify-self-stretch", stretch), - ("justify-self-start", start), - ("justify-self-left", left), - ("justify-self-center", center), - ("justify-self-end", end), - ("justify-self-right", right), - ("justify-self-first-baseline", first baseline), - ("justify-self-last-baseline", last baseline), - ("justify-self-initial", initial), - ("justify-self-inherit", inherit) -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/line-height.scss b/src/Modules/Utilities/_config/line-height.scss deleted file mode 100644 index 7d63dddf..00000000 --- a/src/Modules/Utilities/_config/line-height.scss +++ /dev/null @@ -1,9 +0,0 @@ -/// -/// Line Height -/// -/// The line-height property specifies the height of a line. -/// -$line-heights: ( - // class name (prefix), property - "line-height-": "line-height" -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/margin.scss b/src/Modules/Utilities/_config/margin.scss deleted file mode 100644 index 63f53af6..00000000 --- a/src/Modules/Utilities/_config/margin.scss +++ /dev/null @@ -1,13 +0,0 @@ -/// -/// Margin -/// -/// The margin property sets the margins for an element. -/// -$margin-helpers: ( - // class name (prefix), property - ("m-", "margin"), - ("mt-", "margin-top"), - ("mr-", "margin-right"), - ("mb-", "margin-bottom"), - ("ml-", "margin-left") -); \ No newline at end of file diff --git a/src/Modules/Utilities/_config/object-fit.scss b/src/Modules/Utilities/_config/object-fit.scss deleted file mode 100644 index 35f7492d..00000000 --- a/src/Modules/Utilities/_config/object-fit.scss +++ /dev/null @@ -1,19 +0,0 @@ -/// -/// Object Fit -/// -/// The object-fit property is used to specify -/// how an or

- Nightly Builds | - Templates | - Changelog + Punica CSS Framework is a clean, lightweight, responsive, modern, and fully customizable API-driven framework built with SASS/SCSS, offering multi-theme support.

-

- Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support. -

- -

- - -

- -### Your custom CSS Framework -Punica also lets you create your custom CSS Framework. You can customize all the class names, apply your color scheme, enable or disable features of element/component, change all variables as your need and create your themes according to your taste. You are completely free! - -### API for Developers -Punica API is based on SCSS maps for various options, values, generating class names, and themes. The Punica SCSS maps contain a key list of options/values/class names/theme variables. For example, you can customize the Punica as you wish with the ```options.scss``` and ```classnames.scss``` API files and of course generate your custom themes with [Punica's theme maps](https://github.com/codeforms/punica-themes). Take a look at the official [SASS docs](https://sass-lang.com/documentation/values/maps) to get started about SASS maps. - -### Install From CDN -If you want to quickly add the Punica CSS to your project, you can use the JsDelivr CDN; -```html - -``` - -### HTML Markup & Including Material Symbols and Icons library -For your default setup, add the Punica CSS file to the element of your HTML5 document. Also Punica CSS uses Material Symbols and Icons library, therefore you should include this library as well. That's it! -```html - - - - Title - - - - - - - - -``` +### Punica 3.0 API for Developers +Punica's API-based structure allows you to create or customize a CSS framework to suit your needs and preferences. The ```options.scss``` API file, which contains all the default variables and settings required by Punica, can be customized—even class names can be modified if desired. Additionally, you can make all these changes directly through your own theme map instead of editing ```options.scss```. You are completely free! From 9aeae38c2bc91cc8d35e17ff091d312825af632a Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 30 Oct 2024 08:45:13 +0300 Subject: [PATCH 055/154] b154 - Core upgraded to Sass 1.80.5 --- package.json | 2 +- src/Core/Global/Colors.scss | 3 +- src/Core/Global/Getters.scss | 20 +++++----- src/Core/Global/Mixins.scss | 3 +- src/Core/Global/Options.scss | 4 +- src/Core/Global/Sass.scss | 33 +++++++++++++++ src/Core/Theme/Getters.scss | 10 +++-- src/Modules/Components/Alert/Alert.scss | 1 + src/Modules/Components/Badge/Badge.scss | 1 + .../Components/Billboard/Billboard.scss | 1 + src/Modules/Components/Card/Card.scss | 1 + src/Modules/Components/Label/Label.scss | 1 + src/Modules/Components/List/List.scss | 1 + src/Modules/Components/Menu/Menu.scss | 1 + src/Modules/Components/Navbar/Navbar.scss | 3 +- src/Modules/Components/Navbar/mixins.scss | 1 + src/Modules/Components/Stats/Stats.scss | 1 + src/Modules/Components/Tabnav/Tabnav.scss | 1 + src/Modules/Components/Timeline/Timeline.scss | 1 + src/Modules/Elements/Button/Button.scss | 3 +- src/Modules/Elements/Button/mixins.scss | 32 ++------------- src/Modules/Utilities/mixins.scss | 40 ++++++++++--------- src/options.scss | 20 +++++----- src/punica.scss | 5 ++- src/themes.scss | 2 + 25 files changed, 113 insertions(+), 78 deletions(-) create mode 100644 src/Core/Global/Sass.scss diff --git a/package.json b/package.json index 689c127e..094f5819 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,6 @@ "watch": "npm run prod -- -w" }, "dependencies": { - "sass": "1.77.6" + "sass": "1.80.5" } } diff --git a/src/Core/Global/Colors.scss b/src/Core/Global/Colors.scss index 01d27d5b..c913803c 100644 --- a/src/Core/Global/Colors.scss +++ b/src/Core/Global/Colors.scss @@ -3,7 +3,8 @@ /// Core/Global/Colors.scss /// +@use "sass:color" as color; @use "../Theme/Getters" as *; // Secondary color variables -$grey : mix(theme('color', 'text'), theme('color', 'background'), 14.5%); \ No newline at end of file +$grey : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%); \ No newline at end of file diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 2e17522d..ce90ad59 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -3,6 +3,8 @@ /// Core/Global/Getters.scss /// +@use "sass:map" as map; +@use "sass:list" as *; @use "../Theme/Getters" as *; @use "../../options" as option; @use "../../Modules/Utilities/index" as helper; @@ -21,18 +23,18 @@ /// @function options($keys...) { - @if null == map-get(option.$options, nth($keys, 1)) { + @if null == map.get(option.$options, nth($keys, 1)) { @warn "[INVALID KEY] #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } - $value: map-get(option.$options, nth($keys, 1)); + $value: map.get(option.$options, nth($keys, 1)); @if length($keys) == 1 { @return $value; } - $value: map-get($value, nth($keys, 2)); + $value: map.get($value, nth($keys, 2)); @if null == $value { @warn "[INVALID KEY] #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @@ -40,7 +42,7 @@ } @if length($keys) > 2 { - $value: map-get($value, nth($keys, 3)); + $value: map.get($value, nth($keys, 3)); @if null == $value { @warn "[INVALID KEY] #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; @@ -64,7 +66,7 @@ /// @function settings($node, $keys...) { - $settings: map-get(map-get(options($node), 'settings'), nth($keys, 1)); + $settings: map.get(map.get(options($node), 'settings'), nth($keys, 1)); @if null == $settings { @warn "[INVALID KEY] #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @@ -75,12 +77,12 @@ @return $settings; } - @if null == map-get($settings, nth($keys, 2)) { + @if null == map.get($settings, nth($keys, 2)) { @warn "[INVALID KEY] #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } - @return map-get($settings, nth($keys, 2)); + @return map.get($settings, nth($keys, 2)); } /// @@ -118,10 +120,10 @@ /// @function utils($node, $key: null) { - $util: if(map-has-key(helper.$helpers, $node), map-get(helper.$helpers, $node), null); + $util: if(map.has-key(helper.$helpers, $node), map.get(helper.$helpers, $node), null); @if ($util != null) and $key { - $util: if(map-has-key($util, $key), map-get($util, $key), null); + $util: if(map.has-key($util, $key), map.get($util, $key), null); } @return $util; diff --git a/src/Core/Global/Mixins.scss b/src/Core/Global/Mixins.scss index 0ae7176e..d92a304b 100644 --- a/src/Core/Global/Mixins.scss +++ b/src/Core/Global/Mixins.scss @@ -3,6 +3,7 @@ /// Core/Global/Mixins.scss /// +@use "sass:color" as *; @use "Options" as *; /// @@ -33,7 +34,7 @@ background: linear-gradient( $direction, $color 0%, - lighten($color, $brightness) 100% + adjust($color, $lightness: $brightness) 100% ); } diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 089a4426..31324e2f 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -3,6 +3,8 @@ /// Core/Global/Options.scss /// +@use "sass:map" as map; +@use "sass:list" as *; @use "../Theme/Getters" as *; @use "Getters" as get; @@ -60,7 +62,7 @@ @return theme($node, $module, 'features', $feature); } - @return map-get(map-get(get.options($module), 'features'), $feature); + @return map.get(map.get(get.options($module), 'features'), $feature); } /// diff --git a/src/Core/Global/Sass.scss b/src/Core/Global/Sass.scss new file mode 100644 index 00000000..24e38314 --- /dev/null +++ b/src/Core/Global/Sass.scss @@ -0,0 +1,33 @@ +/// +/// Punica CSS Framework +/// Core/Global/Sass.scss +/// +/** + * Sass provides many built-in modules which contain useful functions + * (and the occasional mixin). These modules can be loaded with the + * @use rule like any user-defined stylesheet, and their functions can be + * called like any other module member. All built-in module URLs begin + * with sass: to indicate that they’re part of Sass itself. + * + * @link https://sass-lang.com/documentation/modules/ + * + **/ +@use "sass:color" as *; + +/// +/// @param $color +/// @param $value +/// +@function lighten($color, $value) +{ + @return adjust($color, $lightness: $value); +} + +/// +/// @param $color +/// @param $value +/// +@function darken($color, $value) +{ + @return adjust($color, $lightness: -$value); +} \ No newline at end of file diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 2be3594d..f96ffb8e 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -3,6 +3,8 @@ /// Core/Theme/Getters.scss /// +@use "sass:map" as map; + /// ====================================================== $theme-map: null !default; /// ====================================================== @@ -23,16 +25,16 @@ /// @function theme($node, $key: null, $child: null, $sub: null) { - $value: if(map-has-key($theme-map, $node), map-get($theme-map, $node), null); + $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); @if ($value != null) and $key { - $value: if(map-has-key($value, $key), map-get($value, $key), null); + $value: if(map.has-key($value, $key), map.get($value, $key), null); @if ($value != null) and $child { - $value: if(map-has-key($value, $child), map-get($value, $child), null); + $value: if(map.has-key($value, $child), map.get($value, $child), null); @if ($value != null) and $sub { - $value: if(map-has-key($value, $sub), map-get($value, $sub), null); + $value: if(map.has-key($value, $sub), map.get($value, $sub), null); } } } diff --git a/src/Modules/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss index aacb88ce..662317c4 100644 --- a/src/Modules/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index 56cae618..70fc4cfe 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; diff --git a/src/Modules/Components/Billboard/Billboard.scss b/src/Modules/Components/Billboard/Billboard.scss index b993e8a1..492de4f1 100644 --- a/src/Modules/Components/Billboard/Billboard.scss +++ b/src/Modules/Components/Billboard/Billboard.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index 657628a8..ff3e8723 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index e98525f0..bc90a99c 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index fc09e2ed..67b9628e 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index a260ce8c..34e66393 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 4885bf11..78cc9936 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; @@ -174,7 +175,7 @@ to top, components('navbar', 'background') 0%, lighten(components('navbar', 'background'), 11.5%) 2%, - darken(components('navbar', 'background'), 3%) 97%, + darken(components('navbar', 'background'), -3%) 97%, lighten(components('navbar', 'background'), 11.5%) 100% ); } diff --git a/src/Modules/Components/Navbar/mixins.scss b/src/Modules/Components/Navbar/mixins.scss index dce30cc4..85a2162b 100644 --- a/src/Modules/Components/Navbar/mixins.scss +++ b/src/Modules/Components/Navbar/mixins.scss @@ -4,6 +4,7 @@ /// @use "../../../Core/Global/Getters" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Theme/Getters" as *; /// diff --git a/src/Modules/Components/Stats/Stats.scss b/src/Modules/Components/Stats/Stats.scss index fe52b325..43e9624d 100644 --- a/src/Modules/Components/Stats/Stats.scss +++ b/src/Modules/Components/Stats/Stats.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; diff --git a/src/Modules/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss index fc85800b..0ff8e5a1 100755 --- a/src/Modules/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index d625088a..47142e4c 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "../../../Core/Theme/Getters" as *; diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index 5aa49eda..199c6d9f 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; @use "mixins" as *; @@ -119,8 +120,6 @@ } } } - // Button Link - @include link-button(); /// /// SIZES /// diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 254f9e83..daedac8b 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -5,6 +5,7 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; +@use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Theme/Getters" as *; @use "../../../Core/Theme/Setters" as *; @@ -178,8 +179,6 @@ } } } - // Button Link - @include link-button(); /// /// DROPDOWN /// @@ -265,6 +264,8 @@ $border-color: null, $outlined : false ) { + text-shadow: 0 1px 1px darken($bg-color, 6%); + border: theme('border', 'width') theme('border', 'style') $border-color; /// /// OUTLINED STYLE /// @@ -282,8 +283,6 @@ color: white; } } - text-shadow: 0 1px 1px darken($bg-color, 6%); - border: theme('border', 'width') theme('border', 'style') $border-color; &:hover { background: lighten($bg-color, 7.5%); color : white; @@ -389,27 +388,4 @@ } } } -} - -/// -/// Link Button -/// -@mixin link-button() { - &.#{class('button', 'link')}.#{class('button', 'name')}, - &.#{class('tooltip', 'top')} > .#{class('button', 'name')} { - @include button-styles(transparent) { - box-shadow : none; - border : none; - color : theme('color', 'primary'); - text-decoration: underline; - font-weight : theme('typography', 'font-weight'); - padding : 0; - &:hover { - color: theme('color', 'text'); - } - i { - color: theme('color', 'text'); - } - }; - } -} +} \ No newline at end of file diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index e587b4b4..b162349a 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -3,6 +3,8 @@ /// Utilities : Helpers -> Mixins /// +@use "sass:map" as map; +@use "sass:color" as *; @use "../../Core/Global/Getters" as *; @use "../../Core/Theme/Getters" as *; @use "../../Core/Theme/Setters" as *; @@ -19,11 +21,11 @@ @mixin set_utils($helper, $two: false, $three: false) { $list : utils($helper); - $property : map-get($list, 'property'); - $prefix : map-get($list, 'prefix'); - $specificity: map-get($list, 'specificity'); - $type : map-get($list, 'type'); - $values : map-get($list, 'values'); + $property : map.get($list, 'property'); + $prefix : map.get($list, 'prefix'); + $specificity: map.get($list, 'specificity'); + $type : map.get($list, 'type'); + $values : map.get($list, 'values'); @if $two { // suffix / value @@ -56,8 +58,8 @@ @mixin set_inset_helper($helper) { $util : utils($helper); - $list : map-get($util, 'values'); - $specificity: map-get($util, 'specificity'); + $list : map.get($util, 'values'); + $specificity: map.get($util, 'specificity'); @each $class, $values in $list { @each $value in $values { @@ -77,11 +79,11 @@ /// @mixin utils_with_specs($helpers) { - $prefix : map-get($helpers, 'prefix'); - $specificity: map-get($helpers, 'specificity'); - $type : map-get($helpers, 'type'); - $specs : map-get($helpers, 'specs'); - $values : map-get($helpers, 'values'); + $prefix : map.get($helpers, 'prefix'); + $specificity: map.get($helpers, 'specificity'); + $type : map.get($helpers, 'type'); + $specs : map.get($helpers, 'specs'); + $values : map.get($helpers, 'values'); @each $suffix, $property in $values { @each $spec, $value in $specs { @@ -102,10 +104,10 @@ /// @mixin color_palette($colors) { - $property : map-get($colors, 'property'); - $prefix : map-get($colors, 'prefix'); - $specificity: map-get($colors, 'specificity'); - $values : map-get($colors, 'values'); + $property : map.get($colors, 'property'); + $prefix : map.get($colors, 'prefix'); + $specificity: map.get($colors, 'specificity'); + $values : map.get($colors, 'values'); @for $i from 5 through 35 { @each $class, $color in $values { @@ -156,9 +158,9 @@ /// @mixin set_sides($util, $side: 'margin') { - $prefix: map-get($util, 'prefix'); - $type : map-get($util, 'type'); - $values: map-get($util, 'specs'); + $prefix: map.get($util, 'prefix'); + $type : map.get($util, 'type'); + $values: map.get($util, 'specs'); @each $suffix, $value in $values { .#{$prefix}x-#{$suffix} { diff --git a/src/options.scss b/src/options.scss index ea2f1f6c..338828a7 100755 --- a/src/options.scss +++ b/src/options.scss @@ -7,6 +7,7 @@ /// @use "Core/Theme/Getters" as *; +@use "Core/Global/Sass" as *; @use "Core/Global/Colors" as color; $options: ( @@ -24,11 +25,11 @@ $options: ( 'active': 'active' ), 'settings': ( - 'padding' : .6rem 1rem, - 'margin' : 0 0 8px, - 'width' : 100%, - 'font-size' : 1.015em, - 'font-weight': bold, + 'padding' : .6rem 1rem, + 'margin' : 0 0 8px, + 'width' : 100%, + 'font-size' : 1.015em, + 'font-weight' : bold, 'border-radius': theme('border', 'radius'), 'icon': ( 'vertical-align': middle @@ -68,7 +69,7 @@ $options: ( 'border-radius': 500px, 'white-space' : nowrap, 'font-weight' : bold, - 'border' : theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%), + 'border' : theme('border', 'width') theme('border', 'style') lighten(color.$grey, 6.5%), 'styles': ( // style name (class), theme variable "primary": theme('color', 'primary'), @@ -111,7 +112,7 @@ $options: ( ), 'settings': ( 'padding' : 4.5rem 2.5rem, - 'border-color': darken(theme('color', 'background'), 4.5%), + 'border-color': darken(theme('color', 'background'), -4.5%), 'text-wrap' : balance, 'body' : ( 'padding': 4.5rem 2.5rem @@ -480,7 +481,7 @@ $options: ( lighten(theme('color', 'dark'), 7%), // input bg white, // input color lighten(theme('color', 'dark'), 25.75%), // input border color - lighten(theme('color', 'dark'), 12.55%) // divider color + lighten(theme('color', 'dark'), 12.55%) // divider color ) ), 'sizes': ( @@ -841,7 +842,8 @@ $options: ( ( 'primary', // class name theme('color', 'primary'), // bg color - lighten(theme('color', 'primary'), 4%) // border color + lighten(theme('color', 'primary'), 4%) // border color + ), ( 'success', // class name diff --git a/src/punica.scss b/src/punica.scss index 3cfc64b1..6046e9f1 100755 --- a/src/punica.scss +++ b/src/punica.scss @@ -2,6 +2,7 @@ /// Punica CSS Framework /// +@use "sass:map" as map; @use "Core/Theme/Getters" as *; @use "Core/Global/Helpers" as *; @use "themes" as get; @@ -9,8 +10,8 @@ /// ====================================================== $active-theme: default; /// ====================================================== - $theme: if(map-has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); - $theme-map: map-get(get.$themes, $theme) !global; + $theme: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); + $theme-map: map.get(get.$themes, $theme) !global; /// ====================================================== /*! diff --git a/src/themes.scss b/src/themes.scss index 5571a440..7d4544ef 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -6,6 +6,8 @@ /// the "$active-theme" variable in the punica.scss file. /// +@use "Core/Global/Sass" as *; + $themes: ( // // 01. Default Theme From 5fc230b6b084d8d7797fc463dd04baa1288dea32 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 30 Oct 2024 09:03:27 +0300 Subject: [PATCH 056/154] b155 --- src/Modules/Components/Navbar/Navbar.scss | 2 +- src/options.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 78cc9936..9936614d 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -175,7 +175,7 @@ to top, components('navbar', 'background') 0%, lighten(components('navbar', 'background'), 11.5%) 2%, - darken(components('navbar', 'background'), -3%) 97%, + darken(components('navbar', 'background'), 3%) 97%, lighten(components('navbar', 'background'), 11.5%) 100% ); } diff --git a/src/options.scss b/src/options.scss index 338828a7..74cafef1 100755 --- a/src/options.scss +++ b/src/options.scss @@ -69,7 +69,7 @@ $options: ( 'border-radius': 500px, 'white-space' : nowrap, 'font-weight' : bold, - 'border' : theme('border', 'width') theme('border', 'style') lighten(color.$grey, 6.5%), + 'border' : theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%), 'styles': ( // style name (class), theme variable "primary": theme('color', 'primary'), @@ -112,7 +112,7 @@ $options: ( ), 'settings': ( 'padding' : 4.5rem 2.5rem, - 'border-color': darken(theme('color', 'background'), -4.5%), + 'border-color': darken(theme('color', 'background'), 4.5%), 'text-wrap' : balance, 'body' : ( 'padding': 4.5rem 2.5rem From a7b6f6232bbcb43aba24aded312ffc1936543a5b Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 30 Oct 2024 16:16:32 +0300 Subject: [PATCH 057/154] b156 --- src/Modules/Utilities/helpers.scss | 1 + src/Modules/Utilities/index.scss | 53 +++++++++++++++++-------- src/themes.scss | 64 +++++++++++++++--------------- 3 files changed, 69 insertions(+), 49 deletions(-) diff --git a/src/Modules/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss index 99289326..d670a036 100644 --- a/src/Modules/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -29,6 +29,7 @@ @include set_utils('flex', true); @include set_utils('float'); @include set_utils('font-size', true); + @include set_utils('font-style'); @include set_utils('font-weight'); @include set_utils('height', true); @include set_inset_helper('inset'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 3a21a982..d4fb7580 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -45,6 +45,7 @@ $helpers: ( /// inside a flexbox or grid container. /// /// @example align-self-auto + /// @example align-self-flex-end /// 'align-self': ( 'property' : 'align-self', // css property name (don't change it !) @@ -61,6 +62,7 @@ $helpers: ( /// an element is the total size of the element, /// including padding and border (but not the margin). /// + /// @example bg-color /// @example bg-primary /// 'background-color': ( @@ -216,6 +218,23 @@ $helpers: ( 'values' : (alias, default, grab, help, move, pointer, wait, zoom-in, zoom-out) ), /// + /// Display + /// + /// The display property specifies the + /// display behavior (the type of rendering box) of an element. + /// + /// @example display-flex + /// @example display-inline-block + /// + 'display': ( + 'property' : 'display', // css property name (don't change it !) + 'prefix' : 'display-', // prefix of class name + 'specificity': !important, // or null + 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'specs' : null, + 'values' : (inline, flex, inline-flex, grid, inline-grid, block, inline-block, table, inline-table, table-row, table-column, table-cell) + ), + /// /// Filter /// /// The filter property defines visual effects @@ -236,23 +255,6 @@ $helpers: ( ) ), /// - /// Display - /// - /// The display property specifies the - /// display behavior (the type of rendering box) of an element. - /// - /// @example display-flex - /// @example display-inline-block - /// - 'display': ( - 'property' : 'display', // css property name (don't change it !) - 'prefix' : 'display-', // prefix of class name - 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, - 'values' : (inline, flex, inline-flex, grid, inline-grid, block, inline-block, table, inline-table, table-row, table-column, table-cell) - ), - /// /// Flex Direction /// /// The flex-direction property specifies @@ -365,6 +367,7 @@ $helpers: ( /// /// The font-size property sets the size of a font. /// + /// @example text-mini /// @example text-large /// 'font-size': ( @@ -385,6 +388,22 @@ $helpers: ( ) ), /// + /// Font Style + /// + /// The font-style property is mostly used to specify italic text. + /// + /// @example text-italic + /// @example text-normal + /// + 'font-style': ( + 'property' : 'font-style', // css property name (don't change it !) + 'prefix' : 'text-', // prefix of class name + 'specificity': !important, // or null + 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'specs' : null, + 'values' : (normal,italic) + ), + /// /// Font Weight /// /// The font-weight property sets how thick diff --git a/src/themes.scss b/src/themes.scss index 7d4544ef..64c7f418 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -23,26 +23,26 @@ $themes: ( 'line-height': 1.7 ), 'color': ( - 'text' : #202123, - 'background' : white, - 'primary' : #3266ec, - 'success' : #4f971c, - 'warning' : #c68811, - 'error' : #d02645, - 'dark' : #393b42 + 'text' : #202123, + 'background': white, + 'primary' : #3266ec, + 'success' : #4f971c, + 'warning' : #c68811, + 'error' : #d02645, + 'dark' : #393b42 ), 'border': ( - 'color' : #c6c6c6, - 'width' : 1px, - 'style' : solid, - 'radius' : 2px, + 'color' : #c6c6c6, + 'width' : 1px, + 'style' : solid, + 'radius': 2px, ), 'shadow': ( - 'horizontal' : 0, - 'vertical' : .25em, - 'blur' : .5em, - 'spread' : 0, - 'color' : rgba(0, 0, 0, 0.14), + 'horizontal': 0, + 'vertical' : .25em, + 'blur' : .5em, + 'spread' : 0, + 'color' : rgba(0, 0, 0, 0.14), ), ////////////////////////////////////////////////////////// // You can use this section to override/change @@ -102,26 +102,26 @@ $themes: ( 'line-height': 1.7 ), 'color': ( - 'text' : white, - 'background' : #252831, - 'primary' : #3e5bb2, - 'success' : #2f8f5d, - 'warning' : #ab7d2d, - 'error' : #ba3d3d, - 'dark' : lighten(#252831, 4.5%) + 'text' : white, + 'background': #252831, + 'primary' : #3e5bb2, + 'success' : #2f8f5d, + 'warning' : #ab7d2d, + 'error' : #ba3d3d, + 'dark' : lighten(#252831, 4.5%) ), 'border': ( - 'color' : lighten(#252831, 17%), - 'width' : 1px, - 'style' : solid, - 'radius' : 4px, + 'color' : lighten(#252831, 17%), + 'width' : 1px, + 'style' : solid, + 'radius': 4px, ), 'shadow': ( - 'horizontal' : 0, - 'vertical' : 1px, - 'blur' : 4px, - 'spread' : 0, - 'color' : rgba(0, 0, 0, 0.20), + 'horizontal': 0, + 'vertical' : 1px, + 'blur' : 4px, + 'spread' : 0, + 'color' : rgba(0, 0, 0, 0.20), ), ////////////////////////////////////////////////////////// // You can use this section to override/change From 034c4e54ffb8c1f7aba8536403dc257665dc96d9 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 31 Oct 2024 08:16:18 +0300 Subject: [PATCH 058/154] b157 --- .../Components/Billboard/Billboard.scss | 108 ------------------ 1 file changed, 108 deletions(-) delete mode 100644 src/Modules/Components/Billboard/Billboard.scss diff --git a/src/Modules/Components/Billboard/Billboard.scss b/src/Modules/Components/Billboard/Billboard.scss deleted file mode 100644 index 492de4f1..00000000 --- a/src/Modules/Components/Billboard/Billboard.scss +++ /dev/null @@ -1,108 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Billboard -/// - -@use "../../../Core/Global/Getters" as *; -@use "../../../Core/Global/Options" as *; -@use "../../../Core/Global/Sass" as *; -@use "../../../Core/Global/Mixins" as *; -@use "../../../Core/Theme/Getters" as *; -@use "../../../Core/Theme/Setters" as *; - -@if enabled('components', 'billboard') { - .#{class('billboard', 'name')} { - @include set-style(theme('color', 'background'), theme('color', 'text')) { - display : flex; - flex-direction : row; - justify-content: space-between; - align-items : center; - padding : components('billboard', 'padding'); - border-color : components('billboard', 'border-color'); - text-wrap : components('billboard', 'text-wrap'); - @include border(); - }; - /// - /// STYLES - /// - @if features('components', 'billboard', 'styles') { - @each $style-name, $bg-color in components('billboard', 'styles') { - @include set-style($bg-color, white, $style-name) { - border-color: darken($bg-color, 4.5%); - }; - } - } - /// - /// SIZES - /// - @if features('components', 'billboard', 'sizes') { - @each $size-name, $padding, $font-size in components('billboard', 'sizes') { - @include set-size($font-size, $padding, $size-name) { - .#{class('billboard', 'body')} { - padding: $padding; - } - p { - font-size: $font-size; - } - }; - } - } - .#{class('billboard', 'media')} { - flex: 0 0 auto; - } - .#{class('billboard', 'body')} { - padding: components('billboard', 'body', 'padding'); - flex : 1 1 auto; - display : flex; - justify-content: center; - flex-direction : column; - } - /// - /// COVER - /// - @if features('components', 'billboard', 'cover') { - &.#{class('billboard', 'cover')} { - min-height : 100vh; - max-height : 100%; - min-width : 100%; - border : 0; - background-size : cover; - background-position: center center; - background-repeat : no-repeat; - } - } - } - /// - /// - /// - @include breakpoints(components('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('billboard', 'name')} { - padding: components('billboard', 'responsive', 'padding'); - flex-direction: column; - .#{class('billboard', 'media')} { - img { - width: components('billboard', 'responsive', 'img-width'); - } - } - .#{class('billboard', 'body')} { - padding: components('billboard', 'responsive', 'padding'); - } - /// - /// SIZES - /// - @if features('components', 'billboard', 'sizes') { - @each $size, $padding, $font-size in components('billboard', 'responsive', 'sizes') { - &.#{$size} { - padding: $padding; - .#{class('billboard', 'body')} { - padding: $padding; - } - p { - font-size: $font-size; - } - } - } - } - } - } -} \ No newline at end of file From fd2a3807d71e52a8727e8d757ba348c723a06698 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 31 Oct 2024 08:17:00 +0300 Subject: [PATCH 059/154] b158 --- src/Modules/Components/Badge/Badge.scss | 3 +- src/Modules/Components/index.scss | 1 - src/options.scss | 85 ++++--------------------- src/themes.scss | 2 +- 4 files changed, 15 insertions(+), 76 deletions(-) diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index 70fc4cfe..b38a1f8e 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -22,7 +22,8 @@ border : components('badge', 'border'); border-radius : components('badge', 'border-radius'); }; - @include set-size(1em, 1px 6px); + // default badge size + @include set-size(components('badge', 'font-size'), components('badge', 'padding')); /// /// STYLES /// diff --git a/src/Modules/Components/index.scss b/src/Modules/Components/index.scss index 2d3c3f63..482799aa 100644 --- a/src/Modules/Components/index.scss +++ b/src/Modules/Components/index.scss @@ -5,7 +5,6 @@ @forward "Alert/Alert"; @forward "Badge/Badge"; -@forward "Billboard/Billboard"; @forward "Breadcrumb/Breadcrumb"; @forward "Caption/Caption"; @forward "Card/Card"; diff --git a/src/options.scss b/src/options.scss index 74cafef1..81d77c4d 100755 --- a/src/options.scss +++ b/src/options.scss @@ -29,7 +29,7 @@ $options: ( 'margin' : 0 0 8px, 'width' : 100%, 'font-size' : 1.015em, - 'font-weight' : bold, + 'font-weight' : 400, 'border-radius': theme('border', 'radius'), 'icon': ( 'vertical-align': middle @@ -45,13 +45,13 @@ $options: ( 'sizes': ( ( "small", // size name (class) - .749rem, // font-size - .4rem // padding + .885rem, // font-size + .5rem 1rem // padding ), ( "large", // size name (class) - 1.1rem, // font-size - .8rem // padding + 1.14rem, // font-size + .7rem 1rem // padding ) ) ), @@ -68,9 +68,11 @@ $options: ( 'settings': ( 'border-radius': 500px, 'white-space' : nowrap, - 'font-weight' : bold, + 'font-size' : .935rem, + 'font-weight' : 400, + 'padding' : 0 .45rem, 'border' : theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%), - 'styles': ( + 'styles' : ( // style name (class), theme variable "primary": theme('color', 'primary'), "success": theme('color', 'success'), @@ -79,78 +81,15 @@ $options: ( "dark" : theme('color', 'dark'), ), 'sizes': ( - ( - "tiny", // size name (class) - .659rem!important, // font-size - 0 4px!important // padding - ), ( "small", // size name (class) .749rem!important, // font-size - 1px 4px!important // padding + 0 .45rem!important // padding ), ( "large", // size name (class) 1.1rem!important, // font-size - 2px 8px!important // padding - ) - ) - ) - ), - 'billboard': ( - 'enabled': true, - 'features': ( - 'styles': true, - 'sizes' : true, - 'cover' : true - ), - 'classnames': ( - 'name' : 'billboard', - 'media': 'media', - 'body' : 'body', - 'cover': 'cover' - ), - 'settings': ( - 'padding' : 4.5rem 2.5rem, - 'border-color': darken(theme('color', 'background'), 4.5%), - 'text-wrap' : balance, - 'body' : ( - 'padding': 4.5rem 2.5rem - ), - 'styles': ( - // style name (class), theme variable - "primary": theme('color', 'primary'), - "success": theme('color', 'success'), - "warning": theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), - ), - 'sizes': ( - ( - "small", // size name (class) - 2.5rem 1.5rem, // padding - 1em // font-size - ), - ( - "large", // size name (class) - 7.5rem 4rem, // padding - 1.6em // font-size - ) - ), - 'responsive': ( - 'padding' : 2.5rem 1rem, - 'img-width': 100%, - 'sizes': ( - ( - "small", // size name (class) - 1rem, // padding - 1em // font-size - ), - ( - "large", // size name (class) - 1rem, // padding - 1.358em // font-size - ) + 0 .45rem!important // padding ) ) ) @@ -299,7 +238,7 @@ $options: ( ), 'settings': ( 'font-size' : .9195em, - 'font-weight' : bold, + 'font-weight' : 400, 'line-height' : 1.2, 'padding' : 0.28rem 0.9rem, 'margin' : .1rem .05rem, diff --git a/src/themes.scss b/src/themes.scss index 64c7f418..503e5fa5 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -27,7 +27,7 @@ $themes: ( 'background': white, 'primary' : #3266ec, 'success' : #4f971c, - 'warning' : #c68811, + 'warning' : #c68916, 'error' : #d02645, 'dark' : #393b42 ), From 5f792032cdc2b49824212d1ad73d73d3f9a662ca Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 3 Nov 2024 09:44:45 +0300 Subject: [PATCH 060/154] b159 --- src/Core/Global/Mixins.scss | 19 ------- src/Modules/Components/Card/Card.scss | 5 +- src/Modules/Components/Label/Label.scss | 6 +- src/Modules/Components/Tabnav/Tabnav.scss | 3 +- src/Modules/Elements/Base/Base.scss | 1 - src/Modules/Elements/Button/Button.scss | 29 ---------- src/Modules/Elements/Button/mixins.scss | 67 ----------------------- src/Modules/Utilities/index.scss | 1 + src/options.scss | 33 ++++++----- src/themes.scss | 10 +--- 10 files changed, 26 insertions(+), 148 deletions(-) diff --git a/src/Core/Global/Mixins.scss b/src/Core/Global/Mixins.scss index d92a304b..29ebac58 100644 --- a/src/Core/Global/Mixins.scss +++ b/src/Core/Global/Mixins.scss @@ -19,25 +19,6 @@ } } -/// -/// Gradient -/// -/// @param {Color} $color -/// @param {String} $direction -/// @param {Percentage} $brightness -/// -@mixin set-gradient( - $color: null, - $direction: to top, - $brightness: 21% -) { - background: linear-gradient( - $direction, - $color 0%, - adjust($color, $lightness: $brightness) 100% - ); -} - /// /// Media Group Specs /// @param {String} $item-name diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index ff3e8723..a3e98c12 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -68,8 +68,9 @@ padding: components('card', 'padding'); } >.#{class('card', 'description')} { - flex: 1 1 auto; - color: components('card', 'description', 'color'); + flex : 1 1 auto; + color : components('card', 'description', 'color'); + font-size: components('card', 'description', 'font-size'); } /// /// MEDIA diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index bc90a99c..1b1693c7 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -17,11 +17,9 @@ font-weight : components('label', 'font-weight'); line-height : components('label', 'line-height'); margin : components('label', 'margin'); - border-radius : components('label', 'border-radius'); text-decoration: components('label', 'text-decoration'); - border-color : components('label', 'border-color'); - @include border(); - @include shadow(0, .155em, 0, 0, rgba(0, 0, 0, 0.095)); + box-shadow : components('label', 'box-shadow'); + border : components('label', 'border'); @include set-size(components('label', 'font-size'), components('label', 'padding')); >i { vertical-align: text-top; diff --git a/src/Modules/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss index 0ff8e5a1..2888aa55 100755 --- a/src/Modules/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -63,12 +63,11 @@ /// SIZES /// @if features('components', 'tabnav', 'sizes') { - @each $size-name, $font-size, $padding, $weight in components('tabnav', 'sizes') { + @each $size-name, $font-size, $padding in components('tabnav', 'sizes') { &.#{$size-name} { @include mixins.tab-buttons() { font-size : $font-size; padding : $padding; - font-weight: $weight; } } } diff --git a/src/Modules/Elements/Base/Base.scss b/src/Modules/Elements/Base/Base.scss index 3b1d2bc3..f3dafbb8 100644 --- a/src/Modules/Elements/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -98,7 +98,6 @@ a { } p { margin : 0 0 1em; - font-size: 1rem; text-wrap: pretty; } b, strong { diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index 199c6d9f..c38475fd 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -50,35 +50,6 @@ &:focus { background: elements('button', 'background'); } - /// - /// GRADIENT - /// - @if features('elements', 'button', 'gradient') { - &.#{class('button', 'gradient')} { - z-index : 1; - position: relative; - @include set-gradient(elements('button', 'background')); - &:before { - position : absolute; - content : ""; - width : 100%; - height : 100%; - top : 0; - left : 0; - opacity : 0; - transition: opacity 0.25s; - z-index : -1; - @include set-gradient(elements('button', 'background'), to bottom, 23%); - } - &:hover::before { - opacity: 1; - } - &:active::before, - &:focus::before { - @include set-gradient(elements('button', 'background'), to bottom, 27%); - } - } - } &.#{class('button', 'active')} { color : elements('button', 'color'); background : color.$grey; diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index daedac8b..303eb4ce 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -299,73 +299,6 @@ background: lighten($bg-color, 12.5%); } } - - /// - /// GRADIENT - /// Gradient is not for outlined style - /// - @if $outlined != true { - @if features('elements', 'button', 'gradient') { - &.#{class('button', 'gradient')} { - background: $bg-color; - z-index : 1; - position : relative; - @include set-gradient($bg-color, to top); - &:before { - content : ""; - position : absolute; - top : 0; - left : 0; - width : 100%; - height : 100%; - @include set-gradient($bg-color, to bottom, 23%); - opacity : 0; - transition: opacity 0.25s; - z-index : -1; - } - &:hover::before { - opacity: 1; - } - &:active::before, - &:focus::before { - background: $bg-color; - @include set-gradient($bg-color, to bottom, 27%); - } - } - /// Gradient Left-To-Right - &.#{class('button', 'gradient')}#{'-ltr'} { - background: linear-gradient(125deg, lighten($bg-color, 21%), darken($bg-color, 5%)); - } - /// Gradient Right-To-Left - &.#{class('button', 'gradient')}#{'-rtl'} { - background: linear-gradient(-125deg, lighten($bg-color, 21%), darken($bg-color, 5%)); - } - &.#{class('button', 'gradient')}#{'-ltr'}, - &.#{class('button', 'gradient')}#{'-rtl'} { - z-index: 1; - position: relative; - &:before { - position : absolute; - content : ""; - width : 100%; - height : 100%; - top : 0; - left : 0; - opacity : 0; - transition: opacity 0.25s; - z-index : -1; - background: linear-gradient(0deg, lighten($bg-color, 21%), darken($bg-color, 2%)); - } - &:hover::before { - opacity: 1; - } - &:active::before, - &:focus::before { - background: linear-gradient(0deg, lighten($bg-color, 25%), $bg-color); - } - } - } - } @content; } diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index d4fb7580..a833b489 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -208,6 +208,7 @@ $helpers: ( /// to be displayed when pointing over an element. /// /// @example cursor-grap + /// @example cursor-zoom-in /// 'cursor': ( 'property' : 'cursor', // css property name (don't change it !) diff --git a/src/options.scss b/src/options.scss index 81d77c4d..513cbab5 100755 --- a/src/options.scss +++ b/src/options.scss @@ -7,6 +7,7 @@ /// @use "Core/Theme/Getters" as *; +@use "Core/Theme/Setters" as *; @use "Core/Global/Sass" as *; @use "Core/Global/Colors" as color; @@ -29,7 +30,7 @@ $options: ( 'margin' : 0 0 8px, 'width' : 100%, 'font-size' : 1.015em, - 'font-weight' : 400, + 'font-weight' : normal, 'border-radius': theme('border', 'radius'), 'icon': ( 'vertical-align': middle @@ -69,7 +70,7 @@ $options: ( 'border-radius': 500px, 'white-space' : nowrap, 'font-size' : .935rem, - 'font-weight' : 400, + 'font-weight' : normal, 'padding' : 0 .45rem, 'border' : theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%), 'styles' : ( @@ -148,7 +149,7 @@ $options: ( 'margin' : 1.3em .2rem, 'font-size' : 1.95rem, 'font-weight': bold, - 'line-height': theme('typography', 'line-height') - .2, + 'line-height': 1.3, 'text-wrap' : balance, 'media' : ( 'margin': .559em, @@ -202,7 +203,8 @@ $options: ( 'line-height': initial ), 'description': ( - 'color': theme('color', 'text') + 'color' : theme('color', 'text'), + 'font-size': 1rem ), 'group': ( 'margin': .74rem // margin for each card @@ -238,13 +240,13 @@ $options: ( ), 'settings': ( 'font-size' : .9195em, - 'font-weight' : 400, + 'font-weight' : normal, 'line-height' : 1.2, 'padding' : 0.28rem 0.9rem, 'margin' : .1rem .05rem, - 'border-color' : theme('border', 'color'), - 'border-radius' : theme('border', 'radius'), + 'border' : set-border(), // default border 'text-decoration': none, + 'box-shadow' : none, 'styles': ( // style name (class), theme variable "primary": theme('color', 'primary'), @@ -427,19 +429,19 @@ $options: ( ( "mini", // size name (class) 45px, // min-height - .9839em, // button font-size + .905rem, // button font-size .445rem .9rem, // button padding ), ( "small", // size name (class) 65px, // min-height - 1em, // button font-size + .946rem, // button font-size .645rem 1.4rem, // button padding ), ( "large", // size name (class) 95px, // min-height - 1.28em, // button font-size + 1.145rem, // button font-size .645rem 1.4rem, // button padding ) ) @@ -635,7 +637,6 @@ $options: ( "small", // class name .9rem, // font-size .685rem .885rem, // padding - bold // font-weight ), ) ) @@ -740,8 +741,7 @@ $options: ( 'styles' : true, 'sizes' : true, 'outlined': true, - 'dropdown': true, - 'gradient': true + 'dropdown': true ), 'classnames': ( 'name' : 'button', @@ -752,7 +752,6 @@ $options: ( 'inactive' : 'inactive', 'block' : 'block', 'vertical' : 'vertical', - 'gradient' : 'gradient', // dropdown 'dropdown' : 'dropdown', 'dropdown-right' : 'right', @@ -765,7 +764,7 @@ $options: ( 'settings': ( 'font-family' : theme('typography', 'font-family'), 'font-weight' : bold, - 'font-size' : 1.015em, + 'font-size' : 1.055em, 'line-height' : 1, 'width' : min-content, 'padding' : .935rem 1.6rem, @@ -859,7 +858,7 @@ $options: ( 'border-color' : inherit, 'height' : initial, 'padding' : .7rem .5rem, - 'font-size' : 1.088em, + 'font-size' : initial, 'border-width' : theme('border', 'width'), 'border-style' : theme('border', 'style'), 'border-radius' : 0, @@ -1001,7 +1000,7 @@ $options: ( ), 'th': ( 'color' : theme('color', 'text'), - 'font-size' : .925rem, + 'font-size' : inherit, 'font-weight' : bold, 'padding' : .90rem .7rem, 'background-color': transparent diff --git a/src/themes.scss b/src/themes.scss index 503e5fa5..c73c1006 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -17,8 +17,8 @@ $themes: ( 'type' : 'light', // light or dark (required*), 'typography': ( 'font-family': 'Inter Tight', - 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;700&display=swap', // embed/import url - 'font-size' : .945rem, + 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;700&display=swap', // embed/import url + 'font-size' : 1rem, 'font-weight': 400, 'line-height': 1.7 ), @@ -71,13 +71,9 @@ $themes: ( */ ), 'elements': ( - /* 'button': ( - 'features': ( - 'gradient': false - ), + 'font-weight': 500 ) - */ ), 'utilities': ( /* From 045ee1eecfd8d78d4063f41965ecfc18ba7740a6 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 4 Nov 2024 08:19:18 +0300 Subject: [PATCH 061/154] b160 --- src/Modules/Elements/Form/Form.scss | 5 ++++- src/Modules/Utilities/mixins.scss | 6 +++--- src/options.scss | 23 ++++++++++++----------- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index fa1a5d5d..97649e48 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -102,7 +102,7 @@ margin : elements('form', 'label', 'margin'); color : elements('form', 'label', 'color'); font-size : elements('form', 'label', 'font-size'); - font-weight : bold; + font-weight : elements('form', 'label', 'font-weight'); text-transform: none; height : fit-content; } @@ -250,6 +250,9 @@ clip-path: elements('form', 'radio-checkbox', 'radio-clip-path'); } } + &>label { + font-weight: normal; + } } } } diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index b162349a..24ad66c3 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -12,9 +12,9 @@ /// /// Set default helpers /// -/// @param {Array|List} $helper -/// @param {Bool} $two -/// @param {Bool} $three +/// @param {Array|List} $helper : key name in the index.scss file +/// @param {Bool} $two : if two values in the map +/// @param {Bool} $three : if three values in the map /// /// @return mixed /// diff --git a/src/options.scss b/src/options.scss index 513cbab5..aee94dd2 100755 --- a/src/options.scss +++ b/src/options.scss @@ -387,7 +387,7 @@ $options: ( ), 'settings': ( 'min-height' : 80px, - 'font-size' : 1.015em, + 'font-size' : 1rem, 'color' : white, 'background' : theme('color', 'primary'), 'width' : 100%, @@ -429,20 +429,20 @@ $options: ( ( "mini", // size name (class) 45px, // min-height - .905rem, // button font-size + .875rem, // button font-size .445rem .9rem, // button padding ), ( "small", // size name (class) 65px, // min-height - .946rem, // button font-size - .645rem 1.4rem, // button padding + .945rem, // button font-size + .65rem 1.2rem, // button padding ), ( "large", // size name (class) 95px, // min-height - 1.145rem, // button font-size - .645rem 1.4rem, // button padding + 1.08rem, // button font-size + .845rem 1.4rem, // button padding ) ) ) @@ -871,13 +871,14 @@ $options: ( 'item-spacer': 1px ), 'item': ( - 'margin' : .795rem 0, - 'padding': .395rem + 'margin' : .495rem 0, + 'padding': .295rem ), 'label': ( - 'color' : theme('color', 'text'), - 'font-size': .955rem, - 'margin' : 0 + 'color' : theme('color', 'text'), + 'font-size' : .955rem, + 'font-weight': bold, + 'margin' : 0 ), 'radio-checkbox': ( 'color' : theme('color', 'primary'), From 421037578de118ef4d04010cefbef75fa0629532 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 5 Nov 2024 15:38:39 +0300 Subject: [PATCH 062/154] b161 --- src/Modules/Components/Alert/Alert.scss | 15 ++-- .../Components/Breadcrumb/Breadcrumb.scss | 1 + src/Modules/Components/Caption/Caption.scss | 2 - src/Modules/Components/Label/Label.scss | 8 +- src/Modules/Components/List/List.scss | 6 +- src/Modules/Components/Panel/Panel.scss | 4 +- src/Modules/Elements/Base/Base.scss | 3 +- src/Modules/Utilities/index.scss | 1 + src/options.scss | 86 +++++++++++++++---- src/themes.scss | 4 +- 10 files changed, 94 insertions(+), 36 deletions(-) diff --git a/src/Modules/Components/Alert/Alert.scss b/src/Modules/Components/Alert/Alert.scss index 662317c4..8e9ee548 100644 --- a/src/Modules/Components/Alert/Alert.scss +++ b/src/Modules/Components/Alert/Alert.scss @@ -12,17 +12,17 @@ @if enabled('components', 'alert') { .#{class('alert', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { - display : block; + display : components('alert', 'display'); padding : components('alert', 'padding'); margin : components('alert', 'margin'); width : components('alert', 'width'); font-size : components('alert', 'font-size'); font-weight : components('alert', 'font-weight'); + border : components('alert', 'border'); border-radius: components('alert', 'border-radius'); - @include border(); a { - color : theme('color', 'text'); - text-decoration: underline; + color : components('alert', 'href', 'color'); + text-decoration: components('alert', 'href', 'text-decoration'); &:focus,&:hover,&:active,&.#{class('alert', 'active')} { opacity: .75; } @@ -40,9 +40,12 @@ /// STYLES /// @if features('components', 'alert', 'styles') { - @each $style-name, $bg-color in components('alert', 'styles') { - @include set-style($bg-color, white, $style-name) { + @each $style-name, $color, $bg-color in components('alert', 'styles') { + @include set-style($bg-color, $color, $style-name) { border-color: darken($bg-color, 3%); + a { + color: $color; + } }; } } diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index e9f49ce0..e8f35f8a 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -16,6 +16,7 @@ a.#{class('breadcrumb', 'item')}, .#{class('breadcrumb', 'item')} { text-decoration: none; + color : components('breadcrumb', 'color'); font-size : components('breadcrumb', 'font-size'); font-weight : components('breadcrumb', 'font-weight'); &:focus,&:hover,&:active,&.active { diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index 419565b1..26118c56 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -21,8 +21,6 @@ >img, >i { margin-right: components('caption', 'media', 'margin'); - } - >i { font-size: components('caption', 'font-size') * 1.4; } &.#{class('caption', 'divided')} { diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index 1b1693c7..2271800c 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -13,7 +13,7 @@ a.#{class('label', 'name')}, .#{class('label', 'name')} { @include set-style(theme('color', 'background'), theme('color', 'text')) { - display : inline-block; + display : components('label', 'display'); font-weight : components('label', 'font-weight'); line-height : components('label', 'line-height'); margin : components('label', 'margin'); @@ -22,15 +22,15 @@ border : components('label', 'border'); @include set-size(components('label', 'font-size'), components('label', 'padding')); >i { - vertical-align: text-top; + vertical-align: components('label', 'icon', 'vertical-align'); } }; /// /// STYLES /// @if features('components', 'label', 'styles') { - @each $style-name, $bg-color in components('label', 'styles') { - @include set-style($bg-color, white, $style-name) { + @each $style-name, $color, $bg-color in components('label', 'styles') { + @include set-style($bg-color, $color, $style-name) { border-color: darken($bg-color, 3%); }; } diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index 67b9628e..230ff268 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -48,8 +48,12 @@ >.#{class('list', 'subtitle')} { font-size : components('list', 'subtitle', 'font-size'); font-weight : components('list', 'subtitle', 'font-weight'); - color : components('list', 'subtitle', 'color'); margin-bottom: components('list', 'subtitle', 'margin-bottom'); + @if theme('type') == 'light' { + color: darken(color.$grey, 20%); + } @else if theme('type') == 'dark' { + color: lighten(color.$grey, 20%); + } } } >.#{class('list', 'actions')} { diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index abb58044..1cc25244 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -88,8 +88,8 @@ } } &>.#{class('panel', 'bottom')} { - min-height: 50px; - border-top: set-border(); + min-height: components('panel', 'bottom', 'min-height'); + border-top: components('panel', 'bottom', 'border-top'); padding : components('panel', 'bottom', 'padding'); } /// diff --git a/src/Modules/Elements/Base/Base.scss b/src/Modules/Elements/Base/Base.scss index f3dafbb8..23ac0e1c 100644 --- a/src/Modules/Elements/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -59,9 +59,10 @@ html, body { color : theme('color', 'text'); } a { - color : theme('color', 'text'); outline : none; text-decoration: none; + cursor : pointer; + color : theme('color', 'primary'); &:focus, &:hover { color : theme('color', 'primary'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index a833b489..85204543 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -922,6 +922,7 @@ $helpers: ( /// with a lower stack order. /// /// @example z-100 + /// @example z--1 (-1) /// 'z-index': ( 'property' : 'z-index', // css property name (don't change it !) diff --git a/src/options.scss b/src/options.scss index aee94dd2..e9738df7 100755 --- a/src/options.scss +++ b/src/options.scss @@ -26,22 +26,47 @@ $options: ( 'active': 'active' ), 'settings': ( + 'display' : block, 'padding' : .6rem 1rem, 'margin' : 0 0 8px, 'width' : 100%, 'font-size' : 1.015em, 'font-weight' : normal, + 'border' : set-border(), // default border 'border-radius': theme('border', 'radius'), + 'href' : ( + 'color' : theme('color', 'text'), + 'text-decoration': underline + ), 'icon': ( 'vertical-align': middle ), 'styles': ( - // style name (class), theme variable - "primary": theme('color', 'primary'), - "success": theme('color', 'success'), - "warning": theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), + ( + "primary", // class name + white, // text color + theme('color', 'primary') // bg-color + ), + ( + "success", // class name + white, // text color + theme('color', 'success') // bg-color + ), + ( + "warning", // class name + white, // text color + theme('color', 'warning') // bg-color + ), + ( + "error", // class name + white, // text color + theme('color', 'error') // bg-color + ), + ( + "dark", // class name + white, // text color + theme('color', 'dark') // bg-color + ) ), 'sizes': ( ( @@ -72,7 +97,7 @@ $options: ( 'font-size' : .935rem, 'font-weight' : normal, 'padding' : 0 .45rem, - 'border' : theme('border', 'width') theme('border', 'style') darken(color.$grey, 6.5%), + 'border' : set-border(), // default border 'styles' : ( // style name (class), theme variable "primary": theme('color', 'primary'), @@ -109,6 +134,7 @@ $options: ( 'font-size' : 1rem, 'font-weight' : normal, 'active-weight' : bold, + 'color' : theme('color', 'text'), 'active-color' : theme('color', 'primary'), 'seperator' : "\276D", // HTML Symbols 'padding' : .3em, // seperator padding @@ -195,7 +221,7 @@ $options: ( 'width' : 240px, // for only a single card 'height' : 100%, 'padding' : 1rem, - 'border' : theme('border', 'width') theme('border', 'style') theme('border', 'color'), + 'border' : set-border(), // default border 'border-radius' : theme('border', 'radius'), 'background-color': theme('color', 'background'), 'title' : ( @@ -239,6 +265,7 @@ $options: ( 'name': 'label' ), 'settings': ( + 'display' : inline-block, 'font-size' : .9195em, 'font-weight' : normal, 'line-height' : 1.2, @@ -247,13 +274,35 @@ $options: ( 'border' : set-border(), // default border 'text-decoration': none, 'box-shadow' : none, + 'icon': ( + 'vertical-align': middle + ), 'styles': ( - // style name (class), theme variable - "primary": theme('color', 'primary'), - "success": theme('color', 'success'), - "warning": theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), + ( + "primary", // class name + white, // text color + theme('color', 'primary') // bg-color + ), + ( + "success", // class name + white, // text color + theme('color', 'success') // bg-color + ), + ( + "warning", // class name + white, // text color + theme('color', 'warning') // bg-color + ), + ( + "error", // class name + white, // text color + theme('color', 'error') // bg-color + ), + ( + "dark", // class name + white, // text color + theme('color', 'dark') // bg-color + ) ), 'sizes': ( ( @@ -308,7 +357,6 @@ $options: ( 'line-height': 1 ), 'subtitle': ( - 'color' : theme('color', 'primary'), 'font-size' : .889em, 'font-weight' : theme('typography', 'font-weight'), 'margin-bottom': 7px @@ -468,7 +516,7 @@ $options: ( ), 'settings': ( 'margin' : 1rem 0, - 'border' : theme('border', 'width') theme('border', 'style') theme('border', 'color'), + 'border' : set-border(), // default border 'border-radius' : theme('border', 'radius'), 'background-color': theme('color', 'background'), 'header' : ( @@ -490,7 +538,9 @@ $options: ( 'padding': .85rem ), 'bottom': ( - 'padding': .85rem + 'min-height': 3.125rem, + 'border-top': set-border(), // default border + 'padding' : .85rem ), 'media': ( 'margin-bottom': 32px @@ -771,7 +821,7 @@ $options: ( 'transition' : .2s, 'color' : theme('color', 'text'), 'background' : theme('color', 'background'), - 'border' : theme('border', 'width') theme('border', 'style') theme('border', 'color'), + 'border' : set-border(), // default border 'border-radius': theme('border', 'radius'), 'icon' : ( 'font-size': 1.12rem diff --git a/src/themes.scss b/src/themes.scss index c73c1006..a08415cf 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -10,7 +10,7 @@ $themes: ( // - // 01. Default Theme + // 01. Default Theme (beta) // default: ( 'name' : 'Default Theme', @@ -85,7 +85,7 @@ $themes: ( ////////////////////////////////////////////////////////// ), // - // 02. Dark Theme + // 02. Dark Theme (pre-alpha) // dark: ( 'name' : 'Dark Theme', From ec07e29150d6d6a880f3ebfda33ea34f2518ae50 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 6 Nov 2024 10:06:37 +0300 Subject: [PATCH 063/154] b162 --- .../Components/Breadcrumb/Breadcrumb.scss | 1 - src/Modules/Components/Navbar/Navbar.scss | 2 +- src/Modules/Elements/Base/Base.scss | 102 +++++++++--------- src/options.scss | 80 +++++++++++++- 4 files changed, 129 insertions(+), 56 deletions(-) diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index e8f35f8a..93168510 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -44,7 +44,6 @@ /// SIZES /// @if features('components', 'breadcrumb', 'sizes') { - // size, font-size, seperator-padding, seperator-size @each $size, $font-size, $seperator-padding, $seperator-size, $valign in components('breadcrumb', 'sizes') { &.#{$size} { .#{class('breadcrumb', 'item')} { diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 9936614d..25c85478 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -25,7 +25,7 @@ // grid container .#{class('grid', 'container')} { display: flex; - width : elements('grid', 'container', 'width'); // options->grid + width : elements('grid', 'container', 'width'); } // navbar brand .#{class('navbar', 'brand')} { diff --git a/src/Modules/Elements/Base/Base.scss b/src/Modules/Elements/Base/Base.scss index 23ac0e1c..6a1f35ea 100644 --- a/src/Modules/Elements/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -20,10 +20,10 @@ * { margin : 0; padding : 0; - -webkit-font-smoothing : antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering : optimizeLegibility; text-shadow : 1px 1px 1px rgba(0,0,0,0.004) !important; + text-rendering : optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing : antialiased; } html { box-sizing : border-box; @@ -51,44 +51,44 @@ html, body { -webkit-font-smoothing : antialiased; } ::selection { - color : white; - background-color: theme('color', 'primary'); + color : elements('base', 'selection', 'color'); + background-color: elements('base', 'selection', 'background-color'); } ::placeholder { - opacity: .5; - color : theme('color', 'text'); + opacity: elements('typography', 'placeholder', 'opacity'); + color : elements('typography', 'placeholder', 'color'); } a { + color : elements('typography', 'href', 'color'); + cursor : elements('typography', 'href', 'cursor'); outline : none; - text-decoration: none; - cursor : pointer; - color : theme('color', 'primary'); + text-decoration: elements('typography', 'href', 'text-decoration'); &:focus, &:hover { - color : theme('color', 'primary'); - text-decoration: underline; + color : elements('typography', 'href', 'hover-color'); + text-decoration: elements('typography', 'href', 'hover-decoration'); } } /// Headers @each $header, $font-size, $responsive-size in elements('typography', 'headers') { #{$header} { - margin-top : 0; - color : inherit; - line-height : 2; - margin-bottom: 1em; - overflow-wrap: break-word; - text-wrap : balance; + margin-top : elements('typography', 'header', 'margin-top'); + color : elements('typography', 'header', 'color'); + line-height : elements('typography', 'header', 'line-height'); + margin-bottom: elements('typography', 'header', 'margin-bottom'); + overflow-wrap: elements('typography', 'header', 'overflow-wrap'); + text-wrap : elements('typography', 'header', 'text-wrap'); } #{$header}, .#{$header} { font-size : $font-size; font-weight: bold; } - #{$header}.bordered, - .#{$header}.bordered { - border-width : 0 0 theme('border', 'width') 0 !important; - padding-bottom: 10px; - margin-bottom : 20px; + #{$header}.divided, + .#{$header}.divided { + border-width : elements('typography', 'divided-header', 'border-width'); + padding-bottom: elements('typography', 'divided-header', 'padding-bottom'); + margin-bottom : elements('typography', 'divided-header', 'margin-bottom'); } @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { #{$header}, @@ -98,8 +98,8 @@ a { } } p { - margin : 0 0 1em; - text-wrap: pretty; + margin : elements('typography', 'paragraph', 'margin'); + text-wrap: elements('typography', 'paragraph', 'text-wrap'); } b, strong { font-weight: bolder; @@ -108,40 +108,40 @@ a, ins, u { text-decoration-skip: ink edges; } abbr[title] { - border-bottom : 1px dotted; - cursor : help; - text-decoration: none; + border-bottom : elements('typography', 'abbreviation', 'border-bottom'); + cursor : elements('typography', 'abbreviation', 'cursor'); + text-decoration: elements('typography', 'abbreviation', 'text-decoration'); } blockquote { - border-left: .1rem dotted theme('color', 'dark'); - margin-left: 0; - padding : .4rem .8rem; - font-style : italic; - color : theme('color', 'text'); + border-left: elements('typography', 'blockquote', 'border-left'); + margin-left: elements('typography', 'blockquote', 'margin-left'); + padding : elements('typography', 'blockquote', 'padding'); + font-style : elements('typography', 'blockquote', 'font-style'); + color : elements('typography', 'blockquote', 'color'); } small { - font-size: 80%; + font-size: elements('typography', 'small', 'font-size'); } sub, sup { - font-size : 75%; - line-height : 0; - position : relative; - vertical-align: baseline; + font-size : elements('typography', 'superscript', 'font-size'); + line-height : elements('typography', 'superscript', 'line-height'); + position : elements('typography', 'superscript', 'position'); + vertical-align: elements('typography', 'superscript', 'vertical-align'); } sub { - bottom: -0.25em; + bottom: elements('typography', 'superscript', 'bottom'); } sup { - top: -0.5em; + top: elements('typography', 'superscript', 'top'); } hr { - border : 0; - border-top: 0.1rem solid theme('border', 'color'); - margin : 2.0rem 0; - box-sizing: content-box; - overflow : visible; + border : elements('base', 'horizontal-rule', 'border'); + border-top: elements('base', 'horizontal-rule', 'border-top'); + margin : elements('base', 'horizontal-rule', 'margin'); + box-sizing: elements('base', 'horizontal-rule', 'box-sizing'); + overflow : elements('base', 'horizontal-rule', 'overflow'); } /* List */ ul, ol { @@ -173,12 +173,12 @@ canvas, embed, object, video { - max-width : 100%; - height : auto; - vertical-align : middle; - font-style : italic; - background-repeat: no-repeat; - background-size : cover; + max-width : elements('base', 'embedded', 'max-width'); + height : elements('base', 'embedded', 'height'); + vertical-align : elements('base', 'embedded', 'vertical-align'); + font-style : elements('base', 'embedded', 'font-style'); + background-repeat: elements('base', 'embedded', 'background-repeat'); + background-size : elements('base', 'embedded', 'background-size'); } img { border-style: none; diff --git a/src/options.scss b/src/options.scss index e9738df7..a1d3bba8 100755 --- a/src/options.scss +++ b/src/options.scss @@ -386,7 +386,7 @@ $options: ( 'border-radius': 0, 'background' : lighten(theme('color', 'background'), 2.5%), 'title': ( - 'font-size' : 1.25em, + 'font-size' : 1.065rem, 'font-weight' : bold, 'color' : theme('color', 'text'), 'min-height' : 2rem, @@ -527,12 +527,12 @@ $options: ( 'font-weight': bold ), 'headline': ( - 'font-size' : 1.39em, + 'font-size' : 1.35rem, 'line-height' : 1.5, 'margin-bottom' : 1.275rem, 'color' : theme('color', 'text'), 'letter-spacing': -.0158em, - 'text-wrap' : balance + 'text-wrap' : auto ), 'content': ( 'padding': .85rem @@ -783,6 +783,29 @@ $options: ( /// /// ELEMENTS /// + 'base': ( + 'settings': ( + 'selection': ( + 'color' : white, + 'background-color': theme('color', 'primary') + ), + 'horizontal-rule': ( + 'border' : 0, + 'border-top': 0.1rem solid theme('border', 'color'), + 'margin' : 2.0rem 0, + 'box-sizing': content-box, + 'overflow' : visible + ), + 'embedded': ( + 'max-width' : 100%, + 'height' : auto, + 'vertical-align' : middle, + 'font-style' : italic, + 'background-repeat': no-repeat, + 'background-size' : cover + ) + ) + ), 'button': ( 'enabled': true, 'features': ( @@ -1069,6 +1092,57 @@ $options: ( ), 'typography': ( 'settings': ( + 'paragraph': ( + 'margin' : 0 0 1em, + 'text-wrap': pretty + ), + 'blockquote': ( + 'border-left': .1rem dotted theme('color', 'dark'), + 'margin-left': 0, + 'padding' : .4rem .8rem, + 'font-style' : italic, + 'color' : theme('color', 'text') + ), + 'href': ( + 'color' : theme('color', 'primary'), + 'hover-color' : theme('color', 'primary'), + 'text-decoration' : none, + 'hover-decoration': underline, + 'cursor' : pointer + ), + 'placeholder': ( + 'opacity': .5, + 'color' : theme('color', 'text') + ), + 'abbreviation': ( + 'border-bottom' : 1px dotted, + 'cursor' : help, + 'text-decoration': none + ), + 'superscript': ( + 'font-size' : 75%, + 'line-height' : 0, + 'position' : relative, + 'vertical-align': baseline, + 'bottom' : -0.25em, + 'top' : -0.5em + ), + 'small': ( + 'font-size': 80% + ), + 'header': ( + 'margin-top' : 0, + 'color' : inherit, + 'line-height' : 2, + 'margin-bottom': 1em, + 'overflow-wrap': break-word, + 'text-wrap' : balance + ), + 'divided-header': ( + 'border-width' : 0 0 theme('border', 'width') 0 !important, + 'padding-bottom': 10px, + 'margin-bottom' : 20px + ), 'headers': ( ( "h1", // class name From 9d7e0a3307238c2e03b1b0eaf547d70bed4473f6 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 10 Nov 2024 20:50:31 +0300 Subject: [PATCH 064/154] b163 --- src/Modules/Components/Tabnav/Tabnav.scss | 12 ++++++------ src/options.scss | 15 ++++++++------- src/themes.scss | 3 +++ 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/Modules/Components/Tabnav/Tabnav.scss b/src/Modules/Components/Tabnav/Tabnav.scss index 2888aa55..39e3f650 100755 --- a/src/Modules/Components/Tabnav/Tabnav.scss +++ b/src/Modules/Components/Tabnav/Tabnav.scss @@ -18,7 +18,7 @@ display : flex; flex-wrap : wrap; align-items : flex-end; - border-bottom: components('tabnav', 'border-width') theme('border', 'style') theme('border', 'color'); + border-bottom: components('tabnav', 'thickness') theme('border', 'style') theme('border', 'color'); padding : 0; &>.#{class('button', 'group')} { box-shadow : none; @@ -35,8 +35,8 @@ font-weight : components('tabnav', 'font-weight'); color : components('tabnav', 'color'); padding : components('tabnav', 'padding'); - border-bottom: components('tabnav', 'border-width') solid transparent; - margin-bottom: -#{components('tabnav', 'border-width')}; + border-bottom: components('tabnav', 'border-bottom') solid transparent; + margin-bottom: -#{components('tabnav', 'thickness')}; &:hover { color: theme('color', 'text'); @if theme('type') == 'light' { @@ -76,10 +76,10 @@ @if features('components', 'tabnav', 'bottom') { &.#{class('tabnav', 'bottom')} { border-bottom: 0; - border-top : components('tabnav', 'border-width') theme('border', 'style') color.$grey; + border-top : components('tabnav', 'thickness') theme('border', 'style') color.$grey; @include mixins.tab-buttons() { - margin-top : -#{components('tabnav', 'border-width')}; - border-top : components('tabnav', 'border-width') solid transparent; + margin-top : -#{components('tabnav', 'thickness')}; + border-top : components('tabnav', 'border-bottom') solid transparent; border-bottom: 0; margin-bottom: 0; &:hover { diff --git a/src/options.scss b/src/options.scss index a1d3bba8..74eb4239 100755 --- a/src/options.scss +++ b/src/options.scss @@ -658,13 +658,14 @@ $options: ( 'bottom' : 'bottom' ), 'settings': ( - 'color' : theme('color', 'text'), - 'border-width': 2px, - 'font-size' : 1.025em, - 'font-weight' : bold, - 'line-height' : unset, - 'padding' : .935rem 1.4rem, - 'styles' : ( + 'color' : theme('color', 'text'), + 'font-size' : 1.025em, + 'font-weight' : bold, + 'line-height' : unset, + 'padding' : .935rem 1.4rem, + 'thickness' : 2px, // tab bar thickness + 'border-bottom': 2px, // border-bottom-width of tab button + 'styles' : ( ( 'success', // style name (class) theme('color', 'success') // color diff --git a/src/themes.scss b/src/themes.scss index a08415cf..22d8fc18 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -59,6 +59,9 @@ $themes: ( */ ), 'components': ( + 'tabnav': ( + 'border-bottom': 4px + ), /* 'navbar': ( 'brand': ( From 044ff9ca163481754ecaaf3e0b7b1a7c0ecc696e Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 12 Nov 2024 13:59:51 +0300 Subject: [PATCH 065/154] b164 --- src/Modules/Components/List/List.scss | 2 +- src/Modules/Utilities/index.scss | 2 ++ src/options.scss | 4 ++-- src/themes.scss | 6 +++--- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index 230ff268..adba986a 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -43,7 +43,7 @@ >.#{class('list', 'title')} { font-size : components('list', 'title', 'font-size'); font-weight: components('list', 'title', 'font-weight'); - line-height: components('list', 'body', 'line-height'); + line-height: components('list', 'title', 'line-height'); } >.#{class('list', 'subtitle')} { font-size : components('list', 'subtitle', 'font-size'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 85204543..310f96f7 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -182,6 +182,7 @@ $helpers: ( /// The color property specifies the color of text. /// /// @example color-success + /// @example color-text /// 'color': ( 'property' : 'color', // css property name (don't change it !) @@ -194,6 +195,7 @@ $helpers: ( ("grey", color.$grey), ("white", white), ("black", black), + ("text", theme('color', 'text')), ("primary", theme('color', 'primary')), ("success", theme('color', 'success')), ("warning", theme('color', 'warning')), diff --git a/src/options.scss b/src/options.scss index 74eb4239..24ebec7f 100755 --- a/src/options.scss +++ b/src/options.scss @@ -352,9 +352,9 @@ $options: ( 'text-align' : left ), 'title': ( - 'font-size' : 1.28rem, + 'font-size' : 1.15rem, 'font-weight': bold, - 'line-height': 1 + 'line-height': 1.4 ), 'subtitle': ( 'font-size' : .889em, diff --git a/src/themes.scss b/src/themes.scss index 22d8fc18..c9950c38 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -26,9 +26,9 @@ $themes: ( 'text' : #202123, 'background': white, 'primary' : #3266ec, - 'success' : #4f971c, - 'warning' : #c68916, - 'error' : #d02645, + 'success' : #0e9716, + 'warning' : #bf890a, + 'error' : #c11c3a, 'dark' : #393b42 ), 'border': ( From 77c52cdb9958b36b2f2be5a37f55fb69bdf572fa Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 12 Nov 2024 17:15:09 +0300 Subject: [PATCH 066/154] b165 --- src/Core/Global/Getters.scss | 4 + src/Core/Global/Options.scss | 4 + src/Modules/Utilities/helpers.scss | 3 +- src/Modules/Utilities/index.scss | 123 +++++++++++++++++-------- src/Modules/Utilities/mixins.scss | 143 ++++++++++++++++------------- src/options.scss | 4 +- src/themes.scss | 8 +- 7 files changed, 181 insertions(+), 108 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index ce90ad59..615c9bbb 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -120,6 +120,10 @@ /// @function utils($node, $key: null) { + @if theme('utilities', $node, $key) != null { + @return theme('utilities', $node, $key); + } + $util: if(map.has-key(helper.$helpers, $node), map.get(helper.$helpers, $node), null); @if ($util != null) and $key { diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 31324e2f..cf8262f6 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -75,6 +75,10 @@ /// @function enabled($node, $module) { + @if theme($node,'enabled') != null { + @return theme($node, 'enabled'); + } + @if theme($node, $module, 'enabled') != null { @return theme($node, $module, 'enabled'); } diff --git a/src/Modules/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss index d670a036..70bd1271 100644 --- a/src/Modules/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -4,6 +4,7 @@ /// @use "../../Core/Global/Getters" as *; +@use "../../Core/Global/Options" as *; @use "mixins" as *; @if enabled('utilities', 'helpers') { @@ -16,7 +17,7 @@ @include set_utils('border-radius'); @include set_utils('border-style'); @include utils_with_specs(utils('border')); - @include set_border_sides(utils('border', 'specs')); + @include set_border_sides(); @include set_utils('color', true); @include color_palette(utils('color')); @include set_utils('cursor'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 310f96f7..0dbc142c 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -16,11 +16,12 @@ $helpers: ( /// @example align-content-center /// 'align-content': ( + 'enabled' : true, // true or false 'property' : 'align-content', // css property name (don't change it !) 'prefix' : 'align-content-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, initial, inherit) ), /// @@ -31,11 +32,12 @@ $helpers: ( /// @example align-items-flex-end /// 'align-items': ( + 'enabled' : true, // true or false 'property' : 'align-items', // css property name (don't change it !) 'prefix' : 'align-items-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (baseline, flex-start, flex-end, center, stretch, initial, inherit) ), /// @@ -48,11 +50,12 @@ $helpers: ( /// @example align-self-flex-end /// 'align-self': ( + 'enabled' : true, // true or false 'property' : 'align-self', // css property name (don't change it !) 'prefix' : 'align-self-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (auto, baseline, flex-start, flex-end, center, stretch, initial, inherit) ), /// @@ -66,11 +69,12 @@ $helpers: ( /// @example bg-primary /// 'background-color': ( + 'enabled' : true, // true or false 'property' : 'background-color', // css property name (don't change it !) 'prefix' : 'bg-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("color", theme('color', 'background')), @@ -94,11 +98,12 @@ $helpers: ( /// @example border-primary /// 'border-color': ( + 'enabled' : true, // true or false 'property' : 'border-color', // css property name (don't change it !) 'prefix' : 'border-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("grey", color.$grey), @@ -120,11 +125,12 @@ $helpers: ( /// @example radius-4 /// 'border-radius': ( + 'enabled' : true, // true or false 'property' : 'border-radius', // css property name (don't change it !) 'prefix' : 'radius-', // prefix of class name 'specificity': !important, // or null 'type' : px, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (2,4,8,10,12,14,16,500), ), /// @@ -136,11 +142,12 @@ $helpers: ( /// @example border-dotted /// 'border-style': ( + 'enabled' : true, // true or false 'property' : 'border-style', // css property name (don't change it !) 'prefix' : 'border-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (solid, dashed, dotted, double, groove, ridge) ), /// @@ -153,6 +160,7 @@ $helpers: ( /// @example border-right-2 /// 'border':( + 'enabled' : true, // true or false 'property' : 'border', // css property name (don't change it !) 'prefix' : 'border', // prefix of class name 'specificity': !important, // or null @@ -185,11 +193,12 @@ $helpers: ( /// @example color-text /// 'color': ( + 'enabled' : true, // true or false 'property' : 'color', // css property name (don't change it !) 'prefix' : 'color-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("grey", color.$grey), @@ -213,11 +222,12 @@ $helpers: ( /// @example cursor-zoom-in /// 'cursor': ( + 'enabled' : true, // true or false 'property' : 'cursor', // css property name (don't change it !) 'prefix' : 'cursor-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (alias, default, grab, help, move, pointer, wait, zoom-in, zoom-out) ), /// @@ -230,11 +240,12 @@ $helpers: ( /// @example display-inline-block /// 'display': ( + 'enabled' : true, // true or false 'property' : 'display', // css property name (don't change it !) 'prefix' : 'display-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (inline, flex, inline-flex, grid, inline-grid, block, inline-block, table, inline-table, table-row, table-column, table-cell) ), /// @@ -246,11 +257,12 @@ $helpers: ( /// @example filter-gray /// 'filter': ( + 'enabled' : true, // true or false 'property' : 'filter', // css property name (don't change it !) 'prefix' : 'filter-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), property, value ("invert", invert(100%)), @@ -267,11 +279,12 @@ $helpers: ( /// @example flex-direction-column-reverse /// 'flex-direction': ( + 'enabled' : true, // true or false 'property' : 'flex-direction', // css property name (don't change it !) 'prefix' : 'flex-direction-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (row, row-reverse, column, column-reverse, initial, inherit) ), /// @@ -284,11 +297,12 @@ $helpers: ( /// @example grow-1 /// 'flex-grow': ( + 'enabled' : true, // true or false 'property' : 'flex-grow', // css property name (don't change it !) 'prefix' : 'grow-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (1,0) ), /// @@ -301,11 +315,12 @@ $helpers: ( /// @example shrink-1 /// 'flex-shrink': ( + 'enabled' : true, // true or false 'property' : 'flex-shrink', // css property name (don't change it !) 'prefix' : 'shrink-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (1,0) ), /// @@ -318,11 +333,12 @@ $helpers: ( /// @example flex-wrap-reverse /// 'flex-wrap': ( + 'enabled' : true, // true or false 'property' : 'flex-wrap', // css property name (don't change it !) 'prefix' : 'flex-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (wrap, wrap-reverse, nowrap) ), /// @@ -336,11 +352,12 @@ $helpers: ( /// @example flex-initial /// 'flex': ( + 'enabled' : true, // true or false 'property' : 'flex', // css property name (don't change it !) 'prefix' : 'flex-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("1", 1 1 0%), @@ -358,11 +375,12 @@ $helpers: ( /// @example float-right /// 'float': ( + 'enabled' : true, // true or false 'property' : 'float', // css property name (don't change it !) 'prefix' : 'float-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (right, left, none) ), /// @@ -374,11 +392,12 @@ $helpers: ( /// @example text-large /// 'font-size': ( + 'enabled' : true, // true or false 'property' : 'font-size', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("mini", 60%), @@ -399,11 +418,12 @@ $helpers: ( /// @example text-normal /// 'font-style': ( + 'enabled' : true, // true or false 'property' : 'font-style', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (normal,italic) ), /// @@ -416,11 +436,12 @@ $helpers: ( /// @example weight-bolder /// 'font-weight': ( + 'enabled' : true, // true or false 'property' : 'font-weight', // css property name (don't change it !) 'prefix' : 'weight-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (100,200,300,400,500,600,700,800,900,normal,bold,bolder,lighter) ), /// @@ -432,11 +453,12 @@ $helpers: ( /// @example height-max-content /// 'height': ( + 'enabled' : true, // true or false 'property' : 'height', // css property name (don't change it !) 'prefix' : 'height-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("min-content", min-content), @@ -473,11 +495,12 @@ $helpers: ( /// @example bottom-auto /// 'inset': ( + 'enabled' : true, // true or false 'property' : null, // css property name 'prefix' : null, // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name, [values] 'top'(0, auto), @@ -497,11 +520,12 @@ $helpers: ( /// @example justify-content-space-around /// 'justify-content': ( + 'enabled' : true, // true or false 'property' : 'justify-content', // css property name (don't change it !) 'prefix' : 'justify-content-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (baseline, flex-start, flex-end, center, space-between, space-around, initial, inherit) ), /// @@ -514,11 +538,12 @@ $helpers: ( /// @example justify-items-start /// 'justify-items': ( + 'enabled' : true, // true or false 'property' : 'justify-items', // css property name (don't change it !) 'prefix' : 'justify-items-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (stretch, start, left, center, end, right, initial, inherit) ), /// @@ -531,11 +556,12 @@ $helpers: ( /// @example justify-self-first-baseline /// 'justify-self': ( + 'enabled' : true, // true or false 'property' : 'justify-self', // css property name (don't change it !) 'prefix' : 'justify-self-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("auto", auto), @@ -560,11 +586,12 @@ $helpers: ( /// @example line-height-4 /// 'line-height': ( + 'enabled' : true, // true or false 'property' : 'line-height', // css property name (don't change it !) 'prefix' : 'line-height-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (0,1,2,3,4,5) ), /// @@ -578,6 +605,7 @@ $helpers: ( /// @example my-2 / margin top and bottom /// 'margin': ( + 'enabled' : true, // true or false 'property' : 'margin', // css property name (don't change it !) 'prefix' : 'm', // prefix of class name 'specificity': !important, // or null @@ -627,11 +655,12 @@ $helpers: ( /// @example fit-scale-down /// 'object-fit': ( + 'enabled' : true, // true or false 'property' : 'object-fit', // css property name (don't change it !) 'prefix' : 'fit-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (fill, contain, cover, none, scale-down, initial, inherit) ), /// @@ -644,11 +673,12 @@ $helpers: ( /// @example order-4 /// 'order': ( + 'enabled' : true, // true or false 'property' : 'order', // css property name (don't change it !) 'prefix' : 'order-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (1,2,3,4,5) ), /// @@ -661,11 +691,12 @@ $helpers: ( /// @example overflow-x-scroll /// 'overflow': ( + 'enabled' : true, // true or false 'property' : 'overflow', // css property name (don't change it !) 'prefix' : 'overflow-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name, property, value ("auto", overflow, auto), @@ -693,6 +724,7 @@ $helpers: ( /// @example py-3 / padding top and bottom /// 'padding': ( + 'enabled' : true, // true or false 'property' : 'padding', // css property name (don't change it !) 'prefix' : 'p', // prefix of class name 'specificity': !important, // or null @@ -740,11 +772,12 @@ $helpers: ( /// @example place-content-space-evenly /// 'place-content': ( + 'enabled' : true, // true or false 'property' : 'place-content', // css property name (don't change it !) 'prefix' : 'place-content-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (stretch, start, end, center, space-between, space-around, space-evenly, initial, inherit) ), /// @@ -757,11 +790,12 @@ $helpers: ( /// @example place-items-end /// 'place-items': ( + 'enabled' : true, // true or false 'property' : 'place-items', // css property name (don't change it !) 'prefix' : 'place-items-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (stretch, start, end, center, baseline) ), /// @@ -774,11 +808,12 @@ $helpers: ( /// @example place-self-right /// 'place-self': ( + 'enabled' : true, // true or false 'property' : 'place-self', // css property name (don't change it !) 'prefix' : 'place-self-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (auto, stretch, start, left, center, end, right) ), /// @@ -791,11 +826,12 @@ $helpers: ( /// @example position-absolute /// 'position': ( + 'enabled' : true, // true or false 'property' : 'position', // css property name (don't change it !) 'prefix' : 'position-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (static, absolute, fixed, relative, sticky, initial, inherit) ), /// @@ -807,11 +843,12 @@ $helpers: ( /// @example resize-both /// 'resize': ( + 'enabled' : true, // true or false 'property' : 'resize', // css property name (don't change it !) 'prefix' : 'resize-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (none, both, horizontal, vertical, initial, inherit) ), /// @@ -822,11 +859,12 @@ $helpers: ( /// @example text-center /// 'text-align': ( + 'enabled' : true, // true or false 'property' : 'text-align', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (left, right, center, justify, start, end) ), /// @@ -837,11 +875,12 @@ $helpers: ( /// @example text-overline /// 'text-decoration': ( + 'enabled' : true, // true or false 'property' : 'text-decoration', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (underline, overline, line-through) ), /// @@ -853,11 +892,12 @@ $helpers: ( /// @example text-uppercase /// 'text-transform': ( + 'enabled' : true, // true or false 'property' : 'text-transform', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (uppercase, lowercase, capitalize) ), /// @@ -869,11 +909,12 @@ $helpers: ( /// @example select-text /// 'user-select': ( + 'enabled' : true, // true or false 'property' : 'user-select', // css property name (don't change it !) 'prefix' : 'select-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (none, auto, text, all) ), /// @@ -885,11 +926,12 @@ $helpers: ( /// @example width-fit-content /// 'width': ( + 'enabled' : true, // true or false 'property' : 'width', // css property name (don't change it !) 'prefix' : 'width-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value ("min-content", min-content), @@ -927,11 +969,12 @@ $helpers: ( /// @example z--1 (-1) /// 'z-index': ( + 'enabled' : true, // true or false 'property' : 'z-index', // css property name (don't change it !) 'prefix' : 'z-', // prefix of class name 'specificity': !important, // or null 'type' : null, // value type (px, rem, em, %, vh, vw etc) - 'specs' : null, + 'specs' : null, // for extra variables 'values' : (-1,0,1,10,20,30,40,50,100,999,9999,99999) ) ) \ No newline at end of file diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index 24ad66c3..6a10f459 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -20,31 +20,33 @@ /// @mixin set_utils($helper, $two: false, $three: false) { - $list : utils($helper); - $property : map.get($list, 'property'); - $prefix : map.get($list, 'prefix'); - $specificity: map.get($list, 'specificity'); - $type : map.get($list, 'type'); - $values : map.get($list, 'values'); + $enabled : utils($helper, 'enabled'); + $property : utils($helper, 'property'); + $prefix : utils($helper, 'prefix'); + $specificity: utils($helper, 'specificity'); + $type : utils($helper, 'type'); + $values : utils($helper, 'values'); - @if $two { - // suffix / value - @each $suffix, $value in $values { - .#{$prefix}#{$suffix} { - #{$property}: #{$value}#{$type} $specificity; + @if $enabled { + @if $two { + // suffix / value + @each $suffix, $value in $values { + .#{$prefix}#{$suffix} { + #{$property}: #{$value}#{$type} $specificity; + } } - } - } @else if $three { - // suffix / css property / value - @each $suffix, $prop, $value in $values { - .#{$prefix}#{$suffix} { - #{$prop}: #{$value}#{$type} $specificity; + } @else if $three { + // suffix / css property / value + @each $suffix, $prop, $value in $values { + .#{$prefix}#{$suffix} { + #{$prop}: #{$value}#{$type} $specificity; + } } - } - } @else { - @each $value in $values { - .#{$prefix}#{$value} { - #{$property}: #{$value}#{$type} $specificity; + } @else { + @each $value in $values { + .#{$prefix}#{$value} { + #{$property}: #{$value}#{$type} $specificity; + } } } } @@ -57,14 +59,16 @@ /// @mixin set_inset_helper($helper) { - $util : utils($helper); - $list : map.get($util, 'values'); - $specificity: map.get($util, 'specificity'); + $enabled : utils($helper, 'enabled'); + $list : utils($helper, 'values'); + $specificity: utils($helper, 'specificity'); - @each $class, $values in $list { - @each $value in $values { - .#{$class}-#{$value} { - #{$class}: #{$value} $specificity; + @if $enabled { + @each $class, $values in $list { + @each $value in $values { + .#{$class}-#{$value} { + #{$class}: #{$value} $specificity; + } } } } @@ -79,16 +83,19 @@ /// @mixin utils_with_specs($helpers) { + $enabled : map.get($helpers, 'enabled'); $prefix : map.get($helpers, 'prefix'); $specificity: map.get($helpers, 'specificity'); $type : map.get($helpers, 'type'); $specs : map.get($helpers, 'specs'); $values : map.get($helpers, 'values'); - @each $suffix, $property in $values { - @each $spec, $value in $specs { - .#{$prefix}#{$suffix}#{$spec} { - #{$property}: #{$value}#{$type} $specificity; + @if $enabled { + @each $suffix, $property in $values { + @each $spec, $value in $specs { + .#{$prefix}#{$suffix}#{$spec} { + #{$property}: #{$value}#{$type} $specificity; + } } } } @@ -104,20 +111,23 @@ /// @mixin color_palette($colors) { + $enabled : map.get($colors, 'enabled'); $property : map.get($colors, 'property'); $prefix : map.get($colors, 'prefix'); $specificity: map.get($colors, 'specificity'); $values : map.get($colors, 'values'); - @for $i from 5 through 35 { - @each $class, $color in $values { - @if $i % 5 == 0 { - $percentage: $i*1%; - .#{$prefix}#{$class}-darken-#{$i} { - #{$property}: mix(black, $color, $percentage) $specificity; - } - .#{$prefix}#{$class}-lighten-#{$i} { - #{$property}: mix(white, $color, $percentage) $specificity; + @if $enabled { + @for $i from 5 through 35 { + @each $class, $color in $values { + @if $i % 5 == 0 { + $percentage: $i*1%; + .#{$prefix}#{$class}-darken-#{$i} { + #{$property}: mix(black, $color, $percentage) $specificity; + } + .#{$prefix}#{$class}-lighten-#{$i} { + #{$property}: mix(white, $color, $percentage) $specificity; + } } } } @@ -131,15 +141,21 @@ /// /// @return mixed /// -@mixin set_border_sides($borders) { - @each $class, $border in $borders { - .border-x-#{$class} { - border-left-width: #{$border}px !important; - border-right-width: #{$border}px !important; - } - .border-y-#{$class} { - border-top-width: #{$border}px !important; - border-bottom-width: #{$border}px !important; +@mixin set_border_sides() +{ + $enabled: utils('border', 'enabled'); + $borders: utils('border', 'specs'); + + @if $enabled { + @each $class, $border in $borders { + .border-x-#{$class} { + border-left-width: #{$border}px !important; + border-right-width: #{$border}px !important; + } + .border-y-#{$class} { + border-top-width: #{$border}px !important; + border-bottom-width: #{$border}px !important; + } } } } @@ -158,18 +174,21 @@ /// @mixin set_sides($util, $side: 'margin') { - $prefix: map.get($util, 'prefix'); - $type : map.get($util, 'type'); - $values: map.get($util, 'specs'); + $enabled: map.get($util, 'enabled'); + $prefix : map.get($util, 'prefix'); + $type : map.get($util, 'type'); + $values : map.get($util, 'specs'); - @each $suffix, $value in $values { - .#{$prefix}x-#{$suffix} { - #{$side}-left: #{$value}#{$type} !important; - #{$side}-right: #{$value}#{$type} !important; - } - .#{$prefix}y-#{$suffix} { - #{$side}-top: #{$value}#{$type} !important; - #{$side}-bottom: #{$value}#{$type} !important; + @if $enabled { + @each $suffix, $value in $values { + .#{$prefix}x-#{$suffix} { + #{$side}-left: #{$value}#{$type} !important; + #{$side}-right: #{$value}#{$type} !important; + } + .#{$prefix}y-#{$suffix} { + #{$side}-top: #{$value}#{$type} !important; + #{$side}-bottom: #{$value}#{$type} !important; + } } } } diff --git a/src/options.scss b/src/options.scss index 24ebec7f..56bb40d8 100755 --- a/src/options.scss +++ b/src/options.scss @@ -1182,8 +1182,6 @@ $options: ( /// UTILITIES /// 'helpers': ( - 'enabled' : true, - 'features' : (), - 'settings': () + 'enabled': true ) ) !default; \ No newline at end of file diff --git a/src/themes.scss b/src/themes.scss index c9950c38..118b79e8 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -79,9 +79,13 @@ $themes: ( ) ), 'utilities': ( + //'enabled': false, /* - 'helpers': ( - 'enabled': false + 'flex-wrap': ( + 'enabled': false + ), + 'overflow': ( + 'prefix': 'flow-' ) */ ) From 4a70653a46e8df578565471f55eb9b54f1b04453 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 12 Nov 2024 18:50:02 +0300 Subject: [PATCH 067/154] Updated README --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 849a2e1c..85971413 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,13 @@ ### Punica 3.0 API for Developers Punica's API-based structure allows you to create or customize a CSS framework to suit your needs and preferences. The ```options.scss``` API file, which contains all the default variables and settings required by Punica, can be customized—even class names can be modified if desired. Additionally, you can make all these changes directly through your own theme map instead of editing ```options.scss```. You are completely free! + +### Core Features +* Fully customizable, API-driven structure +* Modular design for easy configuration +* Flexible, fully functional multi-theme support +* Option to enable or disable any component, element, helper structure, and their features +* Ability to rename class names for all components and elements +* Customizable settings for every component, element, and utility +* Flexibility to add new styles or sizes to each component or element +* Dynamic color scale generation based on specified color variables From 8401e3f1d5206d062685dff7d6ff7fdec1048888 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 12 Nov 2024 19:08:36 +0300 Subject: [PATCH 068/154] Updated README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 85971413..1b84eab4 100644 --- a/README.md +++ b/README.md @@ -15,3 +15,4 @@ Punica's API-based structure allows you to create or customize a CSS framework t * Customizable settings for every component, element, and utility * Flexibility to add new styles or sizes to each component or element * Dynamic color scale generation based on specified color variables +* Simple and functional debugging feature From bdf6affdac2d6497ad086c773fdfdb456cd84c9d Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 13 Nov 2024 17:43:24 +0300 Subject: [PATCH 069/154] b166 --- README.md | 5 ++--- src/Core/Global/Options.scss | 2 +- src/Modules/Utilities/index.scss | 5 ++++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1b84eab4..f12be131 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,8 @@ Punica's API-based structure allows you to create or customize a CSS framework t * Fully customizable, API-driven structure * Modular design for easy configuration * Flexible, fully functional multi-theme support -* Option to enable or disable any component, element, helper structure, and their features +* Option to enable or disable any component, element, utility, and their features * Ability to rename class names for all components and elements * Customizable settings for every component, element, and utility -* Flexibility to add new styles or sizes to each component or element * Dynamic color scale generation based on specified color variables -* Simple and functional debugging feature +* Simple and functional debugging diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index cf8262f6..322cede3 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -73,7 +73,7 @@ /// /// @return bool /// -@function enabled($node, $module) +@function enabled($node, $module: null) { @if theme($node,'enabled') != null { @return theme($node, 'enabled'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 0dbc142c..3e18913a 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -2,6 +2,9 @@ /// Punica CSS Framework /// Utilities : Default Helpers /// +/// Note: You can also override/change the all following +/// default settings from your theme map. +/// @use "../../Core/Global/Colors" as color; @use "../../Core/Theme/Getters" as *; @@ -698,7 +701,7 @@ $helpers: ( 'type' : null, // value type (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( - // class name, property, value + // class name (suffix), property, value ("auto", overflow, auto), ("hidden", overflow, hidden), ("visible", overflow, visible), From 908fb8f2ce3c2eacc64a1347328c55c8c9d3b3b5 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 14 Nov 2024 21:20:18 +0300 Subject: [PATCH 070/154] b167 --- src/Modules/Elements/Button/mixins.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 303eb4ce..8bc199e4 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -265,7 +265,7 @@ $outlined : false ) { text-shadow: 0 1px 1px darken($bg-color, 6%); - border: theme('border', 'width') theme('border', 'style') $border-color; + border : theme('border', 'width') theme('border', 'style') $border-color; /// /// OUTLINED STYLE /// @@ -276,6 +276,9 @@ i { color: $textcolor; } + &:hover { + background: $bg-color !important; + } } @else { background: $bg-color; color : white; From 2a3b14596e36213e332d7e248fd54dd327ccc204 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Fri, 15 Nov 2024 21:20:25 +0300 Subject: [PATCH 071/154] b168 --- src/themes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes.scss b/src/themes.scss index 118b79e8..b8ca4b2e 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -26,7 +26,7 @@ $themes: ( 'text' : #202123, 'background': white, 'primary' : #3266ec, - 'success' : #0e9716, + 'success' : #53970e, 'warning' : #bf890a, 'error' : #c11c3a, 'dark' : #393b42 From 18b40029712ca1add73bc14255bce2de3d757fe3 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 16 Nov 2024 18:12:12 +0300 Subject: [PATCH 072/154] b169 --- src/Modules/Utilities/helpers.scss | 3 +- src/Modules/Utilities/index.scss | 121 ++++++++++++++++++----------- src/Modules/Utilities/mixins.scss | 22 +++--- 3 files changed, 88 insertions(+), 58 deletions(-) diff --git a/src/Modules/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss index 70bd1271..a2bb5808 100644 --- a/src/Modules/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -37,7 +37,7 @@ @include set_utils('justify-content'); @include set_utils('justify-items'); @include set_utils('justify-self', true); - @include set_utils('line-height'); + @include set_utils('line-height', true); @include utils_with_specs(utils('margin')); @include set_sides(utils('margin')); @include set_utils('object-fit'); @@ -53,6 +53,7 @@ @include set_utils('text-align'); @include set_utils('text-decoration'); @include set_utils('text-transform'); + @include set_utils('text-wrap'); @include set_utils('user-select'); @include set_utils('width', true); @include set_utils('z-index'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 3e18913a..85eba213 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -23,7 +23,7 @@ $helpers: ( 'property' : 'align-content', // css property name (don't change it !) 'prefix' : 'align-content-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, initial, inherit) ), @@ -39,7 +39,7 @@ $helpers: ( 'property' : 'align-items', // css property name (don't change it !) 'prefix' : 'align-items-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (baseline, flex-start, flex-end, center, stretch, initial, inherit) ), @@ -57,7 +57,7 @@ $helpers: ( 'property' : 'align-self', // css property name (don't change it !) 'prefix' : 'align-self-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (auto, baseline, flex-start, flex-end, center, stretch, initial, inherit) ), @@ -76,7 +76,7 @@ $helpers: ( 'property' : 'background-color', // css property name (don't change it !) 'prefix' : 'bg-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -105,7 +105,7 @@ $helpers: ( 'property' : 'border-color', // css property name (don't change it !) 'prefix' : 'border-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -132,7 +132,7 @@ $helpers: ( 'property' : 'border-radius', // css property name (don't change it !) 'prefix' : 'radius-', // prefix of class name 'specificity': !important, // or null - 'type' : px, // value type (px, rem, em, %, vh, vw etc) + 'unit' : px, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (2,4,8,10,12,14,16,500), ), @@ -149,7 +149,7 @@ $helpers: ( 'property' : 'border-style', // css property name (don't change it !) 'prefix' : 'border-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (solid, dashed, dotted, double, groove, ridge) ), @@ -167,7 +167,7 @@ $helpers: ( 'property' : 'border', // css property name (don't change it !) 'prefix' : 'border', // prefix of class name 'specificity': !important, // or null - 'type' : rem, // value type (px, rem, em, %, vh, vw etc) + 'unit' : rem, // length units (px, rem, em, %, vh, vw etc) 'specs' : ( // suffix, value (0, 0), // 0 @@ -200,7 +200,7 @@ $helpers: ( 'property' : 'color', // css property name (don't change it !) 'prefix' : 'color-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -229,7 +229,7 @@ $helpers: ( 'property' : 'cursor', // css property name (don't change it !) 'prefix' : 'cursor-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (alias, default, grab, help, move, pointer, wait, zoom-in, zoom-out) ), @@ -247,7 +247,7 @@ $helpers: ( 'property' : 'display', // css property name (don't change it !) 'prefix' : 'display-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (inline, flex, inline-flex, grid, inline-grid, block, inline-block, table, inline-table, table-row, table-column, table-cell) ), @@ -264,7 +264,7 @@ $helpers: ( 'property' : 'filter', // css property name (don't change it !) 'prefix' : 'filter-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), property, value @@ -286,7 +286,7 @@ $helpers: ( 'property' : 'flex-direction', // css property name (don't change it !) 'prefix' : 'flex-direction-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (row, row-reverse, column, column-reverse, initial, inherit) ), @@ -304,7 +304,7 @@ $helpers: ( 'property' : 'flex-grow', // css property name (don't change it !) 'prefix' : 'grow-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (1,0) ), @@ -322,7 +322,7 @@ $helpers: ( 'property' : 'flex-shrink', // css property name (don't change it !) 'prefix' : 'shrink-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (1,0) ), @@ -340,7 +340,7 @@ $helpers: ( 'property' : 'flex-wrap', // css property name (don't change it !) 'prefix' : 'flex-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (wrap, wrap-reverse, nowrap) ), @@ -359,7 +359,7 @@ $helpers: ( 'property' : 'flex', // css property name (don't change it !) 'prefix' : 'flex-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -382,7 +382,7 @@ $helpers: ( 'property' : 'float', // css property name (don't change it !) 'prefix' : 'float-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (right, left, none) ), @@ -399,7 +399,7 @@ $helpers: ( 'property' : 'font-size', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -425,7 +425,7 @@ $helpers: ( 'property' : 'font-style', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (normal,italic) ), @@ -443,7 +443,7 @@ $helpers: ( 'property' : 'font-weight', // css property name (don't change it !) 'prefix' : 'weight-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (100,200,300,400,500,600,700,800,900,normal,bold,bolder,lighter) ), @@ -460,7 +460,7 @@ $helpers: ( 'property' : 'height', // css property name (don't change it !) 'prefix' : 'height-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -502,7 +502,7 @@ $helpers: ( 'property' : null, // css property name 'prefix' : null, // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name, [values] @@ -527,7 +527,7 @@ $helpers: ( 'property' : 'justify-content', // css property name (don't change it !) 'prefix' : 'justify-content-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (baseline, flex-start, flex-end, center, space-between, space-around, initial, inherit) ), @@ -545,7 +545,7 @@ $helpers: ( 'property' : 'justify-items', // css property name (don't change it !) 'prefix' : 'justify-items-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (stretch, start, left, center, end, right, initial, inherit) ), @@ -563,7 +563,7 @@ $helpers: ( 'property' : 'justify-self', // css property name (don't change it !) 'prefix' : 'justify-self-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -586,16 +586,28 @@ $helpers: ( /// /// The line-height property specifies the height of a line. /// - /// @example line-height-4 + /// @link https://en.wikipedia.org/wiki/Leading + /// + /// @example leading-4 /// 'line-height': ( 'enabled' : true, // true or false 'property' : 'line-height', // css property name (don't change it !) - 'prefix' : 'line-height-', // prefix of class name + 'prefix' : 'leading-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (0,1,2,3,4,5) + 'values' : ( + (1, 1), // none + (3, .75rem), // 12px + (4, 1rem), // 16px + (5, 1.25rem), // 20px + (6, 1.5rem), // 24px + (7, 1.75rem), // 28px + (8, 2rem), // 32px + (9, 2.25rem), // 36px + (10, 2.5rem) // 40px + ) ), /// /// Margin @@ -612,7 +624,7 @@ $helpers: ( 'property' : 'margin', // css property name (don't change it !) 'prefix' : 'm', // prefix of class name 'specificity': !important, // or null - 'type' : rem, // value type (px, rem, em, %, vh, vw etc) + 'unit' : rem, // length units (px, rem, em, %, vh, vw etc) 'specs' : ( // class name (suffix), value (0, 0), // 0 @@ -662,7 +674,7 @@ $helpers: ( 'property' : 'object-fit', // css property name (don't change it !) 'prefix' : 'fit-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (fill, contain, cover, none, scale-down, initial, inherit) ), @@ -680,7 +692,7 @@ $helpers: ( 'property' : 'order', // css property name (don't change it !) 'prefix' : 'order-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (1,2,3,4,5) ), @@ -698,7 +710,7 @@ $helpers: ( 'property' : 'overflow', // css property name (don't change it !) 'prefix' : 'overflow-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), property, value @@ -731,7 +743,7 @@ $helpers: ( 'property' : 'padding', // css property name (don't change it !) 'prefix' : 'p', // prefix of class name 'specificity': !important, // or null - 'type' : rem, // value type (px, rem, em, %, vh, vw etc) + 'unit' : rem, // length units (px, rem, em, %, vh, vw etc) 'specs' : ( // class name (suffix), value (0, 0), // 0 @@ -779,7 +791,7 @@ $helpers: ( 'property' : 'place-content', // css property name (don't change it !) 'prefix' : 'place-content-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (stretch, start, end, center, space-between, space-around, space-evenly, initial, inherit) ), @@ -797,7 +809,7 @@ $helpers: ( 'property' : 'place-items', // css property name (don't change it !) 'prefix' : 'place-items-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (stretch, start, end, center, baseline) ), @@ -815,7 +827,7 @@ $helpers: ( 'property' : 'place-self', // css property name (don't change it !) 'prefix' : 'place-self-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (auto, stretch, start, left, center, end, right) ), @@ -833,7 +845,7 @@ $helpers: ( 'property' : 'position', // css property name (don't change it !) 'prefix' : 'position-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (static, absolute, fixed, relative, sticky, initial, inherit) ), @@ -850,7 +862,7 @@ $helpers: ( 'property' : 'resize', // css property name (don't change it !) 'prefix' : 'resize-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (none, both, horizontal, vertical, initial, inherit) ), @@ -866,7 +878,7 @@ $helpers: ( 'property' : 'text-align', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (left, right, center, justify, start, end) ), @@ -882,7 +894,7 @@ $helpers: ( 'property' : 'text-decoration', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (underline, overline, line-through) ), @@ -899,11 +911,28 @@ $helpers: ( 'property' : 'text-transform', // css property name (don't change it !) 'prefix' : 'text-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (uppercase, lowercase, capitalize) ), /// + /// Text Wrap + /// + /// The text-wrap CSS shorthand property controls + /// how text inside an element is wrapped. + /// + /// @example text-balance + /// + 'text-wrap': ( + 'enabled' : true, // true or false + 'property' : 'text-wrap', // css property name (don't change it !) + 'prefix' : 'text-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (wrap, nowrap, balance, pretty) + ), + /// /// User Select /// /// The user-select property specifies @@ -916,7 +945,7 @@ $helpers: ( 'property' : 'user-select', // css property name (don't change it !) 'prefix' : 'select-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (none, auto, text, all) ), @@ -933,7 +962,7 @@ $helpers: ( 'property' : 'width', // css property name (don't change it !) 'prefix' : 'width-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : ( // class name (suffix), value @@ -976,7 +1005,7 @@ $helpers: ( 'property' : 'z-index', // css property name (don't change it !) 'prefix' : 'z-', // prefix of class name 'specificity': !important, // or null - 'type' : null, // value type (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (-1,0,1,10,20,30,40,50,100,999,9999,99999) ) diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index 6a10f459..b4583a5d 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -24,7 +24,7 @@ $property : utils($helper, 'property'); $prefix : utils($helper, 'prefix'); $specificity: utils($helper, 'specificity'); - $type : utils($helper, 'type'); + $unit : utils($helper, 'unit'); $values : utils($helper, 'values'); @if $enabled { @@ -32,20 +32,20 @@ // suffix / value @each $suffix, $value in $values { .#{$prefix}#{$suffix} { - #{$property}: #{$value}#{$type} $specificity; + #{$property}: #{$value}#{$unit} $specificity; } } } @else if $three { // suffix / css property / value @each $suffix, $prop, $value in $values { .#{$prefix}#{$suffix} { - #{$prop}: #{$value}#{$type} $specificity; + #{$prop}: #{$value}#{$unit} $specificity; } } } @else { @each $value in $values { .#{$prefix}#{$value} { - #{$property}: #{$value}#{$type} $specificity; + #{$property}: #{$value}#{$unit} $specificity; } } } @@ -86,7 +86,7 @@ $enabled : map.get($helpers, 'enabled'); $prefix : map.get($helpers, 'prefix'); $specificity: map.get($helpers, 'specificity'); - $type : map.get($helpers, 'type'); + $unit : map.get($helpers, 'unit'); $specs : map.get($helpers, 'specs'); $values : map.get($helpers, 'values'); @@ -94,7 +94,7 @@ @each $suffix, $property in $values { @each $spec, $value in $specs { .#{$prefix}#{$suffix}#{$spec} { - #{$property}: #{$value}#{$type} $specificity; + #{$property}: #{$value}#{$unit} $specificity; } } } @@ -176,18 +176,18 @@ { $enabled: map.get($util, 'enabled'); $prefix : map.get($util, 'prefix'); - $type : map.get($util, 'type'); + $unit : map.get($util, 'unit'); $values : map.get($util, 'specs'); @if $enabled { @each $suffix, $value in $values { .#{$prefix}x-#{$suffix} { - #{$side}-left: #{$value}#{$type} !important; - #{$side}-right: #{$value}#{$type} !important; + #{$side}-left: #{$value}#{$unit} !important; + #{$side}-right: #{$value}#{$unit} !important; } .#{$prefix}y-#{$suffix} { - #{$side}-top: #{$value}#{$type} !important; - #{$side}-bottom: #{$value}#{$type} !important; + #{$side}-top: #{$value}#{$unit} !important; + #{$side}-bottom: #{$value}#{$unit} !important; } } } From a77221996fb0b310a11d0ba2951915b53f47ee96 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 19 Nov 2024 14:44:11 +0300 Subject: [PATCH 073/154] b1 --- package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 094f5819..08b3a562 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "Punica-CSS-Framework", + "name" : "Punica-CSS-Framework", "description": "Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support.", - "version": "3.0.0", - "homepage": "https://github.com/codeforms/Punica-CSS-Framework", - "author": "Fatih Keçeci", - "license": "MIT", - "keywords": [ + "version" : "3.0.0", + "homepage" : "https://github.com/codeforms/Punica-CSS-Framework", + "author" : "Fatih Keçeci", + "license" : "MIT", + "keywords" : [ "css", "framework", "sass", @@ -14,11 +14,11 @@ "multi-theme" ], "scripts": { - "prod": "sass src/punica.scss dist/punica.min.css --no-source-map --style compressed", + "prod" : "sass src/punica.scss dist/punica.min.css --no-source-map --style compressed", "unminify": "sass src/punica.scss dist/punica.css --no-source-map", - "watch": "npm run prod -- -w" + "watch" : "npm run prod -- -w" }, "dependencies": { - "sass": "1.80.5" + "sass": "1.81.0" } } From f04614b91485f8e996ac63a8d9ac59c4b7c99ac2 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 20 Nov 2024 13:36:46 +0300 Subject: [PATCH 074/154] b171 --- src/Modules/Components/Caption/Caption.scss | 3 ++- src/Modules/Components/Card/Card.scss | 2 +- src/Modules/Elements/Form/Form.scss | 10 ++++------ src/Modules/Utilities/index.scss | 4 ++++ src/themes.scss | 2 +- 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index 26118c56..7c78a1e5 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -27,6 +27,7 @@ border-bottom : set-border(); padding-bottom: components('caption', 'media', 'margin'); } + &>a, &>span, &>div { /// ..children of a flex container are @@ -58,7 +59,7 @@ } } // - @include breakpoints(layouts('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { flex-direction: column; text-align : center; margin : inherit; diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index a3e98c12..2cb1cfd8 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -126,7 +126,7 @@ } } } - @include breakpoints(layouts('grid', 'breakpoints', 'medium'), 'max-width') { + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { .#{class('card', 'name')}, .#{class('card', 'cards')} > .#{class('card', 'name')} { flex : 0 0 100% !important; diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 97649e48..f6e7d983 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -177,12 +177,10 @@ flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{elements('form', 'items', 'item-spacer')})); } } - @include breakpoints(layouts('grid', 'breakpoints', 'medium'), 'max-width') { - .#{$name}.#{class('form', 'name')} { - .#{$name}.#{class('form', 'items')} { - >.#{class('form', 'item')} { - flex: 0 0 100%; - } + @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { + .#{$name}.#{class('form', 'items')} { + >.#{class('form', 'item')} { + flex: 0 0 100%; } } } diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 85eba213..178a3fde 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -635,7 +635,9 @@ $helpers: ( (6, 0.375), // 6px (8, 0.5), // 8px (10, 0.625), // 10px + (15, 0.938), // 15px (20, 1.25), // 20px + (25, 1.563), // 25px (30, 1.875), // 30px (40, 2.5), // 40px (50, 3.125), // 50px @@ -754,7 +756,9 @@ $helpers: ( (6, 0.375), // 6px (8, 0.5), // 8px (10, 0.625), // 10px + (15, 0.938), // 15px (20, 1.25), // 20px + (25, 1.563), // 25px (30, 1.875), // 30px (40, 2.5), // 40px (50, 3.125), // 50px diff --git a/src/themes.scss b/src/themes.scss index b8ca4b2e..24a3ebed 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -27,7 +27,7 @@ $themes: ( 'background': white, 'primary' : #3266ec, 'success' : #53970e, - 'warning' : #bf890a, + 'warning' : #ac7c09, 'error' : #c11c3a, 'dark' : #393b42 ), From 831076d3a1070eec0f2d2450ce5753be4643dac0 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 20 Nov 2024 19:39:03 +0300 Subject: [PATCH 075/154] b172 --- src/Modules/Components/Tooltip/Tooltip.scss | 6 +++++- src/options.scss | 10 +++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/Modules/Components/Tooltip/Tooltip.scss b/src/Modules/Components/Tooltip/Tooltip.scss index 71f6f3f5..7601bd2d 100644 --- a/src/Modules/Components/Tooltip/Tooltip.scss +++ b/src/Modules/Components/Tooltip/Tooltip.scss @@ -25,8 +25,12 @@ visibility : hidden; background-color: components('tooltip', 'background-color'); border-radius : components('tooltip', 'border-radius'); - min-width : components('tooltip', 'min-width'); + width : components('tooltip', 'width'); max-width : components('tooltip', 'max-width'); + text-wrap : components('tooltip', 'text-wrap'); + white-space : components('tooltip', 'white-space'); + text-align : components('tooltip', 'text-align'); + line-height : components('tooltip', 'line-height'); padding : components('tooltip', 'padding'); top : 120%; opacity : 0; diff --git a/src/options.scss b/src/options.scss index 56bb40d8..11ef79ba 100755 --- a/src/options.scss +++ b/src/options.scss @@ -773,9 +773,13 @@ $options: ( 'color' : white, 'font-size' : .9em, 'font-weight' : bold, - 'min-width' : 100px, - 'max-width' : 180px, - 'padding' : 5px, + 'width' : max-content, + 'max-width' : 12.5rem, + 'text-wrap' : auto, + 'white-space' : normal, + 'text-align' : center, + 'line-height' : 1.25rem, + 'padding' : 0.45rem .7rem, 'transition' : opacity 0.18s, 'background-color': theme('color', 'dark'), 'border-radius' : theme('border', 'radius') From 86c503d4c970dfca5a3f601898b4a0742ac5e26c Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 21 Nov 2024 18:34:49 +0300 Subject: [PATCH 076/154] b173 --- src/Modules/Components/Caption/Caption.scss | 2 +- src/Modules/Components/List/List.scss | 2 +- src/Modules/Components/Navbar/Navbar.scss | 12 ++-- src/Modules/Components/Panel/Panel.scss | 6 +- src/Modules/Components/Process/Process.scss | 12 ++-- src/Modules/Components/Stats/Stats.scss | 2 +- src/Modules/Components/Timeline/Timeline.scss | 10 +-- src/Modules/Components/Tooltip/Tooltip.scss | 8 +-- src/Modules/Elements/Button/Button.scss | 36 +++++----- src/Modules/Elements/Form/Form.scss | 44 ++++-------- src/Modules/Utilities/helpers.scss | 3 + src/Modules/Utilities/index.scss | 71 +++++++++++++++++++ src/options.scss | 56 +++++++++------ 13 files changed, 166 insertions(+), 98 deletions(-) diff --git a/src/Modules/Components/Caption/Caption.scss b/src/Modules/Components/Caption/Caption.scss index 7c78a1e5..2867ec94 100644 --- a/src/Modules/Components/Caption/Caption.scss +++ b/src/Modules/Components/Caption/Caption.scss @@ -12,12 +12,12 @@ .#{class('caption', 'name')} { display : flex; align-items: center; + text-align : left; margin : components('caption', 'margin'); font-size : components('caption', 'font-size'); font-weight: components('caption', 'font-weight'); line-height: components('caption', 'line-height'); text-wrap : components('caption', 'text-wrap'); - text-align : left; >img, >i { margin-right: components('caption', 'media', 'margin'); diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index adba986a..12ca7ad8 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -32,10 +32,10 @@ display: contents; } >.#{class('list', 'body')} { + display : initial; flex : 1; line-height: components('list', 'body', 'line-height'); text-align : components('list', 'body', 'text-align'); - display : initial; >.#{class('list', 'title')}, >.#{class('list', 'subtitle')} { display: block; diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 25c85478..007bb0a1 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -29,22 +29,22 @@ } // navbar brand .#{class('navbar', 'brand')} { - padding : components('navbar', 'brand', 'padding'); display : flex; justify-content: center; min-height : 100%; align-items : center; - margin-right : components('navbar', 'brand', 'margin-right'); white-space : nowrap; + padding : components('navbar', 'brand', 'padding'); + margin-right : components('navbar', 'brand', 'margin-right'); img { width: components('navbar', 'brand', 'img-width'); } a, a:visited { - font-size : components('navbar', 'font-size'); text-decoration: none; color : white; display : flex; + font-size : components('navbar', 'font-size'); font-weight : components('navbar', 'brand', 'font-weight'); } } @@ -57,13 +57,13 @@ &::before { display : none; position : absolute; + cursor : pointer; + right : 0; + top : 0; content : components('navbar', 'burger', 'symbol-open'); font-size : components('navbar', 'burger', 'icon-size'); min-height: components('navbar', 'min-height'); max-height: components('navbar', 'min-height'); - cursor : pointer; - right : 0; - top : 0; } } // navbar links diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index 1cc25244..eec6dfa2 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -60,11 +60,11 @@ /// @if features('components', 'panel', 'media') { &>.#{class('panel', 'media')} { - min-width : 0; + display : flex; flex : auto; - margin-bottom: components('panel', 'media', 'margin-bottom'); + min-width : 0; flex-wrap : wrap; - display : flex; + margin-bottom: components('panel', 'media', 'margin-bottom'); @include embedded-media(); img { display: block; diff --git a/src/Modules/Components/Process/Process.scss b/src/Modules/Components/Process/Process.scss index eb7bd94e..ac089a5c 100644 --- a/src/Modules/Components/Process/Process.scss +++ b/src/Modules/Components/Process/Process.scss @@ -14,12 +14,11 @@ .#{class('process', 'name')} { display : flex; flex-wrap : nowrap; - margin : components('process', 'margin'); width : 100%; list-style: none; + margin : components('process', 'margin'); .#{class('process', 'item')} { flex : 1 1 0; - min-height : components('process', 'min-height'); position : relative; align-items : center; justify-content: center; @@ -27,14 +26,15 @@ word-break : break-word; line-height : 1.3; text-align : center; + min-height : components('process', 'min-height'); &:not(:first-child)::before { - background: theme('color', 'primary'); content : ""; - height : components('process', 'stepbar', 'height'); left : -50%; position : absolute; top : 0; width : 100%; + background: theme('color', 'primary'); + height : components('process', 'stepbar', 'height'); } a { color : theme('color', 'text'); @@ -45,9 +45,9 @@ &::before { position : absolute; content : ""; - background: theme('color', 'primary'); top : 0; left : 50%; + background: theme('color', 'primary'); height : components('process', 'stickbar', 'height'); width : components('process', 'stickbar', 'width'); z-index : 1; @@ -60,8 +60,8 @@ a { color: theme('color', 'primary'); &::after { - content : components('process', 'symbol'); // HTML Symbols position : absolute; + content : components('process', 'symbol'); // HTML Symbols top : calc(-15px - #{components('process', 'symbol-size')}); left : calc(50% - ((#{components('process', 'stickbar', 'width')} * 10) / 2)); color : theme('color', 'primary'); diff --git a/src/Modules/Components/Stats/Stats.scss b/src/Modules/Components/Stats/Stats.scss index 43e9624d..f6d56636 100644 --- a/src/Modules/Components/Stats/Stats.scss +++ b/src/Modules/Components/Stats/Stats.scss @@ -17,6 +17,7 @@ display : inline-flex; flex-direction : column; background-color: transparent; + text-decoration : none; margin : components('stats', 'margin'); border-width : components('stats', 'border-width'); border-color : components('stats', 'border-color'); @@ -24,7 +25,6 @@ border-radius : components('stats', 'border-radius'); padding : components('stats', 'padding'); line-height : components('stats', 'line-height'); - text-decoration : none; transition : components('stats', 'transition'); >.#{class('stats', 'title')}, >.#{class('stats', 'subtitle')}, diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index 47142e4c..c1f5c729 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -15,10 +15,10 @@ .#{class('timeline', 'name')} { .#{class('timeline', 'item')} { display : flex; - padding : components('timeline', 'item', 'padding'); position : relative; flex-direction : column; justify-content: center; + padding : components('timeline', 'item', 'padding'); &::before { content : ""; display : block; @@ -37,16 +37,16 @@ position : absolute; z-index : 1; display : flex; + align-items : center; + background-color: color.$grey; + justify-content : center; + flex-shrink : 0; width : components('timeline', 'type-width'); height : components('timeline', 'type-width'); top : components('timeline', 'type', 'top'); left : -(calc(components('timeline', 'type-width') / 2px) - components('timeline', 'border-width')); - align-items : center; - background-color: color.$grey; border : components('timeline', 'type', 'border'); border-radius : components('timeline', 'type', 'border-radius'); - justify-content : center; - flex-shrink : 0; @include shadow(); /// /// STYLES diff --git a/src/Modules/Components/Tooltip/Tooltip.scss b/src/Modules/Components/Tooltip/Tooltip.scss index 7601bd2d..8a4d383f 100644 --- a/src/Modules/Components/Tooltip/Tooltip.scss +++ b/src/Modules/Components/Tooltip/Tooltip.scss @@ -19,10 +19,13 @@ display : flex; align-items : center; justify-content : center; + visibility : hidden; + top : 120%; + opacity : 0; + z-index : 1; color : components('tooltip', 'color'); font-size : components('tooltip', 'font-size'); font-weight : components('tooltip', 'font-weight'); - visibility : hidden; background-color: components('tooltip', 'background-color'); border-radius : components('tooltip', 'border-radius'); width : components('tooltip', 'width'); @@ -32,10 +35,7 @@ text-align : components('tooltip', 'text-align'); line-height : components('tooltip', 'line-height'); padding : components('tooltip', 'padding'); - top : 120%; - opacity : 0; transition : components('tooltip', 'transition'); - z-index : 1; &::after { content : ""; position : absolute; diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index c38475fd..9a9ca408 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -13,31 +13,31 @@ @if enabled('elements', 'button') { a.#{class('button', 'name')}, .#{class('button', 'name')} { - display : inline-flex; + display : elements('button', 'display'); + align-items : elements('button', 'align-items'); + justify-content : elements('button', 'justify-content'); font-family : elements('button', 'font-family'); font-size : elements('button', 'font-size'); font-weight : elements('button', 'font-weight'); - text-decoration : none; - white-space : nowrap; - outline : none; - width : elements('button', 'width'); - background : elements('button', 'background'); - background-image: none; - appearance : none; + line-height : elements('button', 'line-height'); + text-align : elements('button', 'text-align'); + text-decoration : elements('button', 'text-decoration'); + white-space : elements('button', 'white-space'); color : elements('button', 'color'); + background : elements('button', 'background'); + background-image: elements('button', 'background-image'); + outline : elements('button', 'outline'); + width : elements('button', 'width'); + padding : elements('button', 'padding'); + transition : elements('button', 'transition'); + appearance : elements('button', 'appearance'); + cursor : elements('button', 'cursor'); border : elements('button', 'border'); border-radius : elements('button', 'border-radius'); + user-select : elements('button', 'user-select'); + box-shadow : elements('button', 'box-shadow'); + overflow : elements('button', 'overflow'); box-sizing : border-box; - cursor : pointer; - line-height : elements('button', 'line-height'); - padding : elements('button', 'padding'); - transition : elements('button', 'transition'); - user-select : none; - box-shadow : none; - align-items : center; - justify-content : center; - overflow : visible; - text-align : center; &:focus, &:hover { transition : elements('button', 'transition'); diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index f6e7d983..3b10a08a 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -10,6 +10,9 @@ @if enabled('elements', 'form') { @include mixins.form-inputs() { + font-family : inherit; + box-sizing : inherit; + appearance : none; -webkit-appearance: none; background-color : elements('form', 'input', 'background-color'); border-width : elements('form', 'input', 'border-width'); @@ -18,13 +21,11 @@ height : elements('form', 'input', 'height'); border-radius : elements('form', 'input', 'border-radius'); outline : elements('form', 'input', 'outline-width') solid transparent; - box-shadow : none; - box-sizing : inherit; + box-shadow : elements('form', 'input', 'box-shadow'); outline-offset : -#{elements('form', 'input', 'outline-width')}; padding : elements('form', 'input', 'padding'); - width : 100%; - max-width : 100%; - font-family : inherit; + width : elements('form', 'input', 'width'); + max-width : elements('form', 'input', 'max-width'); color : elements('form', 'input', 'color'); font-size : elements('form', 'input', 'font-size'); transition : elements('form', 'input', 'transition'); @@ -219,37 +220,20 @@ grid-template-columns: 1em auto; gap : 1rem; input { - display : grid; - place-content : center; - margin : 0; - width : elements('form', 'radio-checkbox', 'width'); - height : elements('form', 'radio-checkbox', 'height'); - border : elements('form', 'radio-checkbox', 'border'); - -webkit-appearance: none; - appearance : none; - &::before { - content : ""; - width : 0.7em; - height : 0.7em; - transform : scale(0); - background-color: elements('form', 'radio-checkbox', 'color'); - clip-path : elements('form', 'radio-checkbox', 'checkbox-clip-path'); - } - &:checked::before { - transform: scale(1.5); - } + display : grid; + place-content: center; + margin : 0; + width : elements('form', 'radio-checkbox', 'width'); + height : elements('form', 'radio-checkbox', 'height'); + border : elements('form', 'radio-checkbox', 'border'); + accent-color : elements('form', 'radio-checkbox', 'accent-color'); &:disabled { cursor: not-allowed; } } - input[type="radio"] { - border-radius: 500px; - &::before { - clip-path: elements('form', 'radio-checkbox', 'radio-clip-path'); - } - } &>label { font-weight: normal; + user-select: none; } } } diff --git a/src/Modules/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss index a2bb5808..0f664ed5 100644 --- a/src/Modules/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -8,9 +8,11 @@ @use "mixins" as *; @if enabled('utilities', 'helpers') { + @include set_utils('accent-color', true); @include set_utils('align-content'); @include set_utils('align-items'); @include set_utils('align-self'); + @include set_utils('appearance'); @include set_utils('background-color', true); @include color_palette(utils('background-color')); @include set_utils('border-color', true); @@ -18,6 +20,7 @@ @include set_utils('border-style'); @include utils_with_specs(utils('border')); @include set_border_sides(); + @include set_utils('caret-color', true); @include set_utils('color', true); @include color_palette(utils('color')); @include set_utils('cursor'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 178a3fde..4a3d5566 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -10,6 +10,33 @@ @use "../../Core/Theme/Getters" as *; $helpers: ( + /// + /// Accent Color + /// The accent-color property specifies the accent color + /// for user-interface controls like: checkbox, radio, + /// range, and progress. + /// + /// @example accent-warning + /// + 'accent-color': ( + 'enabled' : true, // true or false + 'property' : 'accent-color', // css property name (don't change it !) + 'prefix' : 'accent-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : ( + // class name (suffix), value + ("primary", theme('color', 'primary')), + ("success", theme('color', 'success')), + ("warning", theme('color', 'warning')), + ("error", theme('color', 'error')), + ("dark", theme('color', 'dark')), + ("grey", color.$grey), + ("white", white), + ("black", black) + ) + ), /// /// Align Content /// The align-content property specifies @@ -62,6 +89,23 @@ $helpers: ( 'values' : (auto, baseline, flex-start, flex-end, center, stretch, initial, inherit) ), /// + /// Appearance + /// The appearance property in CSS is used to control + /// the appearance of form controls such as buttons, + /// checkboxes, radio buttons, and others. + /// + /// @example appearance-auto + /// + 'appearance': ( + 'enabled' : true, // true or false + 'property' : 'appearance', // css property name (don't change it !) + 'prefix' : 'appearance-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (auto, none) + ), + /// /// Background Colors /// The background-color property sets /// the background color of an element. The background of @@ -187,6 +231,33 @@ $helpers: ( ("-left-", border-left-width) ) ), + /// + /// Caret Color + /// The caret-color property specifies + /// the color of the cursor (caret) in inputs, + /// textareas, or any element that is editable. + /// + /// @example caret-primary + /// + 'caret-color': ( + 'enabled' : true, // true or false + 'property' : 'caret-color', // css property name (don't change it !) + 'prefix' : 'caret-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : ( + // class name (suffix), value + ("primary", theme('color', 'primary')), + ("success", theme('color', 'success')), + ("warning", theme('color', 'warning')), + ("error", theme('color', 'error')), + ("dark", theme('color', 'dark')), + ("grey", color.$grey), + ("white", white), + ("black", black) + ) + ), /// /// Color /// diff --git a/src/options.scss b/src/options.scss index 11ef79ba..c5f4f69e 100755 --- a/src/options.scss +++ b/src/options.scss @@ -840,18 +840,31 @@ $options: ( 'dropdown-clickable': 'clickable' ), 'settings': ( - 'font-family' : theme('typography', 'font-family'), - 'font-weight' : bold, - 'font-size' : 1.055em, - 'line-height' : 1, - 'width' : min-content, - 'padding' : .935rem 1.6rem, - 'transition' : .2s, - 'color' : theme('color', 'text'), - 'background' : theme('color', 'background'), - 'border' : set-border(), // default border - 'border-radius': theme('border', 'radius'), - 'icon' : ( + 'display' : inline-flex, + 'align-items' : center, + 'justify-content' : center, + 'font-family' : theme('typography', 'font-family'), + 'font-size' : 1.055em, + 'font-weight' : bold, + 'line-height' : 1, + 'text-align' : center, + 'text-decoration' : none, + 'white-space' : nowrap, + 'color' : theme('color', 'text'), + 'background' : theme('color', 'background'), + 'background-image': none, + 'outline' : none, + 'width' : min-content, + 'padding' : .935rem 1.6rem, + 'transition' : .2s, + 'appearance' : none, + 'cursor' : pointer, + 'border' : set-border(), // default border + 'border-radius' : theme('border', 'radius'), + 'user-select' : none, + 'box-shadow' : none, + 'overflow' : visible, + 'icon' : ( 'font-size': 1.12rem ), 'styles': ( @@ -942,7 +955,10 @@ $options: ( 'border-radius' : 0, 'transition' : .35s, 'outline-color' : theme('color', 'primary'), - 'outline-width' : 2px + 'outline-width' : 2px, + 'box-shadow' : none, + 'width' : 100%, + 'max-width' : 100%, ), 'items': ( 'margin' : 0, @@ -959,16 +975,10 @@ $options: ( 'margin' : 0 ), 'radio-checkbox': ( - 'color' : theme('color', 'primary'), - 'width' : 1.6em, - 'height' : 1.6em, - 'border' : 0.15em solid theme('border', 'color'), - 'font-size' : 1.35rem, - 'top' : -8px, - 'left' : 0, - 'label-padding' : 0 1.2rem 0 1.7rem, - 'radio-clip-path' : ellipse(45% 45% at 50% 50%), - 'checkbox-clip-path': polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%), + 'width' : 1.6em, + 'height' : 1.6em, + 'accent-color': theme('color', 'primary'), + 'border' : 0.15em solid theme('border', 'color') ), // for input validations 'styles': ( From b52dbe396168673b73e2790fddb962862b607ae5 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 21 Nov 2024 19:36:14 +0300 Subject: [PATCH 077/154] b174 --- map-template.scss | 49 ++++++++++++++++++++++++++++++++ src/Modules/Utilities/index.scss | 2 ++ src/options.scss | 2 ++ src/themes.scss | 12 ++++++-- 4 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 map-template.scss diff --git a/map-template.scss b/map-template.scss new file mode 100644 index 00000000..0d5a0ade --- /dev/null +++ b/map-template.scss @@ -0,0 +1,49 @@ +/// +/// Punica CSS Framework +/// v3.0 Theme API +/// + +theme_slug: ( + 'name': '', + 'type': '', // light or dark (required*), + 'typography': ( + 'font-family': '', + 'font-url' : '', // embed/import url + 'font-size' : , + 'font-weight': , + 'line-height': + ), + 'color': ( + 'text' : , + 'background': , + 'primary' : , + 'success' : , + 'warning' : , + 'error' : , + 'dark' : + ), + 'border': ( + 'color' : , + 'width' : , + 'style' : , + 'radius': , + ), + 'shadow': ( + 'horizontal': , + 'vertical' : , + 'blur' : , + 'spread' : , + 'color' : , + ), + ////////////////////////////////////////////////////////// + // You can use this section to override/change + // the all default variables in the options.scss API file. + 'classnames': (), + 'components': (), + 'elements' : (), + // You can use this section to override/change the + // all default utility variables in the + // Modules/Utilities/index.scss API file. + 'utilities' : () + ////////////////////////////////////////////////////////// +) \ No newline at end of file diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 4a3d5566..7fea04a0 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -1,5 +1,7 @@ /// /// Punica CSS Framework +/// v3.0 Utility API +/// /// Utilities : Default Helpers /// /// Note: You can also override/change the all following diff --git a/src/options.scss b/src/options.scss index c5f4f69e..c51b3263 100755 --- a/src/options.scss +++ b/src/options.scss @@ -1,5 +1,7 @@ /// /// Punica CSS Framework +/// v3.0 Options API +/// /// Default Options, Variables & Class names /// /// Note: You can also override/change the all following diff --git a/src/themes.scss b/src/themes.scss index 24a3ebed..bab7c5bb 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -1,5 +1,7 @@ /// -/// Punica CSS Framework : Themes +/// Punica CSS Framework +/// v3.0 Theme API +/// /// Note: you can also add your custom theme map here. /// /// If you want to compile your own theme map, don't forget to change @@ -78,8 +80,11 @@ $themes: ( 'font-weight': 500 ) ), + // You can use this section to override/change the + // all default utility variables in the + // Modules/Utilities/index.scss API file. 'utilities': ( - //'enabled': false, + //'enabled': false, // this option disables all helpers (default true). /* 'flex-wrap': ( 'enabled': false @@ -148,6 +153,9 @@ $themes: ( ), ) ), + // You can use this section to override/change the + // all default variables of utilities in the + // Modules/Utilities/index.scss API file. 'utilities': () ////////////////////////////////////////////////////////// ), From aed5c42e702cd73dd5e3bbaff87df0f86ccde59d Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 21 Nov 2024 19:51:17 +0300 Subject: [PATCH 078/154] b175 --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f12be131..d809a056 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ ## Punica CSS Framework 3.0 Beta

- Punica CSS Framework is a clean, lightweight, responsive, modern, and fully customizable API-driven framework built with SASS/SCSS, offering multi-theme support. + Punica CSS Framework is a clean, lightweight, responsive, modern, and fully customizable API-driven framework built with SASS/SCSS, offering multi-theme support.

### Punica 3.0 API for Developers -Punica's API-based structure allows you to create or customize a CSS framework to suit your needs and preferences. The ```options.scss``` API file, which contains all the default variables and settings required by Punica, can be customized—even class names can be modified if desired. Additionally, you can make all these changes directly through your own theme map instead of editing ```options.scss```. You are completely free! +Punica's API-based structure allows you to create or customize a CSS framework to suit your needs and preferences. The ```options.scss``` API file, which contains all the default variables and settings required by Punica, can be customized—even class names can be modified if desired. Additionally, you can make all these changes directly through your own theme map instead of editing ```options.scss``` or ```Modules/Utilities/index.scss``` API files. You are completely free! ### Core Features * Fully customizable, API-driven structure From e9fd4e665b722a9ba2e8b07fedce1b53ddd8f906 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Fri, 22 Nov 2024 06:09:12 +0300 Subject: [PATCH 079/154] b176 --- src/Modules/Elements/Form/Form.scss | 1 - src/Modules/Utilities/index.scss | 11 ++--------- src/options.scss | 3 +-- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 3b10a08a..a1a3c1f8 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -225,7 +225,6 @@ margin : 0; width : elements('form', 'radio-checkbox', 'width'); height : elements('form', 'radio-checkbox', 'height'); - border : elements('form', 'radio-checkbox', 'border'); accent-color : elements('form', 'radio-checkbox', 'accent-color'); &:disabled { cursor: not-allowed; diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 7fea04a0..6505c750 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -33,10 +33,7 @@ $helpers: ( ("success", theme('color', 'success')), ("warning", theme('color', 'warning')), ("error", theme('color', 'error')), - ("dark", theme('color', 'dark')), - ("grey", color.$grey), - ("white", white), - ("black", black) + ("dark", theme('color', 'dark')) ) ), /// @@ -253,11 +250,7 @@ $helpers: ( ("primary", theme('color', 'primary')), ("success", theme('color', 'success')), ("warning", theme('color', 'warning')), - ("error", theme('color', 'error')), - ("dark", theme('color', 'dark')), - ("grey", color.$grey), - ("white", white), - ("black", black) + ("error", theme('color', 'error')) ) ), /// diff --git a/src/options.scss b/src/options.scss index c51b3263..67f402f7 100755 --- a/src/options.scss +++ b/src/options.scss @@ -979,8 +979,7 @@ $options: ( 'radio-checkbox': ( 'width' : 1.6em, 'height' : 1.6em, - 'accent-color': theme('color', 'primary'), - 'border' : 0.15em solid theme('border', 'color') + 'accent-color': theme('color', 'primary') ), // for input validations 'styles': ( From 4709e9127cde1076e4a0ab8ed6818df3f72c2256 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 23 Nov 2024 19:12:04 +0300 Subject: [PATCH 080/154] b177 --- src/Core/Theme/Setters.scss | 21 ------------------- src/Modules/Components/Card/Card.scss | 2 +- src/Modules/Components/Menu/Menu.scss | 2 +- src/Modules/Components/Navbar/Navbar.scss | 2 +- src/Modules/Components/Panel/Panel.scss | 2 +- src/Modules/Components/Timeline/Timeline.scss | 2 +- src/Modules/Elements/Button/mixins.scss | 12 +++++------ src/Modules/Utilities/index.scss | 4 ++-- src/Modules/Utilities/mixins.scss | 2 +- src/themes.scss | 8 +------ 10 files changed, 15 insertions(+), 42 deletions(-) diff --git a/src/Core/Theme/Setters.scss b/src/Core/Theme/Setters.scss index ad68aabf..e4f22abc 100644 --- a/src/Core/Theme/Setters.scss +++ b/src/Core/Theme/Setters.scss @@ -5,27 +5,6 @@ @use "Getters" as *; -/// -/// Shadow -/// @param {Size} $h-offset - Horizontal offset -/// @param {Size} $v-offset - Vertical offset -/// @param {Size} $blur - Blur -/// @param {Size} $spread - Spread -/// @param {Color} $color - Color -/// @param {String|Null} $inset - Inset -/// -@mixin shadow( - $h-offset: theme('shadow', 'horizontal'), - $v-offset: theme('shadow', 'vertical'), - $blur: theme('shadow', 'blur'), - $spread: theme('shadow', 'spread'), - $color: theme('shadow', 'color'), - $inset: null -) { - box-shadow: $inset $h-offset $v-offset $blur $spread $color; - @content; -} - /// /// Border /// @param {Size} $width - Border width diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index 2cb1cfd8..ebe44991 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -41,7 +41,7 @@ // has card shadow? @if features('components', 'card', 'shadow') { - @include shadow(); + box-shadow: theme('shadow'); } display : flex; diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index 34e66393..f495e5c2 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -20,7 +20,7 @@ padding : components('menu', 'padding'); min-width : max-content; list-style : none; - @include shadow(); + box-shadow: theme('shadow'); z-index: 300; // menu title .#{class('menu', 'title')} { diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 007bb0a1..799ec9e6 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -237,7 +237,7 @@ z-index : 1; margin : 0 !important; padding : 0 !important; - @include shadow(); + box-shadow: theme('shadow'); .#{class('navbar', 'section')}, .#{class('navbar', 'section')} .#{class('button', 'group')}, .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')}, diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index eec6dfa2..687de21e 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -22,7 +22,7 @@ } @if features('components', 'panel', 'shadow') { - @include shadow(); + box-shadow: theme('shadow'); } &>.#{class('panel', 'header')}, diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index c1f5c729..c9a003c6 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -47,7 +47,7 @@ left : -(calc(components('timeline', 'type-width') / 2px) - components('timeline', 'border-width')); border : components('timeline', 'type', 'border'); border-radius : components('timeline', 'type', 'border-radius'); - @include shadow(); + box-shadow: theme('shadow'); /// /// STYLES /// diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 8bc199e4..68880451 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -65,11 +65,11 @@ } &.#{class('button', 'dropdown-top')} { &>.#{class('menu', 'name')} { - bottom: 100%; - top : auto; - right : 0; - left : auto; - @include shadow(0, -2px); + bottom : 100%; + top : auto; + right : 0; + left : auto; + box-shadow: 0 -2px .5em 0 rgba(0, 0, 0, 0.14); } } &.#{class('button', 'dropdown-bottom')}.#{class('button', 'dropdown-left')}, @@ -137,7 +137,7 @@ flex-wrap : wrap; flex-shrink : 0; border-radius: elements('button', 'border-radius'); - @include shadow(); + box-shadow: theme('shadow'); width: fit-content; .#{class('button', 'name')} { box-shadow: none; diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 6505c750..161ae702 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -180,7 +180,7 @@ $helpers: ( 'values' : (2,4,8,10,12,14,16,500), ), /// - /// Border Styles + /// Border Style /// /// The border-style property sets /// the style of an element's four borders. @@ -969,7 +969,7 @@ $helpers: ( 'values' : (underline, overline, line-through) ), /// - /// Text Transforms + /// Text Transform /// /// The text-transform property controls /// the capitalization of text. diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index b4583a5d..b56a0dc3 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -258,7 +258,7 @@ .borderless {border: none !important;} .rounded {border-radius: theme('border', 'radius');} .radiusless {border-radius:0 !important;} - .shadowed {@include shadow();} + .shadowed {box-shadow: theme('shadow')!important;} .shadowless {box-shadow:none !important;} .inset-0 { top: 0; diff --git a/src/themes.scss b/src/themes.scss index bab7c5bb..7c02dfb8 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -39,13 +39,7 @@ $themes: ( 'style' : solid, 'radius': 2px, ), - 'shadow': ( - 'horizontal': 0, - 'vertical' : .25em, - 'blur' : .5em, - 'spread' : 0, - 'color' : rgba(0, 0, 0, 0.14), - ), + 'shadow': 0 .25em .5em 0 rgba(0, 0, 0, 0.14), ////////////////////////////////////////////////////////// // You can use this section to override/change // the all default variables in the options.scss API file. From 12b8526dc44c846c29d37ed13c7d2aae439cb7fd Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 23 Nov 2024 19:15:23 +0300 Subject: [PATCH 081/154] b178 --- map-template.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/map-template.scss b/map-template.scss index 0d5a0ade..c4784f78 100644 --- a/map-template.scss +++ b/map-template.scss @@ -28,13 +28,7 @@ theme_slug: ( 'style' : , 'radius': , ), - 'shadow': ( - 'horizontal': , - 'vertical' : , - 'blur' : , - 'spread' : , - 'color' : , - ), + 'shadow': , ////////////////////////////////////////////////////////// // You can use this section to override/change // the all default variables in the options.scss API file. From 0764e7c770e6bd28cce0dc47e4ffc3d38c836206 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sat, 23 Nov 2024 19:18:17 +0300 Subject: [PATCH 082/154] b179 --- src/themes.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/themes.scss b/src/themes.scss index 7c02dfb8..c503e1dc 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -118,13 +118,7 @@ $themes: ( 'style' : solid, 'radius': 4px, ), - 'shadow': ( - 'horizontal': 0, - 'vertical' : 1px, - 'blur' : 4px, - 'spread' : 0, - 'color' : rgba(0, 0, 0, 0.20), - ), + 'shadow': 0 1px 4px 0 rgba(0, 0, 0, 0.20), ////////////////////////////////////////////////////////// // You can use this section to override/change // the all default variables in the options.scss API file. From 858327788a28d357ad4a09b65525b239c77b7d3d Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 24 Nov 2024 20:06:49 +0300 Subject: [PATCH 083/154] b180 --- src/Modules/Components/Card/Card.scss | 12 ++++++++++++ src/options.scss | 6 ++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index ebe44991..81a72ef0 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -79,10 +79,22 @@ &>.#{class('card', 'media')} { display : flex; flex-wrap: wrap; + overflow : hidden; img { display: block; width : 100%; } + @if features('components', 'card', 'zoom-in') { + &.#{class('card', 'zoom-in')} > img, + &.#{class('card', 'zoom-in')} a > img { + transform : scale(1); + transition: .3s ease-out; + } + &.#{class('card', 'zoom-in')} > img:hover, + &.#{class('card', 'zoom-in')} a > img:hover { + transform: scale(1.2); + } + } } /// /// MEDIA GROUP diff --git a/src/options.scss b/src/options.scss index 67f402f7..3dc88f30 100755 --- a/src/options.scss +++ b/src/options.scss @@ -206,7 +206,8 @@ $options: ( 'media' : true, 'media-group': true, 'border' : true, - 'shadow' : true + 'shadow' : true, + 'zoom-in' : true // zoom-in effect for image on rollover ), 'classnames': ( 'name' : 'card', @@ -217,7 +218,8 @@ $options: ( 'description': 'description', 'media' : 'media', 'horizontal' : 'horizontal', - 'actions' : 'actions' + 'actions' : 'actions', + 'zoom-in' : 'zoom-in' ), 'settings': ( 'width' : 240px, // for only a single card From 441f250a0ce3e3cd633a5c60ed9f207ac3c795cd Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 25 Nov 2024 12:05:23 +0300 Subject: [PATCH 084/154] b181 --- .../Components/Breadcrumb/Breadcrumb.scss | 2 +- src/Modules/Components/Menu/Menu.scss | 24 +++++------ src/Modules/Utilities/mixins.scss | 4 +- src/options.scss | 40 ++++++++++++------- 4 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index 93168510..296bddda 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -15,7 +15,7 @@ white-space: nowrap; a.#{class('breadcrumb', 'item')}, .#{class('breadcrumb', 'item')} { - text-decoration: none; + text-decoration: components('breadcrumb', 'text-decoration'); color : components('breadcrumb', 'color'); font-size : components('breadcrumb', 'font-size'); font-weight : components('breadcrumb', 'font-weight'); diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index f495e5c2..aef14d46 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -18,10 +18,10 @@ margin : components('menu', 'margin'); width : components('menu', 'width'); padding : components('menu', 'padding'); - min-width : max-content; - list-style : none; - box-shadow: theme('shadow'); - z-index: 300; + min-width : components('menu', 'min-width'); + list-style : components('menu', 'list-style'); + box-shadow : components('menu', 'box-shadow'); + z-index : components('menu', 'z-index'); // menu title .#{class('menu', 'title')} { font-size : components('menu', 'title', 'font-size'); @@ -35,27 +35,27 @@ .#{class('menu', 'item')} { padding : 0; // default container position : relative; - text-decoration: none; + text-decoration: components('menu', 'item', 'text-decoration'); text-align : components('menu', 'item', 'text-align'); & > a { display : block; - text-decoration: none; - color : theme('color', 'text'); + text-decoration: components('menu', 'item', 'text-decoration'); + color : components('menu', 'item', 'color'); width : components('menu', 'item', 'width'); padding : components('menu', 'item', 'padding'); font-size : components('menu', 'item', 'font-size'); - font-weight : theme('typography', 'font-weight'); + font-weight : components('menu', 'item', 'font-weight'); transition : components('menu', 'item', 'transition'); &:hover { - background: color.$grey; - color : theme('color', 'text'); + background: components('menu', 'item', 'hover-bg'); + color : components('menu', 'item', 'hover-color'); transition: components('menu', 'item', 'transition'); } &:active, &:focus, &.#{class('menu', 'active')} { - background: color.$grey; - color : theme('color', 'text'); + background: components('menu', 'item', 'hover-bg'); + color : components('menu', 'item', 'hover-color'); transition: components('menu', 'item', 'transition'); } } diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index b56a0dc3..af0fd046 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -120,8 +120,10 @@ @if $enabled { @for $i from 5 through 35 { @each $class, $color in $values { + // if the remainder of an integer + // division of $i by 5 is zero @if $i % 5 == 0 { - $percentage: $i*1%; + $percentage: $i*1%; // convert remainder to percentage .#{$prefix}#{$class}-darken-#{$i} { #{$property}: mix(black, $color, $percentage) $specificity; } diff --git a/src/options.scss b/src/options.scss index 3dc88f30..09016cfd 100755 --- a/src/options.scss +++ b/src/options.scss @@ -133,14 +133,15 @@ $options: ( 'active': 'active' ), 'settings': ( - 'font-size' : 1rem, - 'font-weight' : normal, - 'active-weight' : bold, - 'color' : theme('color', 'text'), - 'active-color' : theme('color', 'primary'), - 'seperator' : "\276D", // HTML Symbols - 'padding' : .3em, // seperator padding - 'seperator-size': 1rem, + 'font-size' : 1rem, + 'font-weight' : normal, + 'active-weight' : bold, + 'color' : theme('color', 'text'), + 'active-color' : theme('color', 'primary'), + 'seperator' : "\276D", // HTML Symbols + 'padding' : .3em, // seperator padding + 'seperator-size' : 1rem, + 'text-decoration': none, 'sizes': ( ( 'small', // size name (class) @@ -389,6 +390,10 @@ $options: ( 'margin' : 0, 'border-radius': 0, 'background' : lighten(theme('color', 'background'), 2.5%), + 'min-width' : max-content, + 'list-style' : none, + 'box-shadow' : theme('shadow'), + 'z-index' : 300, 'title': ( 'font-size' : 1.065rem, 'font-weight' : bold, @@ -398,13 +403,18 @@ $options: ( 'letter-spacing': -.015rem ), 'item': ( - 'width' : 100%, - 'text-align' : left, - 'padding' : .28rem .9rem, - 'font-size' : 1em, - 'small-size' : .945em, - 'transition' : background .15s, - 'sub-padding': .4rem // padding of sub items + 'color' : theme('color', 'text'), + 'width' : 100%, + 'text-align' : left, + 'padding' : .28rem .9rem, + 'font-size' : 1em, + 'font-weight' : theme('typography', 'font-weight'), + 'small-size' : .945em, + 'transition' : background .15s, + 'sub-padding' : .4rem, // padding of sub items + 'text-decoration': none, + 'hover-color' : theme('color', 'text'), + 'hover-bg' : color.$grey, ), 'icon': ( 'font-size' : 1.2rem, From be2ee4e04cc865e4c30175d58d5bd202aa9d1260 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 25 Nov 2024 16:14:03 +0300 Subject: [PATCH 085/154] b182 --- src/Core/Global/Colors.scss | 5 ++-- src/Modules/Components/List/List.scss | 2 +- src/options.scss | 4 +-- src/punica.scss | 2 +- src/themes.scss | 37 ++++++++++++--------------- 5 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/Core/Global/Colors.scss b/src/Core/Global/Colors.scss index c913803c..0022deb4 100644 --- a/src/Core/Global/Colors.scss +++ b/src/Core/Global/Colors.scss @@ -6,5 +6,6 @@ @use "sass:color" as color; @use "../Theme/Getters" as *; -// Secondary color variables -$grey : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%); \ No newline at end of file +// Secondary color variables/mixes +$grey : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%); +$dark-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 20.5%); \ No newline at end of file diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index 12ca7ad8..b109ac35 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -61,7 +61,7 @@ margin-left: components('list', 'actions', 'margin-left'); } &.#{class('list', 'active')} { - background: darken(theme('color', 'background'), 11%); + background: color.$grey; } } /// diff --git a/src/options.scss b/src/options.scss index 09016cfd..85a9f941 100755 --- a/src/options.scss +++ b/src/options.scss @@ -654,7 +654,7 @@ $options: ( "success": theme('color', 'success'), "warning": theme('color', 'warning'), "error" : theme('color', 'error'), - "dark" : lighten(theme('color', 'dark'), 7.85%), + "dark" : color.$dark-grey, ) ) ), @@ -906,7 +906,7 @@ $options: ( ( 'dark', // class name theme('color', 'dark'), // bg color - lighten(theme('color', 'dark'), 4%) // border color + color.$dark-grey // border color ) ), 'sizes': ( diff --git a/src/punica.scss b/src/punica.scss index 6046e9f1..9a5bb534 100755 --- a/src/punica.scss +++ b/src/punica.scss @@ -8,7 +8,7 @@ @use "themes" as get; /// ====================================================== - $active-theme: default; + $active-theme: dark; /// ====================================================== $theme: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); $theme-map: map.get(get.$themes, $theme) !global; diff --git a/src/themes.scss b/src/themes.scss index c503e1dc..9328caa5 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -31,7 +31,7 @@ $themes: ( 'success' : #53970e, 'warning' : #ac7c09, 'error' : #c11c3a, - 'dark' : #393b42 + 'dark' : #3f4359 ), 'border': ( 'color' : #c6c6c6, @@ -91,32 +91,32 @@ $themes: ( ////////////////////////////////////////////////////////// ), // - // 02. Dark Theme (pre-alpha) + // 02. Dark Theme (beta) // dark: ( 'name' : 'Dark Theme', 'type' : 'dark', // light or dark (required*), 'typography': ( - 'font-family': 'IBM Plex Sans Hebrew', - 'font-url' : 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@400;600;700&display=swap', // embed/import url - 'font-size' : 13px, + 'font-family': 'Inter Tight', + 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;700&display=swap', // embed/import url + 'font-size' : 1rem, 'font-weight': 400, 'line-height': 1.7 ), 'color': ( 'text' : white, - 'background': #252831, - 'primary' : #3e5bb2, - 'success' : #2f8f5d, - 'warning' : #ab7d2d, - 'error' : #ba3d3d, - 'dark' : lighten(#252831, 4.5%) + 'background': #22232b, + 'primary' : #4975f9, + 'success' : #2ea668, + 'warning' : #b78122, + 'error' : #b94343, + 'dark' : darken(#22232b, 4.5%) ), 'border': ( - 'color' : lighten(#252831, 17%), + 'color' : lighten(#22232b, 25%), 'width' : 1px, 'style' : solid, - 'radius': 4px, + 'radius': 2px, ), 'shadow': 0 1px 4px 0 rgba(0, 0, 0, 0.20), ////////////////////////////////////////////////////////// @@ -124,8 +124,8 @@ $themes: ( // the all default variables in the options.scss API file. 'classnames': (), 'components': ( - 'card': ( - 'background-color' : lighten(#252831, 1.75%) + 'tabnav': ( + 'border-bottom': 4px ), 'tooltip': ( 'color' : black, @@ -134,11 +134,8 @@ $themes: ( ) ), 'elements': ( - 'form': ( - 'input': ( - 'background-color': lighten(#252831, 4.5%), - 'outline-color' : white, - ), + 'button': ( + 'font-weight': 500 ) ), // You can use this section to override/change the From f8b719cbb095d875eaba9a4a398f9f1290c7522a Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 25 Nov 2024 17:11:38 +0300 Subject: [PATCH 086/154] b183 --- src/themes.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/themes.scss b/src/themes.scss index 9328caa5..9f6164e9 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -110,15 +110,15 @@ $themes: ( 'success' : #2ea668, 'warning' : #b78122, 'error' : #b94343, - 'dark' : darken(#22232b, 4.5%) + 'dark' : #32343E ), 'border': ( - 'color' : lighten(#22232b, 25%), + 'color' : #474a59, 'width' : 1px, 'style' : solid, 'radius': 2px, ), - 'shadow': 0 1px 4px 0 rgba(0, 0, 0, 0.20), + 'shadow': 0 .2em 1em 0 rgba(0,0,0,.17), ////////////////////////////////////////////////////////// // You can use this section to override/change // the all default variables in the options.scss API file. @@ -136,6 +136,11 @@ $themes: ( 'elements': ( 'button': ( 'font-weight': 500 + ), + 'form': ( + 'input': ( + 'border-color': #5f6171 + ) ) ), // You can use this section to override/change the From 7494b91e23ecdf92683e8e5823a1e6bca1e3f17b Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 25 Nov 2024 17:39:35 +0300 Subject: [PATCH 087/154] b184 --- src/Modules/Components/Card/Card.scss | 19 ++++++++++++++++++- src/options.scss | 7 +++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index 81a72ef0..91385183 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -15,6 +15,14 @@ .#{class('card', 'cards')} { display : flex; flex-wrap: wrap; + + // hover effect for cards + @if features('components', 'card', 'hovered') { + &.#{class('card', 'hovered')} > .#{class('card', 'name')}:hover { + background-color: darken(components('card', 'background-color'), 4%); + transition : components('card', 'transition'); + } + } } /// /// CARD GROUPS @@ -32,6 +40,7 @@ } .#{class('card', 'name')} { background-color: components('card', 'background-color'); + transition : components('card', 'transition'); // has card border? @if features('components', 'card', 'border') { @@ -43,6 +52,14 @@ @if features('components', 'card', 'shadow') { box-shadow: theme('shadow'); } + + // hover effect for single card + @if features('components', 'card', 'hovered') { + &.#{class('card', 'hovered')}:hover { + background-color: darken(components('card', 'background-color'), 4%); + transition : components('card', 'transition'); + } + } display : flex; flex-direction: column; @@ -88,7 +105,7 @@ &.#{class('card', 'zoom-in')} > img, &.#{class('card', 'zoom-in')} a > img { transform : scale(1); - transition: .3s ease-out; + transition: components('card', 'transition'); } &.#{class('card', 'zoom-in')} > img:hover, &.#{class('card', 'zoom-in')} a > img:hover { diff --git a/src/options.scss b/src/options.scss index 85a9f941..ff46a1bb 100755 --- a/src/options.scss +++ b/src/options.scss @@ -208,7 +208,8 @@ $options: ( 'media-group': true, 'border' : true, 'shadow' : true, - 'zoom-in' : true // zoom-in effect for image on rollover + 'zoom-in' : true, // zoom-in effect for image on rollover + 'hovered' : true ), 'classnames': ( 'name' : 'card', @@ -220,7 +221,8 @@ $options: ( 'media' : 'media', 'horizontal' : 'horizontal', 'actions' : 'actions', - 'zoom-in' : 'zoom-in' + 'zoom-in' : 'zoom-in', + 'hovered' : 'hovered' ), 'settings': ( 'width' : 240px, // for only a single card @@ -229,6 +231,7 @@ $options: ( 'border' : set-border(), // default border 'border-radius' : theme('border', 'radius'), 'background-color': theme('color', 'background'), + 'transition' : .2s ease-out, 'title' : ( 'color' : theme('color', 'text'), 'line-height': initial From a07a6ae4076ccdf31931cc05bbf7c74676347474 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 25 Nov 2024 21:59:52 +0300 Subject: [PATCH 088/154] b185 --- src/Modules/Components/Menu/Menu.scss | 14 +++++++------- src/Modules/Elements/Base/Base.scss | 2 ++ src/options.scss | 21 +++++++++++---------- src/themes.scss | 27 ++++++++++++++++----------- 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index aef14d46..e6b2df85 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -13,7 +13,7 @@ @if enabled('components', 'menu') { .#{class('menu', 'name')} { - background-color: components('menu', 'background'); + background-color: components('menu', 'background-color'); border-radius : components('menu', 'border-radius'); margin : components('menu', 'margin'); width : components('menu', 'width'); @@ -47,16 +47,16 @@ font-weight : components('menu', 'item', 'font-weight'); transition : components('menu', 'item', 'transition'); &:hover { - background: components('menu', 'item', 'hover-bg'); - color : components('menu', 'item', 'hover-color'); - transition: components('menu', 'item', 'transition'); + color : components('menu', 'item', 'hover-color'); + transition : components('menu', 'item', 'transition'); + background-color: components('menu', 'item', 'hover-bg'); } &:active, &:focus, &.#{class('menu', 'active')} { - background: components('menu', 'item', 'hover-bg'); - color : components('menu', 'item', 'hover-color'); - transition: components('menu', 'item', 'transition'); + color : components('menu', 'item', 'hover-color'); + transition : components('menu', 'item', 'transition'); + background-color: components('menu', 'item', 'hover-bg'); } } i { diff --git a/src/Modules/Elements/Base/Base.scss b/src/Modules/Elements/Base/Base.scss index 6a1f35ea..b489f5fa 100644 --- a/src/Modules/Elements/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -63,10 +63,12 @@ a { cursor : elements('typography', 'href', 'cursor'); outline : none; text-decoration: elements('typography', 'href', 'text-decoration'); + transition : elements('typography', 'href', 'transition'); &:focus, &:hover { color : elements('typography', 'href', 'hover-color'); text-decoration: elements('typography', 'href', 'hover-decoration'); + transition : elements('typography', 'href', 'transition'); } } /// Headers diff --git a/src/options.scss b/src/options.scss index ff46a1bb..5dae21e2 100755 --- a/src/options.scss +++ b/src/options.scss @@ -388,15 +388,15 @@ $options: ( 'small' : 'small' ), 'settings': ( - 'width' : 100%, - 'padding' : .9rem, - 'margin' : 0, - 'border-radius': 0, - 'background' : lighten(theme('color', 'background'), 2.5%), - 'min-width' : max-content, - 'list-style' : none, - 'box-shadow' : theme('shadow'), - 'z-index' : 300, + 'width' : 100%, + 'padding' : .9rem, + 'margin' : 0, + 'border-radius' : 0, + 'min-width' : max-content, + 'list-style' : none, + 'box-shadow' : theme('shadow'), + 'z-index' : 300, + 'background-color': lighten(theme('color', 'background'), 2.5%), 'title': ( 'font-size' : 1.065rem, 'font-weight' : bold, @@ -1139,7 +1139,8 @@ $options: ( 'hover-color' : theme('color', 'primary'), 'text-decoration' : none, 'hover-decoration': underline, - 'cursor' : pointer + 'cursor' : pointer, + 'transition' : .15s ease-out, ), 'placeholder': ( 'opacity': .5, diff --git a/src/themes.scss b/src/themes.scss index 9f6164e9..93510748 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -106,10 +106,10 @@ $themes: ( 'color': ( 'text' : white, 'background': #22232b, - 'primary' : #4975f9, - 'success' : #2ea668, - 'warning' : #b78122, - 'error' : #b94343, + 'primary' : #3266ec, + 'success' : #53970e, + 'warning' : #ac7c09, + 'error' : #ca2b47, 'dark' : #32343E ), 'border': ( @@ -122,8 +122,10 @@ $themes: ( ////////////////////////////////////////////////////////// // You can use this section to override/change // the all default variables in the options.scss API file. - 'classnames': (), 'components': ( + 'menu': ( + 'background-color': lighten(#22232b, 2.5%) + ), 'tabnav': ( 'border-bottom': 4px ), @@ -139,14 +141,17 @@ $themes: ( ), 'form': ( 'input': ( - 'border-color': #5f6171 + 'border-color' : #616375, + 'background-color': lighten(#22232b, 4.2%) + ) + ), + 'typography': ( + 'href': ( + 'color' : #5580ff, + 'hover-color': lighten(#5580ff, 3%) ) ) - ), - // You can use this section to override/change the - // all default variables of utilities in the - // Modules/Utilities/index.scss API file. - 'utilities': () + ) ////////////////////////////////////////////////////////// ), ); \ No newline at end of file From 4c243995c39b9d076bad12d2a352121e42180c52 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 26 Nov 2024 06:27:01 +0300 Subject: [PATCH 089/154] b186 --- src/Core/Global/Colors.scss | 2 +- src/Modules/Elements/Form/Form.scss | 17 ++++------- src/Modules/Elements/Table/Table.scss | 10 +++---- src/options.scss | 5 ++++ src/themes.scss | 41 +++++++++++++++++++++------ 5 files changed, 48 insertions(+), 27 deletions(-) diff --git a/src/Core/Global/Colors.scss b/src/Core/Global/Colors.scss index 0022deb4..e5d15005 100644 --- a/src/Core/Global/Colors.scss +++ b/src/Core/Global/Colors.scss @@ -8,4 +8,4 @@ // Secondary color variables/mixes $grey : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%); -$dark-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 20.5%); \ No newline at end of file +$dark-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 24.5%); \ No newline at end of file diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index a1a3c1f8..4c5a7207 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -6,14 +6,13 @@ @use "../../../Core/Global/Getters" as *; @use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; +@use "../../../Core/Global/Colors" as color; @use "mixins"; @if enabled('elements', 'form') { @include mixins.form-inputs() { font-family : inherit; box-sizing : inherit; - appearance : none; - -webkit-appearance: none; background-color : elements('form', 'input', 'background-color'); border-width : elements('form', 'input', 'border-width'); border-style : elements('form', 'input', 'border-style'); @@ -28,6 +27,7 @@ max-width : elements('form', 'input', 'max-width'); color : elements('form', 'input', 'color'); font-size : elements('form', 'input', 'font-size'); + font-weight : elements('form', 'input', 'font-weight'); transition : elements('form', 'input', 'transition'); &:focus { outline-color : elements('form', 'input', 'outline-color'); @@ -51,16 +51,6 @@ } } }; - select { - background-image: - url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNnoiLz48L3N2Zz4="); - background-repeat : no-repeat; - background-position: right 1rem center; - &[multiple] { - background: none; - height : auto; - } - } textarea { min-height: 6.5rem; resize : vertical; @@ -107,6 +97,9 @@ text-transform: none; height : fit-content; } + &>small { + color: elements('form', 'small', 'color'); + } /// /// Custom file input /// diff --git a/src/Modules/Elements/Table/Table.scss b/src/Modules/Elements/Table/Table.scss index b663db87..357a1bac 100644 --- a/src/Modules/Elements/Table/Table.scss +++ b/src/Modules/Elements/Table/Table.scss @@ -35,10 +35,10 @@ tr, tbody tr { &.#{class('table', 'active')} { - background: color.$grey; + background-color: elements('table', 'hover-bg'); } &:nth-of-type(odd) { - background: color.$grey; + background-color: elements('table', 'hover-bg'); } } } @@ -51,8 +51,8 @@ tr, tbody tr { &:hover { - background: color.$grey; - color : theme('color', 'text'); + background-color: elements('table', 'hover-bg'); + color : theme('color', 'text'); } } } @@ -62,7 +62,7 @@ transition: all 0.3s; &.#{class('table', 'active')}, &.#{class('table', 'active')}:hover { - background: color.$grey; + background-color: elements('table', 'hover-bg'); } } td, diff --git a/src/options.scss b/src/options.scss index 5dae21e2..f903f2a5 100755 --- a/src/options.scss +++ b/src/options.scss @@ -967,6 +967,7 @@ $options: ( 'height' : initial, 'padding' : .7rem .5rem, 'font-size' : initial, + 'font-weight' : normal, 'border-width' : theme('border', 'width'), 'border-style' : theme('border', 'style'), 'border-radius' : 0, @@ -996,6 +997,9 @@ $options: ( 'height' : 1.6em, 'accent-color': theme('color', 'primary') ), + 'small': ( + 'color': color.$dark-grey, + ), // for input validations 'styles': ( ( @@ -1100,6 +1104,7 @@ $options: ( 'border-spacing' : 0, 'border-collapse': collapse, 'position' : relative, + 'hover-bg' : color.$grey, 'td': ( 'padding': .313rem .7rem, ), diff --git a/src/themes.scss b/src/themes.scss index 93510748..8d670698 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -104,12 +104,12 @@ $themes: ( 'line-height': 1.7 ), 'color': ( - 'text' : white, + 'text' : #e1e6ff, 'background': #22232b, 'primary' : #3266ec, 'success' : #53970e, 'warning' : #ac7c09, - 'error' : #ca2b47, + 'error' : #bb2f48, 'dark' : #32343E ), 'border': ( @@ -123,16 +123,32 @@ $themes: ( // You can use this section to override/change // the all default variables in the options.scss API file. 'components': ( + 'alert': ( + 'font-weight': 500 + ), + 'badge': ( + 'font-weight': 500 + ), + 'breadcrumb': ( + 'font-weight': 500 + ), + 'label': ( + 'font-weight': 500 + ), 'menu': ( - 'background-color': lighten(#22232b, 2.5%) + 'background-color': lighten(#22232b, 2.5%), + 'item': ( + 'hover-bg': darken(#22232b, 3.5%) + ) ), 'tabnav': ( - 'border-bottom': 4px + 'border-bottom': 4px, + 'font-weight' : 500 ), 'tooltip': ( - 'color' : black, - 'font-weight' : normal, - 'background-color': white + 'color' : #22232b, + 'font-weight' : 500, + 'background-color': #e1e6ff ) ), 'elements': ( @@ -141,8 +157,15 @@ $themes: ( ), 'form': ( 'input': ( - 'border-color' : #616375, - 'background-color': lighten(#22232b, 4.2%) + 'border-color' : #3a3b46, + 'background-color': darken(#22232b, 3.5%), + 'font-weight' : 500 + ) + ), + 'table':( + 'hover-bg': lighten(#22232b, 3%), + 'caption' : ( + 'border-bottom': 4px solid #474a59 ) ), 'typography': ( From 1d69f0845fc38af881f4c5090ecbda6ea5343ea1 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 26 Nov 2024 20:48:50 +0300 Subject: [PATCH 090/154] b187 --- src/Core/Global/Colors.scss | 5 +++-- src/options.scss | 16 ++++++++-------- src/themes.scss | 6 +++--- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/Core/Global/Colors.scss b/src/Core/Global/Colors.scss index e5d15005..98df31ee 100644 --- a/src/Core/Global/Colors.scss +++ b/src/Core/Global/Colors.scss @@ -7,5 +7,6 @@ @use "../Theme/Getters" as *; // Secondary color variables/mixes -$grey : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%); -$dark-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 24.5%); \ No newline at end of file +$grey : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%); +$sharp-grey : color.mix(theme('color', 'text'), theme('color', 'dark'), 24.5%); +$sharpen-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 45%); \ No newline at end of file diff --git a/src/options.scss b/src/options.scss index f903f2a5..6fc6acaf 100755 --- a/src/options.scss +++ b/src/options.scss @@ -33,7 +33,7 @@ $options: ( 'margin' : 0 0 8px, 'width' : 100%, 'font-size' : 1.015em, - 'font-weight' : normal, + 'font-weight' : theme('typography', 'font-weight'), 'border' : set-border(), // default border 'border-radius': theme('border', 'radius'), 'href' : ( @@ -97,7 +97,7 @@ $options: ( 'border-radius': 500px, 'white-space' : nowrap, 'font-size' : .935rem, - 'font-weight' : normal, + 'font-weight' : theme('typography', 'font-weight'), 'padding' : 0 .45rem, 'border' : set-border(), // default border 'styles' : ( @@ -134,7 +134,7 @@ $options: ( ), 'settings': ( 'font-size' : 1rem, - 'font-weight' : normal, + 'font-weight' : theme('typography', 'font-weight'), 'active-weight' : bold, 'color' : theme('color', 'text'), 'active-color' : theme('color', 'primary'), @@ -275,7 +275,7 @@ $options: ( 'settings': ( 'display' : inline-block, 'font-size' : .9195em, - 'font-weight' : normal, + 'font-weight' : theme('typography', 'font-weight'), 'line-height' : 1.2, 'padding' : 0.28rem 0.9rem, 'margin' : .1rem .05rem, @@ -657,7 +657,7 @@ $options: ( "success": theme('color', 'success'), "warning": theme('color', 'warning'), "error" : theme('color', 'error'), - "dark" : color.$dark-grey, + "dark" : color.$sharp-grey, ) ) ), @@ -909,7 +909,7 @@ $options: ( ( 'dark', // class name theme('color', 'dark'), // bg color - color.$dark-grey // border color + color.$sharp-grey // border color ) ), 'sizes': ( @@ -967,7 +967,7 @@ $options: ( 'height' : initial, 'padding' : .7rem .5rem, 'font-size' : initial, - 'font-weight' : normal, + 'font-weight' : theme('typography', 'font-weight'), 'border-width' : theme('border', 'width'), 'border-style' : theme('border', 'style'), 'border-radius' : 0, @@ -998,7 +998,7 @@ $options: ( 'accent-color': theme('color', 'primary') ), 'small': ( - 'color': color.$dark-grey, + 'color': color.$sharpen-grey, ), // for input validations 'styles': ( diff --git a/src/themes.scss b/src/themes.scss index 8d670698..2ab9d63a 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -104,7 +104,7 @@ $themes: ( 'line-height': 1.7 ), 'color': ( - 'text' : #e1e6ff, + 'text' : #c5cae1, 'background': #22232b, 'primary' : #3266ec, 'success' : #53970e, @@ -157,8 +157,8 @@ $themes: ( ), 'form': ( 'input': ( - 'border-color' : #3a3b46, - 'background-color': darken(#22232b, 3.5%), + 'border-color' : #656679, + 'background-color': #32343E, 'font-weight' : 500 ) ), From b27f7d133f3cdc18bb83f8504f2223c33e2442e5 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 26 Nov 2024 21:29:00 +0300 Subject: [PATCH 091/154] b188 --- src/themes.scss | 22 ++++------------------ 1 file changed, 4 insertions(+), 18 deletions(-) diff --git a/src/themes.scss b/src/themes.scss index 2ab9d63a..9da6df79 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -98,9 +98,9 @@ $themes: ( 'type' : 'dark', // light or dark (required*), 'typography': ( 'font-family': 'Inter Tight', - 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;700&display=swap', // embed/import url + 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;700&display=swap', // embed/import url 'font-size' : 1rem, - 'font-weight': 400, + 'font-weight': 500, 'line-height': 1.7 ), 'color': ( @@ -123,18 +123,6 @@ $themes: ( // You can use this section to override/change // the all default variables in the options.scss API file. 'components': ( - 'alert': ( - 'font-weight': 500 - ), - 'badge': ( - 'font-weight': 500 - ), - 'breadcrumb': ( - 'font-weight': 500 - ), - 'label': ( - 'font-weight': 500 - ), 'menu': ( 'background-color': lighten(#22232b, 2.5%), 'item': ( @@ -142,8 +130,7 @@ $themes: ( ) ), 'tabnav': ( - 'border-bottom': 4px, - 'font-weight' : 500 + 'border-bottom': 4px ), 'tooltip': ( 'color' : #22232b, @@ -158,8 +145,7 @@ $themes: ( 'form': ( 'input': ( 'border-color' : #656679, - 'background-color': #32343E, - 'font-weight' : 500 + 'background-color': #32343E ) ), 'table':( From 83b92e1565379d5803980b6e58c39e399aef5b0a Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 27 Nov 2024 05:32:42 +0300 Subject: [PATCH 092/154] b189 --- src/options.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/options.scss b/src/options.scss index 6fc6acaf..a1be28eb 100755 --- a/src/options.scss +++ b/src/options.scss @@ -841,7 +841,6 @@ $options: ( 'classnames': ( 'name' : 'button', 'group' : 'buttons', - 'link' : 'link', 'outlined' : 'outlined', 'active' : 'active', 'inactive' : 'inactive', From a35086986b5978d1031969846852a1c941af9305 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 27 Nov 2024 17:52:34 +0300 Subject: [PATCH 093/154] b190 --- src/Core/Global/Getters.scss | 18 +++- src/Core/Global/Options.scss | 8 ++ src/Core/Theme/Getters.scss | 23 +++-- src/Modules/Components/Badge/Badge.scss | 4 +- src/Modules/Components/Navbar/Navbar.scss | 11 +- src/Modules/Components/Process/mixins.scss | 2 +- src/Modules/Elements/Button/Button.scss | 6 +- src/Modules/Elements/Button/mixins.scss | 19 ++-- src/Modules/Elements/Form/Form.scss | 62 ++++++------ src/options.scss | 111 ++++++++++++++++----- src/themes.scss | 8 +- 11 files changed, 176 insertions(+), 96 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 615c9bbb..63cf7104 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -24,7 +24,7 @@ @function options($keys...) { @if null == map.get(option.$options, nth($keys, 1)) { - @warn "[INVALID KEY] #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -34,17 +34,21 @@ @return $value; } + @if length($keys) > 3 { + @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; + } + $value: map.get($value, nth($keys, 2)); @if null == $value { - @warn "[INVALID KEY] #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @if length($keys) > 2 { $value: map.get($value, nth($keys, 3)); @if null == $value { - @warn "[INVALID KEY] #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } } @@ -69,7 +73,7 @@ $settings: map.get(map.get(options($node), 'settings'), nth($keys, 1)); @if null == $settings { - @warn "[INVALID KEY] #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] ::: INVALID KEY: #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -77,8 +81,12 @@ @return $settings; } + @if length($keys) > 3 { + @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; + } + @if null == map.get($settings, nth($keys, 2)) { - @warn "[INVALID KEY] #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] ::: INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 322cede3..79189a0a 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -99,6 +99,10 @@ @if theme($module, nth($keys, 1), nth($keys, 2)) { $value : theme($module, nth($keys, 1), nth($keys, 2)); + @if length($keys) > 3 { + @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; + } + @if length($keys) > 2 { $value: theme($module, nth($keys, 1), nth($keys, 2), nth($keys, 3)); } @@ -123,6 +127,10 @@ { $value: get.settings(nth($keys, 1), nth($keys, 2)); + @if length($keys) > 3 { + @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; + } + @if length($keys) > 2 { $value: get.settings(nth($keys, 1), nth($keys, 2), nth($keys, 3)); } diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index f96ffb8e..e1b0bc45 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -4,6 +4,7 @@ /// @use "sass:map" as map; +@use "sass:list" as list; /// ====================================================== $theme-map: null !default; @@ -13,9 +14,7 @@ /// Get active theme's value by key(s) from the theme map /// /// @param {String} $node -/// @param {String} $key -/// @param {String} $child -/// @param {String} $sub +/// @param {List} $key(s) /// /// @example theme('name') /// @example theme('color', 'primary') @@ -23,18 +22,22 @@ /// /// @return mixed /// -@function theme($node, $key: null, $child: null, $sub: null) +@function theme($node, $keys...) { $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); - @if ($value != null) and $key { - $value: if(map.has-key($value, $key), map.get($value, $key), null); + @if list.length($keys) > 3 { + @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; + } + + @if ($value != null and list.length($keys) > 0) { + $value: if(map.has-key($value, list.nth($keys, 1)), map.get($value, list.nth($keys, 1)), null); - @if ($value != null) and $child { - $value: if(map.has-key($value, $child), map.get($value, $child), null); + @if ($value != null and list.length($keys) > 1) { + $value: if(map.has-key($value, list.nth($keys, 2)), map.get($value, list.nth($keys, 2)), null); - @if ($value != null) and $sub { - $value: if(map.has-key($value, $sub), map.get($value, $sub), null); + @if ($value != null and list.length($keys) > 2) { + $value: if(map.has-key($value, list.nth($keys, 3)), map.get($value, list.nth($keys, 3)), null); } } } diff --git a/src/Modules/Components/Badge/Badge.scss b/src/Modules/Components/Badge/Badge.scss index b38a1f8e..2a3ee3c3 100644 --- a/src/Modules/Components/Badge/Badge.scss +++ b/src/Modules/Components/Badge/Badge.scss @@ -28,8 +28,8 @@ /// STYLES /// @if features('components', 'badge', 'styles') { - @each $name, $bg-color in components('badge', 'styles') { - @include set-style($bg-color, white, $name) { + @each $name, $text-color, $bg-color in components('badge', 'styles') { + @include set-style($bg-color, $text-color, $name) { border-color: darken($bg-color, 3%); }; } diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 799ec9e6..b7d6a93b 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -81,14 +81,15 @@ justify-content: flex-end; } input[type='text'] { - color : white; - background-color: darken(components('navbar', 'background'), 7%); - border-color : lighten(components('navbar', 'background'), 8%); + color : components('navbar', 'input', 'color'); + background-color: components('navbar', 'input', 'background-color'); + border-color : components('navbar', 'input', 'border-color'); + border-width : components('navbar', 'input', 'border-width'); &::placeholder { - color: white; + color: components('navbar', 'input', 'placeholder-color'); } &:focus { - outline: theme('input', 'outline-width') solid lighten(components('navbar', 'background'), 26%); + outline: components('navbar', 'input', 'focus-outline'); } } /// diff --git a/src/Modules/Components/Process/mixins.scss b/src/Modules/Components/Process/mixins.scss index 8c366232..6d55c22c 100644 --- a/src/Modules/Components/Process/mixins.scss +++ b/src/Modules/Components/Process/mixins.scss @@ -12,7 +12,7 @@ /// Process Styles /// @param {Color} $color /// -@mixin process-styles($color: $primary-color) { +@mixin process-styles($color) { .#{class('process', 'item')} { &:not(:first-child)::before { background: $color; diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index 9a9ca408..98c2206b 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -80,13 +80,13 @@ /// STYLES /// @if features('elements', 'button', 'styles') { - @each $theme-name, $theme-color, $border-color in elements('button', 'styles') { + @each $theme-name, $bg-color, $text-color, $border-color in elements('button', 'styles') { &.#{$theme-name} { - @include button-styles($theme-color, $border-color); + @include button-styles($bg-color, $text-color, $border-color); } @if features('elements', 'button', 'outlined') { &.#{$theme-name}.#{class('button', 'outlined')} { - @include button-styles($theme-color, $border-color, true); + @include button-styles($bg-color, $text-color, $border-color, true); } } } diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 68880451..92068a94 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -137,7 +137,7 @@ flex-wrap : wrap; flex-shrink : 0; border-radius: elements('button', 'border-radius'); - box-shadow: theme('shadow'); + box-shadow : theme('shadow'); width: fit-content; .#{class('button', 'name')} { box-shadow: none; @@ -172,10 +172,10 @@ /// STYLES /// @if features('elements', 'button', 'styles') { - @each $theme-name, $theme-color in elements('button', 'styles') { + @each $theme-name, $bg-color, $text-color in elements('button', 'styles') { &.#{$theme-name} > .#{class('button', 'name')}, &.#{$theme-name} > .#{class('button', 'dropdown')} > .#{class('button', 'name')} { - @include button-styles($theme-color, darken($theme-color, 7%)); + @include button-styles($bg-color, $text-color, darken($bg-color, 7%)); } } } @@ -261,6 +261,7 @@ /// @mixin button-styles( $bg-color : theme('color', 'primary'), + $text-color : white, $border-color: null, $outlined : false ) { @@ -270,7 +271,7 @@ /// OUTLINED STYLE /// @if $outlined { - $textcolor: if(theme('type') == 'dark', white, $bg-color); + $textcolor: if(theme('type') == 'dark', $text-color, $bg-color); background: transparent; color : $textcolor; i { @@ -281,22 +282,22 @@ } } @else { background: $bg-color; - color : white; + color : $text-color; i { - color: white; + color: $text-color; } } &:hover { background: lighten($bg-color, 7.5%); - color : white; + color : $text-color; i { - color: white; + color: $text-color; } } &:active, &.#{class('button', 'active')} { background: lighten($bg-color, 7.5%); - color : white; + color : $text-color; &:focus, &:hover { background: lighten($bg-color, 12.5%); diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 4c5a7207..a8789151 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -11,8 +11,8 @@ @if enabled('elements', 'form') { @include mixins.form-inputs() { - font-family : inherit; - box-sizing : inherit; + font-family : elements('form', 'input', 'font-family'); + box-sizing : elements('form', 'input', 'box-sizing'); background-color : elements('form', 'input', 'background-color'); border-width : elements('form', 'input', 'border-width'); border-style : elements('form', 'input', 'border-style'); @@ -52,24 +52,19 @@ } }; textarea { - min-height: 6.5rem; - resize : vertical; + min-height: elements('form', 'textarea', 'min-height'); + resize : elements('form', 'textarea', 'resize'); } fieldset { - border-width: 0; - padding : 0.6em; + border-width: elements('form', 'fieldset', 'border-width'); + padding : elements('form', 'fieldset', 'padding'); } - label, legend { - display : block; - font-size : 1.3rem; - font-weight : bold; - margin-bottom: .7rem; - white-space : normal; - } - input[type='checkbox'], - input[type='radio'] { - display: inline; + display : elements('form', 'legend', 'display'); + font-size : elements('form', 'legend', 'font-size'); + font-weight : elements('form', 'legend', 'font-weight'); + margin-bottom: elements('form', 'legend', 'margin-bottom'); + white-space : elements('form', 'legend', 'white-space'); } input:disabled { opacity: .59; @@ -79,14 +74,14 @@ max-width: 100%; padding : elements('form', 'padding'); .#{class('form', 'item')} { - height : fit-content; + height : elements('form', 'item', 'height'); margin : elements('form', 'item', 'margin'); - display : inline-flex; - flex-wrap : wrap; - width : 100%; - max-width : 100%; - position : relative; - align-items: center; + display : elements('form', 'item', 'display'); + flex-wrap : elements('form', 'item', 'flex-wrap'); + width : elements('form', 'item', 'width'); + max-width : elements('form', 'item', 'max-width'); + position : elements('form', 'item', 'position'); + align-items: elements('form', 'item', 'align-items'); padding : elements('form', 'item', 'padding'); @at-root .#{class('form', 'name')} label, &>label { @@ -94,8 +89,8 @@ color : elements('form', 'label', 'color'); font-size : elements('form', 'label', 'font-size'); font-weight : elements('form', 'label', 'font-weight'); - text-transform: none; - height : fit-content; + text-transform: elements('form', 'label', 'text-transform'); + height : elements('form', 'label', 'height'); } &>small { color: elements('form', 'small', 'color'); @@ -124,10 +119,10 @@ >* { flex: 1 1 auto; &:last-child { - margin-left: -1px; + margin-left: if(elements('form', 'input', 'border-width') != 0 , -1px , .5rem); } &:not(:first-child):not(:last-child) { - margin-left : -1px; + margin-left : if(elements('form', 'input', 'border-width') != 0 , -1px , .5rem); margin-right : 0; border-radius: 0; } @@ -148,6 +143,7 @@ } } @include mixins.form-inputs() { + box-shadow: none !important; &:first-child { border-bottom-right-radius: 0; border-top-right-radius : 0; @@ -209,13 +205,13 @@ @if features('elements', 'form', 'checkbox-radio') { .#{class('form', 'radio')}, .#{class('form', 'checkbox')} { - display : grid; - grid-template-columns: 1em auto; - gap : 1rem; + display : elements('form', 'radio-checkbox', 'display'); + grid-template-columns: elements('form', 'radio-checkbox', 'grid-template-columns'); + gap : elements('form', 'radio-checkbox', 'gap'); input { - display : grid; - place-content: center; - margin : 0; + display : elements('form', 'radio-checkbox', 'display'); + place-content: elements('form', 'radio-checkbox', 'place-content'); + margin : elements('form', 'radio-checkbox', 'margin'); width : elements('form', 'radio-checkbox', 'width'); height : elements('form', 'radio-checkbox', 'height'); accent-color : elements('form', 'radio-checkbox', 'accent-color'); diff --git a/src/options.scss b/src/options.scss index a1be28eb..794c7128 100755 --- a/src/options.scss +++ b/src/options.scss @@ -101,12 +101,31 @@ $options: ( 'padding' : 0 .45rem, 'border' : set-border(), // default border 'styles' : ( - // style name (class), theme variable - "primary": theme('color', 'primary'), - "success": theme('color', 'success'), - "warning": theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), + ( + "primary", // style name (class) + white, // text color + theme('color', 'primary') // bg-color + ), + ( + "success", // style name (class) + white, // text color + theme('color', 'success') // bg-color + ), + ( + "warning", // style name (class) + white, // text color + theme('color', 'warning') // bg-color + ), + ( + "error", // style name (class) + white, // text color + theme('color', 'error') // bg-color + ), + ( + "dark", // style name (class) + white, // text color + theme('color', 'dark') // bg-color + ) ), 'sizes': ( ( @@ -470,6 +489,14 @@ $options: ( 'symbol-open' : "\2630", // HTML Symbols 'symbol-close': "\2715" // HTML Symbols ), + 'input': ( + 'color' : white, + 'background-color' : darken(theme('color', 'primary'), 7%), + 'border-color' : lighten(theme('color', 'primary'), 8%), + 'border-width' : theme('border', 'width'), + 'placeholder-color': white, + 'focus-outline' : elements('form', 'input', 'outline-width') solid theme('color', 'primary') + ), 'styles': ( ( "light", // theme name (class) @@ -685,19 +712,19 @@ $options: ( 'styles' : ( ( 'success', // style name (class) - theme('color', 'success') // color + theme('color', 'success') // style color ), ( 'warning', // style name (class) - theme('color', 'warning') // color + theme('color', 'warning') // style color ), ( 'error', // style name (class) - theme('color', 'error') // color + theme('color', 'error') // style color ), ( 'dark', // style name (class) - theme('color', 'text') // color + theme('color', 'text') // style color ) ), 'sizes': ( @@ -887,27 +914,32 @@ $options: ( ( 'primary', // class name theme('color', 'primary'), // bg color + white, // text color lighten(theme('color', 'primary'), 4%) // border color ), ( 'success', // class name theme('color', 'success'), // bg color + white, lighten(theme('color', 'success'), 4%) // border color ), ( 'warning', // class name theme('color', 'warning'), // bg color + white, // text color lighten(theme('color', 'warning'), 4%) // border color ), ( 'error', // class name theme('color', 'error'), // bg color + white, // text color lighten(theme('color', 'error'), 4%) // border color ), ( 'dark', // class name theme('color', 'dark'), // bg color + white, // text color color.$sharp-grey // border color ) ), @@ -960,6 +992,8 @@ $options: ( 'settings': ( 'padding': 0 16px, 'input' : ( + 'font-family' : inherit, + 'box-sizing' : inherit, 'color' : inherit, 'background-color': initial, 'border-color' : inherit, @@ -969,32 +1003,61 @@ $options: ( 'font-weight' : theme('typography', 'font-weight'), 'border-width' : theme('border', 'width'), 'border-style' : theme('border', 'style'), - 'border-radius' : 0, + 'border-radius' : theme('border', 'radius'), 'transition' : .35s, 'outline-color' : theme('color', 'primary'), 'outline-width' : 2px, 'box-shadow' : none, 'width' : 100%, - 'max-width' : 100%, + 'max-width' : 100% ), 'items': ( 'margin' : 0, 'item-spacer': 1px ), 'item': ( - 'margin' : .495rem 0, - 'padding': .295rem + 'height' : fit-content, + 'margin' : .495rem 0, + 'display' : inline-flex, + 'flex-wrap' : wrap, + 'width' : 100%, + 'max-width' : 100%, + 'position' : relative, + 'align-items': center, + 'padding' : .295rem ), 'label': ( - 'color' : theme('color', 'text'), - 'font-size' : .955rem, - 'font-weight': bold, - 'margin' : 0 + 'color' : theme('color', 'text'), + 'font-size' : .955rem, + 'font-weight' : bold, + 'margin' : 0, + 'text-transform': none, + 'height' : fit-content ), 'radio-checkbox': ( - 'width' : 1.6em, - 'height' : 1.6em, - 'accent-color': theme('color', 'primary') + 'display' : grid, + 'grid-template-columns': 1em auto, + 'gap' : 1rem, + 'place-content' : center, + 'margin' : 0, + 'width' : 1.6em, + 'height' : 1.6em, + 'accent-color' : theme('color', 'primary') + ), + 'textarea': ( + 'min-height': 6.5rem, + 'resize' : vertical + ), + 'fieldset': ( + 'border-width': 0, + 'padding' : 0.6em + ), + 'legend': ( + 'display' : block, + 'font-size' : 1.3rem, + 'font-weight' : bold, + 'margin-bottom': .7rem, + 'white-space' : normal ), 'small': ( 'color': color.$sharpen-grey, @@ -1003,15 +1066,15 @@ $options: ( 'styles': ( ( 'success', // class name - theme('color', 'success') // color + theme('color', 'success') // style color ), ( 'warning', // class name - theme('color', 'warning') // color + theme('color', 'warning') // style color ), ( 'error', // class name - theme('color', 'error') // color + theme('color', 'error') // style color ) ), // input sizes diff --git a/src/themes.scss b/src/themes.scss index 9da6df79..250cd635 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -107,9 +107,9 @@ $themes: ( 'text' : #c5cae1, 'background': #22232b, 'primary' : #3266ec, - 'success' : #53970e, - 'warning' : #ac7c09, - 'error' : #bb2f48, + 'success' : #57A85C, + 'warning' : #ac9309, + 'error' : #DA4E3D, 'dark' : #32343E ), 'border': ( @@ -144,7 +144,7 @@ $themes: ( ), 'form': ( 'input': ( - 'border-color' : #656679, + 'border-width' : 0, 'background-color': #32343E ) ), From 74216d3632b20079a2b47496ad838e7c0e3aec91 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 28 Nov 2024 19:43:30 +0300 Subject: [PATCH 094/154] b191 --- src/Core/Global/Getters.scss | 10 +++--- src/Modules/Elements/Button/Button.scss | 44 +++++++++++++++++++++---- src/Modules/Elements/Button/mixins.scss | 27 ++++++++------- src/options.scss | 25 ++++++++++---- src/themes.scss | 21 +++++------- 5 files changed, 86 insertions(+), 41 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 63cf7104..8decda33 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -23,7 +23,7 @@ /// @function options($keys...) { - @if null == map.get(option.$options, nth($keys, 1)) { + @if map.get(option.$options, nth($keys, 1)) == null { @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -40,14 +40,14 @@ $value: map.get($value, nth($keys, 2)); - @if null == $value { + @if $value == null { @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @if length($keys) > 2 { $value: map.get($value, nth($keys, 3)); - @if null == $value { + @if $value == null { @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -72,7 +72,7 @@ { $settings: map.get(map.get(options($node), 'settings'), nth($keys, 1)); - @if null == $settings { + @if $settings == null { @warn "[PUNICA] ::: INVALID KEY: #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -85,7 +85,7 @@ @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; } - @if null == map.get($settings, nth($keys, 2)) { + @if map.get($settings, nth($keys, 2)) == null { @warn "[PUNICA] ::: INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index 98c2206b..a7861b63 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -8,6 +8,7 @@ @use "../../../Core/Global/Sass" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; +@use "../../../Core/Theme/Getters" as *; @use "mixins" as *; @if enabled('elements', 'button') { @@ -24,7 +25,7 @@ text-decoration : elements('button', 'text-decoration'); white-space : elements('button', 'white-space'); color : elements('button', 'color'); - background : elements('button', 'background'); + background-color: elements('button', 'background'); background-image: elements('button', 'background-image'); outline : elements('button', 'outline'); width : elements('button', 'width'); @@ -44,20 +45,23 @@ background-image: none; } &:hover { - background: color.$grey; + background-color: color.$grey; } &:active, &:focus { - background: elements('button', 'background'); + background-color: elements('button', 'background'); } &.#{class('button', 'active')} { color : elements('button', 'color'); - background : color.$grey; + background-color: color.$grey; background-image: none; text-decoration : none; - &:focus, &:hover { - background: lighten(color.$grey, 5%); + background-color: lighten(color.$grey, 5%); + } + &:active, + &:focus { + background-color: lighten(color.$grey, 15%); } } &.#{class('button', 'inactive')} { @@ -65,6 +69,34 @@ cursor : default; background-image: none; } + + /// + /// PRELOADER BUTTON + /// + @if features('elements', 'button', 'preloader') { + &.#{class('button', 'preloader')} { + position : relative; + color : transparent !important; + pointer-events: elements('button', 'preloader', 'pointer-events'); + &::after { + position : absolute !important; + content : ""; + width : elements('button', 'preloader', 'width'); + height : elements('button', 'preloader', 'height'); + border-radius: elements('button', 'preloader', 'border-radius'); + border-bottom: elements('button', 'preloader', 'border-bottom'); + border-left : elements('button', 'preloader', 'border-left'); + border-right : elements('button', 'preloader', 'border-right'); + border-top : elements('button', 'preloader', 'border-top'); + animation : elements('button', 'preloader', 'animation'); + } + } + @keyframes spin { + 0% {transform: rotate(0deg);} + 100% {transform: rotate(360deg);} + } + } + // Block Button &.#{class('button', 'block')} { display: flex; diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 92068a94..92e17741 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -271,36 +271,39 @@ /// OUTLINED STYLE /// @if $outlined { - $textcolor: if(theme('type') == 'dark', $text-color, $bg-color); - background: transparent; - color : $textcolor; + $textcolor : if(theme('type') == 'dark', $text-color, $bg-color); + background-color: transparent; + color : $textcolor; i { color: $textcolor; } &:hover { - background: $bg-color !important; + background-color: $bg-color !important; } } @else { - background: $bg-color; - color : $text-color; + background-color: $bg-color; + color : $text-color; i { color: $text-color; } } &:hover { - background: lighten($bg-color, 7.5%); - color : $text-color; + background-color: lighten($bg-color, 7.5%); + color : $text-color; i { color: $text-color; } } &:active, &.#{class('button', 'active')} { - background: lighten($bg-color, 7.5%); - color : $text-color; - &:focus, + background-color: lighten($bg-color, 7.5%); + color : $text-color; &:hover { - background: lighten($bg-color, 12.5%); + background-color: lighten($bg-color, 12.5%); + } + &:active, + &:focus { + background-color: lighten($bg-color, 22.5%); } } @content; diff --git a/src/options.scss b/src/options.scss index 794c7128..eafcd914 100755 --- a/src/options.scss +++ b/src/options.scss @@ -858,12 +858,13 @@ $options: ( 'button': ( 'enabled': true, 'features': ( - 'group' : true, - 'vertical': true, - 'styles' : true, - 'sizes' : true, - 'outlined': true, - 'dropdown': true + 'group' : true, + 'vertical' : true, + 'styles' : true, + 'sizes' : true, + 'outlined' : true, + 'dropdown' : true, + 'preloader': true ), 'classnames': ( 'name' : 'button', @@ -873,6 +874,7 @@ $options: ( 'inactive' : 'inactive', 'block' : 'block', 'vertical' : 'vertical', + 'preloader' : 'preloader', // dropdown 'dropdown' : 'dropdown', 'dropdown-right' : 'right', @@ -910,6 +912,17 @@ $options: ( 'icon' : ( 'font-size': 1.12rem ), + 'preloader': ( + 'pointer-events': none, + 'width' : 1.3rem, + 'height' : 1.3rem, + 'border-radius' : 50%, + 'border-bottom' : 3px solid theme('color', 'primary'), + 'border-left' : 3px solid theme('color', 'primary'), + 'border-right' : 3px solid transparent, + 'border-top' : 3px solid transparent, + 'animation' : spin .55s linear infinite + ), 'styles': ( ( 'primary', // class name diff --git a/src/themes.scss b/src/themes.scss index 250cd635..7319d2e5 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -105,12 +105,12 @@ $themes: ( ), 'color': ( 'text' : #c5cae1, - 'background': #22232b, + 'background': #222226, 'primary' : #3266ec, - 'success' : #57A85C, - 'warning' : #ac9309, - 'error' : #DA4E3D, - 'dark' : #32343E + 'success' : #369138, + 'warning' : #c17f2a, + 'error' : #CC2B52, + 'dark' : #2f2d35 ), 'border': ( 'color' : #474a59, @@ -124,16 +124,13 @@ $themes: ( // the all default variables in the options.scss API file. 'components': ( 'menu': ( - 'background-color': lighten(#22232b, 2.5%), - 'item': ( - 'hover-bg': darken(#22232b, 3.5%) - ) + 'background-color': lighten(#222226, 2.5%) ), 'tabnav': ( 'border-bottom': 4px ), 'tooltip': ( - 'color' : #22232b, + 'color' : #222226, 'font-weight' : 500, 'background-color': #e1e6ff ) @@ -145,11 +142,11 @@ $themes: ( 'form': ( 'input': ( 'border-width' : 0, - 'background-color': #32343E + 'background-color': #2f2d35 ) ), 'table':( - 'hover-bg': lighten(#22232b, 3%), + 'hover-bg': lighten(#222226, 3%), 'caption' : ( 'border-bottom': 4px solid #474a59 ) From 5161a761efa7af847cd560c95ac310b0bbf7efb8 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 28 Nov 2024 21:14:31 +0300 Subject: [PATCH 095/154] b192 --- src/Modules/Components/Navbar/Navbar.scss | 10 +++++----- src/Modules/Components/Navbar/mixins.scss | 6 +++--- src/Modules/Elements/Form/Form.scss | 2 ++ src/themes.scss | 19 +++++++++++-------- 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index b7d6a93b..2eb1538c 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -133,7 +133,7 @@ .#{class('button', 'dropdown')} .#{class('button', 'name')} { background : transparent; border-color : transparent; - color : white; + color : components('navbar', 'color'); min-height : 100%; border-radius: 0; border : 0; @@ -141,17 +141,17 @@ color: white; } &:hover { - background: darken(components('navbar', 'background'), 10.15%); + background: darken(components('navbar', 'background'), 5%); border-radius: 0; } &:active, &.#{class('button', 'active')} { - color : white; - background: darken(components('navbar', 'background'), 7%); + color : components('navbar', 'color'); + background: darken(components('navbar', 'background'), 5%); transition: components('button', 'transition'); &:hover { transition: components('button', 'transition'); - background: darken(components('navbar', 'background'), 10%); + background: darken(components('navbar', 'background'), 7%); } } } diff --git a/src/Modules/Components/Navbar/mixins.scss b/src/Modules/Components/Navbar/mixins.scss index 85a2162b..990baec3 100644 --- a/src/Modules/Components/Navbar/mixins.scss +++ b/src/Modules/Components/Navbar/mixins.scss @@ -57,7 +57,7 @@ color: $text-color; } &:hover { - background: darken($bg-color, 10.15%); + background: darken($bg-color, 5%); } } } @@ -86,11 +86,11 @@ &:active, &.#{class('button', 'active')} { color: $text-color; - background: darken($bg-color, 7%); + background: darken($bg-color, 5%); transition: components('button', 'transition'); &:hover { transition: components('button', 'transition'); - background: darken($bg-color, 10%); + background: darken($bg-color, 7%); } } } diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index a8789151..ed6cab5e 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -7,6 +7,7 @@ @use "../../../Core/Global/Options" as *; @use "../../../Core/Global/Mixins" as *; @use "../../../Core/Global/Colors" as color; +@use "../../../Core/Theme/Getters" as *; @use "mixins"; @if enabled('elements', 'form') { @@ -44,6 +45,7 @@ &.#{$style-name} { color : $style-color; border-color: $style-color; + border-width: theme('border', 'width'); &:focus { outline-color: $style-color; } diff --git a/src/themes.scss b/src/themes.scss index 7319d2e5..3bdb85e0 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -28,10 +28,10 @@ $themes: ( 'text' : #202123, 'background': white, 'primary' : #3266ec, - 'success' : #53970e, - 'warning' : #ac7c09, - 'error' : #c11c3a, - 'dark' : #3f4359 + 'success' : #369138, + 'warning' : #c17f2a, + 'error' : #CC2B52, + 'dark' : #313035 ), 'border': ( 'color' : #c6c6c6, @@ -98,7 +98,7 @@ $themes: ( 'type' : 'dark', // light or dark (required*), 'typography': ( 'font-family': 'Inter Tight', - 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;700&display=swap', // embed/import url + 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;700&display=swap', // embed/import url 'font-size' : 1rem, 'font-weight': 500, 'line-height': 1.7 @@ -110,7 +110,7 @@ $themes: ( 'success' : #369138, 'warning' : #c17f2a, 'error' : #CC2B52, - 'dark' : #2f2d35 + 'dark' : #313035 ), 'border': ( 'color' : #474a59, @@ -126,6 +126,9 @@ $themes: ( 'menu': ( 'background-color': lighten(#222226, 2.5%) ), + 'navbar': ( + 'color': #c5cae1 + ), 'tabnav': ( 'border-bottom': 4px ), @@ -141,8 +144,8 @@ $themes: ( ), 'form': ( 'input': ( - 'border-width' : 0, - 'background-color': #2f2d35 + //'border-width' : 0, + 'background-color': #302f35 ) ), 'table':( From 1a1d9998b4c91d7d8ccaa7f47d841b24effc1144 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 28 Nov 2024 22:43:50 +0300 Subject: [PATCH 096/154] b193 --- src/Modules/Components/Menu/Menu.scss | 1 + src/Modules/Components/Navbar/Navbar.scss | 2 ++ src/options.scss | 8 +++++--- src/themes.scss | 1 - 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index e6b2df85..72f9e2e6 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -13,6 +13,7 @@ @if enabled('components', 'menu') { .#{class('menu', 'name')} { + font-family : components('menu', 'font-family'); background-color: components('menu', 'background-color'); border-radius : components('menu', 'border-radius'); margin : components('menu', 'margin'); diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 2eb1538c..6c95457f 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -18,6 +18,7 @@ flex-wrap : wrap; align-items : stretch; justify-content: space-between; + font-family : components('navbar', 'font-family'); min-height : components('navbar', 'min-height'); background : components('navbar', 'background'); color : components('navbar', 'color'); @@ -131,6 +132,7 @@ box-shadow: none; .#{class('button', 'name')}, .#{class('button', 'dropdown')} .#{class('button', 'name')} { + font-family : components('navbar', 'font-family'); background : transparent; border-color : transparent; color : components('navbar', 'color'); diff --git a/src/options.scss b/src/options.scss index eafcd914..bc2748d4 100755 --- a/src/options.scss +++ b/src/options.scss @@ -407,6 +407,7 @@ $options: ( 'small' : 'small' ), 'settings': ( + 'font-family' : inherit, 'width' : 100%, 'padding' : .9rem, 'margin' : 0, @@ -470,13 +471,14 @@ $options: ( 'gradient' : 'gradient' ), 'settings': ( - 'min-height' : 80px, + 'font-family' : inherit, 'font-size' : 1rem, 'color' : white, + 'font-weight' : bold, 'background' : theme('color', 'primary'), 'width' : 100%, + 'min-height' : 80px, 'button-padding': .935rem 1.4rem, - 'font-weight' : bold, 'brand' : ( 'padding' : 0, 'margin-right': 1rem, @@ -888,7 +890,7 @@ $options: ( 'display' : inline-flex, 'align-items' : center, 'justify-content' : center, - 'font-family' : theme('typography', 'font-family'), + 'font-family' : inherit, 'font-size' : 1.055em, 'font-weight' : bold, 'line-height' : 1, diff --git a/src/themes.scss b/src/themes.scss index 3bdb85e0..42546e82 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -144,7 +144,6 @@ $themes: ( ), 'form': ( 'input': ( - //'border-width' : 0, 'background-color': #302f35 ) ), From eb3419126540f7ec554d37b1987daf421ac4ed21 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 2 Dec 2024 16:16:45 +0300 Subject: [PATCH 097/154] b194 --- src/Core/Global/Getters.scss | 39 +++++--- src/Core/Global/Options.scss | 22 +++-- src/Core/Theme/Getters.scss | 11 ++- .../Components/Breadcrumb/Breadcrumb.scss | 15 +-- src/Modules/Components/Menu/Menu.scss | 12 +-- src/Modules/Components/Navbar/Navbar.scss | 2 +- src/Modules/Components/Process/Process.scss | 6 +- src/Modules/Components/Process/mixins.scss | 30 +++--- src/Modules/Elements/Base/Base.scss | 4 +- src/Modules/Elements/Button/Button.scss | 28 +++--- src/Modules/Elements/Button/mixins.scss | 4 + src/Modules/Elements/Form/Form.scss | 46 ++++----- src/Modules/Elements/Table/Table.scss | 8 +- src/options.scss | 95 ++++++++++++------- src/themes.scss | 2 +- 15 files changed, 192 insertions(+), 132 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 8decda33..1792aa11 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -23,8 +23,12 @@ /// @function options($keys...) { + @if length($keys) > 4 { + @warn "[PUNICA]:: Maximum Nesting Depth is 4."; + } + @if map.get(option.$options, nth($keys, 1)) == null { - @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA]:: INVALID KEY: #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -34,23 +38,23 @@ @return $value; } - @if length($keys) > 3 { - @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; - } - $value: map.get($value, nth($keys, 2)); @if $value == null { - @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA]:: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @if length($keys) > 2 { $value: map.get($value, nth($keys, 3)); @if $value == null { - @warn "[PUNICA] ::: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA]:: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } + + @if length($keys) > 3 { + $value: map.get($value, nth($keys, 4)); + } } @return $value; @@ -73,7 +77,7 @@ $settings: map.get(map.get(options($node), 'settings'), nth($keys, 1)); @if $settings == null { - @warn "[PUNICA] ::: INVALID KEY: #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA]:: INVALID KEY: #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -81,16 +85,23 @@ @return $settings; } - @if length($keys) > 3 { - @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; - } + $settings : map.get($settings, nth($keys, 2)); - @if map.get($settings, nth($keys, 2)) == null { - @warn "[PUNICA] ::: INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @if $settings == null { + @warn "[PUNICA]:: INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } - @return map.get($settings, nth($keys, 2)); + @if length($keys) > 2 { + $settings : map.get($settings, nth($keys, 3)); + + @if $settings == null { + @warn "[PUNICA]:: INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; + @return null; + } + } + + @return $settings; } /// diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 79189a0a..4090d1bc 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -96,19 +96,23 @@ /// @function set_variable($module, $keys...) { + @if length($keys) > 4 { + @warn "[PUNICA]:: Maximum Nesting Depth is 4."; + } + @if theme($module, nth($keys, 1), nth($keys, 2)) { $value : theme($module, nth($keys, 1), nth($keys, 2)); - @if length($keys) > 3 { - @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; - } - @if length($keys) > 2 { $value: theme($module, nth($keys, 1), nth($keys, 2), nth($keys, 3)); + + @if length($keys) > 3 { + $value: theme($module, nth($keys, 1), nth($keys, 2), nth($keys, 3), nth($keys, 4)); + } } @if($value != null) { - @return $value + @return $value; } } @@ -127,12 +131,12 @@ { $value: get.settings(nth($keys, 1), nth($keys, 2)); - @if length($keys) > 3 { - @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; - } - @if length($keys) > 2 { $value: get.settings(nth($keys, 1), nth($keys, 2), nth($keys, 3)); + + @if length($keys) > 3 { + $value: get.settings(nth($keys, 1), nth($keys, 2), nth($keys, 3), nth($keys, 4)); + } } @return $value; diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index e1b0bc45..72d4e5c7 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -24,12 +24,12 @@ /// @function theme($node, $keys...) { - $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); - - @if list.length($keys) > 3 { - @warn "[PUNICA] ::: MAXIMUM NESTING DEPTH IS 3."; + @if list.length($keys) > 4 { + @warn "[PUNICA]:: Maximum Nesting Depth is 4."; } + $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); + @if ($value != null and list.length($keys) > 0) { $value: if(map.has-key($value, list.nth($keys, 1)), map.get($value, list.nth($keys, 1)), null); @@ -39,6 +39,9 @@ @if ($value != null and list.length($keys) > 2) { $value: if(map.has-key($value, list.nth($keys, 3)), map.get($value, list.nth($keys, 3)), null); } + @if ($value != null and list.length($keys) > 3) { + $value: if(map.has-key($value, list.nth($keys, 4)), map.get($value, list.nth($keys, 4)), null); + } } } diff --git a/src/Modules/Components/Breadcrumb/Breadcrumb.scss b/src/Modules/Components/Breadcrumb/Breadcrumb.scss index 296bddda..b8f17f25 100644 --- a/src/Modules/Components/Breadcrumb/Breadcrumb.scss +++ b/src/Modules/Components/Breadcrumb/Breadcrumb.scss @@ -22,19 +22,20 @@ &:focus,&:hover,&:active,&.active { color: theme('color', 'primary'); } + // seperator &::after { - content : components('breadcrumb', 'seperator'); - color : theme('color', 'primary'); - font-size: components('breadcrumb', 'seperator-size'); - cursor : default; - padding : components('breadcrumb', 'padding'); // seperator padding + content : components('breadcrumb', 'seperator', 'content'); + color : components('breadcrumb', 'seperator', 'color'); + font-size: components('breadcrumb', 'seperator', 'font-size'); + cursor : components('breadcrumb', 'seperator', 'cursor'); + padding : components('breadcrumb', 'seperator', 'padding'); } &:first-child { margin-left: 0; } &.#{class('breadcrumb', 'active')} { - color : components('breadcrumb', 'active-color'); - font-weight: components('breadcrumb', 'active-weight'); + color : components('breadcrumb', 'active', 'color'); + font-weight: components('breadcrumb', 'active', 'font-weight'); &::after { content: none; } diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index 72f9e2e6..d1f3535b 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -48,16 +48,16 @@ font-weight : components('menu', 'item', 'font-weight'); transition : components('menu', 'item', 'transition'); &:hover { - color : components('menu', 'item', 'hover-color'); + color : components('menu', 'item', 'hover', 'color'); transition : components('menu', 'item', 'transition'); - background-color: components('menu', 'item', 'hover-bg'); + background-color: components('menu', 'item', 'hover', 'background-color'); } &:active, &:focus, &.#{class('menu', 'active')} { - color : components('menu', 'item', 'hover-color'); + color : components('menu', 'item', 'hover', 'color'); transition : components('menu', 'item', 'transition'); - background-color: components('menu', 'item', 'hover-bg'); + background-color: components('menu', 'item', 'hover', 'background-color'); } } i { @@ -71,7 +71,7 @@ vertical-align: components('menu', 'icon', 'vertical-align'); } .#{class('menu', 'name')} { - padding: components('menu', 'item', 'sub-padding'); + padding: components('menu', 'item', 'sub-menu', 'padding'); } } // menu badge @@ -84,7 +84,7 @@ } // small menu &.#{class('menu', 'small')} > .#{class('menu', 'item')} a { - font-size: components('menu', 'item', 'small-size'); + font-size: components('menu', 'item', 'small-menu', 'font-size'); } // divided menu &.#{class('menu', 'divided')} { diff --git a/src/Modules/Components/Navbar/Navbar.scss b/src/Modules/Components/Navbar/Navbar.scss index 6c95457f..667011d2 100644 --- a/src/Modules/Components/Navbar/Navbar.scss +++ b/src/Modules/Components/Navbar/Navbar.scss @@ -166,7 +166,7 @@ .#{class('button', 'name')}, .#{class('button', 'dropdown')} .#{class('button', 'name')} { font-size : components('navbar', 'font-size'); - padding : components('navbar', 'button-padding'); + padding : components('navbar', 'button', 'padding'); font-weight: components('navbar', 'font-weight'); } /// diff --git a/src/Modules/Components/Process/Process.scss b/src/Modules/Components/Process/Process.scss index ac089a5c..e4ec5b29 100644 --- a/src/Modules/Components/Process/Process.scss +++ b/src/Modules/Components/Process/Process.scss @@ -61,11 +61,11 @@ color: theme('color', 'primary'); &::after { position : absolute; - content : components('process', 'symbol'); // HTML Symbols - top : calc(-15px - #{components('process', 'symbol-size')}); + content : components('process', 'indicator', 'content'); + top : calc(-15px - #{components('process', 'indicator', 'font-size')}); left : calc(50% - ((#{components('process', 'stickbar', 'width')} * 10) / 2)); color : theme('color', 'primary'); - font-size: components('process', 'symbol-size'); + font-size: components('process', 'indicator', 'font-size'); } } &~.#{class('process', 'item')} { diff --git a/src/Modules/Components/Process/mixins.scss b/src/Modules/Components/Process/mixins.scss index 6d55c22c..d4277865 100644 --- a/src/Modules/Components/Process/mixins.scss +++ b/src/Modules/Components/Process/mixins.scss @@ -43,33 +43,33 @@ /// Vertical Process /// @mixin process-vertical() { - display: flex; - padding: components('process', 'vertical', 'padding'); - margin: components('process', 'vertical', 'margin'); + display : flex; + padding : components('process', 'vertical', 'padding'); + margin : components('process', 'vertical', 'margin'); flex-direction: column; - align-items: flex-start; + align-items : flex-start; .#{class('process', 'item')} { justify-content: flex-start; - align-items: center; - max-width: 100%; - min-width: 100%; - border-bottom: set-border(); - border-right: set-border(); - padding-left: 20px; + align-items : center; + max-width : 100%; + min-width : 100%; + border-bottom : set-border(); + border-right : set-border(); + padding-left : 20px; &:first-child { border-top: set-border(); } &:not(:first-child)::before { - width: components('process', 'stickbar', 'width'); + width : components('process', 'stickbar', 'width'); height: 100%; - left: 0; + left : 0; } a { &::before { width: components('process', 'vertical', 'bar-width'); } &:first-child::before { - left: 0; + left : 0; height: 100%; } } @@ -77,8 +77,8 @@ a { font-weight: bold; &::after { - top: 15px; - left: calc(-15px - #{components('process', 'symbol-size')}); + top : 15px; + left: calc(-15px - #{components('process', 'indicator', 'font-size')}); } } } diff --git a/src/Modules/Elements/Base/Base.scss b/src/Modules/Elements/Base/Base.scss index b489f5fa..4dbc0ceb 100644 --- a/src/Modules/Elements/Base/Base.scss +++ b/src/Modules/Elements/Base/Base.scss @@ -66,8 +66,8 @@ a { transition : elements('typography', 'href', 'transition'); &:focus, &:hover { - color : elements('typography', 'href', 'hover-color'); - text-decoration: elements('typography', 'href', 'hover-decoration'); + color : elements('typography', 'href', 'hover', 'color'); + text-decoration: elements('typography', 'href', 'hover', 'text-decoration'); transition : elements('typography', 'href', 'transition'); } } diff --git a/src/Modules/Elements/Button/Button.scss b/src/Modules/Elements/Button/Button.scss index a7861b63..0a710c25 100644 --- a/src/Modules/Elements/Button/Button.scss +++ b/src/Modules/Elements/Button/Button.scss @@ -64,12 +64,16 @@ background-color: lighten(color.$grey, 15%); } } + // inactive button &.#{class('button', 'inactive')} { pointer-events : none; cursor : default; background-image: none; } - + // rounded button + &.#{class('button', 'rounded')} { + border-radius: 500px; + } /// /// PRELOADER BUTTON /// @@ -79,16 +83,17 @@ color : transparent !important; pointer-events: elements('button', 'preloader', 'pointer-events'); &::after { - position : absolute !important; - content : ""; - width : elements('button', 'preloader', 'width'); - height : elements('button', 'preloader', 'height'); - border-radius: elements('button', 'preloader', 'border-radius'); - border-bottom: elements('button', 'preloader', 'border-bottom'); - border-left : elements('button', 'preloader', 'border-left'); - border-right : elements('button', 'preloader', 'border-right'); - border-top : elements('button', 'preloader', 'border-top'); - animation : elements('button', 'preloader', 'animation'); + position : absolute !important; + content : ""; + width : elements('button', 'preloader', 'width'); + height : elements('button', 'preloader', 'height'); + border-width : elements('button', 'preloader', 'border-width'); + border-style : elements('button', 'preloader', 'border-style'); + border-color : elements('button', 'preloader', 'indicator-color'); + border-radius : elements('button', 'preloader', 'border-radius'); + border-right-color: elements('button', 'preloader', 'border-right-color'); + border-top-color : elements('button', 'preloader', 'border-top-color'); + animation : elements('button', 'preloader', 'animation'); } } @keyframes spin { @@ -96,7 +101,6 @@ 100% {transform: rotate(360deg);} } } - // Block Button &.#{class('button', 'block')} { display: flex; diff --git a/src/Modules/Elements/Button/mixins.scss b/src/Modules/Elements/Button/mixins.scss index 92e17741..48b33658 100644 --- a/src/Modules/Elements/Button/mixins.scss +++ b/src/Modules/Elements/Button/mixins.scss @@ -280,6 +280,10 @@ &:hover { background-color: $bg-color !important; } + &:active, + &:focus { + background-color: lighten($bg-color, 7.5%) !important; + } } @else { background-color: $bg-color; color : $text-color; diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index ed6cab5e..4011235d 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -12,29 +12,31 @@ @if enabled('elements', 'form') { @include mixins.form-inputs() { - font-family : elements('form', 'input', 'font-family'); - box-sizing : elements('form', 'input', 'box-sizing'); - background-color : elements('form', 'input', 'background-color'); - border-width : elements('form', 'input', 'border-width'); - border-style : elements('form', 'input', 'border-style'); - border-color : elements('form', 'input', 'border-color'); - height : elements('form', 'input', 'height'); - border-radius : elements('form', 'input', 'border-radius'); - outline : elements('form', 'input', 'outline-width') solid transparent; - box-shadow : elements('form', 'input', 'box-shadow'); - outline-offset : -#{elements('form', 'input', 'outline-width')}; - padding : elements('form', 'input', 'padding'); - width : elements('form', 'input', 'width'); - max-width : elements('form', 'input', 'max-width'); - color : elements('form', 'input', 'color'); - font-size : elements('form', 'input', 'font-size'); - font-weight : elements('form', 'input', 'font-weight'); - transition : elements('form', 'input', 'transition'); + font-family : elements('form', 'input', 'font-family'); + box-sizing : elements('form', 'input', 'box-sizing'); + background-color: elements('form', 'input', 'background-color'); + border-width : elements('form', 'input', 'border-width'); + border-style : elements('form', 'input', 'border-style'); + border-color : elements('form', 'input', 'border-color'); + height : elements('form', 'input', 'height'); + border-radius : elements('form', 'input', 'border-radius'); + outline : elements('form', 'input', 'outline-width') solid transparent; + outline-color : elements('form', 'input', 'outline-color'); + outline-offset : -#{elements('form', 'input', 'outline-width')}; + box-shadow : elements('form', 'input', 'box-shadow'); + padding : elements('form', 'input', 'padding'); + width : elements('form', 'input', 'width'); + max-width : elements('form', 'input', 'max-width'); + color : elements('form', 'input', 'color'); + font-size : elements('form', 'input', 'font-size'); + font-weight : elements('form', 'input', 'font-weight'); + transition : elements('form', 'input', 'transition'); &:focus { - outline-color : elements('form', 'input', 'outline-color'); - outline-width : elements('form', 'input', 'outline-width'); - outline-offset : -#{elements('form', 'input', 'outline-width')}; - background-color: elements('form', 'input', 'background-color'); + outline-color : elements('form', 'input', 'focus', 'outline-color'); + outline-width : elements('form', 'input', 'focus', 'outline-width'); + outline-offset : -#{elements('form', 'input', 'focus', 'outline-width')}; + background-color: elements('form', 'input', 'focus', 'background-color'); + color : elements('form', 'input', 'focus', 'color'); z-index : 0; } /// diff --git a/src/Modules/Elements/Table/Table.scss b/src/Modules/Elements/Table/Table.scss index 357a1bac..91753feb 100644 --- a/src/Modules/Elements/Table/Table.scss +++ b/src/Modules/Elements/Table/Table.scss @@ -35,10 +35,10 @@ tr, tbody tr { &.#{class('table', 'active')} { - background-color: elements('table', 'hover-bg'); + background-color: elements('table', 'striped', 'background-color'); } &:nth-of-type(odd) { - background-color: elements('table', 'hover-bg'); + background-color: elements('table', 'striped', 'background-color'); } } } @@ -51,7 +51,7 @@ tr, tbody tr { &:hover { - background-color: elements('table', 'hover-bg'); + background-color: elements('table', 'hover', 'background-color'); color : theme('color', 'text'); } } @@ -62,7 +62,7 @@ transition: all 0.3s; &.#{class('table', 'active')}, &.#{class('table', 'active')}:hover { - background-color: elements('table', 'hover-bg'); + background-color: elements('table', 'hover', 'background-color'); } } td, diff --git a/src/options.scss b/src/options.scss index bc2748d4..57ff64ca 100755 --- a/src/options.scss +++ b/src/options.scss @@ -154,13 +154,19 @@ $options: ( 'settings': ( 'font-size' : 1rem, 'font-weight' : theme('typography', 'font-weight'), - 'active-weight' : bold, 'color' : theme('color', 'text'), - 'active-color' : theme('color', 'primary'), - 'seperator' : "\276D", // HTML Symbols - 'padding' : .3em, // seperator padding - 'seperator-size' : 1rem, 'text-decoration': none, + 'seperator': ( + 'content' : "\276D", + 'color' : theme('color', 'primary'), + 'font-size': 1rem, // HTML Symbols + 'padding' : .3em, + 'cursor' : default + ), + 'active': ( + 'font-weight': bold, + 'color' : theme('color', 'primary'), + ), 'sizes': ( ( 'small', // size name (class) @@ -432,12 +438,18 @@ $options: ( 'padding' : .28rem .9rem, 'font-size' : 1em, 'font-weight' : theme('typography', 'font-weight'), - 'small-size' : .945em, 'transition' : background .15s, - 'sub-padding' : .4rem, // padding of sub items 'text-decoration': none, - 'hover-color' : theme('color', 'text'), - 'hover-bg' : color.$grey, + 'hover': ( + 'color' : theme('color', 'text'), + 'background-color': color.$grey, + ), + 'small-menu': ( + 'font-size': .945em + ), + 'sub-menu': ( + 'padding': .4rem // padding of sub items + ) ), 'icon': ( 'font-size' : 1.2rem, @@ -478,7 +490,9 @@ $options: ( 'background' : theme('color', 'primary'), 'width' : 100%, 'min-height' : 80px, - 'button-padding': .935rem 1.4rem, + 'button': ( + 'padding': .935rem 1.4rem + ), 'brand' : ( 'padding' : 0, 'margin-right': 1rem, @@ -621,8 +635,10 @@ $options: ( 'settings': ( 'margin' : 3em 0, 'min-height' : 4rem, // for each item - 'symbol' : "\2756", // HTML Symbols - 'symbol-size': 1.8rem, + 'indicator': ( + 'content' : "\2756", // HTML Symbols, + 'font-size': 1.8rem, + ), 'stepbar' : ( 'height': 6px, ), @@ -872,6 +888,7 @@ $options: ( 'name' : 'button', 'group' : 'buttons', 'outlined' : 'outlined', + 'rounded' : 'rounded', 'active' : 'active', 'inactive' : 'inactive', 'block' : 'block', @@ -915,15 +932,16 @@ $options: ( 'font-size': 1.12rem ), 'preloader': ( - 'pointer-events': none, - 'width' : 1.3rem, - 'height' : 1.3rem, - 'border-radius' : 50%, - 'border-bottom' : 3px solid theme('color', 'primary'), - 'border-left' : 3px solid theme('color', 'primary'), - 'border-right' : 3px solid transparent, - 'border-top' : 3px solid transparent, - 'animation' : spin .55s linear infinite + 'pointer-events' : none, + 'width' : 1.3rem, + 'height' : 1.3rem, + 'border-radius' : 50%, + 'border-width' : 3px, + 'border-style' : solid, + 'indicator-color' : theme('color', 'primary'), // border color + 'border-right-color': transparent, + 'border-top-color' : transparent, + 'animation' : spin .55s linear infinite ), 'styles': ( ( @@ -1019,12 +1037,18 @@ $options: ( 'border-width' : theme('border', 'width'), 'border-style' : theme('border', 'style'), 'border-radius' : theme('border', 'radius'), - 'transition' : .35s, - 'outline-color' : theme('color', 'primary'), - 'outline-width' : 2px, 'box-shadow' : none, 'width' : 100%, - 'max-width' : 100% + 'max-width' : 100%, + 'transition' : .35s, + 'outline-color' : transparent, + 'outline-width' : 2px, + 'focus': ( + 'color' : inherit, + 'background-color': initial, + 'outline-color' : theme('color', 'primary'), + 'outline-width' : 2px + ), ), 'items': ( 'margin' : 0, @@ -1181,7 +1205,12 @@ $options: ( 'border-spacing' : 0, 'border-collapse': collapse, 'position' : relative, - 'hover-bg' : color.$grey, + 'hover': ( + 'background-color': color.$grey + ), + 'striped': ( + 'background-color': color.$grey + ), 'td': ( 'padding': .313rem .7rem, ), @@ -1217,12 +1246,14 @@ $options: ( 'color' : theme('color', 'text') ), 'href': ( - 'color' : theme('color', 'primary'), - 'hover-color' : theme('color', 'primary'), - 'text-decoration' : none, - 'hover-decoration': underline, - 'cursor' : pointer, - 'transition' : .15s ease-out, + 'color' : theme('color', 'primary'), + 'cursor' : pointer, + 'transition' : .15s ease-out, + 'text-decoration': none, + 'hover': ( + 'color' : theme('color', 'primary'), + 'text-decoration': underline, + ) ), 'placeholder': ( 'opacity': .5, diff --git a/src/themes.scss b/src/themes.scss index 42546e82..1cc8d099 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -127,7 +127,7 @@ $themes: ( 'background-color': lighten(#222226, 2.5%) ), 'navbar': ( - 'color': #c5cae1 + 'color': #cfd4ec ), 'tabnav': ( 'border-bottom': 4px From 3ae4c7cc7c1077beb6914362cb0e985eeb8b566a Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 2 Dec 2024 17:39:32 +0300 Subject: [PATCH 098/154] b195 --- src/Core/Global/Helpers.scss | 2 +- src/Core/Theme/Getters.scss | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/Core/Global/Helpers.scss b/src/Core/Global/Helpers.scss index 742d2f8d..b1b0ee56 100644 --- a/src/Core/Global/Helpers.scss +++ b/src/Core/Global/Helpers.scss @@ -8,6 +8,6 @@ /// @function theme-not-found($theme) { - $error: "Invalid theme name: #{$theme}. Punica's theme map does not contains a value associated with #{$theme}. Please check the 'themes.scss' file."; + $error: "[PUNICA]:: Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with #{$theme}. Please check the 'themes.scss' file."; @error $error; } \ No newline at end of file diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 72d4e5c7..c68e5f51 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -33,15 +33,14 @@ @if ($value != null and list.length($keys) > 0) { $value: if(map.has-key($value, list.nth($keys, 1)), map.get($value, list.nth($keys, 1)), null); - @if ($value != null and list.length($keys) > 1) { - $value: if(map.has-key($value, list.nth($keys, 2)), map.get($value, list.nth($keys, 2)), null); - - @if ($value != null and list.length($keys) > 2) { - $value: if(map.has-key($value, list.nth($keys, 3)), map.get($value, list.nth($keys, 3)), null); - } - @if ($value != null and list.length($keys) > 3) { - $value: if(map.has-key($value, list.nth($keys, 4)), map.get($value, list.nth($keys, 4)), null); + @for $key from 1 through list.length($keys) { + @if ($value != null and list.length($keys) > $key) { + $value: if(map.has-key($value, list.nth($keys, $key)), map.get($value, list.nth($keys, $key)), null); + + @if ($value != null) { + @return $value; } + } } } From 2abc4d593249db09586a8f8f7637a7d421ebd1ed Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 2 Dec 2024 18:54:24 +0300 Subject: [PATCH 099/154] b196 hotfix --- src/Core/Theme/Getters.scss | 17 +++++++++-------- src/options.scss | 4 ++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index c68e5f51..af7c32f6 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -33,16 +33,17 @@ @if ($value != null and list.length($keys) > 0) { $value: if(map.has-key($value, list.nth($keys, 1)), map.get($value, list.nth($keys, 1)), null); - @for $key from 1 through list.length($keys) { - @if ($value != null and list.length($keys) > $key) { - $value: if(map.has-key($value, list.nth($keys, $key)), map.get($value, list.nth($keys, $key)), null); - - @if ($value != null) { - @return $value; - } + @if ($value != null and list.length($keys) > 1) { + $value: if(map.has-key($value, list.nth($keys, 2)), map.get($value, list.nth($keys, 2)), null); + + @if ($value != null and list.length($keys) > 2) { + $value: if(map.has-key($value, list.nth($keys, 3)), map.get($value, list.nth($keys, 3)), null); } + @if ($value != null and list.length($keys) > 3) { + $value: if(map.has-key($value, list.nth($keys, 4)), map.get($value, list.nth($keys, 4)), null); + } } } - + @return $value; } diff --git a/src/options.scss b/src/options.scss index 57ff64ca..beab9c6b 100755 --- a/src/options.scss +++ b/src/options.scss @@ -157,9 +157,9 @@ $options: ( 'color' : theme('color', 'text'), 'text-decoration': none, 'seperator': ( - 'content' : "\276D", + 'content' : "\276D", // HTML Symbols 'color' : theme('color', 'primary'), - 'font-size': 1rem, // HTML Symbols + 'font-size': 1rem, 'padding' : .3em, 'cursor' : default ), From f7ad1a3ebd1736eb1820a0111b8cb16b83f85a81 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 2 Dec 2024 19:35:40 +0300 Subject: [PATCH 100/154] b197 fixes --- src/Core/Global/Getters.scss | 8 ++--- src/Core/Global/Helpers.scss | 2 +- src/Core/Global/Options.scss | 2 +- src/Core/Theme/Getters.scss | 2 +- src/Modules/Components/Card/Card.scss | 1 + src/Modules/Components/Label/Label.scss | 1 + src/Modules/Components/List/List.scss | 18 ++++++++++ src/Modules/Components/Menu/Menu.scss | 44 +++++++++++++++---------- src/options.scss | 24 +++++++++----- src/themes.scss | 10 ++++-- 10 files changed, 75 insertions(+), 37 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 1792aa11..c71619f5 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -24,11 +24,11 @@ @function options($keys...) { @if length($keys) > 4 { - @warn "[PUNICA]:: Maximum Nesting Depth is 4."; + @warn "[PUNICA] Maximum Nesting Depth is 4."; } @if map.get(option.$options, nth($keys, 1)) == null { - @warn "[PUNICA]:: INVALID KEY: #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -41,14 +41,14 @@ $value: map.get($value, nth($keys, 2)); @if $value == null { - @warn "[PUNICA]:: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @if length($keys) > 2 { $value: map.get($value, nth($keys, 3)); @if $value == null { - @warn "[PUNICA]:: INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } diff --git a/src/Core/Global/Helpers.scss b/src/Core/Global/Helpers.scss index b1b0ee56..93680d05 100644 --- a/src/Core/Global/Helpers.scss +++ b/src/Core/Global/Helpers.scss @@ -8,6 +8,6 @@ /// @function theme-not-found($theme) { - $error: "[PUNICA]:: Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with #{$theme}. Please check the 'themes.scss' file."; + $error: "[PUNICA] Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with #{$theme}. Please check the 'themes.scss' file."; @error $error; } \ No newline at end of file diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 4090d1bc..4278ed1e 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -97,7 +97,7 @@ @function set_variable($module, $keys...) { @if length($keys) > 4 { - @warn "[PUNICA]:: Maximum Nesting Depth is 4."; + @warn "[PUNICA] Maximum Nesting Depth is 4."; } @if theme($module, nth($keys, 1), nth($keys, 2)) { diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index af7c32f6..90fa20ed 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -25,7 +25,7 @@ @function theme($node, $keys...) { @if list.length($keys) > 4 { - @warn "[PUNICA]:: Maximum Nesting Depth is 4."; + @warn "[PUNICA] Maximum Nesting Depth is 4."; } $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index 91385183..b8c9aba1 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -18,6 +18,7 @@ // hover effect for cards @if features('components', 'card', 'hovered') { + // .hovered.cards &.#{class('card', 'hovered')} > .#{class('card', 'name')}:hover { background-color: darken(components('card', 'background-color'), 4%); transition : components('card', 'transition'); diff --git a/src/Modules/Components/Label/Label.scss b/src/Modules/Components/Label/Label.scss index 2271800c..d735b1a6 100644 --- a/src/Modules/Components/Label/Label.scss +++ b/src/Modules/Components/Label/Label.scss @@ -21,6 +21,7 @@ box-shadow : components('label', 'box-shadow'); border : components('label', 'border'); @include set-size(components('label', 'font-size'), components('label', 'padding')); + // .label > i >i { vertical-align: components('label', 'icon', 'vertical-align'); } diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index b109ac35..7b64f656 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -15,36 +15,46 @@ .#{class('list', 'name')} { list-style: none; margin : components('list', 'margin'); + // .list > .item >.#{class('list', 'item')} { display : flex; align-items: center; padding : components('list', 'item', 'padding'); margin : components('list', 'item', 'margin'); transition : components('list', 'item', 'transition'); + // .list > .item > img + // .list > .item > i >img, >i { margin-right: components('list', 'media', 'margin-right'); } + // .list > .item > span + // .list > .item > div &>span, &>div { /// ..children of a flex container are /// forced to have a block-flavored display type. display: contents; } + // .list > .item > body >.#{class('list', 'body')} { display : initial; flex : 1; line-height: components('list', 'body', 'line-height'); text-align : components('list', 'body', 'text-align'); + // .list > .item > body > title + // .list > .item > body > subtitle >.#{class('list', 'title')}, >.#{class('list', 'subtitle')} { display: block; } + // .list > .item > body > title >.#{class('list', 'title')} { font-size : components('list', 'title', 'font-size'); font-weight: components('list', 'title', 'font-weight'); line-height: components('list', 'title', 'line-height'); } + // .list > .item > body > subtitle >.#{class('list', 'subtitle')} { font-size : components('list', 'subtitle', 'font-size'); font-weight : components('list', 'subtitle', 'font-weight'); @@ -56,10 +66,12 @@ } } } + // .list > .item > actions >.#{class('list', 'actions')} { width : components('list', 'actions', 'width'); margin-left: components('list', 'actions', 'margin-left'); } + // .list > .item.active &.#{class('list', 'active')} { background: color.$grey; } @@ -68,6 +80,7 @@ /// DIVIDED /// @if features('components', 'list', 'divided') { + // .divided.list &.#{class('list', 'divided')} { >.#{class('list', 'item')} { border-bottom: set-border(); @@ -81,7 +94,9 @@ /// STRIPED /// @if features('components', 'list', 'striped') { + // .striped.list &.#{class('list', 'striped')} { + // .striped.list > .item >.#{class('list', 'item')} { &:nth-of-type(odd) { background: color.$grey; @@ -93,8 +108,11 @@ /// HOVERED /// @if features('components', 'list', 'hovered') { + // .hovered.list &.#{class('list', 'hovered')} { + // .hovered.list > .item >.#{class('list', 'item')} { + // .hovered.list > .item:hover &:hover { background: color.$grey; transition: components('list', 'item', 'transition'); diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index d1f3535b..0506ffe4 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -23,7 +23,7 @@ list-style : components('menu', 'list-style'); box-shadow : components('menu', 'box-shadow'); z-index : components('menu', 'z-index'); - // menu title + // .menu .title .#{class('menu', 'title')} { font-size : components('menu', 'title', 'font-size'); min-height : components('menu', 'title', 'min-height'); @@ -32,34 +32,40 @@ font-weight : components('menu', 'title', 'font-weight'); letter-spacing: components('menu', 'title', 'letter-spacing'); } - // menu item + // .menu .item .#{class('menu', 'item')} { - padding : 0; // default container - position : relative; + padding : components('menu', 'item', 'padding'); // default container + position : components('menu', 'item', 'position'); text-decoration: components('menu', 'item', 'text-decoration'); text-align : components('menu', 'item', 'text-align'); + // .menu .item > a & > a { - display : block; - text-decoration: components('menu', 'item', 'text-decoration'); - color : components('menu', 'item', 'color'); - width : components('menu', 'item', 'width'); - padding : components('menu', 'item', 'padding'); - font-size : components('menu', 'item', 'font-size'); - font-weight : components('menu', 'item', 'font-weight'); - transition : components('menu', 'item', 'transition'); + display : components('menu', 'item', 'href', 'display'); + text-decoration: components('menu', 'item', 'href', 'text-decoration'); + color : components('menu', 'item', 'href', 'color'); + width : components('menu', 'item', 'href', 'width'); + padding : components('menu', 'item', 'href', 'padding'); + font-size : components('menu', 'item', 'href', 'font-size'); + font-weight : components('menu', 'item', 'href', 'font-weight'); + transition : components('menu', 'item', 'href', 'transition'); + // .menu .item > a:hover &:hover { color : components('menu', 'item', 'hover', 'color'); - transition : components('menu', 'item', 'transition'); + transition : components('menu', 'item', 'href', 'transition'); background-color: components('menu', 'item', 'hover', 'background-color'); } + // .menu .item > a:active + // .menu .item > a:focus + // .menu .item > a.active &:active, &:focus, &.#{class('menu', 'active')} { color : components('menu', 'item', 'hover', 'color'); - transition : components('menu', 'item', 'transition'); + transition : components('menu', 'item', 'href', 'transition'); background-color: components('menu', 'item', 'hover', 'background-color'); } } + // .menu .item i i { @if theme('type') == 'light' { color: darken(color.$grey, 28%); @@ -70,11 +76,12 @@ margin-right : components('menu', 'icon', 'margin-right'); vertical-align: components('menu', 'icon', 'vertical-align'); } + // .menu .item .menu .#{class('menu', 'name')} { padding: components('menu', 'item', 'sub-menu', 'padding'); } } - // menu badge + // .menu .badge .#{class('menu', 'badge')} { position : absolute; right : components('menu', 'badge', 'right'); @@ -82,12 +89,13 @@ padding : components('menu', 'badge', 'padding'); font-size: components('menu', 'badge', 'font-size'); } - // small menu + // .small.menu &.#{class('menu', 'small')} > .#{class('menu', 'item')} a { - font-size: components('menu', 'item', 'small-menu', 'font-size'); + font-size: components('menu', 'small', 'font-size'); } - // divided menu + // .divided.menu &.#{class('menu', 'divided')} { + // .divided.menu .item .#{class('menu', 'item')} { border-bottom: set-border(); &:last-child { diff --git a/src/options.scss b/src/options.scss index beab9c6b..aeab1bd3 100755 --- a/src/options.scss +++ b/src/options.scss @@ -432,25 +432,31 @@ $options: ( 'letter-spacing': -.015rem ), 'item': ( - 'color' : theme('color', 'text'), - 'width' : 100%, + 'position' : relative, + 'padding' : 0, 'text-align' : left, - 'padding' : .28rem .9rem, - 'font-size' : 1em, - 'font-weight' : theme('typography', 'font-weight'), - 'transition' : background .15s, 'text-decoration': none, + 'href': ( + 'display' : block, + 'color' : theme('color', 'text'), + 'width' : 100%, + 'padding' : .28rem .9rem, + 'font-size' : 1em, + 'font-weight' : theme('typography', 'font-weight'), + 'text-decoration': none, + 'transition' : background .15s, + ), 'hover': ( 'color' : theme('color', 'text'), 'background-color': color.$grey, ), - 'small-menu': ( - 'font-size': .945em - ), 'sub-menu': ( 'padding': .4rem // padding of sub items ) ), + 'small': ( + 'font-size': .945em // small menu font-size + ), 'icon': ( 'font-size' : 1.2rem, 'margin-right' : 10px, diff --git a/src/themes.scss b/src/themes.scss index 1cc8d099..7dadd127 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -148,15 +148,19 @@ $themes: ( ) ), 'table':( - 'hover-bg': lighten(#222226, 3%), + 'hover': ( + 'background-color': lighten(#222226, 3%), + ), 'caption' : ( 'border-bottom': 4px solid #474a59 ) ), 'typography': ( 'href': ( - 'color' : #5580ff, - 'hover-color': lighten(#5580ff, 3%) + 'color': #5580ff, + 'hover': ( + 'color': lighten(#5580ff, 3%) + ) ) ) ) From 329887369d0bb6083bb43c5a965f0e2ebe2eaa3c Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 3 Dec 2024 17:04:40 +0300 Subject: [PATCH 101/154] b198 --- src/Core/Global/Getters.scss | 6 +- src/Modules/Utilities/index.scss | 120 ++++++++++++++++--------------- 2 files changed, 64 insertions(+), 62 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index c71619f5..8a5f6e42 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -77,7 +77,7 @@ $settings: map.get(map.get(options($node), 'settings'), nth($keys, 1)); @if $settings == null { - @warn "[PUNICA]:: INVALID KEY: #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -88,7 +88,7 @@ $settings : map.get($settings, nth($keys, 2)); @if $settings == null { - @warn "[PUNICA]:: INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } @@ -96,7 +96,7 @@ $settings : map.get($settings, nth($keys, 3)); @if $settings == null { - @warn "[PUNICA]:: INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; @return null; } } diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 161ae702..d56ab818 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -51,7 +51,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (stretch, center, flex-start, flex-end, space-between, space-around, space-evenly, initial, inherit) + 'values' : (stretch, center, flex-start, flex-end, space-between, space-around, space-evenly) ), /// /// Align Items @@ -67,7 +67,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (baseline, flex-start, flex-end, center, stretch, initial, inherit) + 'values' : (baseline, flex-start, flex-end, center, stretch) ), /// /// Align Self @@ -85,7 +85,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (auto, baseline, flex-start, flex-end, center, stretch, initial, inherit) + 'values' : (auto, baseline, flex-start, flex-end, center, stretch) ), /// /// Appearance @@ -354,7 +354,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (row, row-reverse, column, column-reverse, initial, inherit) + 'values' : (row, row-reverse, column, column-reverse) ), /// /// Flex Grow @@ -595,7 +595,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (baseline, flex-start, flex-end, center, space-between, space-around, initial, inherit) + 'values' : (baseline, flex-start, flex-end, center, space-between, space-around) ), /// /// Justify Items @@ -613,7 +613,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (stretch, start, left, center, end, right, initial, inherit) + 'values' : (stretch, start, left, center, end, right) ), /// /// Justify Self @@ -642,9 +642,7 @@ $helpers: ( ("end", end), ("right", right), ("first-baseline", first baseline), - ("last-baseline", last baseline), - ("initial", initial), - ("inherit", inherit) + ("last-baseline", last baseline) ) ), /// @@ -690,31 +688,32 @@ $helpers: ( 'property' : 'margin', // css property name (don't change it !) 'prefix' : 'm', // prefix of class name 'specificity': !important, // or null - 'unit' : rem, // length units (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : ( // class name (suffix), value + (auto, auto), (0, 0), // 0 - (2, 0.125), // 2px - (3, 0.188), // 3px - (4, 0.25), // 4px - (5, 0.313), // 5px - (6, 0.375), // 6px - (8, 0.5), // 8px - (10, 0.625), // 10px - (15, 0.938), // 15px - (20, 1.25), // 20px - (25, 1.563), // 25px - (30, 1.875), // 30px - (40, 2.5), // 40px - (50, 3.125), // 50px - (60, 3.75), // 60px - (70, 4.375), // 70px - (80, 5), // 80px - (100, 6.25), // 100px - (125, 7.813), // 125px - (150, 9.375), // 150px - (175, 10.938), // 175px - (200, 12.5), // 200px + (2, 0.125rem), // 2px + (3, 0.188rem), // 3px + (4, 0.25rem), // 4px + (5, 0.313rem), // 5px + (6, 0.375rem), // 6px + (8, 0.5rem), // 8px + (10, 0.625rem), // 10px + (15, 0.938rem), // 15px + (20, 1.25rem), // 20px + (25, 1.563rem), // 25px + (30, 1.875rem), // 30px + (40, 2.5rem), // 40px + (50, 3.125rem), // 50px + (60, 3.75rem), // 60px + (70, 4.375rem), // 70px + (80, 5rem), // 80px + (100, 6.25rem), // 100px + (125, 7.813rem), // 125px + (150, 9.375rem), // 150px + (175, 10.938rem), // 175px + (200, 12.5rem), // 200px ), 'values' : ( // infix, property @@ -744,7 +743,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (fill, contain, cover, none, scale-down, initial, inherit) + 'values' : (fill, contain, cover, none, scale-down) ), /// /// Order @@ -811,31 +810,32 @@ $helpers: ( 'property' : 'padding', // css property name (don't change it !) 'prefix' : 'p', // prefix of class name 'specificity': !important, // or null - 'unit' : rem, // length units (px, rem, em, %, vh, vw etc) + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : ( // class name (suffix), value + (auto, auto), (0, 0), // 0 - (2, 0.125), // 2px - (3, 0.188), // 3px - (4, 0.25), // 4px - (5, 0.313), // 5px - (6, 0.375), // 6px - (8, 0.5), // 8px - (10, 0.625), // 10px - (15, 0.938), // 15px - (20, 1.25), // 20px - (25, 1.563), // 25px - (30, 1.875), // 30px - (40, 2.5), // 40px - (50, 3.125), // 50px - (60, 3.75), // 60px - (70, 4.375), // 70px - (80, 5), // 80px - (100, 6.25), // 100px - (125, 7.813), // 125px - (150, 9.375), // 150px - (175, 10.938), // 175px - (200, 12.5), // 200px + (2, 0.125rem), // 2px + (3, 0.188rem), // 3px + (4, 0.25rem), // 4px + (5, 0.313rem), // 5px + (6, 0.375rem), // 6px + (8, 0.5rem), // 8px + (10, 0.625rem), // 10px + (15, 0.938rem), // 15px + (20, 1.25rem), // 20px + (25, 1.563rem), // 25px + (30, 1.875rem), // 30px + (40, 2.5rem), // 40px + (50, 3.125rem), // 50px + (60, 3.75rem), // 60px + (70, 4.375rem), // 70px + (80, 5rem), // 80px + (100, 6.25rem), // 100px + (125, 7.813rem), // 125px + (150, 9.375rem), // 150px + (175, 10.938rem), // 175px + (200, 12.5rem), // 200px ), 'values' : ( // infix, property @@ -851,7 +851,7 @@ $helpers: ( /// /// The place-content property is used in flexbox /// and grid layouts, and is a shorthand property for - /// align-content and justify-content properties.. + /// align-content and justify-content properties. /// /// @example place-content-center /// @example place-content-space-evenly @@ -863,7 +863,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (stretch, start, end, center, space-between, space-around, space-evenly, initial, inherit) + 'values' : (stretch, start, end, center, space-between, space-around, space-evenly) ), /// /// Place Items @@ -917,7 +917,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (static, absolute, fixed, relative, sticky, initial, inherit) + 'values' : (static, absolute, fixed, relative, sticky) ), /// /// Resize @@ -934,7 +934,7 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (none, both, horizontal, vertical, initial, inherit) + 'values' : (none, both, horizontal, vertical) ), /// /// Text Align @@ -1058,6 +1058,8 @@ $helpers: ( (72, 45rem), // 720px (80, 50rem), // 800px (120, 75rem), // 1200px + (140, 87.5rem), // 1400px + (160, 100rem), // 1600px ) ), /// @@ -1077,6 +1079,6 @@ $helpers: ( 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables - 'values' : (-1,0,1,10,20,30,40,50,100,999,9999,99999) + 'values' : (auto,-1,0,1,10,20,30,40,50,99) ) ) \ No newline at end of file From 8589ca4b60afcc453d462dc06769fe9b66040ac3 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Tue, 3 Dec 2024 18:11:08 +0300 Subject: [PATCH 102/154] b199 --- src/Modules/Utilities/helpers.scss | 6 ++ src/Modules/Utilities/index.scss | 161 +++++++++++++++++++++++++++++ src/Modules/Utilities/mixins.scss | 3 - 3 files changed, 167 insertions(+), 3 deletions(-) diff --git a/src/Modules/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss index 0f664ed5..bf2393fb 100644 --- a/src/Modules/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -13,6 +13,10 @@ @include set_utils('align-items'); @include set_utils('align-self'); @include set_utils('appearance'); + @include set_utils('background-clip', true); + @include set_utils('background-origin', true); + @include set_utils('background-position', true); + @include set_utils('background-repeat'); @include set_utils('background-color', true); @include color_palette(utils('background-color')); @include set_utils('border-color', true); @@ -22,6 +26,7 @@ @include set_border_sides(); @include set_utils('caret-color', true); @include set_utils('color', true); + @include set_utils('columns'); @include color_palette(utils('color')); @include set_utils('cursor'); @include set_utils('filter', true); @@ -35,6 +40,7 @@ @include set_utils('font-size', true); @include set_utils('font-style'); @include set_utils('font-weight'); + @include utils_with_specs(utils('gap')); @include set_utils('height', true); @include set_inset_helper('inset'); @include set_utils('justify-content'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index d56ab818..cb4c9e3d 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -105,6 +105,111 @@ $helpers: ( 'values' : (auto, none) ), /// + /// Background Clip + /// The background-clip property defines + /// how far the background (color or image) + /// should extend within an element. + /// + /// @example bg-clip-border + /// + 'background-clip': ( + 'enabled' : true, // true or false + 'property' : 'background-clip', // css property name (don't change it !) + 'prefix' : 'bg-clip-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : ( + // class name (suffix), value + ("border", border-box), + ("padding", padding-box), + ("content", content-box) + ) + ), + /// + /// Background Origin + /// The background-origin property specifies + /// the origin position (the background positioning area) + /// of a background image. + /// + /// @example bg-origin-padding + /// + 'background-origin': ( + 'enabled' : true, // true or false + 'property' : 'background-origin', // css property name (don't change it !) + 'prefix' : 'bg-origin-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : ( + // class name (suffix), value + ("border", border-box), + ("padding", padding-box), + ("content", content-box) + ) + ), + /// + /// Background Position + /// The background-position property + /// sets the starting position of a background image. + /// + /// @example bg-left-bottom + /// + 'background-position': ( + 'enabled' : true, // true or false + 'property' : 'background-position', // css property name (don't change it !) + 'prefix' : 'bg-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : ( + // class name (suffix), value + ("left", left), + ("left-top", left top), + ("left-center", left center), + ("left-bottom", left bottom), + ("right", right), + ("right-top", right top), + ("right-center", right center), + ("right-bottom", right bottom), + ("center", center), + ("center-top", center top), + ("center-bottom", center bottom) + ) + ), + /// + /// Background Repeat + /// The background-repeat property sets + /// if/how a background image will be repeated. + /// + /// @example bg-repeat + /// + 'background-repeat': ( + 'enabled' : true, // true or false + 'property' : 'background-repeat', // css property name (don't change it !) + 'prefix' : 'bg-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (repeat,repeat-x,repeat-y,no-repeat,space,round) + ), + /// + /// Background Size + /// The background-size property specifies + /// the size of the background images. + /// + /// @example bg-repeat + /// + 'background-size': ( + 'enabled' : true, // true or false + 'property' : 'background-size', // css property name (don't change it !) + 'prefix' : 'bg-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (auto,cover,contain) + ), + /// /// Background Colors /// The background-color property sets /// the background color of an element. The background of @@ -282,6 +387,24 @@ $helpers: ( ) ), /// + /// Columns + /// + /// The columns property specifies the + /// number of columns within an element. + /// + /// @example columns-auto + /// @example columns-4 + /// + 'columns': ( + 'enabled' : true, // true or false + 'property' : 'columns', // css property name (don't change it !) + 'prefix' : 'columns-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (auto,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16) + ), + /// /// Cursor /// /// The cursor property specifies the mouse cursor @@ -514,6 +637,44 @@ $helpers: ( 'values' : (100,200,300,400,500,600,700,800,900,normal,bold,bolder,lighter) ), /// + /// Gap + /// + /// The gap property defines the size of the gap + /// between the rows and between the columns + /// in flexbox, grid or multi-column layout. + /// + /// @example gap-0 + /// @example gap-x-24 + /// @example gap-y-8 + /// + 'gap': ( + 'enabled' : true, // true or false + 'property' : 'gap', // css property name (don't change it !) + 'prefix' : 'gap', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : ( + // class name (suffix), value + (0, 0), + (1, 1px), + (2, 0.125rem), // 2px + (4, 0.25rem), // 4px + (6, 0.375rem), // 6px + (8, 0.5rem), // 8px + (10, 0.625rem), // 10px + (16, 1rem), // 16px + (24, 1.5rem), // 24px + (32, 2rem) // 32px + + ), + 'values': ( + // infix, property + ("-", gap), + ("-x-", column-gap), + ("-y-", row-gap) + ) + ), + /// /// Height /// /// The height property sets the height of an element. diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index af0fd046..50cbaceb 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -222,9 +222,6 @@ .vw-100 { width: 100vw; } - .ungap { - gap: 0; - } .fade {opacity: 0;} /* seperator for flex */ .spacer { From 77d86280766bd749c6e77c4e5b23b82f8b407baa Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 4 Dec 2024 17:14:41 +0300 Subject: [PATCH 103/154] b200 --- src/Core/Global/Sass.scss | 10 ---------- src/Modules/Components/Card/Card.scss | 4 ++-- src/Modules/Components/List/List.scss | 10 +++++----- src/Modules/Utilities/mixins.scss | 9 +++++---- 4 files changed, 12 insertions(+), 21 deletions(-) diff --git a/src/Core/Global/Sass.scss b/src/Core/Global/Sass.scss index 24e38314..000088bb 100644 --- a/src/Core/Global/Sass.scss +++ b/src/Core/Global/Sass.scss @@ -2,16 +2,6 @@ /// Punica CSS Framework /// Core/Global/Sass.scss /// -/** - * Sass provides many built-in modules which contain useful functions - * (and the occasional mixin). These modules can be loaded with the - * @use rule like any user-defined stylesheet, and their functions can be - * called like any other module member. All built-in module URLs begin - * with sass: to indicate that they’re part of Sass itself. - * - * @link https://sass-lang.com/documentation/modules/ - * - **/ @use "sass:color" as *; /// diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index b8c9aba1..e961fe46 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -16,7 +16,7 @@ display : flex; flex-wrap: wrap; - // hover effect for cards + // hover effect for all cards @if features('components', 'card', 'hovered') { // .hovered.cards &.#{class('card', 'hovered')} > .#{class('card', 'name')}:hover { @@ -54,7 +54,7 @@ box-shadow: theme('shadow'); } - // hover effect for single card + // hover effect for single card only @if features('components', 'card', 'hovered') { &.#{class('card', 'hovered')}:hover { background-color: darken(components('card', 'background-color'), 4%); diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index 7b64f656..db9f2ba6 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -42,19 +42,19 @@ flex : 1; line-height: components('list', 'body', 'line-height'); text-align : components('list', 'body', 'text-align'); - // .list > .item > body > title - // .list > .item > body > subtitle + // .list > .item > .body > .title + // .list > .item > .body > .subtitle >.#{class('list', 'title')}, >.#{class('list', 'subtitle')} { display: block; } - // .list > .item > body > title + // .list > .item > .body > .title >.#{class('list', 'title')} { font-size : components('list', 'title', 'font-size'); font-weight: components('list', 'title', 'font-weight'); line-height: components('list', 'title', 'line-height'); } - // .list > .item > body > subtitle + // .list > .item > .body > .subtitle >.#{class('list', 'subtitle')} { font-size : components('list', 'subtitle', 'font-size'); font-weight : components('list', 'subtitle', 'font-weight'); @@ -66,7 +66,7 @@ } } } - // .list > .item > actions + // .list > .item > .actions >.#{class('list', 'actions')} { width : components('list', 'actions', 'width'); margin-left: components('list', 'actions', 'margin-left'); diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index 50cbaceb..26afb0bb 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -147,16 +147,17 @@ { $enabled: utils('border', 'enabled'); $borders: utils('border', 'specs'); + $unit : utils('border', 'unit'); @if $enabled { @each $class, $border in $borders { .border-x-#{$class} { - border-left-width: #{$border}px !important; - border-right-width: #{$border}px !important; + border-left-width: #{$border}#{$unit} !important; + border-right-width: #{$border}#{$unit} !important; } .border-y-#{$class} { - border-top-width: #{$border}px !important; - border-bottom-width: #{$border}px !important; + border-top-width: #{$border}#{$unit} !important; + border-bottom-width: #{$border}#{$unit} !important; } } } From eb1bfa759e24e5682730b8eb7f325bc41e46b88e Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 4 Dec 2024 19:55:12 +0300 Subject: [PATCH 104/154] b201 --- src/Modules/Utilities/index.scss | 2 +- src/Modules/Utilities/mixins.scss | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index cb4c9e3d..f96d52fc 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -198,7 +198,7 @@ $helpers: ( /// The background-size property specifies /// the size of the background images. /// - /// @example bg-repeat + /// @example bg-cover /// 'background-size': ( 'enabled' : true, // true or false diff --git a/src/Modules/Utilities/mixins.scss b/src/Modules/Utilities/mixins.scss index 26afb0bb..5c554797 100644 --- a/src/Modules/Utilities/mixins.scss +++ b/src/Modules/Utilities/mixins.scss @@ -148,14 +148,15 @@ $enabled: utils('border', 'enabled'); $borders: utils('border', 'specs'); $unit : utils('border', 'unit'); + $prefix : utils('border', 'prefix'); @if $enabled { @each $class, $border in $borders { - .border-x-#{$class} { + .#{$prefix}-x-#{$class} { border-left-width: #{$border}#{$unit} !important; border-right-width: #{$border}#{$unit} !important; } - .border-y-#{$class} { + .#{$prefix}-y-#{$class} { border-top-width: #{$border}#{$unit} !important; border-bottom-width: #{$border}#{$unit} !important; } From 743842fd7282597cbff61b24a76c374d0cdedef5 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 5 Dec 2024 00:05:34 +0300 Subject: [PATCH 105/154] b202 --- src/Core/Theme/Getters.scss | 3 ++- src/themes.scss | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 90fa20ed..68df93df 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -38,10 +38,11 @@ @if ($value != null and list.length($keys) > 2) { $value: if(map.has-key($value, list.nth($keys, 3)), map.get($value, list.nth($keys, 3)), null); - } + @if ($value != null and list.length($keys) > 3) { $value: if(map.has-key($value, list.nth($keys, 4)), map.get($value, list.nth($keys, 4)), null); } + } } } diff --git a/src/themes.scss b/src/themes.scss index 7dadd127..d78a3d58 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -42,7 +42,7 @@ $themes: ( 'shadow': 0 .25em .5em 0 rgba(0, 0, 0, 0.14), ////////////////////////////////////////////////////////// // You can use this section to override/change - // the all default variables in the options.scss API file. + // the all default settings in the options.scss API file. 'classnames': ( /* 'panel': ( @@ -75,7 +75,7 @@ $themes: ( ) ), // You can use this section to override/change the - // all default utility variables in the + // all default variable of utilities in the // Modules/Utilities/index.scss API file. 'utilities': ( //'enabled': false, // this option disables all helpers (default true). @@ -121,7 +121,7 @@ $themes: ( 'shadow': 0 .2em 1em 0 rgba(0,0,0,.17), ////////////////////////////////////////////////////////// // You can use this section to override/change - // the all default variables in the options.scss API file. + // the all default settings in the options.scss API file. 'components': ( 'menu': ( 'background-color': lighten(#222226, 2.5%) From 1aac1dcff2f24fc89a9e06b407d09bf8778537c6 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 5 Dec 2024 08:27:33 +0300 Subject: [PATCH 106/154] b203 --- src/Core/Global/Colors.scss | 8 ++++++-- src/Core/Global/Helpers.scss | 2 +- src/Core/Global/Sass.scss | 6 +++--- src/Modules/Components/Card/Card.scss | 3 +-- src/Modules/Components/Menu/Menu.scss | 12 +++++++++--- src/Modules/Elements/Table/Table.scss | 9 +++++---- src/options.scss | 17 ++++++++++++++--- src/themes.scss | 11 +++++++---- 8 files changed, 46 insertions(+), 22 deletions(-) diff --git a/src/Core/Global/Colors.scss b/src/Core/Global/Colors.scss index 98df31ee..fdcb171a 100644 --- a/src/Core/Global/Colors.scss +++ b/src/Core/Global/Colors.scss @@ -1,12 +1,16 @@ /// /// Punica CSS Framework -/// Core/Global/Colors.scss +/// [Core/Global/Colors.scss] +/// Secondary Color Variables/Mixes /// @use "sass:color" as color; @use "../Theme/Getters" as *; -// Secondary color variables/mixes +/// Grey $grey : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%); +$dark-grey : color.mix(theme('color', 'text'), theme('color', 'background'), 9.5%); +$darken-grey : color.mix(theme('color', 'text'), theme('color', 'background'), 4.5%); +// $sharp-grey : color.mix(theme('color', 'text'), theme('color', 'dark'), 24.5%); $sharpen-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 45%); \ No newline at end of file diff --git a/src/Core/Global/Helpers.scss b/src/Core/Global/Helpers.scss index 93680d05..21079cfd 100644 --- a/src/Core/Global/Helpers.scss +++ b/src/Core/Global/Helpers.scss @@ -8,6 +8,6 @@ /// @function theme-not-found($theme) { - $error: "[PUNICA] Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with #{$theme}. Please check the 'themes.scss' file."; + $error: "[PUNICA] Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with '#{$theme}'. Please check the 'themes.scss' file."; @error $error; } \ No newline at end of file diff --git a/src/Core/Global/Sass.scss b/src/Core/Global/Sass.scss index 000088bb..7ccf228f 100644 --- a/src/Core/Global/Sass.scss +++ b/src/Core/Global/Sass.scss @@ -2,7 +2,7 @@ /// Punica CSS Framework /// Core/Global/Sass.scss /// -@use "sass:color" as *; +@use "sass:color" as color; /// /// @param $color @@ -10,7 +10,7 @@ /// @function lighten($color, $value) { - @return adjust($color, $lightness: $value); + @return color.adjust($color, $lightness: $value); } /// @@ -19,5 +19,5 @@ /// @function darken($color, $value) { - @return adjust($color, $lightness: -$value); + @return color.adjust($color, $lightness: -$value); } \ No newline at end of file diff --git a/src/Modules/Components/Card/Card.scss b/src/Modules/Components/Card/Card.scss index e961fe46..43899dc1 100644 --- a/src/Modules/Components/Card/Card.scss +++ b/src/Modules/Components/Card/Card.scss @@ -20,8 +20,7 @@ @if features('components', 'card', 'hovered') { // .hovered.cards &.#{class('card', 'hovered')} > .#{class('card', 'name')}:hover { - background-color: darken(components('card', 'background-color'), 4%); - transition : components('card', 'transition'); + @extend .#{class('card', 'hovered')}, :hover; } } } diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index 0506ffe4..f2b0ba73 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -60,9 +60,15 @@ &:active, &:focus, &.#{class('menu', 'active')} { - color : components('menu', 'item', 'hover', 'color'); - transition : components('menu', 'item', 'href', 'transition'); - background-color: components('menu', 'item', 'hover', 'background-color'); + transition: components('menu', 'item', 'href', 'transition'); + } + // .menu .item > a.active + &.#{class('menu', 'active')} { + color : components('menu', 'item', 'active', 'color'); + background-color: components('menu', 'item', 'active', 'background-color'); + i { + color: components('menu', 'item', 'active', 'color') !important; + } } } // .menu .item i diff --git a/src/Modules/Elements/Table/Table.scss b/src/Modules/Elements/Table/Table.scss index 91753feb..6decb7c7 100644 --- a/src/Modules/Elements/Table/Table.scss +++ b/src/Modules/Elements/Table/Table.scss @@ -35,7 +35,7 @@ tr, tbody tr { &.#{class('table', 'active')} { - background-color: elements('table', 'striped', 'background-color'); + @extend .#{class('table', 'active')}; } &:nth-of-type(odd) { background-color: elements('table', 'striped', 'background-color'); @@ -52,17 +52,18 @@ tbody tr { &:hover { background-color: elements('table', 'hover', 'background-color'); - color : theme('color', 'text'); + color : elements('table', 'hover', 'color'); } } } } tr, tbody tr { - transition: all 0.3s; + transition: elements('table', 'transition'); &.#{class('table', 'active')}, &.#{class('table', 'active')}:hover { - background-color: elements('table', 'hover', 'background-color'); + color : elements('table', 'active', 'color'); + background-color: elements('table', 'active', 'background-color'); } } td, diff --git a/src/options.scss b/src/options.scss index aeab1bd3..5229e020 100755 --- a/src/options.scss +++ b/src/options.scss @@ -446,9 +446,13 @@ $options: ( 'text-decoration': none, 'transition' : background .15s, ), + 'active': ( + 'color' : theme('color', 'text'), + 'background-color': color.$grey + ), 'hover': ( 'color' : theme('color', 'text'), - 'background-color': color.$grey, + 'background-color': color.$grey ), 'sub-menu': ( 'padding': .4rem // padding of sub items @@ -1211,11 +1215,18 @@ $options: ( 'border-spacing' : 0, 'border-collapse': collapse, 'position' : relative, + 'transition' : all 0.3s, 'hover': ( - 'background-color': color.$grey + 'color' : theme('color', 'text'), + 'background-color': color.$darken-grey ), 'striped': ( - 'background-color': color.$grey + 'color' : theme('color', 'text'), + 'background-color': color.$darken-grey + ), + 'active': ( + 'color' : theme('color', 'text'), + 'background-color': color.$dark-grey ), 'td': ( 'padding': .313rem .7rem, diff --git a/src/themes.scss b/src/themes.scss index d78a3d58..f7da8608 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -124,7 +124,13 @@ $themes: ( // the all default settings in the options.scss API file. 'components': ( 'menu': ( - 'background-color': lighten(#222226, 2.5%) + 'background-color': lighten(#222226, 2.5%), + 'item': ( + 'active': ( + 'color': white, + 'background-color': #3266ec + ) + ) ), 'navbar': ( 'color': #cfd4ec @@ -148,9 +154,6 @@ $themes: ( ) ), 'table':( - 'hover': ( - 'background-color': lighten(#222226, 3%), - ), 'caption' : ( 'border-bottom': 4px solid #474a59 ) From dd93275a6a6a44f4a25590d09cd0fed249820579 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Thu, 5 Dec 2024 19:00:27 +0300 Subject: [PATCH 107/154] b204 --- src/Core/Theme/Getters.scss | 22 +++++++++++----------- src/themes.scss | 3 --- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 68df93df..8c28076d 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -30,17 +30,17 @@ $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); - @if ($value != null and list.length($keys) > 0) { - $value: if(map.has-key($value, list.nth($keys, 1)), map.get($value, list.nth($keys, 1)), null); - - @if ($value != null and list.length($keys) > 1) { - $value: if(map.has-key($value, list.nth($keys, 2)), map.get($value, list.nth($keys, 2)), null); - - @if ($value != null and list.length($keys) > 2) { - $value: if(map.has-key($value, list.nth($keys, 3)), map.get($value, list.nth($keys, 3)), null); - - @if ($value != null and list.length($keys) > 3) { - $value: if(map.has-key($value, list.nth($keys, 4)), map.get($value, list.nth($keys, 4)), null); + @if (list.length($keys) > 0) { + @for $key from 1 through list.length($keys) { + @if ($value != null) { + $value: if(map.has-key($value, list.nth($keys, $key)), map.get($value, list.nth($keys, $key)), null); + @if (list.length($keys) == $key) { + @return $value; + } + @if ($value != null) { + @if (map.has-key($value, list.nth($keys, $key)) and list.length($keys) > $key) { + $value: if(map.has-key($value, list.nth($keys, $key)), map.get($value, list.nth($keys, $key)), null); + } } } } diff --git a/src/themes.scss b/src/themes.scss index f7da8608..8663ec9d 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -132,9 +132,6 @@ $themes: ( ) ) ), - 'navbar': ( - 'color': #cfd4ec - ), 'tabnav': ( 'border-bottom': 4px ), From de4d878380bf5422af628b4c503c183abad2879e Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 8 Dec 2024 19:51:55 +0300 Subject: [PATCH 108/154] b205 --- src/Core/Global/Getters.scss | 8 +- src/Core/Global/Options.scss | 2 +- src/Core/Theme/Getters.scss | 4 +- src/Modules/Components/List/List.scss | 22 +-- src/Modules/Components/Panel/Panel.scss | 18 +-- src/Modules/Components/Process/Process.scss | 16 +- src/Modules/Components/Process/mixins.scss | 4 +- src/Modules/Components/Timeline/Timeline.scss | 22 +-- src/Modules/Elements/Form/Form.scss | 4 +- src/Modules/Utilities/helpers.scss | 4 + src/Modules/Utilities/index.scss | 80 ++++++++++ src/options.scss | 146 +++++++++--------- src/punica.scss | 2 +- 13 files changed, 211 insertions(+), 121 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 8a5f6e42..137c8b05 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -24,7 +24,7 @@ @function options($keys...) { @if length($keys) > 4 { - @warn "[PUNICA] Maximum Nesting Depth is 4."; + @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4."; } @if map.get(option.$options, nth($keys, 1)) == null { @@ -54,6 +54,10 @@ @if length($keys) > 3 { $value: map.get($value, nth($keys, 4)); + @if $value == null { + @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)} > #{nth($keys, 4)}" + ' key is not found or key returns null in the [options.scss] file.'; + @return null; + } } } @@ -85,7 +89,7 @@ @return $settings; } - $settings : map.get($settings, nth($keys, 2)); + $settings: map.get($settings, nth($keys, 2)); @if $settings == null { @warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 4278ed1e..3079d865 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -97,7 +97,7 @@ @function set_variable($module, $keys...) { @if length($keys) > 4 { - @warn "[PUNICA] Maximum Nesting Depth is 4."; + @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4."; } @if theme($module, nth($keys, 1), nth($keys, 2)) { diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 8c28076d..a981425d 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -24,8 +24,8 @@ /// @function theme($node, $keys...) { - @if list.length($keys) > 4 { - @warn "[PUNICA] Maximum Nesting Depth is 4."; + @if list.length($keys) > 5 { + @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 5."; } $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); diff --git a/src/Modules/Components/List/List.scss b/src/Modules/Components/List/List.scss index db9f2ba6..08fbbe0b 100644 --- a/src/Modules/Components/List/List.scss +++ b/src/Modules/Components/List/List.scss @@ -26,7 +26,7 @@ // .list > .item > i >img, >i { - margin-right: components('list', 'media', 'margin-right'); + margin-right: components('list', 'item', 'media', 'margin-right'); } // .list > .item > span // .list > .item > div @@ -40,8 +40,8 @@ >.#{class('list', 'body')} { display : initial; flex : 1; - line-height: components('list', 'body', 'line-height'); - text-align : components('list', 'body', 'text-align'); + line-height: components('list', 'item', 'body', 'line-height'); + text-align : components('list', 'item', 'body', 'text-align'); // .list > .item > .body > .title // .list > .item > .body > .subtitle >.#{class('list', 'title')}, @@ -50,15 +50,15 @@ } // .list > .item > .body > .title >.#{class('list', 'title')} { - font-size : components('list', 'title', 'font-size'); - font-weight: components('list', 'title', 'font-weight'); - line-height: components('list', 'title', 'line-height'); + font-size : components('list', 'item', 'title', 'font-size'); + font-weight: components('list', 'item', 'title', 'font-weight'); + line-height: components('list', 'item', 'title', 'line-height'); } // .list > .item > .body > .subtitle >.#{class('list', 'subtitle')} { - font-size : components('list', 'subtitle', 'font-size'); - font-weight : components('list', 'subtitle', 'font-weight'); - margin-bottom: components('list', 'subtitle', 'margin-bottom'); + font-size : components('list', 'item', 'subtitle', 'font-size'); + font-weight : components('list', 'item', 'subtitle', 'font-weight'); + margin-bottom: components('list', 'item', 'subtitle', 'margin-bottom'); @if theme('type') == 'light' { color: darken(color.$grey, 20%); } @else if theme('type') == 'dark' { @@ -68,8 +68,8 @@ } // .list > .item > .actions >.#{class('list', 'actions')} { - width : components('list', 'actions', 'width'); - margin-left: components('list', 'actions', 'margin-left'); + width : components('list', 'item', 'actions', 'width'); + margin-left: components('list', 'item', 'actions', 'margin-left'); } // .list > .item.active &.#{class('list', 'active')} { diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index 687de21e..3467cc96 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -47,8 +47,8 @@ border-bottom-style: dotted; } >.#{class('panel', 'title')} { - font-size : components('panel', 'title', 'font-size'); - font-weight: components('panel', 'title', 'font-weight'); + font-size : components('panel', 'header', 'title', 'font-size'); + font-weight: components('panel', 'header', 'title', 'font-weight'); } } &>.#{class('panel', 'content')} { @@ -64,7 +64,7 @@ flex : auto; min-width : 0; flex-wrap : wrap; - margin-bottom: components('panel', 'media', 'margin-bottom'); + margin-bottom: components('panel', 'content', 'media', 'margin-bottom'); @include embedded-media(); img { display: block; @@ -79,12 +79,12 @@ } .#{class('panel', 'headline')}, p.#{class('panel', 'headline')} { - font-size : components('panel', 'headline', 'font-size'); - line-height : components('panel', 'headline', 'line-height'); - margin-bottom : components('panel', 'headline', 'margin-bottom'); - color : components('panel', 'headline', 'color'); - letter-spacing: components('panel', 'headline', 'letter-spacing'); - text-wrap : components('panel', 'headline', 'text-wrap') + font-size : components('panel', 'content', 'headline', 'font-size'); + line-height : components('panel', 'content', 'headline', 'line-height'); + margin-bottom : components('panel', 'content', 'headline', 'margin-bottom'); + color : components('panel', 'content', 'headline', 'color'); + letter-spacing: components('panel', 'content', 'headline', 'letter-spacing'); + text-wrap : components('panel', 'content', 'headline', 'text-wrap') } } &>.#{class('panel', 'bottom')} { diff --git a/src/Modules/Components/Process/Process.scss b/src/Modules/Components/Process/Process.scss index e4ec5b29..9ace3f4c 100644 --- a/src/Modules/Components/Process/Process.scss +++ b/src/Modules/Components/Process/Process.scss @@ -34,7 +34,7 @@ top : 0; width : 100%; background: theme('color', 'primary'); - height : components('process', 'stepbar', 'height'); + height : components('process', 'item', 'stepbar', 'height'); } a { color : theme('color', 'text'); @@ -48,12 +48,12 @@ top : 0; left : 50%; background: theme('color', 'primary'); - height : components('process', 'stickbar', 'height'); - width : components('process', 'stickbar', 'width'); + height : components('process', 'item', 'stickbar', 'height'); + width : components('process', 'item', 'stickbar', 'width'); z-index : 1; } &:first-child::before { - left: calc(50% - (#{variables('process', 'stickbar', 'width')} - 1px)); + left: calc(50% - (#{variables('process', 'item', 'stickbar', 'width')} - 1px)); } } &.#{class('process', 'active')} { @@ -61,11 +61,11 @@ color: theme('color', 'primary'); &::after { position : absolute; - content : components('process', 'indicator', 'content'); - top : calc(-15px - #{components('process', 'indicator', 'font-size')}); - left : calc(50% - ((#{components('process', 'stickbar', 'width')} * 10) / 2)); + content : components('process', 'item', 'indicator', 'content'); + top : calc(-15px - #{components('process', 'item', 'indicator', 'font-size')}); + left : calc(50% - ((#{components('process', 'item', 'stickbar', 'width')} * 10) / 2)); color : theme('color', 'primary'); - font-size: components('process', 'indicator', 'font-size'); + font-size: components('process', 'item', 'indicator', 'font-size'); } } &~.#{class('process', 'item')} { diff --git a/src/Modules/Components/Process/mixins.scss b/src/Modules/Components/Process/mixins.scss index d4277865..e3d64ffc 100644 --- a/src/Modules/Components/Process/mixins.scss +++ b/src/Modules/Components/Process/mixins.scss @@ -60,7 +60,7 @@ border-top: set-border(); } &:not(:first-child)::before { - width : components('process', 'stickbar', 'width'); + width : components('process', 'item', 'stickbar', 'width'); height: 100%; left : 0; } @@ -78,7 +78,7 @@ font-weight: bold; &::after { top : 15px; - left: calc(-15px - #{components('process', 'indicator', 'font-size')}); + left: calc(-15px - #{components('process', 'item', 'indicator', 'font-size')}); } } } diff --git a/src/Modules/Components/Timeline/Timeline.scss b/src/Modules/Components/Timeline/Timeline.scss index c9a003c6..cbbbca55 100644 --- a/src/Modules/Components/Timeline/Timeline.scss +++ b/src/Modules/Components/Timeline/Timeline.scss @@ -41,12 +41,12 @@ background-color: color.$grey; justify-content : center; flex-shrink : 0; - width : components('timeline', 'type-width'); - height : components('timeline', 'type-width'); - top : components('timeline', 'type', 'top'); - left : -(calc(components('timeline', 'type-width') / 2px) - components('timeline', 'border-width')); - border : components('timeline', 'type', 'border'); - border-radius : components('timeline', 'type', 'border-radius'); + width : components('timeline', 'item', 'type', 'width'); + height : components('timeline', 'item', 'type', 'width'); + top : components('timeline', 'item', 'type', 'top'); + left : -(calc(components('timeline', 'item', 'type', 'width') / 2px) - components('timeline', 'border-width')); + border : components('timeline', 'item', 'type', 'border'); + border-radius : components('timeline', 'item', 'type', 'border-radius'); box-shadow: theme('shadow'); /// /// STYLES @@ -74,13 +74,13 @@ width : 100%; } .#{class('timeline', 'author')} { - font-weight: components('timeline', 'author', 'font-weight'); - font-size : components('timeline', 'author', 'font-size'); - color : components('timeline', 'author', 'color'); + font-weight: components('timeline', 'item', 'author', 'font-weight'); + font-size : components('timeline', 'item', 'author', 'font-size'); + color : components('timeline', 'item', 'author', 'color'); } .#{class('timeline', 'date')} { - font-size: components('timeline', 'date', 'font-size'); - opacity : components('timeline', 'date', 'opacity'); + font-size: components('timeline', 'item', 'date', 'font-size'); + opacity : components('timeline', 'item', 'date', 'opacity'); } /// /// MEDIA diff --git a/src/Modules/Elements/Form/Form.scss b/src/Modules/Elements/Form/Form.scss index 4011235d..07b25128 100644 --- a/src/Modules/Elements/Form/Form.scss +++ b/src/Modules/Elements/Form/Form.scss @@ -79,7 +79,7 @@ padding : elements('form', 'padding'); .#{class('form', 'item')} { height : elements('form', 'item', 'height'); - margin : elements('form', 'item', 'margin'); + margin : elements('form', 'item', 'margin-y') elements('form', 'item', 'margin-x'); display : elements('form', 'item', 'display'); flex-wrap : elements('form', 'item', 'flex-wrap'); width : elements('form', 'item', 'width'); @@ -168,7 +168,7 @@ @each $name, $number in elements('form', 'columns') { .#{$name}.#{class('form', 'items')} { >.#{class('form', 'item')} { - flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{elements('form', 'items', 'item-spacer')})); + flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{elements('form', 'item', 'margin-x')})); } } @include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') { diff --git a/src/Modules/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss index bf2393fb..5729aac7 100644 --- a/src/Modules/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -51,6 +51,10 @@ @include set_sides(utils('margin')); @include set_utils('object-fit'); @include set_utils('order'); + @include set_utils('outline-color', true); + @include set_utils('outline-offset'); + @include set_utils('outline-style'); + @include set_utils('outline-width'); @include set_utils('overflow', false, true); @include utils_with_specs(utils('padding')); @include set_sides(utils('padding'), 'padding'); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index f96d52fc..7aad4b9e 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -925,6 +925,86 @@ $helpers: ( 'values' : (1,2,3,4,5) ), /// + /// Outline Color + /// + /// The outline-color property is used to set + /// the color of the outline. + /// + /// @example outline-primary + /// + 'outline-color': ( + 'enabled' : true, // true or false + 'property' : 'outline-color', // css property name (don't change it !) + 'prefix' : 'outline-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : ( + // class name (suffix), value + ("grey", color.$grey), + ("white", white), + ("black", black), + ("text", theme('color', 'text')), + ("primary", theme('color', 'primary')), + ("success", theme('color', 'success')), + ("warning", theme('color', 'warning')), + ("error", theme('color', 'error')), + ("dark", theme('color', 'dark')) + ) + ), + /// + /// Outline Style + /// + /// The outline-width property specifies + /// the width of the outline. + /// + /// @example outline-4 + /// + 'outline-style': ( + 'enabled' : true, // true or false + 'property' : 'outline-style', // css property name (don't change it !) + 'prefix' : 'outline-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (solid,dashed,dotted,double) + ), + /// + /// Outline Offset + /// + /// The outline-offset property adds space between + /// an outline and the edge/border of an element. + /// The space between an element and its outline is transparent. + /// + /// @example outline-offset-2 + /// + 'outline-offset': ( + 'enabled' : true, // true or false + 'property' : 'outline-offset', // css property name (don't change it !) + 'prefix' : 'outline-offset-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (0,1,2,4,8) + ), + /// + /// Outline Offset + /// + /// The outline-width property specifies + /// the width of the outline. + /// + /// @example outline-4 + /// + 'outline-width': ( + 'enabled' : true, // true or false + 'property' : 'outline-width', // css property name (don't change it !) + 'prefix' : 'outline-', // prefix of class name + 'specificity': !important, // or null + 'unit' : null, // length units (px, rem, em, %, vh, vw etc) + 'specs' : null, // for extra variables + 'values' : (0,1,2,4,8) + ), + /// /// Overflow /// /// The overflow property specifies what should diff --git a/src/options.scss b/src/options.scss index 5229e020..04cd189d 100755 --- a/src/options.scss +++ b/src/options.scss @@ -375,28 +375,28 @@ $options: ( 'item': ( 'padding' : .55em, 'margin' : 0, - 'transition': .15s - ), - 'media': ( - 'margin-right': 1rem - ), - 'body': ( - 'line-height': 1.4, - 'text-align' : left - ), - 'title': ( - 'font-size' : 1.15rem, - 'font-weight': bold, - 'line-height': 1.4 - ), - 'subtitle': ( - 'font-size' : .889em, - 'font-weight' : theme('typography', 'font-weight'), - 'margin-bottom': 7px - ), - 'actions': ( - 'width' : auto, - 'margin-left': 1rem + 'transition': .15s, + 'media': ( + 'margin-right': 1rem + ), + 'body': ( + 'line-height': 1.4, + 'text-align' : left + ), + 'title': ( + 'font-size' : 1.15rem, + 'font-weight': bold, + 'line-height': 1.4 + ), + 'subtitle': ( + 'font-size' : .889em, + 'font-weight' : theme('typography', 'font-weight'), + 'margin-bottom': 7px + ), + 'actions': ( + 'width' : auto, + 'margin-left': 1rem + ) ) ) ), @@ -590,41 +590,41 @@ $options: ( 'border-radius' : theme('border', 'radius'), 'background-color': theme('color', 'background'), 'header' : ( - 'padding': .85rem - ), - 'title': ( - 'font-size': 1.185rem, - 'font-weight': bold - ), - 'headline': ( - 'font-size' : 1.35rem, - 'line-height' : 1.5, - 'margin-bottom' : 1.275rem, - 'color' : theme('color', 'text'), - 'letter-spacing': -.0158em, - 'text-wrap' : auto + 'padding': 1.45rem, + 'title': ( + 'font-size': 1.185rem, + 'font-weight': bold + ) ), 'content': ( - 'padding': .85rem + 'padding': 1.45rem, + 'headline': ( + 'font-size' : 1.35rem, + 'line-height' : 1.5, + 'margin-bottom' : 1.275rem, + 'color' : theme('color', 'text'), + 'letter-spacing': -.0158em, + 'text-wrap' : auto + ), + 'media': ( + 'margin-bottom': 32px + ) ), 'bottom': ( 'min-height': 3.125rem, 'border-top': set-border(), // default border - 'padding' : .85rem - ), - 'media': ( - 'margin-bottom': 32px + 'padding' : 1.45rem ), 'sizes': ( ( "mini", // size name (class) .985rem, // font-size (title) - .25rem .9rem // padding (title/content/bottom) + .25rem 1.45rem // padding (title/content/bottom) ), ( "small", // size name (class) 1.038rem, // font-size (title) - .5rem .9rem // padding (title/content/bottom) + .5rem 1.45rem // padding (title/content/bottom) ) ) ) @@ -643,18 +643,20 @@ $options: ( 'reversed': 'reversed' ), 'settings': ( - 'margin' : 3em 0, - 'min-height' : 4rem, // for each item - 'indicator': ( - 'content' : "\2756", // HTML Symbols, - 'font-size': 1.8rem, - ), - 'stepbar' : ( - 'height': 6px, - ), - 'stickbar': ( - 'width' : 3px, - 'height': .8rem + 'margin' : 3em 0, + 'min-height': 4rem, // for each item + 'item': ( + 'stepbar' : ( + 'height': 6px, + ), + 'stickbar': ( + 'width' : 3px, + 'height': .8rem + ), + 'indicator': ( + 'content' : "\2756", // HTML Symbols, + 'font-size': 1.8rem, + ), ), 'vertical': ( 'margin' : 1em 0, @@ -782,25 +784,25 @@ $options: ( 'actions': 'actions' ), 'settings': ( - 'type-width' : 32px, 'border-width': 1px, 'item': ( 'background-color': color.$grey, 'padding' : 1.25em 2em 2.85em, - ), - 'type': ( - 'top' : 17px, - 'border-radius': 500px, - 'border' : 2px theme('border', 'style') theme('border', 'color'), - ), - 'author': ( - 'color' : theme('color', 'text'), - 'font-size' : 1rem, - 'font-weight': bold - ), - 'date': ( - 'font-size': .9em, - 'opacity' : .6 + 'type': ( + 'width' : 32px, + 'top' : 17px, + 'border-radius': 500px, + 'border' : 2px theme('border', 'style') theme('border', 'color'), + ), + 'author': ( + 'color' : theme('color', 'text'), + 'font-size' : 1rem, + 'font-weight': bold + ), + 'date': ( + 'font-size': .9em, + 'opacity' : .6 + ) ), 'styles': ( ( @@ -1061,12 +1063,12 @@ $options: ( ), ), 'items': ( - 'margin' : 0, - 'item-spacer': 1px + 'margin': 0 ), 'item': ( 'height' : fit-content, - 'margin' : .495rem 0, + 'margin-y' : .495rem, + 'margin-x' : 5px, 'display' : inline-flex, 'flex-wrap' : wrap, 'width' : 100%, diff --git a/src/punica.scss b/src/punica.scss index 9a5bb534..6046e9f1 100755 --- a/src/punica.scss +++ b/src/punica.scss @@ -8,7 +8,7 @@ @use "themes" as get; /// ====================================================== - $active-theme: dark; + $active-theme: default; /// ====================================================== $theme: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); $theme-map: map.get(get.$themes, $theme) !global; From 8f3a2b2aa0bdd8038da15cbb9b0fc94b78044c9e Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 8 Dec 2024 19:56:58 +0300 Subject: [PATCH 109/154] b206 --- src/Core/Theme/Getters.scss | 4 ++-- src/Modules/Utilities/index.scss | 7 +++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index a981425d..6186a0a2 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -24,8 +24,8 @@ /// @function theme($node, $keys...) { - @if list.length($keys) > 5 { - @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 5."; + @if list.length($keys) > 4 { + @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4."; } $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index 7aad4b9e..d7d41adb 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -955,10 +955,9 @@ $helpers: ( /// /// Outline Style /// - /// The outline-width property specifies - /// the width of the outline. + /// The outline-style property specifies the style of an outline /// - /// @example outline-4 + /// @example outline-dashed /// 'outline-style': ( 'enabled' : true, // true or false @@ -988,7 +987,7 @@ $helpers: ( 'values' : (0,1,2,4,8) ), /// - /// Outline Offset + /// Outline Width /// /// The outline-width property specifies /// the width of the outline. From 65fd49cfa51d9227a1fa406d289fbca3d76e898a Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 8 Dec 2024 20:32:13 +0300 Subject: [PATCH 110/154] b207 --- src/Modules/Components/Panel/Panel.scss | 6 ++++++ src/options.scss | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Modules/Components/Panel/Panel.scss b/src/Modules/Components/Panel/Panel.scss index 3467cc96..346b40bd 100644 --- a/src/Modules/Components/Panel/Panel.scss +++ b/src/Modules/Components/Panel/Panel.scss @@ -104,6 +104,12 @@ font-size: $font-size; } } + >.#{class('panel', 'content')} { + .#{class('panel', 'headline')}, + p.#{class('panel', 'headline')} { + font-size: $font-size * 1.2; + } + } >.#{class('panel', 'content')}, >.#{class('panel', 'bottom')} { padding: $padding; diff --git a/src/options.scss b/src/options.scss index 04cd189d..9a0d6fe2 100755 --- a/src/options.scss +++ b/src/options.scss @@ -590,7 +590,7 @@ $options: ( 'border-radius' : theme('border', 'radius'), 'background-color': theme('color', 'background'), 'header' : ( - 'padding': 1.45rem, + 'padding': 1rem, 'title': ( 'font-size': 1.185rem, 'font-weight': bold @@ -611,7 +611,7 @@ $options: ( ) ), 'bottom': ( - 'min-height': 3.125rem, + 'min-height': 2.4rem, 'border-top': set-border(), // default border 'padding' : 1.45rem ), From 8b9a77fa583a82c0ef9366439c2b6db3d20ea2b4 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Sun, 8 Dec 2024 20:36:26 +0300 Subject: [PATCH 111/154] b208 --- src/options.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/options.scss b/src/options.scss index 9a0d6fe2..409c40bd 100755 --- a/src/options.scss +++ b/src/options.scss @@ -590,7 +590,7 @@ $options: ( 'border-radius' : theme('border', 'radius'), 'background-color': theme('color', 'background'), 'header' : ( - 'padding': 1rem, + 'padding': 1.45rem, 'title': ( 'font-size': 1.185rem, 'font-weight': bold From 685cae72cb2fa0bbe056fd0bf4b48e7b3404f6cf Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Mon, 9 Dec 2024 18:07:01 +0300 Subject: [PATCH 112/154] b209 --- src/Core/Theme/Getters.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index 6186a0a2..b3e942f4 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -37,11 +37,6 @@ @if (list.length($keys) == $key) { @return $value; } - @if ($value != null) { - @if (map.has-key($value, list.nth($keys, $key)) and list.length($keys) > $key) { - $value: if(map.has-key($value, list.nth($keys, $key)), map.get($value, list.nth($keys, $key)), null); - } - } } } } From e36b8711e139e77f4012dad7699a1ef344f19cb7 Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 11 Dec 2024 05:32:29 +0300 Subject: [PATCH 113/154] b210 --- src/Core/Global/Getters.scss | 22 +++++++++++----------- src/Core/Global/Helpers.scss | 6 ++++++ src/Core/Global/Options.scss | 3 ++- src/Core/Theme/Getters.scss | 7 ++++--- src/Modules/Components/Menu/Menu.scss | 3 ++- src/options.scss | 3 ++- src/punica.scss | 6 +++--- src/themes.scss | 8 ++++---- 8 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/Core/Global/Getters.scss b/src/Core/Global/Getters.scss index 137c8b05..af42cc0e 100644 --- a/src/Core/Global/Getters.scss +++ b/src/Core/Global/Getters.scss @@ -7,8 +7,8 @@ @use "sass:list" as *; @use "../Theme/Getters" as *; @use "../../options" as option; -@use "../../Modules/Utilities/index" as helper; -@use "Helpers"; +@use "../../Modules/Utilities/index" as utility; +@use "Helpers" as helper; /// /// Get options value by key @@ -24,11 +24,11 @@ @function options($keys...) { @if length($keys) > 4 { - @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4."; + @warn helper.$nesting-depth; } @if map.get(option.$options, nth($keys, 1)) == null { - @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn helper.$invalid-key + " #{nth($keys, 1)} " + helper.$key-not-found; @return null; } @@ -41,21 +41,21 @@ $value: map.get($value, nth($keys, 2)); @if $value == null { - @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn helper.$invalid-key + " #{nth($keys, 1)} > #{nth($keys, 2)} " + helper.$key-not-found; @return null; } @if length($keys) > 2 { $value: map.get($value, nth($keys, 3)); @if $value == null { - @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn helper.$invalid-key + " #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)} " + helper.$key-not-found; @return null; } @if length($keys) > 3 { $value: map.get($value, nth($keys, 4)); @if $value == null { - @warn "[PUNICA] INVALID KEY: #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)} > #{nth($keys, 4)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn helper.$invalid-key + " #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)} > #{nth($keys, 4)} " + helper.$key-not-found; @return null; } } @@ -81,7 +81,7 @@ $settings: map.get(map.get(options($node), 'settings'), nth($keys, 1)); @if $settings == null { - @warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn helper.$invalid-key + " #{$node} > settings > #{nth($keys, 1)} " + helper.$key-not-found; @return null; } @@ -92,7 +92,7 @@ $settings: map.get($settings, nth($keys, 2)); @if $settings == null { - @warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn helper.$invalid-key + " #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)} " + helper.$key-not-found; @return null; } @@ -100,7 +100,7 @@ $settings : map.get($settings, nth($keys, 3)); @if $settings == null { - @warn "[PUNICA] INVALID KEY: #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}" + ' key is not found or key returns null in the [options.scss] file.'; + @warn helper.$invalid-key + " #{$node} > settings > #{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)} " + helper.$key-not-found; @return null; } } @@ -147,7 +147,7 @@ @return theme('utilities', $node, $key); } - $util: if(map.has-key(helper.$helpers, $node), map.get(helper.$helpers, $node), null); + $util: if(map.has-key(utility.$helpers, $node), map.get(utility.$helpers, $node), null); @if ($util != null) and $key { $util: if(map.has-key($util, $key), map.get($util, $key), null); diff --git a/src/Core/Global/Helpers.scss b/src/Core/Global/Helpers.scss index 21079cfd..e4b4453a 100644 --- a/src/Core/Global/Helpers.scss +++ b/src/Core/Global/Helpers.scss @@ -3,9 +3,15 @@ /// Core/Global/Helpers.scss // +$invalid-key : "[PUNICA] INVALID KEY:"; +$key-not-found: "key is not found or key returns null in the [options.scss] file."; +$nesting-depth: "[PUNICA] The maximum nesting depth is restricted to 4."; + /// /// @param {String} $theme /// +/// @return string +/// @function theme-not-found($theme) { $error: "[PUNICA] Invalid theme name: [#{$theme}]. Punica's theme map does not contains a key name associated with '#{$theme}'. Please check the 'themes.scss' file."; diff --git a/src/Core/Global/Options.scss b/src/Core/Global/Options.scss index 3079d865..e8d96539 100644 --- a/src/Core/Global/Options.scss +++ b/src/Core/Global/Options.scss @@ -7,6 +7,7 @@ @use "sass:list" as *; @use "../Theme/Getters" as *; @use "Getters" as get; +@use "Helpers" as helper; /// /// Get a specific component's variable from the theme map @@ -97,7 +98,7 @@ @function set_variable($module, $keys...) { @if length($keys) > 4 { - @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4."; + @warn helper.$nesting-depth; } @if theme($module, nth($keys, 1), nth($keys, 2)) { diff --git a/src/Core/Theme/Getters.scss b/src/Core/Theme/Getters.scss index b3e942f4..c54b5341 100644 --- a/src/Core/Theme/Getters.scss +++ b/src/Core/Theme/Getters.scss @@ -5,9 +5,10 @@ @use "sass:map" as map; @use "sass:list" as list; +@use "../Global/Helpers" as helper; /// ====================================================== - $theme-map: null !default; + $theme: null !default; /// ====================================================== /// @@ -25,10 +26,10 @@ @function theme($node, $keys...) { @if list.length($keys) > 4 { - @warn "[PUNICA] The Maximum Nesting Depth is Restricted to 4."; + @warn helper.$nesting-depth; } - $value: if(map.has-key($theme-map, $node), map.get($theme-map, $node), null); + $value: if(map.has-key($theme, $node), map.get($theme, $node), null); @if (list.length($keys) > 0) { @for $key from 1 through list.length($keys) { diff --git a/src/Modules/Components/Menu/Menu.scss b/src/Modules/Components/Menu/Menu.scss index f2b0ba73..b2369fba 100644 --- a/src/Modules/Components/Menu/Menu.scss +++ b/src/Modules/Components/Menu/Menu.scss @@ -82,9 +82,10 @@ margin-right : components('menu', 'icon', 'margin-right'); vertical-align: components('menu', 'icon', 'vertical-align'); } + // Sub Menu // .menu .item .menu .#{class('menu', 'name')} { - padding: components('menu', 'item', 'sub-menu', 'padding'); + padding: components('menu', 'item', 'menu', 'padding'); } } // .menu .badge diff --git a/src/options.scss b/src/options.scss index 409c40bd..ef2f2aca 100755 --- a/src/options.scss +++ b/src/options.scss @@ -454,7 +454,8 @@ $options: ( 'color' : theme('color', 'text'), 'background-color': color.$grey ), - 'sub-menu': ( + // sub menu + 'menu': ( 'padding': .4rem // padding of sub items ) ), diff --git a/src/punica.scss b/src/punica.scss index 6046e9f1..2dba1a0f 100755 --- a/src/punica.scss +++ b/src/punica.scss @@ -10,8 +10,8 @@ /// ====================================================== $active-theme: default; /// ====================================================== - $theme: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); - $theme-map: map.get(get.$themes, $theme) !global; + $theme-name: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme)); + $theme : map.get(get.$themes, $theme-name) !global; /// ====================================================== /*! @@ -28,4 +28,4 @@ @use "Modules/Components/index" as components; @use "Modules/Utilities/helpers"; @debug "#{theme('name')} is compiled successfully."; -$theme-map: null !global; \ No newline at end of file +$theme: null !global; \ No newline at end of file diff --git a/src/themes.scss b/src/themes.scss index 8663ec9d..91592aee 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -55,9 +55,9 @@ $themes: ( */ ), 'components': ( - 'tabnav': ( + /*'tabnav': ( 'border-bottom': 4px - ), + ),*/ /* 'navbar': ( 'brand': ( @@ -70,9 +70,9 @@ $themes: ( */ ), 'elements': ( - 'button': ( + /*'button': ( 'font-weight': 500 - ) + )*/ ), // You can use this section to override/change the // all default variable of utilities in the From 10358c4734c8783b30534124e5b40478a2dd609d Mon Sep 17 00:00:00 2001 From: UnderlineWords Date: Wed, 11 Dec 2024 09:51:42 +0300 Subject: [PATCH 114/154] b211 --- src/Modules/Elements/Grid/Grid.scss | 2 +- src/Modules/Utilities/helpers.scss | 2 ++ src/Modules/Utilities/index.scss | 54 +++++++++++++++++++++++++++-- src/Modules/Utilities/mixins.scss | 6 ++-- src/options.scss | 4 +-- src/punica.scss | 11 +++--- 6 files changed, 66 insertions(+), 13 deletions(-) diff --git a/src/Modules/Elements/Grid/Grid.scss b/src/Modules/Elements/Grid/Grid.scss index c04278ea..d1638235 100644 --- a/src/Modules/Elements/Grid/Grid.scss +++ b/src/Modules/Elements/Grid/Grid.scss @@ -24,7 +24,7 @@ .#{class('grid', 'row')} { display : grid; grid-gap : elements('grid', 'gap'); - grid-template-columns: repeat($column-size, 1fr); + grid-template-columns: repeat($column-size, minmax(0, 1fr)); &> [class^="#{class('grid', 'column')}"] { height : fit-content; padding : elements('grid', 'columns', 'padding'); diff --git a/src/Modules/Utilities/helpers.scss b/src/Modules/Utilities/helpers.scss index 5729aac7..dbc2bee1 100644 --- a/src/Modules/Utilities/helpers.scss +++ b/src/Modules/Utilities/helpers.scss @@ -50,6 +50,7 @@ @include utils_with_specs(utils('margin')); @include set_sides(utils('margin')); @include set_utils('object-fit'); + @include set_utils('object-position', true); @include set_utils('order'); @include set_utils('outline-color', true); @include set_utils('outline-offset'); @@ -68,6 +69,7 @@ @include set_utils('text-transform'); @include set_utils('text-wrap'); @include set_utils('user-select'); + @include set_utils('vertical-align'); @include set_utils('width', true); @include set_utils('z-index'); @include other_helpers(); diff --git a/src/Modules/Utilities/index.scss b/src/Modules/Utilities/index.scss index d7d41adb..30b8a2de 100644 --- a/src/Modules/Utilities/index.scss +++ b/src/Modules/Utilities/index.scss @@ -894,19 +894,50 @@ $helpers: ( /// in a variety of ways; such as "preserve that aspect ratio" /// or "stretch up and take up as much space as possible". /// - /// @example fit-cover - /// @example fit-scale-down + /// @example object-cover + /// @example object-scale-down /// 'object-fit': ( 'enabled' : true, // true or false 'property' : 'object-fit', // css property name (don't change it !) - 'prefix' : 'fit-', // prefix of class name + 'prefix' : 'object-', // prefix of class name 'specificity': !important, // or null 'unit' : null, // length units (px, rem, em, %, vh, vw etc) 'specs' : null, // for extra variables 'values' : (fill, contain, cover, none, scale-down) ), /// + /// Object Position + /// + /// The object-position property is used together + /// with object-fit to specify how an or