diff --git a/LICENSE b/LICENSE
index 3178eae9..04653795 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2020-23 CodeForms / Fatih Kececi
+Copyright (c) 2020-25 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..90ad046c 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,23 @@
-## Introduction
+## Punica CSS Framework v3
- Nightly Builds Templates Documentation Changelog
-
- 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.
+ Punica CSS Framework is a clean, lightweight, responsive, modern, and fully customizable API-Driven Framework
-
-### 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
-Material Symbols and Icons library, therefore you should include this library as well. That's it!
+### HTML Markup
+For your default setup, add the Punica CSS file to the element of your HTML5 document.
```html
@@ -35,10 +25,30 @@ For your default setup, add the Punica CSS file to the element of your HT
Title
should be resized to fit its container.
-/// This property tells the content to fill the container
-/// in a variety of ways; such as "preserve that aspect ratio"
-/// or "stretch up and take up as much space as possible".
-///
-$object-fit: (
- // class name, value
- ("fit-fill", fill),
- ("fit-contain", contain),
- ("fit-cover", cover),
- ("fit-none", none),
- ("fit-scale-down", scale-down),
- ("fit-initial", initial),
- ("fit-inherit", inherit)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/order.scss b/src/Utilities/_config/order.scss
deleted file mode 100644
index f6f0ff07..00000000
--- a/src/Utilities/_config/order.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-///
-/// Order
-///
-/// The order property specifies the order
-/// of a flexible item relative to the rest
-/// of the flexible items inside the same container.
-///
-$orders: (
- // class name (prefix), property
- "order-": "order"
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/overflow.scss b/src/Utilities/_config/overflow.scss
deleted file mode 100644
index a1b4e7ab..00000000
--- a/src/Utilities/_config/overflow.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-///
-/// Overflow
-///
-/// The overflow property specifies what should
-/// happen if content overflows an element's box.
-///
-$overflow-properties: (
- // class name, property, value
- ("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)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/padding.scss b/src/Utilities/_config/padding.scss
deleted file mode 100644
index 11d1a55b..00000000
--- a/src/Utilities/_config/padding.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-///
-/// Padding
-///
-/// An element's padding is the space between
-/// its content and its border.
-///
-$padding-helpers: (
- // class name (prefix), property
- ("p-", "padding"),
- ("pt-", "padding-top"),
- ("pr-", "padding-right"),
- ("pb-", "padding-bottom"),
- ("pl-", "padding-left")
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/place-content.scss b/src/Utilities/_config/place-content.scss
deleted file mode 100644
index d244ffab..00000000
--- a/src/Utilities/_config/place-content.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-///
-/// Place Content
-///
-/// The place-content property is used in flexbox
-/// and grid layouts, and is a shorthand property for
-/// align-content and justify-content properties..
-///
-$place-content: (
- // class name, value
- ("place-content-stretch", stretch),
- ("place-content-start", start),
- ("place-content-end", end),
- ("place-content-center", center),
- ("place-content-between", space-between),
- ("place-content-around", space-around),
- ("place-content-evenly", space-evenly),
- ("place-content-initial", initial),
- ("place-content-inherit", inherit)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/place-items.scss b/src/Utilities/_config/place-items.scss
deleted file mode 100644
index c95e958d..00000000
--- a/src/Utilities/_config/place-items.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-///
-/// Place Items
-///
-/// The place-items property is used in grid layout,
-/// and is a shorthand property for the
-/// align-items and justify-items properties.
-///
-$place-items: (
- // class name, value
- ("place-items-stretch", stretch),
- ("place-items-start", start),
- ("place-items-end", end),
- ("place-items-center", center),
- ("place-items-baseline", baseline)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/place-self.scss b/src/Utilities/_config/place-self.scss
deleted file mode 100644
index 5a9640bd..00000000
--- a/src/Utilities/_config/place-self.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-///
-/// Place Self
-///
-/// The place-self property is used to align individual grid items,
-/// and is a shorthand property for the
-/// align-self and justify-self properties.
-///
-$place-self: (
- // class name, value
- ("place-self-auto", auto),
- ("place-self-stretch", stretch),
- ("place-self-start", start),
- ("place-self-left", left),
- ("place-self-center", center),
- ("place-self-end", end),
- ("place-self-right", right)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/position.scss b/src/Utilities/_config/position.scss
deleted file mode 100644
index 73bd1817..00000000
--- a/src/Utilities/_config/position.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-///
-/// Position
-///
-/// The position property specifies the type
-/// of positioning method used for an element
-/// (static, relative, absolute, fixed, or sticky).
-///
-$position-properties: (
- // class name, value
- ("position-static", static),
- ("position-absolute", absolute),
- ("position-fixed", fixed),
- ("position-relative", relative),
- ("position-sticky", sticky),
- ("position-initial", initial),
- ("position-inherit", inherit)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/resize.scss b/src/Utilities/_config/resize.scss
deleted file mode 100644
index c84b7165..00000000
--- a/src/Utilities/_config/resize.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-///
-/// Resize
-///
-/// The resize property defines if (and how)
-/// an element is resizable by the user.
-///
-$resizes: (
- // class name, value
- ("resize-none", none),
- ("resize-both", both),
- ("resize-horizontal", horizontal),
- ("resize-vertical", vertical),
- ("resize-initial", initial),
- ("resize-inherit", inherit)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/text-align.scss b/src/Utilities/_config/text-align.scss
deleted file mode 100644
index 797cf51a..00000000
--- a/src/Utilities/_config/text-align.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-///
-/// Text Align
-///
-/// The text-align property specifies the horizontal alignment of text in an element.
-///
-$text-align: (
- // class name, value
- ("text-left", left),
- ("text-right", right),
- ("text-center", center),
- ("text-justify", justify),
- ("text-start", start),
- ("text-end", end)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/text-colors.scss b/src/Utilities/_config/text-colors.scss
deleted file mode 100644
index 8fe85373..00000000
--- a/src/Utilities/_config/text-colors.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-///
-/// Text Colors
-///
-/// The color property specifies the color of text.
-///
-
-@use "../../_themes/_getters" as *;
-
-$text-colors: (
- // class name, value
- ("color-grey", theme('color', 'grey')),
- ("color-white", white),
- ("color-black", black),
- ("color-primary", theme('color', 'primary')),
- ("color-success", theme('color', 'success')),
- ("color-warning", theme('color', 'warning')),
- ("color-error", theme('color', 'error'))
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/text-decoration.scss b/src/Utilities/_config/text-decoration.scss
deleted file mode 100644
index cb0c6d08..00000000
--- a/src/Utilities/_config/text-decoration.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-///
-/// Text Decoration
-///
-/// The text-decoration property specifies the decoration added to text.
-///
-$text-decorations: (
- // class name, value
- ("underline", underline),
- ("overline", overline),
- ("line-through", line-through)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/text-transform.scss b/src/Utilities/_config/text-transform.scss
deleted file mode 100644
index 3724c3d2..00000000
--- a/src/Utilities/_config/text-transform.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-///
-/// Text Transforms
-///
-/// The text-transform property controls
-/// the capitalization of text.
-///
-$text-transforms: (
- // class name, value
- ("text-uppercase", uppercase),
- ("text-lowercase", lowercase),
- ("text-capitalize", capitalize)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/user-select.scss b/src/Utilities/_config/user-select.scss
deleted file mode 100644
index 55aa7b56..00000000
--- a/src/Utilities/_config/user-select.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-///
-/// User Select
-///
-/// The user-select property specifies
-/// whether the text of an element can be selected.
-///
-$user-selects: (
- // class name, value
- ("user-select-none", none),
- ("user-select-auto", auto),
- ("user-select-text", text),
- ("user-select-all", all)
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/width.scss b/src/Utilities/_config/width.scss
deleted file mode 100644
index 5b641d82..00000000
--- a/src/Utilities/_config/width.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-///
-/// Width
-///
-/// The width property sets the width of an element.
-///
-$width-helpers: (
- // class name, value
- ("width-min-content", min-content),
- ("width-max-content", max-content),
- ("width-fit-content", fit-content),
- ("width-25", 25%),
- ("width-33", 33%),
- ("width-50", 50%),
- ("width-66", 66%),
- ("width-75", 75%),
- ("width-100", 100%),
-);
\ No newline at end of file
diff --git a/src/Utilities/_config/z-index.scss b/src/Utilities/_config/z-index.scss
deleted file mode 100644
index 40b4f33c..00000000
--- a/src/Utilities/_config/z-index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-///
-/// Z-Index
-///
-/// The z-index property specifies the stack order of an element.
-/// An element with greater stack order is always in front of an element
-/// with a lower stack order.
-///
-$z-indexes: (
- // class name (prefix), property
- "z-": "z-index"
-);
\ No newline at end of file
diff --git a/src/Utilities/helpers.scss b/src/Utilities/helpers.scss
deleted file mode 100644
index 3cda7b9e..00000000
--- a/src/Utilities/helpers.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-///
-/// Punica CSS Framework
-/// Utilities : Helpers
-///
-
-@use "variables" as *;
-@use "mixins" as *;
-@use "../_global/_getters" as *;
-
-@if options('helpers', 'enable') {
- /// Align Items
- @include setHelperList($align-items, "align-items", "!important");
-
- /// Align Self
- @include setHelperList($align-self, "align-self", "!important");
-
- /// Align Content
- @include setHelperList($align-content, "align-content", "!important");
-
- /// Backdrop Filters
- @include setFilters($backdrop-blur-ranges, $backdrop-blur, "backdrop-filter"); // only blur
- @include setFilters($backdrop-filter-ranges, $backdrop-filters, "backdrop-filter");
-
- /// Background Colors
- @include setHelperList($bg-colors, "background-color", "!important");
- @include setColorScale($bg-colors);
-
- /// Border
- @include setHelperListWithRange($borders, specs('borders'), "px", "!important");
- @include setBorderSides(specs('borders'));
-
- /// Border Styles
- @include setHelperListWithRange($border-radius, specs('border-radius'), "px", "!important");
-
- /// Border Radius
- @include setHelperList($border-styles, "border-style", "!important");
-
- /// Cursor
- @include setHelperList($cursors, "cursor", "!important");
-
- /// Display Filters
- @include setHelperList($display-filters);
-
- /// Display
- @include setHelperList($display-properties, "display", "!important");
-
- /// Flex
- @include setHelperList($flex-helpers, "flex", "!important");
-
- /// Flex Direction
- @include setHelperList($flex-directions, "flex-direction", "!important");
-
- /// Flex Grow
- @include setHelperList($flex-grow, "flex-grow", "!important");
-
- /// Flex Shrink
- @include setHelperList($flex-shrink, "flex-shrink", "!important");
-
- /// Flex Wrap
- @include setHelperList($flex-wrap, "flex-wrap", "!important");
-
- /// Float
- @include setHelperList($float-helpers, "float", "!important");
-
- /// Font Size
- @include setHelperList($font-sizes, "font-size", "!important");
-
- /// Font Weight
- @include setHelperListWithRange($font-weights, specs('font-weight'), null, "!important");
-
- /// Height
- @include setHelperList($height-helpers, "height", "!important");
- @include setSizeHelpers(null, specs('sizes'), "height");
-
- /// Inset
- @include setNestedHelperList($insets);
-
- /// Justify Content
- @include setHelperList($justify-content, "justify-content", "!important");
-
- /// Justify Items
- @include setHelperList($justify-items, "justify-items", "!important");
-
- /// Justify Self
- @include setHelperList($justify-self, "justify-self", "!important");
-
- /// Line Height
- @include setHelperListWithRange($line-heights, specs('line-height'), null, "!important");
-
- /// Margin
- @include setHelperListWithRange($margin-helpers, specs('spaces'), "px", "!important");
- @include setSizeHelpers($margin-helpers, specs('sizes'));
- @include setHelperListWithRange($margin-helpers, auto, null, "!important"); // margin auto
-
- /// Object-Fit
- @include setHelperList($object-fit, "object-fit", "!important");
-
- /// Order
- @include setHelperListWithRange($orders, specs('orders'), null, "!important");
-
- /// Overflow
- ///
- @include setHelperList($overflow-properties);
-
- /// Padding
- @include setHelperListWithRange($padding-helpers, specs('spaces'), "px", "!important");
- @include setSizeHelpers($padding-helpers, specs('sizes'));
- @include setHelperListWithRange($padding-helpers, auto, null, "!important"); // padding auto
-
- /// Place Content
- @include setHelperList($place-content, "place-content", "!important");
-
- /// Place Items
- @include setHelperList($place-items, "place-items", "!important");
-
- /// Place Self
- @include setHelperList($place-self, "place-self", "!important");
-
- /// Position
- @include setHelperList($position-properties, "position", "!important");
-
- /// Resize
- @include setHelperList($resizes, "resize", "!important");
-
- /// Text Align
- @include setHelperList($text-align, "text-align", "!important");
-
- /// Text Colors
- @include setHelperList($text-colors, "color", "!important");
- @include setColorScale($text-colors, "color"); // color scale
-
- /// Text Decoration
- @include setHelperList($text-decorations, "text-decoration", "!important");
-
- /// Text Transform
- @include setHelperList($text-transforms, "text-transform", "!important");
-
- /// User Select
- @include setHelperList($user-selects, "user-select", "!important");
-
- /// Width
- @include setHelperList($width-helpers, "width", "!important");
- @include setSizeHelpers(null, specs('sizes'), "width");
-
- /// Z-Index
- @include setHelperListWithRange($z-indexes, specs('z-index'), null, "!important");
-
- ///
- /// Others
- ///
- @include otherHelpers();
-}
\ No newline at end of file
diff --git a/src/Utilities/mixins.scss b/src/Utilities/mixins.scss
deleted file mode 100644
index 922b3486..00000000
--- a/src/Utilities/mixins.scss
+++ /dev/null
@@ -1,269 +0,0 @@
-///
-/// Punica CSS Framework
-/// Utilities : Helpers -> Mixins
-///
-
-@use "../_themes/_setters" as *;
-@use "../_themes/_getters" as *;
-@use "_config/specs" as *;
-
-///
-/// Get helper specs
-///
-/// @param {String} $node
-/// @example specs('spaces')
-///
-/// @return mixed
-///
-@function specs($node) {
- @return map-get($specs, $node);
-}
-
-///
-/// Set List with Range
-/// @param {List} $helpers
-/// @param {List} $range
-/// @param {String} $value-type
-/// @param {Boolean} $specificity
-///
-@mixin setHelperListWithRange(
- $helpers, $range, $value-type: null, $specificity: null
-) {
- @include setNestedHelperList($helpers, $range, $value-type, $specificity);
-}
-
-///
-/// Set List
-/// @param {List} $helpers
-/// @param {String} $property-name
-/// @param {Boolean|String} $specificity
-///
-@mixin setHelperList(
- $list, $property-name: null, $specificity: null
-) {
- @if $property-name {
- @each $class, $value in $list {
- .#{$class} {
- @include setProperties($property-name, $value, null, $specificity);
- }
- }
- } @else {
- @each $class, $property, $value in $list {
- .#{$class} {
- @include setProperties($property, $value, null, $specificity);
- }
- }
- }
-}
-
-///
-/// Set Filters
-/// @param {List} $values
-/// @param {List} $filters
-/// @param {String} $property-name
-///
-@mixin setFilters(
- $values, $filters, $property-name: null
-) {
- @each $class-name, $function in $filters {
- @each $value, $suffix in $values {
- .#{$class-name}#{$suffix} {
- #{$property-name}: call(get-function($function, true), $value);
- }
- }
- }
-}
-
-///
-/// Set Nested List
-/// @param {List} $helpers
-/// @param {List} $second_list
-/// @param {String} $value-type
-/// @param {String} $specificity
-///
-@mixin setNestedHelperList(
- $list, $second_list: null, $value-type: null, $specificity: null
-) {
- @if $second_list {
- @each $class-name, $property in $list {
- @each $value in $second_list {
- .#{$class-name}#{$value} {
- @include setProperties($property, $value, $value-type, $specificity);
- }
- }
- }
- } @else {
- @each $class-name, $values in $list {
- @each $value in $values {
- .#{$class-name}-#{$value} {
- @include setProperties($class-name, $value);
- }
- }
- }
- }
-}
-
-///
-/// Set Size Helpers
-/// @param {List} $list
-/// @param {List} $sizes
-/// @param {String} $suffix (must also be a name of css property)
-///
-@mixin setSizeHelpers($list: null, $sizes: null, $suffix: null) {
-
- @if $suffix {
- @each $name, $value in $sizes {
- .#{$name}-#{$suffix} {
- @include setProperties($suffix, $value, null, "!important");
- }
- }
- } @else {
- @each $classname, $prop in $list {
- @each $name, $value in $sizes {
- .#{$classname}#{$name} {
- @include setProperties($prop, $value, null, "!important");
- }
- }
- }
- }
-}
-
-///
-/// Set Properties
-/// @param {Property|String} $property
-/// @param {mixed} $value
-/// @param {String} $value-type
-/// @param {String} $specificity
-///
-@mixin setProperties(
- $property, $value, $value-type: null, $specificity: null
-) {
- #{$property}: #{$value}#{$value-type} #{$specificity};
-}
-
-///
-/// Color Scale
-/// @param {Array} $colors
-/// @param {Boolean} $bgcolor
-///
-@mixin setColorScale($colors, $property:'background-color') {
- @for $i from 5 through 35 {
- @each $class, $color in $colors {
- @if $i % 5 == 0 {
- $percentage: $i*1%;
- .#{$class}-darken-#{$i} {
- #{$property}: mix(black, $color, $percentage) !important;
- }
- .#{$class}-lighten-#{$i} {
- #{$property}: mix(white, $color, $percentage) !important;
- }
- }
- }
- }
-}
-
-///
-/// Horizontal or vertical border sides
-/// @param {Integer} $borders
-///
-@mixin setBorderSides($borders) {
- @each $border in $borders {
- .border-x-#{$border} {
- border-left-width: #{$border}px !important;
- border-right-width: #{$border}px !important;
- }
- .border-y-#{$border} {
- border-top-width: #{$border}px !important;
- border-bottom-width: #{$border}px !important;
- }
- }
-}
-
-///
-/// Other Helpers
-///
-@mixin otherHelpers() {
- .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;}
- /* seperator for flex */
- .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: transparent !important;}
- .pure, .pure > div {
- background: transparent !important;
- 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');}
- .radiusless {border-radius:0 !important;}
- .shadowed {@include shadow();}
- .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;
- }
-}
\ No newline at end of file
diff --git a/src/Utilities/variables.scss b/src/Utilities/variables.scss
deleted file mode 100644
index cda9a7c2..00000000
--- a/src/Utilities/variables.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-///
-/// Punica CSS Framework
-/// Utilities : Helpers -> Variables
-///
-
-@forward "_config/_specs";
-
-@forward "_config/align-content";
-@forward "_config/align-items";
-@forward "_config/align-self";
-@forward "_config/backdrop-filter";
-@forward "_config/bg-colors";
-@forward "_config/border-radius";
-@forward "_config/border-style";
-@forward "_config/border";
-@forward "_config/cursors";
-@forward "_config/display-filter";
-@forward "_config/display";
-@forward "_config/flex-direction";
-@forward "_config/flex";
-@forward "_config/flex-grow";
-@forward "_config/flex-shrink";
-@forward "_config/flex-wrap";
-@forward "_config/float";
-@forward "_config/font-sizes";
-@forward "_config/font-weight";
-@forward "_config/height";
-@forward "_config/inset";
-@forward "_config/justify-content";
-@forward "_config/justify-items";
-@forward "_config/justify-self";
-@forward "_config/line-height";
-@forward "_config/margin";
-@forward "_config/object-fit";
-@forward "_config/order";
-@forward "_config/overflow";
-@forward "_config/padding";
-@forward "_config/place-content";
-@forward "_config/place-items";
-@forward "_config/place-self";
-@forward "_config/position";
-@forward "_config/resize";
-@forward "_config/text-align";
-@forward "_config/text-colors";
-@forward "_config/text-decoration";
-@forward "_config/text-transform";
-@forward "_config/user-select";
-@forward "_config/width";
-@forward "_config/z-index";
diff --git a/src/_global/_getters.scss b/src/_global/_getters.scss
deleted file mode 100644
index f6114b9b..00000000
--- a/src/_global/_getters.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-///
-/// Punica CSS Framework : Global Getter Functions
-///
-
-@use "../options" as option;
-@use "../classnames" as class;
-
-///
-/// Get options value by key
-///
-/// @param {String(s)} $keys
-///
-/// @example options('grid', 'enable')
-/// @example options('grid', 'features', 'equal')
-///
-/// @return boolean
-///
-@function options($keys...) {
- @if null == map-get(option.$options, nth($keys, 1)) {
- @return debug-message("#{nth($keys, 1)}", 'options');
- }
-
- $value: map-get(option.$options, nth($keys, 1));
-
- @if length($keys) == 1 {
- @return $value;
- }
-
- $value: map-get($value, nth($keys, 2));
-
- @if null == $value {
- @return debug-message("#{nth($keys, 1)} > #{nth($keys, 2)}", 'options');
- }
-
- @if length($keys) > 2 {
- $value: map-get($value, nth($keys, 3));
- @if null == $value {
- @return debug-message("#{nth($keys, 1)} > #{nth($keys, 2)} > #{nth($keys, 3)}", 'options');
- }
- }
-
- @return $value;
-}
-
-///
-/// Get component/element variables from options
-///
-/// @param {String} $node
-/// @param {String} $key(s)
-///
-/// @example variables('grid', 'gap')
-/// @example variables('grid', 'columns', 'size')
-///
-/// @return mixed
-///
-@function variables($node, $keys...) {
- $variables: map-get(map-get(options($node), 'variables'), nth($keys, 1));
-
- @if null == $variables {
- @return debug-message("#{$node} > variables > #{nth($keys, 1)}", 'options');
- }
-
- @if length($keys) == 1 {
- @return $variables;
- }
-
- @if null == map-get($variables, nth($keys, 2)) {
- @return debug-message("#{$node} > variables > #{nth($keys, 1)} > #{nth($keys, 2)}", 'options');
- }
-
- @return map-get($variables, nth($keys, 2));
-}
-
-///
-/// Get class name
-///
-/// @param {String} $node
-/// @param {String} $key
-///
-/// @example class('alert', 'name')
-/// @example class('button', 'dropdown')
-///
-/// @return string
-///
-@function class($node, $key) {
- @if null == map-get(class.$classnames, $node) {
- @return debug-message("#{$node}", 'classnames');
- }
-
- $classnames: map-get(class.$classnames, $node);
-
- @if null == map-get($classnames, $key) {
- @return debug-message("#{$node} > #{$key}", 'classnames');
- }
-
- @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/_global/variables.scss b/src/_global/variables.scss
deleted file mode 100644
index 529cd239..00000000
--- a/src/_global/variables.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-///
-/// Punica CSS Framework : Global Variables
-///
-
-///
-/// MAIN GRID NAMING
-/// It's used in card, form and some of mixins.
-///
-$grids: (
- //"one" : "1",
- "two" : "2",
- "three" : "3",
- "four" : "4",
- "five" : "5",
- "six" : "6",
- "seven" : "7",
- "eight" : "8",
- "nine" : "9",
- "ten" : "10",
- "eleven" : "11",
- "twelve" : "12",
- "thirteen" : "13",
- "fourteen" : "14",
- "fifteen" : "15",
- "sixteen" : "16"
-);
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
deleted file mode 100755
index 0f0111fb..00000000
--- a/src/classnames.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-///
-/// Punica CSS Framework : Class Names
-///
-$classnames: (
- /////////////////////////////////////////////////////////
- /// Components
- 'alert': (
- 'name' : 'alert',
- 'active': 'active'
- ),
- 'badge': (
- 'name': 'badge'
- ),
- 'billboard': (
- 'name' : 'billboard',
- 'media': 'media',
- 'body' : 'body',
- 'cover': 'cover',
- ),
- 'breadcrumb': (
- 'name' : 'breadcrumb',
- 'item' : 'item',
- 'active': 'active'
- ),
- 'card': (
- 'name' : 'card',
- 'cards' : 'cards',
- 'body' : 'body',
- 'title' : 'title',
- 'subtitle' : 'subtitle',
- 'description': 'description',
- 'media' : 'media',
- 'horizontal' : 'horizontal',
- 'actions' : 'actions',
- ),
- 'list': (
- 'name' : 'list',
- 'item' : 'item',
- 'body' : 'body',
- 'title' : 'title',
- 'active' : 'active',
- 'subtitle': 'subtitle',
- 'divided' : 'divided',
- 'actions' : 'actions',
- 'hovered' : 'hovered',
- 'striped' : 'striped'
- ),
- 'menu': (
- 'name' : 'menu',
- 'small' : 'small',
- 'title' : 'title',
- 'item' : 'item',
- 'active' : 'active',
- 'badge' : 'badge',
- 'divided': 'divided'
- ),
- 'navbar': (
- 'name' : 'navbar',
- 'section' : 'section',
- 'fixed' : 'fixed',
- 'brand' : 'brand',
- 'links' : 'links',
- 'burger' : 'burger',
- 'divided' : 'divided',
- 'gradient' : 'gradient',
- 'spacer' : 'navbar-spacer',
- ),
- 'panel': (
- 'name' : 'panel',
- 'header' : 'header',
- 'title' : 'title',
- 'headline': 'headline',
- 'bottom' : 'bottom',
- 'content' : 'content',
- 'media' : 'media',
- 'actions' : 'actions',
- ),
- 'process': (
- 'name' : 'process',
- 'item' : 'item',
- 'active' : 'active',
- 'vertical': 'vertical',
- 'reversed': 'reversed',
- ),
- 'progress': (
- 'name': 'progress'
- ),
- 'stats': (
- 'name' : 'stats',
- 'title' : 'title',
- 'subtitle': 'subtitle',
- 'value' : 'value'
- ),
- 'tabnav': (
- 'name' : 'tab',
- 'active' : 'active',
- 'centered': 'centered',
- 'bottom' : 'bottom'
- ),
- 'timeline': (
- 'name' : 'timeline',
- 'item' : 'activity',
- 'author' : 'author',
- 'body' : 'body',
- 'type' : 'type',
- 'date' : 'date',
- 'media' : 'media',
- 'actions': 'actions',
- ),
- 'tooltip': (
- 'name' : 'tooltip',
- 'text' : 'text',
- 'right': 'right',
- 'left' : 'left',
- 'top' : 'top',
- ),
- /////////////////////////////////////////////////////////
- /// Elements
- 'button': (
- 'name' : 'button',
- 'group' : 'buttons',
- 'link' : 'link',
- 'outlined' : 'outlined',
- 'secondary' : 'secondary',
- 'active' : 'active',
- 'inactive' : 'inactive',
- 'block' : 'block',
- 'vertical' : 'vertical',
- 'gradient' : 'gradient',
- // dropdown
- 'dropdown' : 'dropdown',
- 'dropdown-right' : 'right',
- 'dropdown-left' : 'left',
- 'dropdown-top' : 'top',
- 'dropdown-bottom' : 'bottom',
- 'dropdown-toggle' : 'toggle',
- 'dropdown-clickable': 'clickable'
- ),
- 'caption': (
- 'name' : 'caption',
- 'centered': 'centered',
- 'divided' : 'divided'
- ),
- 'form': (
- 'name' : 'form',
- 'items' : 'items',
- 'item' : 'item',
- 'checkbox': 'checkbox',
- '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',
- 'column' : 'col',
- 'offset' : 'offset',
- 'equal' : 'equal',
- //
- 'extra-small' : 'xs',
- 'small' : 'sm',
- 'medium' : 'md',
- 'large' : 'lg',
- 'extra-large' : 'xl',
- 'extra-extra-large' : 'xxl'
- ),
-)
\ No newline at end of file
diff --git a/src/options.scss b/src/options.scss
index 211e836d..398d8b96 100755
--- a/src/options.scss
+++ b/src/options.scss
@@ -1,181 +1,467 @@
///
-/// Punica CSS Framework : Options & Variables
+/// Punica CSS Framework
+/// Default Options, Variables & Class names
+/// v3.0 Options API
///
+/// Note: You can also override/change the all following
+/// default settings from your theme map.
+///
+
+@use "Core/Theme/Getters" as *;
+@use "Core/Theme/Setters" as *;
+@use "Core/Global/Sass" as *;
+@use "Core/Global/Colors" as color;
+
$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.
+ /// 01.COMPONENTS
///
'alert': (
- 'enable': true, // estimated 1KB
+ 'enabled': true,
'features': (
'styles': true,
'sizes' : true
),
- 'variables': (
- 'padding': .6rem,
- 'margin' : 0 0 8px,
- 'width' : 100%,
+ 'classnames': (
+ 'name' : 'alert',
+ 'active': 'active'
+ ),
+ 'settings': (
+ 'display' : block,
+ 'padding' : .6rem 1rem,
+ 'margin' : 0 0 8px,
+ 'width' : 100%,
+ 'font-size' : 1.015em,
+ 'font-weight' : theme('typography', 'font-weight'),
+ 'border' : set-border(), // default border
+ 'border-radius': theme('border', 'radius'),
+ 'line-height' : theme('typography', 'line-height'),
+ 'href' : (
+ 'color' : theme('color', 'text'),
+ 'text-decoration': underline
+ ),
'icon': (
- 'vertical-align': text-top
+ 'vertical-align': middle
+ ),
+ 'styles': (
+ (
+ "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': (
+ (
+ "small", // size name (class)
+ .885rem, // font-size
+ .5rem 1rem // padding
+ ),
+ (
+ "large", // size name (class)
+ 1.14rem, // font-size
+ .7rem 1rem // padding
+ )
)
- )
+ ),
),
'badge': (
- 'enable': true, // estimated 1KB
+ 'enabled': true,
'features': (
'styles': true,
'sizes' : true
),
- 'variables': (
- 'border-radius': 500px
+ 'classnames': (
+ 'name': 'badge'
+ ),
+ 'settings': (
+ 'border-radius': 500px,
+ 'white-space' : nowrap,
+ 'font-size' : .935rem,
+ 'font-weight' : theme('typography', 'font-weight'),
+ 'padding' : 0 .45rem,
+ 'border' : set-border(), // default border
+ 'styles' : (
+ (
+ "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': (
+ (
+ "small", // size name (class)
+ .749rem!important, // font-size
+ 0 .45rem!important // padding
+ ),
+ (
+ "large", // size name (class)
+ 1.1rem!important, // font-size
+ 0 .45rem!important // padding
+ )
+ )
)
),
- 'billboard': (
- 'enable': true, // estimated 2KB
+ 'breadcrumb': (
+ 'enabled': true,
'features': (
- 'styles': true,
- 'sizes' : true,
- 'cover' : true
+ 'sizes': true
+ ),
+ 'classnames': (
+ 'name' : 'breadcrumb',
+ 'item' : 'item',
+ 'active': 'active'
),
- 'variables': (
- 'padding': 4.5rem 2.5rem,
- 'body' : (
- 'padding': 4.5rem 2.5rem
+ 'settings': (
+ 'font-size' : 1rem,
+ 'font-weight' : theme('typography', 'font-weight'),
+ 'color' : theme('color', 'text'),
+ 'text-decoration': none,
+ 'seperator': (
+ 'content' : "\276D", // HTML Symbols
+ 'color' : theme('color', 'primary'),
+ 'font-size': 1rem,
+ 'padding' : .3em,
+ 'cursor' : default
+ ),
+ 'active': (
+ 'font-weight': bold,
+ 'color' : theme('color', 'primary'),
+ ),
+ 'sizes': (
+ (
+ 'small', // size name (class)
+ .946rem, // font-size
+ .3em, // seperator-padding
+ null, // seperator-size
+ unset, // vertical align
+ ),
+ (
+ 'large', // size name (class)
+ 1.075rem, // font-size
+ .3em, // seperator-padding
+ null, // seperator-size
+ text-bottom, // vertical align
+ )
+ ),
+ 'responsive': (
+ 'font-size' : 1rem,
+ 'vertical-align': middle
)
)
),
- 'breadcrumb': (
- 'enable': true, // estimated 1KB
+ 'caption': (
+ 'enabled': true,
'features': (
- 'sizes': true
+ 'sizes': true,
),
- 'variables': (
- 'font-weight' : bold,
- 'active-weight': bold,
- 'seperator' : ( // icon
- 'padding' : 0 .25em,
- 'vertical-align': middle,
- 'font-size' : 1.4rem,
- 'cursor' : auto
+ 'classnames': (
+ 'name' : 'caption',
+ 'centered': 'centered',
+ 'divided' : 'divided'
+ ),
+ 'settings': (
+ 'margin' : 1.3em .2rem,
+ 'font-size' : 1.95rem,
+ 'font-weight': bold,
+ 'line-height': 1.3,
+ 'text-wrap' : balance,
+ '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': (
- 'enable': true, // estimated 5KB
+ 'enabled': true,
'features': (
'group' : true,
'horizontal' : true,
'media' : true,
'media-group': true,
'border' : true,
- 'shadow' : true
+ 'shadow' : true,
+ 'zoom-in' : true, // zoom-in effect for image on rollover
+ 'hovered' : true
+ ),
+ 'classnames': (
+ 'name' : 'card',
+ 'cards' : 'cards',
+ 'body' : 'body',
+ 'title' : 'title',
+ 'subtitle' : 'subtitle',
+ 'description': 'description',
+ 'media' : 'media',
+ 'horizontal' : 'horizontal',
+ 'actions' : 'actions',
+ 'zoom-in' : 'zoom-in',
+ 'hovered' : 'hovered'
),
- 'variables': (
- 'width' : 240px, // for only a single card
- 'height' : 100%,
- 'padding': 16px,
- 'group' : (
- 'margin': 10px // margin for each card
+ 'settings': (
+ 'width' : 18rem, // for only a single card
+ 'height' : 100%,
+ 'padding' : 1rem,
+ '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
+ ),
+ 'description': (
+ 'color' : theme('color', 'text'),
+ 'font-size': 1rem
+ ),
+ 'group': (
+ 'margin': .74rem // margin for each card
),
'horizontal': (
- 'margin-bottom': 15px
+ 'margin-bottom': 1rem
+ ),
+ 'columns': (
+ // maximum number of cards in a single row (default : 2 through 12)
+ // class name, value
+ "two" : 2,
+ "three" : 3,
+ "four" : 4,
+ "five" : 5,
+ "six" : 6,
+ "seven" : 7,
+ "eight" : 8,
+ "nine" : 9,
+ "ten" : 10,
+ "eleven": 11,
+ "twelve": 12
+ )
+ )
+ ),
+ 'label': (
+ 'enabled': true,
+ 'features': (
+ 'styles': true,
+ 'sizes' : true
+ ),
+ 'classnames': (
+ 'name': 'label'
+ ),
+ 'settings': (
+ 'display' : inline-block,
+ 'font-size' : .9195em,
+ 'font-weight' : theme('typography', 'font-weight'),
+ 'line-height' : 1.2,
+ 'padding' : 0.28rem 0.9rem,
+ 'margin' : .1rem .05rem,
+ 'border' : set-border(), // default border
+ 'text-decoration': none,
+ 'box-shadow' : none,
+ 'border-radius' : theme('border', 'radius'),
+ 'icon': (
+ 'vertical-align': middle
+ ),
+ 'styles': (
+ (
+ "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': (
+ (
+ "small", // size name (class)
+ .18rem .85rem, // padding
+ .8195em // font-size
+ ),
+ (
+ "large", // size name (class)
+ .415rem 1.159rem, // padding
+ 1em // font-size
+ )
)
)
),
'list': (
- 'enable': true, // estimated 1KB
+ 'enabled': true,
'features': (
'divided': true,
'hovered': true,
'striped': true
),
- 'variables': (
+ 'classnames': (
+ 'name' : 'list',
+ 'item' : 'item',
+ 'body' : 'body',
+ 'title' : 'title',
+ 'active' : 'active',
+ 'subtitle': 'subtitle',
+ 'divided' : 'divided',
+ 'actions' : 'actions',
+ 'hovered' : 'hovered',
+ 'striped' : 'striped'
+ ),
+ 'settings': (
'margin': 1rem 0,
- 'item' : (
+ 'item': (
'padding' : .55em,
'margin' : 0,
- 'transition': .15s
- ),
- 'media': (
- 'margin-right': 1rem
- ),
- 'body': (
- 'line-height': 1.4,
- 'text-align' : left
- ),
- 'title': (
- 'font-size' : 1.28rem,
- 'line-height': 1
- ),
- 'subtitle': (
- 'font-size' : .889em,
- '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
+ )
)
)
),
'menu': (
- 'enable': true, // estimated 1KB
- 'features': (),
- 'variables': (
- 'width' : 100%,
- 'padding' : .9rem,
- 'margin' : 0,
- 'border-radius': 0,
- 'title' : (
- 'font-size' : 1.25em,
+ 'enabled' : true,
+ 'features' : (),
+ 'classnames': (
+ 'name' : 'menu',
+ 'title' : 'title',
+ 'item' : 'item',
+ 'active' : 'active',
+ 'badge' : 'badge',
+ 'divided': 'divided',
+ 'small' : 'small'
+ ),
+ 'settings': (
+ 'font-family' : inherit,
+ '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': theme('color', 'background'),
+ 'title': (
+ 'font-size' : 1.065rem,
+ '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
+ 'position' : relative,
+ 'padding' : 0,
+ 'text-align' : left,
+ '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,
+ ),
+ 'active': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$light-grey
+ ),
+ 'hover': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$grey
+ ),
+ // sub menu
+ 'menu': (
+ 'padding': .4rem // padding of sub items
+ )
+ ),
+ 'small': (
+ 'font-size': .945em // small menu font-size
),
'icon': (
'font-size' : 1.2rem,
@@ -191,32 +477,128 @@ $options: (
)
),
'navbar': (
- 'enable': true, // estimated 8KB
+ 'enabled': true,
'features': (
- 'themes' : true,
- 'sizes' : true,
- 'divided' : true,
- 'gradient' : true
- ),
- 'variables': (
- 'min-height' : 80px,
- 'spacer-top' : 105px, // min-height + 25px
- 'font-size' : 1.128em,
- 'button-padding': .935rem 1.4rem,
+ 'themes' : true,
+ 'sizes' : true,
+ 'divided' : true,
+ 'gradient': true
+ ),
+ 'classnames': (
+ 'name' : 'navbar',
+ 'section' : 'section',
+ 'fixed' : 'fixed',
+ 'brand' : 'brand',
+ 'links' : 'links',
+ 'burger' : 'burger',
+ 'divided' : 'divided',
+ 'gradient' : 'gradient'
+ ),
+ 'settings': (
+ 'font-family' : inherit,
+ 'font-size' : 1rem,
+ 'color' : theme('color', 'text'),
+ 'font-weight' : bold,
+ 'background-color': #fff,
+ 'width' : 100%,
+ 'min-height' : 5rem,
+ 'button' : (
+ 'padding': .935rem 1.4rem,
+ 'icon' : (
+ 'color': theme('color', 'text')
+ ),
+ 'active': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$grey
+ )
+ ),
'brand': (
'padding' : 0,
'margin-right': 1rem,
'font-weight' : bold,
- 'img-width' : 7rem
+ 'img' : (
+ 'width': 7rem
+ ),
+ 'href': (
+ 'color': theme('color', 'text')
+ )
),
'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
+ ),
+ 'input': (
+ 'color' : theme('color', 'text'),
+ 'background-color': white,
+ 'border-color' : theme('border', 'color'),
+ 'border-width' : theme('border', 'width'),
+ 'focus' : (
+ 'outline': 2px solid theme('color', 'primary')
+ ),
+ 'placeholder': (
+ 'color': color.$dark-grey
+ )
+ ),
+ 'menu': ( // settings of dropdown menu in navbar
+ 'background-color': theme('color', 'background'),
+ 'item': (
+ 'color': theme('color', 'text')
+ ),
+ 'hover': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$grey
+ ),
+ 'active': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$grey
+ )
+ ),
+ 'styles': (
+ (
+ "primary", // theme name (class)
+ theme('color', 'primary'), // bg color
+ white, // text color
+ darken(theme('color', 'primary'), 7%), // input bg
+ white, // input color
+ lighten(theme('color', 'primary'), 4%), // input border color
+ darken(theme('color', 'primary'), 8%) // 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)
+ 2.813rem, // min-height
+ .875rem, // button font-size
+ .445rem .9rem, // button padding
+ ),
+ (
+ "small", // size name (class)
+ 4.063rem, // min-height
+ .945rem, // button font-size
+ .65rem 1.2rem, // button padding
+ ),
+ (
+ "large", // size name (class)
+ 5.938rem, // min-height
+ 1.08rem, // button font-size
+ .845rem 1.4rem, // button padding
+ )
)
)
),
'panel': (
- 'enable': true, // estimated 5KB
+ 'enabled': true,
'features': (
'media' : true,
'media-group': true,
@@ -224,57 +606,132 @@ $options: (
'shadow' : true,
'sizes' : true
),
- 'variables': (
- 'padding' : 16px,
- 'margin' : 16px 0,
- 'title-padding': 12px 16px
+ 'classnames': (
+ 'name' : 'panel',
+ 'header' : 'header',
+ 'title' : 'title',
+ 'headline': 'headline',
+ 'bottom' : 'bottom',
+ 'content' : 'content',
+ 'media' : 'media',
+ 'actions' : 'actions'
+ ),
+ 'settings': (
+ 'margin' : 1rem 0,
+ 'border' : set-border(), // default border
+ 'border-radius' : theme('border', 'radius'),
+ 'background-color': theme('color', 'background'),
+ 'header' : (
+ 'padding': 1.45rem,
+ 'title': (
+ 'font-size': 1.185rem,
+ 'font-weight': bold
+ )
+ ),
+ 'content': (
+ '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': 2.4rem,
+ 'border-top': set-border(), // default border
+ 'padding' : 1.45rem
+ ),
+ 'sizes': (
+ (
+ "mini", // size name (class)
+ .985rem, // font-size (title)
+ .25rem 1.45rem // padding (title/content/bottom)
+ ),
+ (
+ "small", // size name (class)
+ 1.038rem, // font-size (title)
+ .5rem 1.45rem // padding (title/content/bottom)
+ )
+ )
)
),
'process': (
- 'enable': true, // estimated 4KB
+ 'enabled': true,
'features': (
'styles' : true,
'vertical': true
),
- 'variables': (
- 'margin' : 1em 0 5em,
+ 'classnames': (
+ 'name' : 'process',
+ 'item' : 'item',
+ 'active' : 'active',
+ 'failed' : 'failed',
+ 'vertical': 'vertical',
+ 'reversed': 'reversed'
+ ),
+ 'settings': (
+ 'margin' : 3em 0 1em,
'min-height': 4rem, // for each item
- 'icon-size' : 1.8rem,
- 'stepbar': (
- 'height': 6px,
- ),
- 'stickbar': (
- 'width' : 3px,
- 'height': .8rem
+ 'item': (
+ 'font-weight': normal,
+ 'text-align' : center,
+ 'line-height': 1.3,
+ 'word-break' : break-word,
+ 'stepbar' : (
+ 'height': 6px,
+ ),
+ 'stickbar': (
+ 'width' : 3px,
+ 'height': .8rem
+ ),
+ 'indicator': (
+ 'active' : "\2611", // HTML Symbols
+ 'failed' : "\2612", // HTML Symbols
+ 'font-size': 2.16rem,
+ ),
+ 'active': (
+ 'font-weight': bold
+ )
),
'vertical': (
- 'margin' : 1em 0,
- 'stickbar-width': 9px
+ 'margin' : 1em 0,
+ 'padding' : 1.25em 2em 2.85em,
+ 'bar-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': (
- 'enable': true, // estimated 1KB
- 'features': (
- 'styles': true
- ),
- 'variables': (
- 'width' : 100%,
- 'height' : 12px,
- 'border-radius': 16px
- )
- ),
'stats': (
- 'enable': true, // estimated 2KB
+ 'enabled': true,
'features': (
'styles': true
),
- 'variables': (
+ 'classnames': (
+ 'name' : 'stats',
+ 'title' : 'title',
+ 'subtitle': 'subtitle',
+ 'value' : 'value'
+ ),
+ 'settings': (
'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
@@ -291,90 +748,318 @@ $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" : color.$dark-grey,
)
)
),
'tabnav': (
- 'enable': true, // estimated 5KB
+ 'enabled': true,
'features': (
- 'styles' : true,
- 'bottom-position': true
+ 'styles': true,
+ 'sizes' : true,
+ 'bottom': true
),
- 'variables': (
- 'border-width': 2px
+ 'classnames': (
+ 'name' : 'tab',
+ 'active' : 'active',
+ 'centered': 'centered',
+ 'bottom' : 'bottom'
+ ),
+ 'settings': (
+ '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': 4px, // border-bottom-width of tab button
+ 'styles' : (
+ (
+ 'success', // style name (class)
+ theme('color', 'success') // style color
+ ),
+ (
+ 'warning', // style name (class)
+ theme('color', 'warning') // style color
+ ),
+ (
+ 'error', // style name (class)
+ theme('color', 'error') // style color
+ ),
+ (
+ 'dark', // style name (class)
+ theme('color', 'text') // style color
+ )
+ ),
+ 'sizes': (
+ (
+ "small", // class name
+ .9rem, // font-size
+ .685rem .885rem, // padding
+ ),
+ )
)
),
'timeline': (
- 'enable': true, // estimated 5KB
+ 'enabled': true,
'features': (
'styles' : true,
'media' : true,
'media-group': true
),
- 'variables': (
- 'type-width' : 32px,
+ 'classnames': (
+ 'name' : 'timeline',
+ 'item' : 'item',
+ 'author' : 'author',
+ 'body' : 'body',
+ 'type' : 'type',
+ 'date' : 'date',
+ 'media' : 'media',
+ 'actions': 'actions'
+ ),
+ 'settings': (
'border-width': 1px,
'item': (
- 'padding': 1.25em 2em 2.85em
+ 'background-color': color.$grey,
+ 'padding' : 1.25em 2em 2.85em,
+ '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': (
+ (
+ "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
+ ),
)
)
),
'tooltip': (
- 'enable': true, // estimated 1KB
+ 'enabled': true,
'features' : (),
- 'variables': (
- 'font-size' : .9em,
- 'font-weight': bold,
- 'min-width' : 100px,
- 'max-width' : 180px,
- 'padding' : 5px,
- 'transition' : opacity 0.18s
+ 'classnames': (
+ 'name' : 'tooltip',
+ 'text' : 'text',
+ 'right': 'right',
+ 'left' : 'left',
+ 'top' : 'top'
+ ),
+ 'settings': (
+ 'color' : white,
+ 'font-size' : .9em,
+ 'font-weight' : bold,
+ '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')
)
),
///
- /// ELEMENTS
- ///
- /// total estimated size is [60kb] if all elements
- /// and it's features enabled.
+ /// 02.ELEMENTS
///
+ 'base': (
+ 'settings': (
+ 'selection': (
+ 'color' : white,
+ 'background-color': lighten(theme('color', 'primary'), 8.5%)
+ ),
+ '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': (
- 'enable': true, // estimated 50KB
+ 'enabled': true,
'features': (
'group' : true,
'vertical' : true,
'styles' : true,
'sizes' : true,
'outlined' : true,
- 'secondary': true,
'dropdown' : true,
- 'gradient' : true
- ),
- 'variables': (
- 'font-size' : 1em,
- 'line-height': 1,
- 'width' : min-content,
- 'padding' : .935rem 1.6rem,
- 'transition' : .2s,
- 'icon': (
- 'font-size': 1.12rem
- )
- )
- ),
- 'caption': (
- 'enable': true, // estimated 1KB
- 'features': (
- 'sizes': true,
+ 'preloader': true
),
- 'variables': (
- 'margin' : 1.3em .2rem,
- 'font-size': 1.95rem,
- 'media' : (
- 'margin': .559em,
+ 'classnames': (
+ 'name' : 'button',
+ 'group' : 'buttons',
+ 'outlined' : 'outlined',
+ 'rounded' : 'rounded',
+ 'active' : 'active',
+ 'inactive' : 'inactive',
+ 'block' : 'block',
+ 'vertical' : 'vertical',
+ 'preloader' : 'preloader',
+ // dropdown
+ 'dropdown' : 'dropdown',
+ 'dropdown-right' : 'right',
+ 'dropdown-left' : 'left',
+ 'dropdown-top' : 'top',
+ 'dropdown-bottom' : 'bottom',
+ 'dropdown-toggle' : 'toggle',
+ 'dropdown-clickable': 'clickable'
+ ),
+ 'settings': (
+ 'display' : inline-flex,
+ 'align-items' : center,
+ 'justify-content' : center,
+ 'font-family' : inherit,
+ 'font-size' : 1rem,
+ 'font-weight' : normal,
+ '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
+ ),
+ 'preloader': (
+ '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': (
+ (
+ '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
+ if((theme('type') == "light"), color.$dark-grey, color.$grey) // 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
+ )
+ )
)
),
'form': (
- 'enable': true, // estimated 9KB
+ 'enabled': true,
'features': (
'group' : true,
'sizes' : true,
@@ -382,94 +1067,335 @@ $options: (
'checkbox-radio' : true,
'upload' : true
),
- 'variables': (
+ 'classnames': (
+ 'name' : 'form',
+ 'items' : 'items',
+ 'item' : 'item',
+ 'checkbox': 'checkbox',
+ 'radio' : 'radio',
+ 'group' : 'group'
+ ),
+ 'settings': (
'padding': 0 16px,
'input' : (
- 'height' : 2.5rem,
- 'padding' : .4rem .5rem,
- 'font-size' : 1.088em,
- 'border-radius': 0
+ 'font-family' : inherit,
+ 'box-sizing' : inherit,
+ 'color' : inherit,
+ 'background-color': initial,
+ 'border-color' : inherit,
+ 'height' : initial,
+ 'padding' : .7rem .5rem,
+ 'font-size' : initial,
+ 'font-weight' : theme('typography', 'font-weight'),
+ 'border-width' : theme('border', 'width'),
+ 'border-style' : theme('border', 'style'),
+ 'border-radius' : theme('border', 'radius'),
+ 'box-shadow' : none,
+ '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
+ ),
+ 'placeholder': (
+ 'color': color.$dark-grey
+ )
+ ),
+ 'group': (
+ 'button': (
+ 'padding': .7rem 1.75rem
+ )
),
'items': (
- 'margin': 6px 0 .75em
+ 'margin': 0
),
'item': (
- 'margin': 6px
+ 'height' : fit-content,
+ 'margin-y' : .495rem,
+ 'margin-x' : 5px,
+ 'display' : inline-flex,
+ 'flex-wrap' : wrap,
+ 'width' : 100%,
+ 'max-width' : 100%,
+ 'position' : relative,
+ 'align-items': center,
+ 'padding' : .295rem
),
'label': (
- 'font-size': .8579rem,
- 'margin' : 0
+ 'color' : theme('color', 'text'),
+ 'font-size' : .955rem,
+ 'font-weight' : bold,
+ 'margin' : 0,
+ 'text-transform': none,
+ 'height' : fit-content
),
'radio-checkbox': (
- 'font-size' : 1.35rem,
- 'top' : -8px,
- 'left' : 0,
- 'label-padding': 0 1.2rem 0 1.7rem
- )
- )
- ),
- 'icon': (
- 'enable': true, // estimated 1KB
- 'features' : (),
- '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'
- ),
- 'navbar': (
- 'open' : 'dehaze',
- 'close': 'close'
- ),
- 'process': (
- 'current': 'beenhere'
+ '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.$darken-grey,
+ ),
+ // for input validations
+ 'styles': (
+ (
+ 'success', // class name
+ theme('color', 'success') // style color
+ ),
+ (
+ 'warning', // class name
+ theme('color', 'warning') // style color
+ ),
+ (
+ 'error', // class name
+ theme('color', 'error') // style color
+ )
+ ),
+ // input sizes
+ 'sizes': (
+ (
+ 'small', // class name
+ .875rem, // font-size
+ 2.5rem, // input height
+ .645rem 1.4rem, // button padding
+ ),
+ (
+ 'large', // class name
+ 1.05rem, // font-size
+ 3.2rem, // input height
+ 1.15rem 2.1rem, // button padding
+ )
+ ),
+ 'columns': (
+ // maximum number of form items in a single row (default : 2 through 6)
+ // class name, value
+ "two" : 2,
+ "three": 3,
+ "four" : 4,
+ "five" : 5,
+ "six" : 6
)
)
),
- 'label': (
- 'enable': true, // estimated 1KB
+ 'grid': (
+ 'enabled': true,
'features': (
- 'styles': true,
- 'sizes' : true
+ 'equal' : true, // equal height
+ 'offset': true // [!] increases the size
+ ),
+ 'classnames': (
+ 'row' : 'row',
+ 'container': 'container',
+ 'column' : 'col',
+ 'offset' : 'offset',
+ 'equal' : 'equal'
),
- 'variables': (
- 'font-size': .9195em,
- 'padding' : 0.28rem 0.9rem,
- 'margin' : .1rem .05rem
+ 'settings': (
+ 'gap': .375rem,
+ 'columns': (
+ 'size' : 16,
+ 'padding' : .3rem,
+ 'min-height': .125rem
+ ),
+ 'container': (
+ 'width' : 100%,
+ 'padding': 40px, // for left and right sides
+ 'margin' : 0 auto,
+ 'viewports': ( // only for containers
+ ('sm', 500px),
+ ('md', 768px),
+ ('lg', 992px),
+ ('xl', 1260px),
+ ('xxl', 1400px)
+ )
+ ),
+ 'breakpoints': (
+ 'extra-small' : 0,
+ 'small' : 500px,
+ 'medium' : 768px,
+ 'large' : 992px,
+ 'extra-large' : 1260px,
+ 'extra-extra-large': 1400px
+ ),
+ 'viewports': (
+ ('xs', 0),
+ ('sm', 500px),
+ ('md', 768px),
+ ('lg', 992px),
+ ('xl', 1260px),
+ ('xxl', 1400px)
+ )
)
),
'table': (
- 'enable': true, // estimated 1KB
+ 'enabled': true,
'features': (
'hovered': true,
'striped': true
),
- 'variables': (
+ 'classnames': (
+ 'name' : 'table',
+ 'striped': 'striped',
+ 'hovered': 'hovered',
+ 'active' : 'active'
+ ),
+ 'settings': (
+ 'width' : 100%,
+ 'max-width' : 100%,
+ 'text-align' : left,
+ 'margin-bottom' : margin-bottom,
+ 'border-spacing' : 0,
+ 'border-collapse': collapse,
+ 'position' : relative,
+ 'transition' : all 0.3s,
+ 'hover': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$lighten-grey
+ ),
+ 'striped': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$lighten-grey
+ ),
+ 'active': (
+ 'color' : theme('color', 'text'),
+ 'background-color': color.$light-grey
+ ),
'td': (
- 'padding': 5px .7rem,
+ 'padding': .313rem .7rem,
),
'th': (
- 'padding': .7rem,
+ 'color' : theme('color', 'text'),
+ 'font-size' : inherit,
+ 'font-weight' : bold,
+ 'padding' : .90rem .7rem,
+ 'background-color' : transparent,
+ 'border-bottom-color': color.$dark-grey
+ ),
+ 'caption': (
+ 'text-align' : inherit,
+ 'color' : theme('color', 'text'),
+ 'font-size' : 1.15rem,
+ 'font-weight' : bold,
+ 'padding' : 1rem .6rem,
+ 'border-bottom' : 1px theme('border', 'style') color.$darken-grey,
+ 'background-color': transparent
+ )
+ )
+ ),
+ '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' : rgba(theme('color', 'text'), .75)
+ ),
+ 'href': (
+ 'color' : theme('color', 'primary'),
+ 'cursor' : pointer,
+ 'transition' : .15s ease-out,
+ 'text-decoration': none,
+ 'hover': (
+ 'color' : theme('color', 'primary'),
+ 'text-decoration': underline,
+ )
+ ),
+ '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
+ clamp(1.6rem, 2.34vw + .75rem, 2.05rem) // font-size
+ ),
+ (
+ "h2", // class name
+ clamp(1.47rem, 2.34vw + .7rem, 1.85rem) // font-size
+ ),
+ (
+ "h3", // class name
+ clamp(1.33rem, 2.34vw + .65rem, 1.65rem) // font-size
+ ),
+ (
+ "h4", // class name
+ clamp(1.2rem, 2.34vw + .6rem, 1.45rem) // font-size
+ ),
+ (
+ "h5", // class name
+ clamp(1rem, 2.34vw + .55rem, 1.3rem), // font-size
+ ),
+ (
+ "h6", // class name
+ clamp(.95rem, 2.34vw + .5rem, 1.15rem) // font-size
+ )
)
)
),
///
- /// UTILITIES
- ///
- /// total estimated size is [35KB] if all helpers
- /// and it's features enabled.
+ /// 03.UTILITIES
///
'helpers': (
- 'enable' : true,
- 'features' : (),
- 'variables': ()
+ 'enabled': true
)
) !default;
\ No newline at end of file
diff --git a/src/punica.scss b/src/punica.scss
index 8e93597d..9defd29b 100755
--- a/src/punica.scss
+++ b/src/punica.scss
@@ -1,32 +1,33 @@
-///
+///
/// 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 "sass:map" as map;
+@use "Core/Theme/Getters" as *;
+@use "Core/Global/Helpers" 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-name: if(map.has-key(get.$themes, $active-theme), $active-theme, theme-not-found($active-theme));
+ $theme : map.get(get.$themes, $theme-name) !global;
+////////////////////////////////////////////////////////////////
-@debug "DONE \1F5F8";
-@debug "The #{$theme} theme is compiled successfully.";
+/*!
+ * Punica CSS Framework - #{theme('name')}
+ * v3.0.0 Beta
+ *
+ * @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: null !global;
\ No newline at end of file
diff --git a/src/themes.scss b/src/themes.scss
new file mode 100644
index 00000000..51054d50
--- /dev/null
+++ b/src/themes.scss
@@ -0,0 +1,146 @@
+///
+/// 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
+/// the "$active-theme" variable in the punica.scss file.
+///
+
+@use "Core/Global/Sass" as *;
+
+$themes: (
+ //
+ // 01. Default Theme (beta)
+ //
+ default: (
+ 'name' : 'Default Theme',
+ 'type' : 'light', // light or dark (required*),
+ 'typography': (
+ 'font-family': 'Inter Tight',
+ 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700&display=swap', // embed/import url
+ 'font-size' : 1rem,
+ 'font-weight': 400,
+ 'line-height': 1.7
+ ),
+ 'color': (
+ 'text' : #1e2126,
+ 'background': white,
+ 'primary' : #3266ec,
+ 'success' : #369138,
+ 'warning' : #c17f2a,
+ 'error' : #CC2B52,
+ 'dark' : #393644
+ ),
+ 'border': (
+ 'color' : #cbd3db,
+ 'width' : 1px,
+ 'style' : solid,
+ 'radius': .25rem,
+ ),
+ 'shadow': 0 .25em .5em 0 rgba(0, 0, 0, 0.14)
+ ),
+ //
+ // 02. Dark Theme (beta)
+ //
+ dark: (
+ 'name' : 'Dark Theme',
+ 'type' : 'dark', // light or dark (required*),
+ 'typography': (
+ 'font-family': 'Inter Tight',
+ 'font-url' : 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700&display=swap', // embed/import url
+ 'font-size' : 1rem,
+ 'font-weight': 500,
+ 'line-height': 1.7
+ ),
+ 'color': (
+ 'text' : #c5cae1,
+ 'background': #222226,
+ 'primary' : #3266ec,
+ 'success' : #369138,
+ 'warning' : #c17f2a,
+ 'error' : #CC2B52,
+ 'dark' : #393644
+ ),
+ 'border': (
+ 'color' : #373a48,
+ 'width' : 1px,
+ 'style' : solid,
+ 'radius': 2px,
+ ),
+ 'shadow': 0 .2em 1em 0 rgba(0,0,0,.17),
+ //////////////////////////////////////////////////////////
+ // You can use this section to override/change
+ // the all default settings in the options.scss API file.
+ 'classnames': (
+ /*
+ 'panel': (
+ 'name' : 'box',
+ 'headline': 'spot'
+ ),
+ 'grid': (
+ 'offset': 'off'
+ )
+ */
+ ),
+ 'components': (
+ 'menu': (
+ 'background-color': lighten(#222226, 2.5%),
+ 'item': (
+ 'active': (
+ 'color': white,
+ 'background-color': #3266ec
+ )
+ )
+ ),
+ 'navbar': (
+ 'background-color': lighten(#222226, 2.5%),
+ 'input': (
+ 'background-color': #2f2f35
+ ),
+ 'menu': (
+ 'background-color': lighten(#222226, 2.5%),
+ )
+ ),
+ 'tooltip': (
+ 'color' : #222226,
+ 'font-weight' : 500,
+ 'background-color': #e1e6ff
+ )
+ ),
+ 'elements': (
+ 'button': (
+ 'font-weight': 500
+ ),
+ 'form': (
+ 'input': (
+ 'background-color': #2e2d33
+ )
+ ),
+ 'typography': (
+ 'href': (
+ 'color': #5580ff,
+ 'hover': (
+ 'color': lighten(#5580ff, 3%)
+ )
+ )
+ )
+ ),
+ // You can use this section to override/change the
+ // all default variable of utilities in the
+ // utilities.scss API file.
+ 'utilities': (
+ //'enabled': false, // this option disables all helpers (default true).
+ /*
+ 'flex-wrap': (
+ 'enabled': false
+ ),
+ 'overflow': (
+ 'prefix': 'flow-'
+ )
+ */
+ )
+ //////////////////////////////////////////////////////////
+ ),
+);
\ No newline at end of file
diff --git a/src/utilities.scss b/src/utilities.scss
new file mode 100644
index 00000000..f307549b
--- /dev/null
+++ b/src/utilities.scss
@@ -0,0 +1,1477 @@
+///
+/// Punica CSS Framework
+/// v3.0 Utility API
+///
+/// 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 *;
+
+$utilities: (
+ ///
+ /// 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), value
+ ("primary", theme('color', 'primary')),
+ ("success", theme('color', 'success')),
+ ("warning", theme('color', 'warning')),
+ ("error", theme('color', 'error')),
+ ("dark", theme('color', 'dark'))
+ )
+ ),
+ ///
+ /// Align Content
+ /// The align-content property specifies
+ /// how flex lines are distributed along the
+ /// cross axis in a flexbox container.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (stretch, center, flex-start, flex-end, space-between, space-around, space-evenly)
+ ),
+ ///
+ /// Align Items
+ /// The align-items property specifies the default alignment
+ /// for items inside a flexbox or grid container.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (baseline, flex-start, flex-end, center, stretch)
+ ),
+ ///
+ /// Align Self
+ /// The align-self property specifies the alignment
+ /// in the block direction for the selected item
+ /// inside a flexbox or grid container.
+ ///
+ /// @example align-self-auto
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (auto, baseline, flex-start, flex-end, center, stretch)
+ ),
+ ///
+ /// 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), value
+ ("border", border-box),
+ ("padding", padding-box),
+ ("content", content-box)
+ )
+ ),
+ ///
+ /// 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).
+ ///
+ /// @example bg-color
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'palette' : (
+ 'shade-step': 5,
+ 'max-range' : 50
+ ),
+ 'variables': (
+ // class name (suffix), value
+ ("color", theme('color', 'background')),
+ ("grey", color.$grey),
+ ("white", white),
+ ("black", black),
+ ("dark", theme('color', 'dark')),
+ ("primary", theme('color', 'primary')),
+ ("success", theme('color', 'success')),
+ ("warning", theme('color', 'warning')),
+ ("error", theme('color', 'error'))
+ )
+ ),
+ ///
+ /// 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (repeat,repeat-x,repeat-y,no-repeat,space,round)
+ ),
+ ///
+ /// Background Size
+ /// The background-size property specifies
+ /// the size of the background images.
+ ///
+ /// @example bg-cover
+ ///
+ '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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (auto,cover,contain)
+ ),
+ ///
+ /// Border
+ ///
+ /// The border property is a shorthand property for
+ /// border-width, border-style and border-color.
+ ///
+ /// @example border-3
+ /// @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
+ 'unit' : rem, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : (
+ // suffix, value
+ (0, 0), // 0
+ (1, 0.063), // 1px
+ (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
+ ),
+ 'variables': (
+ // infix, property
+ ("-", border-width)
+ ("-top-", border-top-width)
+ ("-right-", border-right-width)
+ ("-bottom-", border-bottom-width)
+ ("-left-", border-left-width)
+ )
+ ),
+ ///
+ /// Border Color
+ ///
+ /// The border-color property sets the color
+ /// of an element's four borders. This property
+ /// can have from one to four variables.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), value
+ ("grey", color.$grey),
+ ("white", white),
+ ("black", black),
+ ("dark", theme('color', 'dark')),
+ ("primary", theme('color', 'primary')),
+ ("success", theme('color', 'success')),
+ ("warning", theme('color', 'warning')),
+ ("error", theme('color', 'error'))
+ )
+ ),
+ ///
+ /// Border Radius
+ ///
+ /// The border-radius property defines
+ /// the radius of the element's corners.
+ ///
+ /// @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
+ 'unit' : px, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (2,4,6,8,10,12,14,16,500),
+ ),
+ ///
+ /// Border Style
+ ///
+ /// The border-style property sets
+ /// the style of an element's four borders.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (solid, dashed, dotted, double, groove, ridge)
+ ),
+ ///
+ /// 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), value
+ ("primary", theme('color', 'primary')),
+ ("success", theme('color', 'success')),
+ ("warning", theme('color', 'warning')),
+ ("error", theme('color', 'error'))
+ )
+ ),
+ ///
+ /// Color
+ ///
+ /// The color property specifies the color of text.
+ ///
+ /// @example color-success
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'palette' : (
+ 'shade-step': 5,
+ 'max-range' : 50
+ ),
+ 'variables': (
+ // 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'))
+ )
+ ),
+ ///
+ /// 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (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
+ /// to be displayed when pointing over an element.
+ ///
+ /// @example cursor-grap
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (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': (
+ 'enabled' : true, // true or false
+ 'property' : 'display', // css property name (don't change it !)
+ 'prefix' : 'display-', // prefix of class name
+ 'specificity': !important, // or null
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (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
+ /// (like blur and saturation) to an element (often should be resized to fit its container.
+ /// This property tells the content to fill the container
+ /// in a variety of ways; such as "preserve that aspect ratio"
+ /// or "stretch up and take up as much space as possible".
+ ///
+ /// @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' : 'object-', // prefix of class name
+ 'specificity': !important, // or null
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (fill, contain, cover, none, scale-down)
+ ),
+ ///
+ /// Object Position
+ ///
+ /// The object-position property is used together
+ /// with object-fit to specify how an
+ /// should be positioned with x/y coordinates inside
+ /// its "own content box".
+ ///
+ /// @example object-left
+ /// @example object-left-bottom
+ ///
+ 'object-position': (
+ 'enabled' : true, // true or false
+ 'property' : 'object-position', // css property name (don't change it !)
+ 'prefix' : 'object-', // prefix of class name
+ 'specificity': !important, // or null
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), value
+ ("bottom", bottom),
+ ("center", center),
+ ("left", left),
+ ("left-bottom", left bottom),
+ ("left-top", left top),
+ ("right", right),
+ ("right-bottom", right bottom),
+ ("right-top", right top),
+ ("top", top)
+ )
+ ),
+ ///
+ /// Opacity
+ ///
+ /// The opacity property sets
+ /// the opacity level for an element.
+ ///
+ /// @example opacity-25
+ ///
+ 'opacity': (
+ 'enabled' : true, // true or false
+ 'property' : 'opacity', // css property name (don't change it !)
+ 'prefix' : 'opacity-', // prefix of class name
+ 'specificity': !important, // or null
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), value
+ ("15", .15),
+ ("20", .2),
+ ("25", .25),
+ ("30", .3),
+ ("35", .35),
+ ("40", .4),
+ ("45", .45),
+ ("50", .5),
+ ("55", .55),
+ ("60", .6),
+ ("65", .65),
+ ("70", .7),
+ ("75", .75),
+ ("80", .8),
+ ("85", .85),
+ ("90", .9),
+ ("95", .95),
+ ("100", 1)
+ )
+ ),
+ ///
+ /// Order
+ ///
+ /// The order property specifies the order
+ /// of a flexible item relative to the rest
+ /// of the flexible items inside the same container.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // 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 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (0,1,2,4,8)
+ ),
+ ///
+ /// Outline Style
+ ///
+ /// The outline-style property specifies the style of an outline
+ ///
+ /// @example outline-dashed
+ ///
+ '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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (solid,dashed,dotted,double)
+ ),
+ ///
+ /// Outline Width
+ ///
+ /// 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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (0,1,2,4,8)
+ ),
+ ///
+ /// Overflow
+ ///
+ /// The overflow property specifies what should
+ /// happen if content overflows an element's box.
+ ///
+ /// @example overflow-hidden
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), property, value
+ ("auto", overflow, auto),
+ ("hidden", overflow, hidden),
+ ("visible", overflow, visible),
+ ("x-auto", overflow-x, auto),
+ ("x-hidden", overflow-x, hidden),
+ ("x-visible", overflow-x, visible),
+ ("x-scroll", overflow-x, scroll),
+ ("y-auto", overflow-y, auto),
+ ("y-hidden", overflow-y, hidden),
+ ("y-visible", overflow-y, visible),
+ ("y-scroll", overflow-y, scroll)
+ )
+ ),
+ ///
+ /// Padding
+ ///
+ /// An element's padding is the space between
+ /// its content and its border.
+ ///
+ /// @example p-3 / padding
+ /// @example pr-30 / padding right
+ /// @example px-70 / padding right and left
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : (
+ // class name (suffix), value
+ (auto, auto),
+ (0, 0), // 0
+ (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
+ (240, 15rem), // 240px
+ (280, 17.5rem), // 280px
+ (320, 20rem) // 320px
+ ),
+ 'variables': (
+ // infix, property
+ ("-", padding),
+ ("t-", padding-top),
+ ("r-", padding-right),
+ ("b-", padding-bottom),
+ ("l-", padding-left)
+ )
+ ),
+ ///
+ /// Place Content
+ ///
+ /// The place-content property is used in flexbox
+ /// and grid layouts, and is a shorthand property for
+ /// align-content and justify-content properties.
+ ///
+ /// @example place-content-center
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (stretch, start, end, center, space-between, space-around, space-evenly)
+ ),
+ ///
+ /// Place Items
+ ///
+ /// The place-items property is used in grid layout,
+ /// and is a shorthand property for the
+ /// align-items and justify-items properties.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (stretch, start, end, center, baseline)
+ ),
+ ///
+ /// Place Self
+ ///
+ /// The place-self property is used to align individual grid items,
+ /// and is a shorthand property for the
+ /// align-self and justify-self properties.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (auto, stretch, start, left, center, end, right)
+ ),
+ ///
+ /// Position
+ ///
+ /// The position property specifies the type
+ /// of positioning method used for an element
+ /// (static, relative, absolute, fixed, or sticky).
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (static, absolute, fixed, relative, sticky)
+ ),
+ ///
+ /// Resize
+ ///
+ /// The resize property defines if (and how)
+ /// an element is resizable by the user.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (none, both, horizontal, vertical)
+ ),
+ ///
+ /// Rotate
+ ///
+ /// The rotate property allows you
+ /// to rotate elements.
+ ///
+ /// @example rotate-33
+ ///
+ 'rotate': (
+ 'enabled' : true, // true or false
+ 'property' : 'rotate', // css property name (don't change it !)
+ 'prefix' : 'rotate-', // prefix of class name
+ 'specificity': !important, // or null
+ 'unit' : deg, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (3,6,9,12,24,33,45,66,90,180)
+ ),
+ ///
+ /// Text Align
+ ///
+ /// The text-align property specifies the horizontal alignment of text in an element.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (left, right, center, justify, start, end)
+ ),
+ ///
+ /// Text Decoration
+ ///
+ /// The text-decoration property specifies the decoration added to text.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (underline, overline, line-through)
+ ),
+ ///
+ /// Text Transform
+ ///
+ /// The text-transform property controls
+ /// the capitalization of text.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (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/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (wrap, nowrap, balance, pretty)
+ ),
+ ///
+ /// User Select
+ ///
+ /// The user-select property specifies
+ /// whether the text of an element can be selected.
+ ///
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (none, auto, text, all)
+ ),
+ ///
+ /// Vertical Align
+ ///
+ /// The vertical-align property sets
+ /// the vertical alignment of an element.
+ ///
+ /// @example align-middle
+ ///
+ 'vertical-align': (
+ 'enabled' : true, // true or false
+ 'property' : 'vertical-align', // css property name (don't change it !)
+ 'prefix' : 'align-', // prefix of class name
+ 'specificity': !important, // or null
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (baseline, top, middle, bottom, text-top, text-bottom, sub, super)
+ ),
+ ///
+ /// Width
+ ///
+ /// The width property sets the width of an element.
+ ///
+ /// @example width-40
+ /// @example width-1400
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (
+ // class name (suffix), value
+ ("min-content", min-content),
+ ("max-content", max-content),
+ ("fit-content", fit-content),
+ (10, 0.625rem), // 10px
+ (20, 1.25rem), // 20px
+ (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
+ (160, 10rem), // 160px
+ (200, 12.5rem), // 200px
+ (240, 15rem), // 240px
+ (280, 17.5rem), // 280px
+ (320, 20rem), // 320px
+ (400, 25rem), // 400px
+ (480, 30rem), // 480px
+ (560, 35rem), // 560px
+ (640, 40rem), // 640px
+ (720, 45rem), // 720px
+ (800, 50rem), // 800px
+ (1200, 75rem), // 1200px
+ (1400, 87.5rem), // 1400px
+ (1600, 100rem), // 1600px
+ )
+ ),
+ ///
+ /// Z-Index
+ ///
+ /// The z-index property specifies the stack order of an element.
+ /// An element with greater stack order is always in front of an element
+ /// with a lower stack order.
+ ///
+ /// @example z-100
+ /// @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
+ 'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
+ 'args' : null, // for extra variables
+ 'variables' : (auto,-1,0,1,10,20,30,40,50,99)
+ )
+)
\ No newline at end of file
