Skip to content

Commit 67bf22e

Browse files
radiogronradiogron
committed
Removed block__ and added property&value class with compensation
1 parent 3d138fb commit 67bf22e

File tree

10 files changed

+451
-469
lines changed

10 files changed

+451
-469
lines changed

‎dist/fa-kit.css‎

Lines changed: 28 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@charset "UTF-8";
2+
/* Hi this is a custom template that you can use in you project. Copy it to your src folder and import before FA-Kit config. Then add set up you values to vars. You can remove all or add any you needed, build of FA-Kit might not be crashed. */
23
html:root {
34
--grid-square: 8; }
45
@media (min-width: 0) {
@@ -817,6 +818,9 @@ article span, article strong, article i, article b, .article span, .article stro
817818

818819
.border__primary {
819820
border: 0.1rem solid #bc1817; }
821+
.border__primary .border_height-compensation {
822+
margin-top: -0.1rem;
823+
margin-bottom: -0.1rem; }
820824

821825
.color__primary {
822826
color: #bc1817; }
@@ -826,6 +830,9 @@ article span, article strong, article i, article b, .article span, .article stro
826830

827831
.border__secondary {
828832
border: 0.1rem solid #fab51b; }
833+
.border__secondary .border_height-compensation {
834+
margin-top: -0.1rem;
835+
margin-bottom: -0.1rem; }
829836

830837
.color__secondary {
831838
color: #fab51b; }
@@ -835,6 +842,9 @@ article span, article strong, article i, article b, .article span, .article stro
835842

836843
.border__alert {
837844
border: 0.1rem solid #bc1817; }
845+
.border__alert .border_height-compensation {
846+
margin-top: -0.1rem;
847+
margin-bottom: -0.1rem; }
838848

839849
.color__alert {
840850
color: #bc1817; }
@@ -844,6 +854,9 @@ article span, article strong, article i, article b, .article span, .article stro
844854

845855
.border__warning {
846856
border: 0.1rem solid #fab51b; }
857+
.border__warning .border_height-compensation {
858+
margin-top: -0.1rem;
859+
margin-bottom: -0.1rem; }
847860

848861
.color__warning {
849862
color: #fab51b; }
@@ -853,6 +866,9 @@ article span, article strong, article i, article b, .article span, .article stro
853866

854867
.border__ok {
855868
border: 0.1rem solid #3baa35; }
869+
.border__ok .border_height-compensation {
870+
margin-top: -0.1rem;
871+
margin-bottom: -0.1rem; }
856872

857873
.color__ok {
858874
color: #3baa35; }
@@ -862,6 +878,9 @@ article span, article strong, article i, article b, .article span, .article stro
862878

863879
.border__black {
864880
border: 0.1rem solid black; }
881+
.border__black .border_height-compensation {
882+
margin-top: -0.1rem;
883+
margin-bottom: -0.1rem; }
865884

866885
.color__black {
867886
color: black; }
@@ -871,6 +890,9 @@ article span, article strong, article i, article b, .article span, .article stro
871890

872891
.border__white {
873892
border: 0.1rem solid white; }
893+
.border__white .border_height-compensation {
894+
margin-top: -0.1rem;
895+
margin-bottom: -0.1rem; }
874896

875897
.color__white {
876898
color: white; }
@@ -880,6 +902,9 @@ article span, article strong, article i, article b, .article span, .article stro
880902

881903
.border__light {
882904
border: 0.1rem solid #eaeaea; }
905+
.border__light .border_height-compensation {
906+
margin-top: -0.1rem;
907+
margin-bottom: -0.1rem; }
883908

884909
.color__light {
885910
color: #eaeaea; }
@@ -889,64 +914,13 @@ article span, article strong, article i, article b, .article span, .article stro
889914

890915
.border__dark {
891916
border: 0.1rem solid #727272; }
917+
.border__dark .border_height-compensation {
918+
margin-top: -0.1rem;
919+
margin-bottom: -0.1rem; }
892920

893921
.color__dark {
894922
color: #727272; }
895923

896-
.block__background-primary {
897-
background-color: #bc1817; }
898-
899-
.block__background-secondary {
900-
background-color: #fab51b; }
901-
902-
.block__background-alert {
903-
background-color: #bc1817; }
904-
905-
.block__background-warning {
906-
background-color: #fab51b; }
907-
908-
.block__background-ok {
909-
background-color: #3baa35; }
910-
911-
.block__background-black {
912-
background-color: black; }
913-
914-
.block__background-white {
915-
background-color: white; }
916-
917-
.block__background-light {
918-
background-color: #eaeaea; }
919-
920-
.block__background-dark {
921-
background-color: #727272; }
922-
923-
.block__border-primary {
924-
border: 0.1rem solid #bc1817; }
925-
926-
.block__border-secondary {
927-
border: 0.1rem solid #fab51b; }
928-
929-
.block__border-alert {
930-
border: 0.1rem solid #bc1817; }
931-
932-
.block__border-warning {
933-
border: 0.1rem solid #fab51b; }
934-
935-
.block__border-ok {
936-
border: 0.1rem solid #3baa35; }
937-
938-
.block__border-black {
939-
border: 0.1rem solid black; }
940-
941-
.block__border-white {
942-
border: 0.1rem solid white; }
943-
944-
.block__border-light {
945-
border: 0.1rem solid #eaeaea; }
946-
947-
.block__border-dark {
948-
border: 0.1rem solid #727272; }
949-
950924
.form {
951925
display: block; }
952926
.form .form_fieldset {

‎sass/base/coloring.sass‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55

66
.border__#{$state}
77
border: .1rem solid $color
8+
.border_height-compensation
9+
margin:
10+
top: - $border-width
11+
bottom: - $border-width
812

913
.color__#{$state}
1014
color: $color

‎sass/config.sass‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -31,65 +31,67 @@ $body-background-color : $color-white!default
3131

3232

3333
//* 2. Grid */
34-
$grid-square : 8!default // Module system value
35-
$grid-cols : 12!default
36-
$containers : ( xs : 100%, sm : 100%, md : 1000px, lg : 1200px )!default
34+
$grid-square : 8 !default // Module system value
35+
$grid-cols : 12 !default
36+
$containers : ( xs : 100%, sm : 100%, md : 1000px, lg : 1200px ) !default
3737
$media-quaries : ( xs, sm, md, lg, xl)!default
38-
$media-quaries_up : ( xs : 0, sm : 500px, md : 900px, lg : 1024px, xl : 1220px )!default
39-
$media-quaries_down : ( xs : 500px, sm : 900px, md : 1024px, lg : 1220px, xl : 1220px )!default
38+
$media-quaries_up : ( xs : 0, sm : 500px, md : 900px, lg : 1024px, xl : 1220px ) !default
39+
$media-quaries_down : ( xs : 500px, sm : 900px, md : 1024px, lg : 1220px, xl : 1220px ) !default
4040

4141

4242
//* 3. Text */
4343
// Family
4444
$font-heading : Arial, -apple-system, system-ui!default
4545
$font-main : Arial, -apple-system, system-ui!default
4646
// Size
47-
$font-base-ratio : ( xs: 16, lg: 18 )!default
48-
$font-base-size : 1rem!default
47+
$font-base-ratio : ( xs: 16, lg: 18 ) !default
48+
$font-base-size : 1rem !default
4949

50-
$font-heading-sizes : ( h1 : 2.5rem, h2 : 2.1rem, h3 : 1.8rem, h4 : 1.5rem, h5 : 1.2rem, h6 : 1rem )!default
51-
$font-heading-weight : ( 6 : normal, 5 : normal, 4 : bold, 3 : bold, 2 : bold, 1 : bold )!default // May have reversed mode 1 eq h6 heading, h1 = 6
52-
$font-heading-lineheight : ( 6 : 2, 5 : 2, 4 : 2, 3 : 1, 2 : 1, 1 : 1 )!default // May have reversed mode 1 eq h6 heading, h1 = 6
53-
$font_heading_margin_top : 2!default
54-
$font_heading_margin_bottom : 1!default
50+
$font-heading-sizes : ( h1 : 2.5rem, h2 : 2.1rem, h3 : 1.8rem, h4 : 1.5rem, h5 : 1.2rem, h6 : 1rem ) !default
51+
$font-heading-weight : ( 6 : normal, 5 : normal, 4 : bold, 3 : bold, 2 : bold, 1 : bold ) !default // May have reversed mode 1 eq h6 heading, h1 = 6
52+
$font-heading-lineheight : ( 6 : 2, 5 : 2, 4 : 2, 3 : 1, 2 : 1, 1 : 1 ) !default // May have reversed mode 1 eq h6 heading, h1 = 6
53+
$font_heading_margin_top : 2 !default
54+
$font_heading_margin_bottom : 1 !default
5555

5656
// Align
57-
$text-align-list : left, right, center, justify!default
58-
$flex-align_items-list : ( start : flex-start , end : flex-end , center : center , baseline : baseline , stretch : stretch )!default
57+
$text-align-list : left, right, center, justify !default
58+
$flex-align_items-list : ( start : flex-start , end : flex-end , center : center , baseline : baseline , stretch : stretch ) !default
5959
// Other
6060
6161
6262
//* 4. Margin and paddings */
63-
$directions : left, right, top, bottom, yy, xx!default
64-
$direction-offset : ( 0: 0 , half: .5 , 1: 1 , 2: 2 , 3: 3 , 4: 4 , 5: 5 )!default
63+
$directions : left, right, top, bottom, yy, xx !default
64+
$direction-offset : ( 0: 0 , half: .5 , 1: 1 , 2: 2 , 3: 3 , 4: 4 , 5: 5 ) !default
6565

6666

6767
//* 5. Design */
6868
// Rounded
69-
$global-rounded : true!default
70-
$global-rounded-radius : 0.2rem!default
69+
$global-rounded : true !default
70+
$global-rounded-radius : 0.2rem !default
7171
// Animation
72-
$global-animation : true!default
73-
$global-animation-delay : 0.2s!default
72+
$global-animation : true !default
73+
$global-animation-delay : 0.2s !default
7474
//Inputs
75-
$global-input-inset-y: .5rem!default
76-
$global-input-inset-x: 1rem!default
75+
$global-input-inset-y: .5rem !default
76+
$global-input-inset-x: 1rem !default
77+
// Coloring
78+
$border-width: .1rem !default
7779

7880

7981
//* 6. Buttons */
80-
$colors : ( primary : $color-primary, secondary : $color-secondary, alert : $color-alert, warning : $color-warning, ok : $color-ok, black : $color-black, white : $color-white , light : $color-gray__light , dark : $color-gray__dark )!default
81-
$buttons-inset-x : $global-input-inset-x!default
82-
$buttons-inset-y : $global-input-inset-y!default
83-
$buttons-radius : ''!default
82+
$colors : ( primary : $color-primary, secondary : $color-secondary, alert : $color-alert, warning : $color-warning, ok : $color-ok, black : $color-black, white : $color-white , light : $color-gray__light , dark : $color-gray__dark ) !default
83+
$buttons-inset-x : $global-input-inset-x !default
84+
$buttons-inset-y : $global-input-inset-y !default
85+
$buttons-radius : '' !default
8486
@if $global-rounded
85-
$buttons-radius : $global-rounded-radius!default
87+
$buttons-radius : $global-rounded-radius !default
8688

8789

8890
//* 7. Fields */
89-
$fields-inset-x : $global-input-inset-x!default
90-
$fields-inset-y : $global-input-inset-y!default
91-
$fields-radius : ''!default
91+
$fields-inset-x : $global-input-inset-x !default
92+
$fields-inset-y : $global-input-inset-y !default
93+
$fields-radius : '' !default
9294
@if $global-rounded
93-
$fields-radius : $global-rounded-radius!default
94-
$fields-border-width : 0.1rem !default
95+
$fields-radius : $global-rounded-radius !default
96+
$fields-border-width : $border-width !default
9597
$fields-border-style : solid !default

‎sass/config_custom_template.sass‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/*
2-
Hi this is a custom template that you can use in you project. Copy it to your src folder and import before FA-Kit config.
3-
Then add set up you values to vars. You can remove all or add any you needed, build of FA-Kit might not be crashed.
4-
*/
1+
/* Hi this is a custom template that you can use in you project. Copy it to your src folder and import before FA-Kit config. Then add set up you values to vars. You can remove all or add any you needed, build of FA-Kit might not be crashed. */
52

63

74
//* 1. Colors */

‎sass/fa-kit.sass‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
@import base/coloring
1414

1515
// UI/Design //
16-
@import ui/blocks
1716
@import ui/forms
1817
@import ui/buttons
1918
@import ui/modals

‎sass/ui/blocks.sass‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)