Skip to content

Commit 76c7793

Browse files
ChristianLundgrenChristianLundgren
committed
Added background clip classes
1 parent 4862a8b commit 76c7793

File tree

6 files changed

+136
-6
lines changed

6 files changed

+136
-6
lines changed

‎dist/css/timber.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1541,6 +1541,7 @@ hr {
15411541
text-decoration: none;
15421542
vertical-align: middle;
15431543
display: inline-flex;
1544+
align-items: center;
15441545
justify-content: center;
15451546
cursor: pointer;
15461547
-webkit-appearance: none;
@@ -6100,6 +6101,87 @@ iframe {
61006101
}
61016102
}
61026103

6104+
/*------------------------------------------------------------------
6105+
@section 28. Background Clip Classes
6106+
*/
6107+
.bg-clip-border {
6108+
background-clip: border-box;
6109+
-webkit-background-clip: border-box;
6110+
}
6111+
6112+
.bg-clip-padding {
6113+
background-clip: padding-box;
6114+
-webkit-background-clip: padding-box;
6115+
}
6116+
6117+
.bg-clip-content {
6118+
background-clip: content-box;
6119+
-webkit-background-clip: content-box;
6120+
}
6121+
6122+
.bg-clip-text {
6123+
background-clip: text;
6124+
-webkit-background-clip: text;
6125+
}
6126+
6127+
/* Breakpoints */
6128+
@media only screen and (max-width: 1200px) {
6129+
.bg-lg-clip-border {
6130+
background-clip: border-box;
6131+
-webkit-background-clip: border-box;
6132+
}
6133+
.bg-lg-clip-padding {
6134+
background-clip: padding-box;
6135+
-webkit-background-clip: padding-box;
6136+
}
6137+
.bg-lg-clip-content {
6138+
background-clip: content-box;
6139+
-webkit-background-clip: content-box;
6140+
}
6141+
.bg-lg-clip-text {
6142+
background-clip: text;
6143+
-webkit-background-clip: text;
6144+
}
6145+
}
6146+
6147+
@media only screen and (max-width: 992px) {
6148+
.bg-md-clip-border {
6149+
background-clip: border-box;
6150+
-webkit-background-clip: border-box;
6151+
}
6152+
.bg-md-clip-padding {
6153+
background-clip: padding-box;
6154+
-webkit-background-clip: padding-box;
6155+
}
6156+
.bg-md-clip-content {
6157+
background-clip: content-box;
6158+
-webkit-background-clip: content-box;
6159+
}
6160+
.bg-md-clip-text {
6161+
background-clip: text;
6162+
-webkit-background-clip: text;
6163+
}
6164+
}
6165+
6166+
@media only screen and (max-width: 768px) {
6167+
.bg-sm-clip-border {
6168+
background-clip: border-box;
6169+
-webkit-background-clip: border-box;
6170+
}
6171+
.bg-sm-clip-padding {
6172+
background-clip: padding-box;
6173+
-webkit-background-clip: padding-box;
6174+
}
6175+
.bg-sm-clip-content {
6176+
background-clip: content-box;
6177+
-webkit-background-clip: content-box;
6178+
}
6179+
.bg-sm-clip-text {
6180+
background-clip: text;
6181+
-webkit-background-clip: text;
6182+
}
6183+
}
6184+
61036185
/*------------------------------------------------------------------
61046186
@section 29. Background Position Classes
61056187
*/

‎dist/js/tm.core.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "timbercss",
3-
"version": "0.1.71",
3+
"version": "0.1.72",
44
"author": "UnlimitDesign",
55
"description": "A CSS Framework for Rapid Website Prototyping",
66
"keywords": [],

‎src/scss/_variables_timber.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ $bg-attachment-responsive: (lg,md,sm) !default;
220220
$bg-position-responsive: (lg,md,sm) !default;
221221
$bg-repeat-responsive: (lg,md,sm) !default;
222222
$bg-size-responsive: (lg,md,sm) !default;
223+
$bg-clip-responsive: (lg,md,sm) !default;
223224

224225

225226
//

‎src/scss/timber.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
@import 'partials/components/_tabs.scss';
4242

4343
@import 'utilities/background/_background-attachment.scss';
44+
@import 'utilities/background/_background-clip.scss';
4445
@import 'utilities/background/_background-position.scss';
4546
@import 'utilities/background/_background-repeat.scss';
4647
@import 'utilities/background/_background-size.scss';

‎src/scss/utilities/background/_background-clip.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*------------------------------------------------------------------
2+
@section 28. Background Clip Classes
3+
*/
4+
5+
.bg-clip-border{
6+
background-clip: border-box;
7+
-webkit-background-clip: border-box;
8+
}
9+
.bg-clip-padding{
10+
background-clip: padding-box;
11+
-webkit-background-clip: padding-box;
12+
}
13+
.bg-clip-content{
14+
background-clip: content-box;
15+
-webkit-background-clip: content-box;
16+
}
17+
.bg-clip-text{
18+
background-clip: text;
19+
-webkit-background-clip: text;
20+
}
21+
22+
/* Breakpoints */
23+
@each $breakpoint in map-keys($breakpoints) {
24+
@include breakpoint-max($breakpoint){
25+
@each $bg-clip-breakpoint in $bg-clip-responsive {
26+
@if $bg-clip-breakpoint == $breakpoint{
27+
.bg-#{$breakpoint}-clip-border{
28+
background-clip: border-box;
29+
-webkit-background-clip: border-box;
30+
}
31+
.bg-#{$breakpoint}-clip-padding{
32+
background-clip: padding-box;
33+
-webkit-background-clip: padding-box;
34+
}
35+
.bg-#{$breakpoint}-clip-content{
36+
background-clip: content-box;
37+
-webkit-background-clip: content-box;
38+
}
39+
.bg-#{$breakpoint}-clip-text{
40+
background-clip: text;
41+
-webkit-background-clip: text;
42+
}
43+
}
44+
}
45+
}
46+
}

0 commit comments

Comments
 (0)