Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

sass fixes, forms refactoring

Browse Source
This commit is contained in:
codecalm
2019-12-15 21:17:58 +01:00
parent 14273cfa5e
commit 935bf4f3ae
20 changed files with 168 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
_config.yml
View File

@@ -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

2
build/scss-compile.js
View File

@@ -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) => {

41
pages/_docs/form-elements.md
View File

@@ -60,14 +60,7 @@ bootstrap-link: components/forms/
### Select
{% example %}
<div class="mb-2">
<label class="form-label">Country</label>
<select class="form-select">
<option value="">Germany</option>
<option value="">USA</option>
<option value="">Poland</option>
</select>
</div>
{% include parts/select.html options="Germany,USA,Poland" %}
{% endexample %}
### Textarea
@@ -128,24 +121,7 @@ bootstrap-link: components/forms/
### Sample form
{% example %}
<fieldset class="form-fieldset">
<div class="mb-2">
<label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control"/>
</div>
<div class="mb-2">
<label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control"/>
</div>
<div class="mb-2">
<label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control"/>
</div>
<div class="mb-2 mb-0">
<label class="form-label">Phone number</label>
<input type="tel" class="form-control"/>
</div>
</fieldset>
{% include parts/form-fieldset.html %}
{% endexample %}
### Input group
@@ -191,17 +167,8 @@ bootstrap-link: components/forms/
### Separated inputs
{% example %}
<div class="mb-2">
<label class="form-label">Separated inputs</label>
<div class="row row-xs">
<div class="col">
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<span class="col-auto">
<button class="btn btn-secondary" type="button">{% include_cached ui/icon.html icon="search" %}</button>
</span>
</div>
</div>{% endexample %}
{% include parts/input-icon-separated.html %}
{% endexample %}
### Custom Input examples
{% example %}

14
pages/_includes/forms/form-elements-1.html
View File

@@ -61,18 +61,10 @@
</div>
{% include parts/input-icon.html %}
{% include parts/input-icon-separated.html %}
<div class="mb-3">
<label class="form-label">Separated inputs</label>
<div class="row row-xs">
<div class="col">
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<div class="col-auto">
<button class="btn btn-secondary" type="button">{% include_cached ui/icon.html icon="search" %}</button>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">ZIP Code</label>
<div class="row row-sm">

13
pages/_includes/forms/form-elements-3.html
View File

@@ -3,20 +3,11 @@
{% include parts/input-colorpicker.html %}
<div class="mb-3">
<label class="form-label">Valid State</label>
<input type="text" class="form-control is-valid" placeholder="Valid State..">
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div>
<div class="mb-3">
<label class="form-label">Invalid State</label>
<label class="form-label">Validation States</label>
<input type="text" class="form-control is-valid mb-3" placeholder="Valid State..">
<input type="text" class="form-control is-invalid" placeholder="Invalid State..">
<div class="invalid-feedback">Invalid feedback</div>
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
</div>

11
pages/_includes/parts/input-icon-separated.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="mb-3">
<label class="form-label">Separated inputs</label>
<div class="row row-xs">
<div class="col">
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<div class="col-auto">
{% include ui/button.html icon="search" icon-only=true color="secondary" %}
</div>
</div>
</div>

2
pages/_includes/parts/input-icon.html
View File

@@ -1,4 +1,4 @@
<div class="mb-2">
<div class="mb-3">
<label class="form-label">Icon input</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Search for&hellip;">

7
pages/_includes/parts/select.html
View File

@@ -1,8 +1,9 @@
{% assign options = include.options | default: "One,Two,Three" | split: "," %}
<div class="mb-3">
<div class="form-label">{{ include.label | default: 'Select' }}</div>
<select class="form-select"{% if include.multiple %} multiple{% endif %}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
{% for option in options %}
<option value="{{ forloop.index }}">{{ option }}</option>
{% endfor %}
</select>
</div>

13
pages/_layouts/markdown.html Normal file
View File

@@ -0,0 +1,13 @@
---
layout: default
---
<div class="row row justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="card">
<div class="card-body p-md-7">
{{ content }}
</div>
</div>
</div>
</div>

72
pages/markdown.md Normal file
View File

@@ -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!

53
scss/_variables.scss
View File

@@ -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,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
//Flags

11
scss/tabler.scss
View File

@@ -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";

5
scss/ui/_buttons.scss
View File

@@ -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 {

1
scss/ui/_cards.scss
View File

@@ -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;

5
scss/ui/_inputs.scss → scss/ui/_forms.scss
View File

@@ -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;
}

2
scss/ui/forms/_input.colorinput.scss → scss/ui/forms/_form-colorinput.scss
View File

@@ -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);

14
scss/ui/forms/_form-custom.scss Normal file
View File

@@ -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;
}

14
scss/ui/forms/_input.custom.scss → scss/ui/forms/_form-icon.scss
View File

@@ -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;
}

0
scss/ui/forms/_input.imagecheck.scss → scss/ui/forms/_form-imagecheck.scss
View File

0
scss/ui/forms/_input.selectgroup.scss → scss/ui/forms/_form-selectgroup.scss
View File