Skip to content

Commit d59ec10

Browse files
radiogronradiogron
authored
Merge pull request #14 from devamstudio/develop
Develop
2 parents b1be33b + 48343f9 commit d59ec10

28 files changed

+3414
-2474
lines changed

‎dist/fa-kit.css‎

Lines changed: 2090 additions & 1429 deletions
Large diffs are not rendered by default.

‎sass/base/article.sass‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
article, .#{$class-article}
22
// Create headings
33
@each $heading, $size in $font_heading_sizes
4-
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size))
5-
$offset_top: map-get($font_heading_sizes, h+$i_rev )
4+
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size)) + 1
5+
$line-height: map-get($font-heading-lineheight, $i_rev )
6+
$font-weight: map-get($font-heading-weight, $i_rev )
67
#{$heading}
8+
margin:
9+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_top} * 1rem)
10+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_bottom} * 1rem)
711
display: block
8-
font :
9-
size : $size
10-
family : $font_heading
11-
margin: 0
12-
top: $font_heading_margin_top
13-
bottom: .2em
14-
font-weight : 400
15-
line-height: $font_heading_line_height
12+
font:
13+
family: $font_heading
1614
hyphens: auto
17-
img, picture
18-
& + p, & + blockquote
19-
margin-top: 1em
15+
font:
16+
size: $size
17+
weight: $font-weight
18+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$line-height} * 1rem)
2019

2120
ol, ul
22-
padding:
23-
left: 2em
2421
margin:
25-
bottom: 1em
26-
line-height: $text-line-height
22+
top: 0
23+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
24+
li
25+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
26+
2727
span,strong,i,b
2828
font :
2929
size : inherit

‎sass/base/coloring.sass‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@each $state, $color in $colors
2+
.background__#{$state}
3+
background:
4+
color: $color
5+
6+
.border__#{$state}
7+
border: .1rem solid $color
8+
.border_height-compensation
9+
margin:
10+
top: - $border-width
11+
bottom: - $border-width
12+
13+
.color__#{$state}
14+
color: $color

‎sass/base/display.sass‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
//* 1. Visibility*/
2-
3-
42
//* 1. Visibility*/
53
////hidden-blocks
64
.#{$class-hidden}

‎sass/base/reset.sass‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
*::after
44
box-sizing : border-box
55

6+
html
7+
font:
8+
family: $font-main
9+
size: calc(var(--font-size) * 1px)
10+
color: $body-text-color
11+
612
body
713
margin: 0
8-
line-height: 1
9-
color: $body-text-color
1014
background: $body-background-color
1115

1216
// Media
13-
1417
img, picture
1518
line-height: 0
1619
vertical-align: middle

‎sass/base/root.sass‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
html:root
2+
--grid-square: #{$grid-square}
3+
--grid-squares-per-line: #{$grid-squares-per-line}
4+
@each $query, $size in $font-base-ratio
5+
@include media_query_up($query)
6+
--font-size: #{$size}

‎sass/base/typography.sass‎

Lines changed: 68 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,85 +2,103 @@
22
// Global //
33
////////////
44
5-
body,html
6-
font :
7-
family : $font-main
8-
size : $font_base_size
9-
105
// Create main text
11-
p
6+
.paragraph
127
hyphens: auto
13-
font :
14-
size : $font_main_size
15-
family : $font_main
16-
line-height : $text_line_height
17-
margin : 0 0 1em 0
8+
font:
9+
size: $font-base-size
10+
family: $font_main
11+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
12+
margin:
13+
top: 0
14+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
15+
16+
*
17+
vertical-align: baseline
18+
19+
// Lead
20+
&.paragraph__lead
21+
font-size: $font-base-size * 1.2
22+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
1823

1924
// Text format
20-
kbd
25+
.kbd
2126
display: inline-block
22-
padding: .1em .4em
23-
font-size: .8em
24-
line-height: inherit
25-
vertical-align: middle
27+
padding: .3em .4em
28+
font-size: .9em
29+
line-height: 1
2630
background-color: $color-black
2731
color: $color-white
28-
border-radius: .2em
32+
border-radius: .2rem
2933

3034
// Create headings class
31-
@each $heading, $size in $font_heading_sizes
32-
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size))
33-
$offset_top: map-get($font_heading_sizes, h+$i_rev )
34-
.#{$heading}
35-
display: block
36-
font :
37-
size : $size
38-
family : $font_heading
39-
margin: 0
40-
top: $font_heading_margin_top
41-
bottom: .2em
42-
font-weight : 400
43-
line-height: $font_heading_line_height
44-
hyphens: auto
35+
.heading
36+
margin:
37+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_top} * 1rem)
38+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_bottom} * 1rem)
39+
display: block
40+
font:
41+
family: $font_heading
42+
font-weight: 400
43+
hyphens: auto
44+
45+
@each $heading, $size in $font_heading_sizes
46+
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size)) + 1
47+
$line-height: map-get($font-heading-lineheight, $i_rev )
48+
$font-weight: map-get($font-heading-weight, $i_rev )
49+
&.heading__#{$heading}
50+
font:
51+
size: $size
52+
weight: $font-weight
53+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$line-height} * 1rem)
4554

