diff --git a/_config.yml b/_config.yml index e644b10e0..cc913a1d1 100644 --- a/_config.yml +++ b/_config.yml @@ -51,6 +51,13 @@ defaults: - scope: type: "pages" + path: "*.md" + values: + layout: markdown + menu-layout: horizontal + + - scope: + type: "pages" values: layout: default menu-layout: horizontal diff --git a/build/scss-compile.js b/build/scss-compile.js index e9e723c9c..de4502fcb 100644 --- a/build/scss-compile.js +++ b/build/scss-compile.js @@ -21,7 +21,7 @@ glob("scss/tabler*.scss", {}, function (er, files) { outFile: `dist/css/${basename}.css`, sourceMap: true, sourceMapContents: true, - precision: 6, + precision: 7, importer: packageImporter() }, (error, result) => { diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md index e939c5483..b03e391dc 100644 --- a/pages/_docs/form-elements.md +++ b/pages/_docs/form-elements.md @@ -60,14 +60,7 @@ bootstrap-link: components/forms/ ### Select {% example %} -
- - -
+{% include parts/select.html options="Germany,USA,Poland" %} {% endexample %} ### Textarea @@ -128,24 +121,7 @@ bootstrap-link: components/forms/ ### Sample form {% example %} -
-
- - -
-
- - -
-
- - -
-
- - -
-
+{% include parts/form-fieldset.html %} {% endexample %} ### Input group @@ -191,17 +167,8 @@ bootstrap-link: components/forms/ ### Separated inputs {% example %} -
- -
-
- -
- - - -
-
{% endexample %} +{% include parts/input-icon-separated.html %} +{% endexample %} ### Custom Input examples {% example %} diff --git a/pages/_includes/forms/form-elements-1.html b/pages/_includes/forms/form-elements-1.html index bf32f8248..b343639f4 100644 --- a/pages/_includes/forms/form-elements-1.html +++ b/pages/_includes/forms/form-elements-1.html @@ -61,18 +61,10 @@ {% include parts/input-icon.html %} +{% include parts/input-icon-separated.html %} + + -
- -
-
- -
-
- -
-
-
diff --git a/pages/_includes/forms/form-elements-3.html b/pages/_includes/forms/form-elements-3.html index a67f4309b..1a7e5aa43 100644 --- a/pages/_includes/forms/form-elements-3.html +++ b/pages/_includes/forms/form-elements-3.html @@ -3,20 +3,11 @@ {% include parts/input-colorpicker.html %} -
- - - - -
- -
- + +
Invalid feedback
- -
diff --git a/pages/_includes/parts/input-icon-separated.html b/pages/_includes/parts/input-icon-separated.html new file mode 100644 index 000000000..9aafa90f6 --- /dev/null +++ b/pages/_includes/parts/input-icon-separated.html @@ -0,0 +1,11 @@ +
+ +
+
+ +
+
+ {% include ui/button.html icon="search" icon-only=true color="secondary" %} +
+
+
\ No newline at end of file diff --git a/pages/_includes/parts/input-icon.html b/pages/_includes/parts/input-icon.html index e409d0ed7..d10caf43d 100644 --- a/pages/_includes/parts/input-icon.html +++ b/pages/_includes/parts/input-icon.html @@ -1,4 +1,4 @@ -
+
diff --git a/pages/_includes/parts/select.html b/pages/_includes/parts/select.html index 6be4d7fae..4fbecb50e 100644 --- a/pages/_includes/parts/select.html +++ b/pages/_includes/parts/select.html @@ -1,8 +1,9 @@ +{% assign options = include.options | default: "One,Two,Three" | split: "," %}
{{ include.label | default: 'Select' }}
diff --git a/pages/_layouts/markdown.html b/pages/_layouts/markdown.html new file mode 100644 index 000000000..e68be8fbb --- /dev/null +++ b/pages/_layouts/markdown.html @@ -0,0 +1,13 @@ +--- +layout: default +--- + +
+
+
+
+ {{ content }} +
+
+
+
\ No newline at end of file diff --git a/pages/markdown.md b/pages/markdown.md new file mode 100644 index 000000000..057142dac --- /dev/null +++ b/pages/markdown.md @@ -0,0 +1,72 @@ +--- +title: Markdown +page-title: Markdown +--- + +# Who's that then? + +Well, she turned me into a newt. Burn her! We want a shrubbery!! Well, I got better. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. + +Listen. __Strange women lying in ponds distributing swords is no basis for a system of government.__ *Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.* The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. + +## Well, Mercia's a temperate zone! + +You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! A newt? + +1. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. +2. I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! +3. We found them. + +### What do you mean? + +Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king. + +* The Knights Who Say Ni demand a sacrifice! +* Be quiet! +* Bloody Peasant! + +Well, I got better. Camelot! A newt? We want a shrubbery!! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king. + +Shut up! …Are you suggesting that coconuts migrate? I'm not a witch. Well, we did do the nose. + +Well, how'd you become king, then? Shut up! Ni! Ni! Ni! Ni! Well, Mercia's a temperate zone! I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! + +You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! + +What do you mean? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. + +Well, how'd you become king, then? You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king. + +Well, I got better. Shut up! Will you shut up?! Well, I got better. I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! + +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! + +I am your king. Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! Ni! Ni! Ni! Ni! Who's that then? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. + +Bloody Peasant! What a strange person. Burn her anyway! Camelot! You don't vote for kings. + +You don't vote for kings. I dunno. Must be a king. How do you know she is a witch? Why? I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! + +# Heading 1 + +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! + +## Heading 2 + +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! + +### Heading 3 + +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! + +#### Heading 4 + +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! + +##### Heading 5 + +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! + +###### Heading 6 + +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! diff --git a/scss/_variables.scss b/scss/_variables.scss index b50354b06..12bb4ec3a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,3 +1,9 @@ +$enable-social-colors: true !default; +$enable-ghost-buttons: true !default; +$enable-color-hues: true !default; +$enable-extra-colors: true !default; +$enable-gradients: false !default; + // FONTS $google-font: "Source Sans Pro" !default; @@ -103,8 +109,8 @@ $avatar-sizes: ( ) !default; //Fonts -$font-size-base: 1rem !default; -$line-height-base: 1.5 !default; +$font-size-base: .9375rem !default; +$line-height-base: 1.6 !default; $body-letter-spacing: null !default; $border-width: 1px !default; @@ -116,12 +122,12 @@ $headings-font-weight: 600 !default; $small-font-size: 87.5% !default; -$h1-font-size: (26rem / 16) !default; -$h2-font-size: (21rem / 16) !default; -$h3-font-size: (18rem / 16) !default; -$h4-font-size: (16rem / 16) !default; -$h5-font-size: (14rem / 16) !default; -$h6-font-size: (12rem / 16) !default; +$h1-font-size: (26em / 15) !default; +$h2-font-size: (23em / 15) !default; +$h3-font-size: (18em / 15) !default; +$h4-font-size: (15em / 15) !default; +$h5-font-size: (13em / 15) !default; +$h6-font-size: (11em / 15) !default; $blockquote-font-size: $h4-font-size !default; @@ -168,14 +174,6 @@ $sizes-percentage: ( ) !default; - -$enable-social-colors: true !default; -$enable-ghost-buttons: true !default; -$enable-color-hues: true !default; -$enable-extra-colors: true !default; - -$enable-gradients: false !default; - $container-max-widths: ( sm: 540px, md: 720px, @@ -198,7 +196,7 @@ $badge-font-weight: 500 !default; $badge-empty-size: .5rem !default; //buttons -$input-btn-line-height: 1.5 !default; +$input-btn-line-height: (22/15) !default; $input-btn-font-size: 15px !default; $input-btn-font-size-sm: 12px !default; @@ -235,21 +233,15 @@ $close-font-size: 1.5rem !default; //dropdown $dropdown-item-padding-x: 1rem !default; -$dropdown-font-size: $h5-font-size !default; +$dropdown-font-size: $h4-font-size !default; $dropdown-divider-bg: $border-color-alpha !default; $dropdown-padding-y: .5rem !default; $dropdown-link-hover-bg: $hover-bg !default; $dropdown-link-hover-color: inherit !default; +$dropdown-spacer: 1px !default; //grid $grid-gutter-width: 1.5rem !default; -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1280px -) !default; //loader $loader-size: 2.5rem !default; @@ -325,17 +317,20 @@ $input-border-radius: $border-radius !default; //Forms -$form-check-input-width: 1rem !default; -$form-check-padding-left: $form-check-input-width + .5rem !default; +$form-check-input-width: (16em/15) !default; +$form-check-padding-left: $form-check-input-width + .5em !default; $form-check-input-bg: $white !default; $form-check-input-border: 1px solid $border-color !default; $form-check-input-border-radius: $border-radius !default; $form-check-input-checked-bg-size: .75rem !default; +$form-switch-width: (28em/15) !default; +$form-switch-padding-left: $form-switch-width + .5em !default; + $form-range-track-height: .25rem !default; -$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; -$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; +$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; +$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; //Flags diff --git a/scss/tabler.scss b/scss/tabler.scss index 57c3067a1..2fa16a663 100644 --- a/scss/tabler.scss +++ b/scss/tabler.scss @@ -31,11 +31,12 @@ @import "ui/grid"; @import "ui/highlight"; @import "ui/icons"; -@import "ui/inputs"; -@import "ui/forms/input.colorinput"; -@import "ui/forms/input.imagecheck"; -@import "ui/forms/input.selectgroup"; -@import "ui/forms/input.custom"; +@import "ui/forms"; +@import "ui/forms/form-icon"; +@import "ui/forms/form-colorinput"; +@import "ui/forms/form-imagecheck"; +@import "ui/forms/form-selectgroup"; +@import "ui/forms/form-custom"; @import "ui/legend"; @import "ui/lists"; @import "ui/loaders"; diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index 0a8805121..f856af910 100644 --- a/scss/ui/_buttons.scss +++ b/scss/ui/_buttons.scss @@ -1,7 +1,4 @@ .btn { - display: inline-flex; - align-items: center; - justify-content: center; letter-spacing: .01em; &:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]):not(.btn-secondary) { @@ -18,7 +15,6 @@ cursor: not-allowed; } - .icon { margin: 0 .5em 0 -.25em; font-size: 1.2em; @@ -68,6 +64,7 @@ .btn-secondary { @include button-variant(#fff, $border-color, $body-color); + background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); } .btn-square { diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index a2f3d03f4..07b9f640d 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -154,6 +154,7 @@ font-size: $h3-font-size; font-weight: $headings-font-weight; color: $headings-color; + line-height: (24/18); @at-root a#{&}:hover { color: inherit; diff --git a/scss/ui/_inputs.scss b/scss/ui/_forms.scss similarity index 93% rename from scss/ui/_inputs.scss rename to scss/ui/_forms.scss index 0dcc58222..14adf51f3 100644 --- a/scss/ui/_inputs.scss +++ b/scss/ui/_forms.scss @@ -5,7 +5,8 @@ textarea { } .form-label { - @extend .h5; + font-size: $h4-font-size; + font-weight: 600; display: block; margin-bottom: .5rem; } @@ -36,7 +37,7 @@ textarea { .form-fieldset { padding: 1rem; margin-bottom: 1rem; - background: $min-black; + background: $gray-100; border: 1px solid $border-color; border-radius: $border-radius; } diff --git a/scss/ui/forms/_input.colorinput.scss b/scss/ui/forms/_form-colorinput.scss similarity index 95% rename from scss/ui/forms/_input.colorinput.scss rename to scss/ui/forms/_form-colorinput.scss index f46482235..5e7d0cb87 100644 --- a/scss/ui/forms/_input.colorinput.scss +++ b/scss/ui/forms/_form-colorinput.scss @@ -20,7 +20,7 @@ Color Input width: 1.5rem; height: 1.5rem; color: #fff; - border: 1px solid $border-color; + border: 1px solid $border-color-alpha; border-radius: 3px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); diff --git a/scss/ui/forms/_form-custom.scss b/scss/ui/forms/_form-custom.scss new file mode 100644 index 000000000..cde590592 --- /dev/null +++ b/scss/ui/forms/_form-custom.scss @@ -0,0 +1,14 @@ + +/** +Bootstrap color input + */ + +.form-control-color { + &::-webkit-color-swatch { + border: none; + } +} + +.form-check-input { + transition: .3s background-position, .3s background-color; +} diff --git a/scss/ui/forms/_input.custom.scss b/scss/ui/forms/_form-icon.scss similarity index 72% rename from scss/ui/forms/_input.custom.scss rename to scss/ui/forms/_form-icon.scss index 5b3982aa5..f09c2eaaf 100644 --- a/scss/ui/forms/_input.custom.scss +++ b/scss/ui/forms/_form-icon.scss @@ -35,17 +35,3 @@ Icon input left: auto; } } - -/** -Bootstrap color input - */ - -.form-control-color { - &::-webkit-color-swatch { - border: none; - } -} - -.form-check-input { - transition: .3s background-position, .3s background-color; -} diff --git a/scss/ui/forms/_input.imagecheck.scss b/scss/ui/forms/_form-imagecheck.scss similarity index 100% rename from scss/ui/forms/_input.imagecheck.scss rename to scss/ui/forms/_form-imagecheck.scss diff --git a/scss/ui/forms/_input.selectgroup.scss b/scss/ui/forms/_form-selectgroup.scss similarity index 100% rename from scss/ui/forms/_input.selectgroup.scss rename to scss/ui/forms/_form-selectgroup.scss