diff --git a/sass/_font_family.scss b/sass/_font_family.scss index 6f2e458..697e29f 100644 --- a/sass/_font_family.scss +++ b/sass/_font_family.scss @@ -2,31 +2,23 @@ .serif { font-family: georgia, serif; } .sans-serif { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; } -.font-fantasy { font-family: fantasy; } -.font-cursive { font-family: cursive; } .font-mono { font-family: monospace; } @include break(not-small) { .serif-ns { font-family: georgia, serif; } .sans-serif-ns { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; } - .font-fantasy-ns { font-family: fantasy; } - .font-cursive-ns { font-family: cursive; } .font-mono-ns { font-family: monospace; } } @include break(medium) { .serif-m { font-family: georgia, serif; } .sans-serif-m { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; } - .font-fantasy-m { font-family: fantasy; } - .font-cursive-m { font-family: cursive; } .font-mono-m { font-family: monospace; } } @include break(large) { .serif-l { font-family: georgia, serif; } .sans-serif-l { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; } - .font-fantasy-l { font-family: fantasy; } - .font-cursive-l { font-family: cursive; } .font-mono-l { font-family: monospace; } } diff --git a/sass/_font_style.scss b/sass/_font_style.scss index 30c99a0..fa5891e 100644 --- a/sass/_font_style.scss +++ b/sass/_font_style.scss @@ -3,18 +3,3 @@ .fsn { font-style: normal; } .i { font-style: italic; } -@include break(not-small) { - .fsn-ns { font-style: normal; } - .i-ns { font-style: italic; } -} - -@include break(medium) { - .fsn-m { font-style: normal; } - .i-m { font-style: italic; } -} - -@include break(large) { - .fsn-l { font-style: normal; } - .i-l { font-style: italic; } -} - diff --git a/sass/_font_weight.scss b/sass/_font_weight.scss index 48a15b8..60c1f57 100644 --- a/sass/_font_weight.scss +++ b/sass/_font_weight.scss @@ -19,59 +19,55 @@ .fw9 { font-weight: 900; } @include break(not-small) { -.fwn { font-weight: normal; } -.b { font-weight: bold; } - -.fw-light { font-weight: lighter; } -.fw-bolder { font-weight: bolder; } - -.fw1 { font-weight: 100; } -.fw2 { font-weight: 200; } -.fw3 { font-weight: 300; } -.fw4 { font-weight: 400; } -.fw5 { font-weight: 500; } -.fw6 { font-weight: 600; } -.fw7 { font-weight: 700; } -.fw8 { font-weight: 800; } -.fw9 { font-weight: 900; } - + .fwn-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw-light-ns { font-weight: lighter; } + .fw-bolder-ns { font-weight: bolder; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } } @include break(medium) { -.fwn { font-weight: normal; } -.b { font-weight: bold; } + .fwn-m { font-weight: normal; } + .b-m { font-weight: bold; } + .fw-light-m { font-weight: lighter; } + .fw-bolder-m { font-weight: bolder; } -.fw-light { font-weight: lighter; } -.fw-bolder { font-weight: bolder; } - -.fw1 { font-weight: 100; } -.fw2 { font-weight: 200; } -.fw3 { font-weight: 300; } -.fw4 { font-weight: 400; } -.fw5 { font-weight: 500; } -.fw6 { font-weight: 600; } -.fw7 { font-weight: 700; } -.fw8 { font-weight: 800; } -.fw9 { font-weight: 900; } + .fw1-m { font-weight: 100; } + .fw2-m { font-weight: 200; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw5-m { font-weight: 500; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } + .fw8-m { font-weight: 800; } + .fw9-m { font-weight: 900; } } @include break(large) { -.fwn { font-weight: normal; } -.b { font-weight: bold; } + .fwn-l { font-weight: normal; } + .b-l { font-weight: bold; } -.fw-light { font-weight: lighter; } -.fw-bolder { font-weight: bolder; } + .fw-light-l { font-weight: lighter; } + .fw-bolder-l { font-weight: bolder; } -.fw1 { font-weight: 100; } -.fw2 { font-weight: 200; } -.fw3 { font-weight: 300; } -.fw4 { font-weight: 400; } -.fw5 { font-weight: 500; } -.fw6 { font-weight: 600; } -.fw7 { font-weight: 700; } -.fw8 { font-weight: 800; } -.fw9 { font-weight: 900; } + .fw1-l { font-weight: 100; } + .fw2-l { font-weight: 200; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw5-l { font-weight: 500; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } + .fw8-l { font-weight: 800; } + .fw9-l { font-weight: 900; } } diff --git a/sass/_forms.scss b/sass/_forms.scss deleted file mode 100644 index 2ffed49..0000000 --- a/sass/_forms.scss +++ /dev/null @@ -1,4 +0,0 @@ -/* ========================================================================== - FORMS - ========================================================================== */ - diff --git a/sass/_text_align.scss b/sass/_text_align.scss index 6bf7c76..f3be44c 100644 --- a/sass/_text_align.scss +++ b/sass/_text_align.scss @@ -3,54 +3,22 @@ .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } -.tj { text-align: justify; } -.ts { text-align: start; } -.te { text-align: end; } -.tmp { text-align: match-parent; } -.tse { text-align: start end; } -.tp { text-align: "."; } -.tsp { text-align: start "."; } -.tpe { text-align: "." end; } @include break(not-small) { .tl-ns { text-align: left; } .tr-ns { text-align: right; } .tc-ns { text-align: center; } - .tj-ns { text-align: justify; } - .ts-ns { text-align: start; } - .te-ns { text-align: end; } - .tmp-ns { text-align: match-parent; } - .tse-ns { text-align: start end; } - .tp-ns { text-align: "."; } - .tsp-ns { text-align: start "."; } - .tpe-ns { text-align: "." end; } } @include break(medium) { .tl-m { text-align: left; } .tr-m { text-align: right; } .tc-m { text-align: center; } - .tj-m { text-align: justify; } - .ts-m { text-align: start; } - .te-m { text-align: end; } - .tmp-m { text-align: match-parent; } - .tse-m { text-align: start end; } - .tp-m { text-align: "."; } - .tsp-m { text-align: start "."; } - .tpe-m { text-align: "." end; } } @include break(large) { .tl-l { text-align: left; } .tr-l { text-align: right; } .tc-l { text-align: center; } - .tj-l { text-align: justify; } - .ts-l { text-align: start; } - .te-l { text-align: end; } - .tmp-l { text-align: match-parent; } - .tse-l { text-align: start end; } - .tp-l { text-align: "."; } - .tsp-l { text-align: start "."; } - .tpe-l { text-align: "." end; } } diff --git a/sass/_text_overflow.scss b/sass/_text_overflow.scss deleted file mode 100644 index 1fac197..0000000 --- a/sass/_text_overflow.scss +++ /dev/null @@ -1,42 +0,0 @@ -/* ========================================================================== - TEXT OVERFLOW - ========================================================================== */ - -.t-clip { text-overflow: clip; } -.t-ellipsis { text-overflow: ellipsis; } -.t-dots { text-overflow: "…"; } - -/* Two-value syntax: the first value describes the overflow at the left end of the line, - the second at the right end. Directionality has no influence */ - -.t-clip-ellipsis { text-overflow: clip ellipsis; } -.t-double { text-overflow: "…" "…"; } -.t-i { text-overflow: inherit; } - -@include break(not-small) { - .t-clip-ns { text-overflow: clip; } - .t-ellipsis-ns { text-overflow: ellipsis; } - .t-dots-ns { text-overflow: "…"; } - .t-clip-ellipsis-ns { text-overflow: clip ellipsis; } - .t-double-ns { text-overflow: "…" "…"; } - .t-i-ns { text-overflow: inherit; } -} - -@include break(medium) { - .t-clip-m { text-overflow: clip; } - .t-ellipsis-m { text-overflow: ellipsis; } - .t-dots-m { text-overflow: "…"; } - .t-clip-ellipsis-m { text-overflow: clip ellipsis; } - .t-double-m { text-overflow: "…" "…"; } - .t-i-m { text-overflow: inherit; } -} - -@include break(large) { - .t-clip-l { text-overflow: clip; } - .t-ellipsis-l { text-overflow: ellipsis; } - .t-dots-l { text-overflow: "…"; } - .t-clip-ellipsis-l { text-overflow: clip ellipsis; } - .t-double-l { text-overflow: "…" "…"; } - .t-i-l { text-overflow: inherit; } -} - diff --git a/sass/_text_transform.scss b/sass/_text_transform.scss index f351af6..8da2f27 100644 --- a/sass/_text_transform.scss +++ b/sass/_text_transform.scss @@ -3,27 +3,27 @@ ========================================================================== */ .ttc { text-transform: capitalize; } -.ttu { text-transform: uppercase; } +.ttu { text-transform: uppercase; word-spacing: .2em; } .ttl { text-transform: lowercase; } .ttn { text-transform: none; } @include break(not-small) { .ttc-ns { text-transform: capitalize; } - .ttu-ns { text-transform: uppercase; } + .ttu-ns { text-transform: uppercase; word-spacing: .2em; } .ttl-ns { text-transform: lowercase; } .ttn-ns { text-transform: none; } } @include break(medium) { .ttc-m { text-transform: capitalize; } - .ttu-m { text-transform: uppercase; } + .ttu-m { text-transform: uppercase; word-spacing: .2em; } .ttl-m { text-transform: lowercase; } .ttn-m { text-transform: none; } } @include break(large) { .ttc-l { text-transform: capitalize; } - .ttu-l { text-transform: uppercase; } + .ttu-l { text-transform: uppercase; word-spacing: .2em; } .ttl-l { text-transform: lowercase; } .ttn-l { text-transform: none; } } diff --git a/sass/_white_space.scss b/sass/_white_space.scss index bf8aa40..93f3e98 100644 --- a/sass/_white_space.scss +++ b/sass/_white_space.scss @@ -6,30 +6,22 @@ .ws-norm { white-space: normal; } .ws-nowrap { white-space: nowrap; } .ws-pre { white-space: pre; } -.ws-prewrap { white-space: pre-wrap; } -.ws-preline { white-space: pre-line; } @include break(not-small) { .ws-norm-ns { white-space: normal; } .ws-nowrap-ns { white-space: nowrap; } .ws-pre-ns { white-space: pre; } - .ws-prewrap-ns { white-space: pre-wrap; } - .ws-preline-ns { white-space: pre-line; } } @include break(medium) { .ws-norm-m { white-space: normal; } .ws-nowrap-m { white-space: nowrap; } .ws-pre-m { white-space: pre; } - .ws-prewrap-m { white-space: pre-wrap; } - .ws-preline-m { white-space: pre-line; } } @include break(large) { .ws-norm-l { white-space: normal; } .ws-nowrap-l { white-space: nowrap; } .ws-pre-l { white-space: pre; } - .ws-prewrap-l { white-space: pre-wrap; } - .ws-preline-l { white-space: pre-line; } } diff --git a/sass/_widths.scss b/sass/_widths.scss index be6bf23..34ad37c 100644 --- a/sass/_widths.scss +++ b/sass/_widths.scss @@ -15,6 +15,16 @@ .wi9 { width: 96rem; } .wi10 { width: 128rem; } +.wi-10 { width: 10%; } +.wi-20 { width: 20%; } +.wi-25 { width: 25%; } +.wi-40 { width: 40%; } +.wi-50 { width: 50%; } +.wi-60 { width: 60%; } +.wi-75 { width: 75%; } +.wi-80 { width: 80%; } +.wi-100 { width: 100%; } + /* Width String Properties */ .wi-bb { width: border-box; } @@ -37,6 +47,15 @@ .wi8-ns { width: 64rem; } .wi9-ns { width: 96rem; } .wi10-ns { width: 128rem; } + .wi-10-ns { width: 10%; } + .wi-20-ns { width: 20%; } + .wi-25-ns { width: 25%; } + .wi-40-ns { width: 40%; } + .wi-50-ns { width: 50%; } + .wi-60-ns { width: 60%; } + .wi-75-ns { width: 75%; } + .wi-80-ns { width: 80%; } + .wi-100-ns { width: 100%; } .wi-bb-ns { width: border-box; } .wi-cb-ns { width: content-box; } .wi-mx-ns { width: max-content; } @@ -58,6 +77,15 @@ .wi8-m { width: 64rem; } .wi9-m { width: 96rem; } .wi10-m { width: 128rem; } + .wi-10-m { width: 10%; } + .wi-20-m { width: 20%; } + .wi-25-m { width: 25%; } + .wi-40-m { width: 40%; } + .wi-50-m { width: 50%; } + .wi-60-m { width: 60%; } + .wi-75-m { width: 75%; } + .wi-80-m { width: 80%; } + .wi-100-m { width: 100%; } .wi-bb-m { width: border-box; } .wi-cb-m { width: content-box; } .wi-mx-m { width: max-content; } @@ -79,6 +107,15 @@ .wi8-l { width: 64rem; } .wi9-l { width: 96rem; } .wi10-l { width: 128rem; } + .wi-10-l { width: 10%; } + .wi-20-l { width: 20%; } + .wi-25-l { width: 25%; } + .wi-40-l { width: 40%; } + .wi-50-l { width: 50%; } + .wi-60-l { width: 60%; } + .wi-75-l { width: 75%; } + .wi-80-l { width: 80%; } + .wi-100-l { width: 100%; } .wi-bb-l { width: border-box; } .wi-cb-l { width: content-box; } .wi-mx-l { width: max-content; } diff --git a/sass/_word_spacing.scss b/sass/_word_spacing.scss index 74c1913..560090d 100644 --- a/sass/_word_spacing.scss +++ b/sass/_word_spacing.scss @@ -3,24 +3,20 @@ ========================================================================== */ .wsn { word-spacing: normal; } -.ws1 { word-spacing: 0.3em; } -.ws2 { word-spacing: -0.43em; } /* For eliminating space between inline-block elements */ +.wsib { word-spacing: -0.43em; } /* For eliminating space between inline-block elements */ @include break(not-small) { .wsn-ns { word-spacing: normal; } - .ws1-ns { word-spacing: 0.3em; } - .ws2-ns { word-spacing: -0.43em; } + .wsib-ns { word-spacing: -0.43em; } } @include break(medium) { .wsn-m { word-spacing: normal; } - .ws1-m { word-spacing: 0.3em; } - .ws2-m { word-spacing: -0.43em; } + .wsib-m { word-spacing: -0.43em; } } @include break(large) { .wsn-l { word-spacing: normal; } - .ws1-l { word-spacing: 0.3em; } - .ws2-l { word-spacing: -0.43em; } + .wsib-l { word-spacing: -0.43em; } } diff --git a/sass/i.scss b/sass/i.scss index 7eac48f..9243df1 100644 --- a/sass/i.scss +++ b/sass/i.scss @@ -15,7 +15,6 @@ @import "font_family"; @import "font_style"; @import "font_weight"; -@import "forms"; @import "grid"; @import "heights"; @import "images"; @@ -36,7 +35,6 @@ @import "squares"; @import "text_decoration"; @import "text_align"; -@import "text_overflow"; @import "text_transform"; @import "type_scale"; @import "utilities";