4655
.#{$class-text}
4756
// Color text
4857
@each $state, $color in $colors
4958
&__#{$state}
50-
color : $color
59+
color: $color
5160
// Align text
5261
@each $align in $text_align_list
5362
&__#{$align}
54-
text-align : $align
63+
text-align: $align
5564
@each $size, $tmp in $media_quaries_up
5665
@include media_query_up($size)
5766
@each $align in $text_align_list
5867
&__#{$size}-#{$align}
59-
text-align : $align
60-
// Lead
61-
&__lead
62-
font-size: 1.1em
68+
text-align: $align
6369

6470
// Global lists
6571
.#{$class-list}
72+
margin:
73+
top: 0
74+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
75+
&_item
76+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
6677
&__unstyled
67-
list-style-type : none
78+
list-style-type: none
6879
padding: 0
6980
margin: 0
7081

7182
// Text decoration
72-
.g-blockquote
73-
margin:
74-
left: 1.5em
75-
padding: 1em
76-
border-left: .1em solid $color-gray
83+
.#{$class-blockquote}
84+
margin:
85+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)
86+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)
87+
left: 0
88+
padding:
89+
left: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
90+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem - 1em)
91+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem - 1em)
92+
border:
93+
top: .1em solid $color-gray
94+
bottom: .1em solid $color-gray
7795
font-style: italic
78-
line-height: $text-line-height
96+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
7997

80-
////////////
81-
// MAIN //
82-
////////////
98+
.link
99+
@extend %link
83100

84-
main
85-
a:not(.g-button), a[role='link']
86-
@extend %link
101+
.hr
102+
margin:
103+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)
104+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)

‎sass/base/utilites.sass‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@
33
//* 3. Flex aligning
44
55
//* 1. Margins and paddings
6-
$offset_side : margin, padding
6+
$offset_side: margin, padding
77
@each $item in $offset_side
88
.#{$item}
99
@each $direction in $directions
1010
@each $offset, $offset_value in $direction_offset
1111
@if $item == padding and $offset == auto
1212
@else
1313
&__#{$direction}-#{$offset}
14-
#{$item} :
14+
#{$item}:
1515
@if $direction == yy
16-
top : $offset_value
17-
bottom : $offset_value
16+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
17+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
1818
@else if $direction == xx
19-
right : $offset_value
20-
left : $offset_value
19+
right: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
20+
left: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
2121
@else
22-
#{$direction} : $offset_value
22+
#{$direction}: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
2323
@each $size, $tmp in $media_quaries_up
2424
@include media_query_up($size)
2525
@each $direction in $directions
2626
@each $offset, $offset_value in $direction_offset
2727
@if $item == padding and $offset == auto
2828
@else
2929
&__#{$size}-#{$direction}-#{$offset}
30-
#{$item} :
30+
#{$item}:
3131
@if $direction == yy
32-
top : $offset_value
33-
bottom : $offset_value
32+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
33+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
3434
@else if $direction == xx
35-
right : $offset_value
36-
left : $offset_value
35+
right: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
36+
left: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
3737
@else
38-
#{$direction} : $offset_value
38+
#{$direction}: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
3939

4040
//* 2. Flex ordering
4141
.#{$class-order}

‎sass/class.sass‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
$prefix__global : 'g-'
2-
$prefix__block : 'b-'
3-
$prefix__design : 'd-'
1+
$prefix__global : '' // Возможное значение: 'g-'
2+
$prefix__block : '' // Возможное значение: 'b-'
3+
$prefix__design : '' // Возможное значение: 'd-'
44

55
// Globals //
66
$class-container : $prefix__global + 'container'
@@ -25,7 +25,6 @@ $class-block : $prefix__global + 'block'
2525
$class-button : $prefix__global + 'button'
2626

2727
// Blocks //
28-
2928
$class-breadcrumbs : $prefix__block + 'breadcrumbs'
3029

3130
$class-form : $prefix__block + 'form'
@@ -37,4 +36,5 @@ $class-notification : $prefix__block + 'notification'
3736

3837
$class-pagination : $prefix__block + 'pagination'
3938

40-
// Design //
39+
// Design //
40+
$class-blockquote : $prefix__design + 'blockquote'

0 commit comments

Comments
 (0)