Skip to content

Commit 93fd775

Browse files
cossssmincossssmin
committed
Add slice value, remove radial gradients.
1 parent 0f9f806 commit 93fd775

File tree

4 files changed

+59
-544
lines changed

4 files changed

+59
-544
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [2.0.1] - 2019-05-31
9+
10+
### Fixed
11+
12+
- Border image should be visible now (hardcoded `border-image-slice` value to `1`)
13+
14+
### Removed
15+
16+
- Radial border gradients
17+
818
## [2.0.0] - 2019-05-30
919

1020
### Added

‎README.md

Lines changed: 7 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@ npm install tailwindcss-border-gradients
2020
linearBorderGradients: theme => ({
2121
colors: theme('colors'),
2222
}),
23-
radialBorderGradients: theme => ({
24-
colors: theme('colors'),
25-
}),
2623
},
2724
plugins: [
2825
require('tailwindcss-border-gradients')(),
@@ -53,31 +50,6 @@ npm install tailwindcss-border-gradients
5350
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
5451
},
5552
},
56-
radialBorderGradients: {
57-
shapes: { // defaults to this value
58-
'default': 'ellipse',
59-
},
60-
sizes: { // defaults to this value
61-
'default': 'closest-side',
62-
},
63-
positions: { // defaults to these values
64-
'default': 'center',
65-
't': 'top',
66-
'tr': 'top right',
67-
'r': 'right',
68-
'br': 'bottom right',
69-
'b': 'bottom',
70-
'bl': 'bottom left',
71-
'l': 'left',
72-
'tl': 'top left',
73-
},
74-
colors: { // defaults to {}
75-
'red': '#f00',
76-
'red-blue': ['#f00', '#00f'],
77-
'red-green-blue': ['#f00', '#0f0', '#00f'],
78-
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
79-
},
80-
},
8153
repeatingLinearBorderGradients: theme => ({
8254
directions: theme('linearBorderGradients.directions'), // defaults to the same values as linearBorderGradients’ directions
8355
colors: theme('linearBorderGradients.colors'), // defaults to {}
@@ -87,27 +59,10 @@ npm install tailwindcss-border-gradients
8759
'lg': '100px',
8860
},
8961
}),
90-
repeatingRadialBorderGradients: theme => ({
91-
shapes: { // defaults to this value
92-
'default': 'ellipse',
93-
},
94-
sizes: { // defaults to this value
95-
'default': 'farthest-corner',
96-
},
97-
positions: theme('radialBorderGradients.positions'), // defaults to the same values as radialBorderGradients’ positions
98-
colors: theme('radialBorderGradients.colors'), // defaults to {}
99-
lengths: { // defaults to {}
100-
'sm': '25px',
101-
'md': '50px',
102-
'lg': '100px',
103-
},
104-
}),
10562
},
10663
variants: {
10764
linearBorderGradients: ['responsive'], // defaults to ['responsive']
108-
radialBorderGradients: ['responsive'], // defaults to ['responsive']
10965
repeatingLinearBorderGradients: ['responsive'], // defaults to ['responsive']
110-
repeatingRadialBorderGradients: ['responsive'], // defaults to ['responsive']
11166
},
11267
plugins: [
11368
require('tailwindcss-border-gradients')(),
@@ -120,23 +75,16 @@ The plugin generates the following utilities:
12075
```css
12176
/* configurable with the "linearBorderGradients" theme object */
12277
.border-gradient-[direction-key]-[color-key] {
123-
border-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);
124-
}
125-
126-
/* configurable with the "radialBorderGradients" theme object */
127-
/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
128-
.border-radial-[shape-key]-[size-key]-[position-key]-[color-key] {
129-
border-image: radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...]);
78+
border-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]) 1;
13079
}
13180

13281
/* configurable with the "repeatingLinearBorderGradients" theme object */
13382
.border-gradient-[direction-key]-[color-key]-[length-key] {
134-
border-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]);
83+
border-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]) 1;
13584
}
85+
```
13686

137-
/* configurable with the "repeatingRadialBorderGradients" theme object */
138-
/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
139-
.border-radial-[shape-key]-[size-key]-[position-key]-[color-key]-[length-key] {
140-
border-image: repeating-radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);
141-
}
142-
```
87+
## Roadmap
88+
89+
- [ ] Config option for `border-image-slice`
90+
- [ ] Config option for `border-image-width`

‎index.js

Lines changed: 1 addition & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -35,85 +35,26 @@ module.exports = function() {
3535
};
3636
const defaultLinearBorderGradientColors = {};
3737
const defaultLinearBorderGradientVariants = ['responsive'];
38-
const defaultRadialBorderGradientShapes = {
39-
'default': 'ellipse',
40-
};
41-
const defaultRadialBorderGradientSizes = {
42-
'default': 'closest-side',
43-
};
44-
const defaultRadialBorderGradientPositions = {
45-
'default': 'center',
46-
't': 'top',
47-
'tr': 'top right',
48-
'r': 'right',
49-
'br': 'bottom right',
50-
'b': 'bottom',
51-
'bl': 'bottom left',
52-
'l': 'left',
53-
'tl': 'top left',
54-
};
55-
const defaultRadialBorderGradientColors = {};
56-
const defaultRadialBorderGradientVariants = ['responsive'];
5738
const defaultRepeatingLinearBorderGradientDirections = defaultLinearBorderGradientDirections;
5839
const defaultRepeatingLinearBorderGradientColors = defaultLinearBorderGradientColors;
5940
const defaultRepeatingLinearBorderGradientLengths = {};
6041
const defaultRepeatingLinearBorderGradientVariants = ['responsive'];
61-
const defaultRepeatingRadialBorderGradientShapes = defaultRadialBorderGradientShapes;
62-
const defaultRepeatingRadialBorderGradientSizes = {
63-
'default': 'farthest-corner',
64-
};
65-
const defaultRepeatingRadialBorderGradientPositions = defaultRadialBorderGradientPositions;
66-
const defaultRepeatingRadialBorderGradientColors = defaultRadialBorderGradientColors;
67-
const defaultRepeatingRadialBorderGradientLengths = {};
68-
const defaultRepeatingRadialBorderGradientVariants = ['responsive'];
6942

7043
const linearBorderGradientDirections = theme('linearBorderGradients.directions', defaultLinearBorderGradientDirections);
7144
const linearBorderGradientColors = theme('linearBorderGradients.colors', defaultLinearBorderGradientColors);
7245
const linearBorderGradientVariants = variants('linearBorderGradients', defaultLinearBorderGradientVariants);
73-
const radialBorderGradientShapes = theme('radialBorderGradients.shapes', defaultRadialBorderGradientShapes);
74-
const radialBorderGradientSizes = theme('radialBorderGradients.sizes', defaultRadialBorderGradientSizes);
75-
const radialBorderGradientPositions = theme('radialBorderGradients.positions', defaultRadialBorderGradientPositions);
76-
const radialBorderGradientColors = theme('radialBorderGradients.colors', defaultRadialBorderGradientColors);
77-
const radialBorderGradientVariants = variants('radialBorderGradients', defaultRadialBorderGradientVariants);
7846
const repeatingLinearBorderGradientDirections = theme('repeatingLinearBorderGradients.directions', defaultRepeatingLinearBorderGradientDirections);
7947
const repeatingLinearBorderGradientColors = theme('repeatingLinearBorderGradients.colors', defaultRepeatingLinearBorderGradientColors);
8048
const repeatingLinearBorderGradientLengths = theme('repeatingLinearBorderGradients.lengths', defaultRepeatingLinearBorderGradientLengths);
8149
const repeatingLinearBorderGradientVariants = variants('repeatingLinearBorderGradients', defaultRepeatingLinearBorderGradientVariants);
82-
const repeatingRadialBorderGradientShapes = theme('repeatingRadialBorderGradients.shapes', defaultRepeatingRadialBorderGradientShapes);
83-
const repeatingRadialBorderGradientSizes = theme('repeatingRadialBorderGradients.sizes', defaultRepeatingRadialBorderGradientSizes);
84-
const repeatingRadialBorderGradientPositions = theme('repeatingRadialBorderGradients.positions', defaultRepeatingRadialBorderGradientPositions);
85-
const repeatingRadialBorderGradientColors = theme('repeatingRadialBorderGradients.colors', defaultRepeatingRadialBorderGradientColors);
86-
const repeatingRadialBorderGradientLengths = theme('repeatingRadialBorderGradients.lengths', defaultRepeatingRadialBorderGradientLengths);
87-
const repeatingRadialBorderGradientVariants = variants('repeatingRadialBorderGradients', defaultRepeatingRadialBorderGradientVariants);
8850

8951
const linearBorderGradientSelector = function(directionKey, colorKey, lengthKey) {
9052
return `.${e(`border-gradient-${directionKey}-${colorKey}${lengthKey ? `-${lengthKey}` : ''}`)}`;
9153
};
9254

9355
const linearBorderGradientValue = function(direction, colors, length) {
9456
const cssDefaultLinearBorderGradientDirections = ['to bottom', '180deg', '0.5turn', '200grad', '3.1416rad'];
95-
return `${!_.isNil(length) ? 'repeating-' : ''}linear-gradient(${_.includes(cssDefaultLinearBorderGradientDirections, direction) ? '' : `${direction}, `}${colors.join(', ')}${length ? ` ${length}` : ''})`;
96-
};
97-
98-
const radialBorderGradientSelector = function(shapeKey, sizeKey, positionKey, colorKey, lengthKey) {
99-
return `.${e(`border-radial${shapeKey === 'default' ? '' : `-${shapeKey}`}${sizeKey === 'default' ? '' : `-${sizeKey}`}${positionKey === 'default' ? '' : `-${positionKey}`}-${colorKey}${lengthKey ? `-${lengthKey}` : ''}`)}`;
100-
};
101-
102-
const radialBorderGradientValue = function(shape, size, position, colors, length) {
103-
const cssDefaultRadialBorderGradientShape = 'ellipse';
104-
const cssDefaultRadialBorderGradientSize = 'farthest-corner';
105-
const cssDefaultRadialBorderGradientPositions = ['center', 'center center', '50%', '50% 50%', 'center 50%', '50% center'];
106-
let firstArgumentValues = [];
107-
if (shape !== cssDefaultRadialBorderGradientShape) {
108-
firstArgumentValues.push(shape);
109-
}
110-
if (size !== cssDefaultRadialBorderGradientSize) {
111-
firstArgumentValues.push(size);
112-
}
113-
if (!_.includes(cssDefaultRadialBorderGradientPositions, position)) {
114-
firstArgumentValues.push(`at ${position}`);
115-
}
116-
return `${!_.isNil(length) ? 'repeating-' : ''}radial-gradient(${firstArgumentValues.length > 0 ? `${firstArgumentValues.join(' ')}, ` : ''}${colors.join(', ')}${length ? ` ${length}` : ''})`;
57+
return `${!_.isNil(length) ? 'repeating-' : ''}linear-gradient(${_.includes(cssDefaultLinearBorderGradientDirections, direction) ? '' : `${direction}, `}${colors.join(', ')}${length ? ` ${length}` : ''}) 1`;
11758
};
11859

11960
const linearBorderGradientUtilities = (function() {
@@ -132,26 +73,6 @@ module.exports = function() {
13273
return utilities;
13374
})();
13475

135-
const radialBorderGradientUtilities = (function() {
136-
let utilities = {};
137-
_.forEach(radialBorderGradientColors, (colors, colorKey) => {
138-
colors = normalizeColors(colors, false);
139-
if (!colors) {
140-
return; // continue
141-
}
142-
_.forEach(radialBorderGradientPositions, (position, positionKey) => {
143-
_.forEach(radialBorderGradientSizes, (size, sizeKey) => {
144-
_.forEach(radialBorderGradientShapes, (shape, shapeKey) => {
145-
utilities[radialBorderGradientSelector(shapeKey, sizeKey, positionKey, colorKey)] = {
146-
borderImage: radialBorderGradientValue(shape, size, position, colors),
147-
};
148-
});
149-
});
150-
});
151-
});
152-
return utilities;
153-
})();
154-
15576
const repeatingLinearBorderGradientUtilities = (function() {
15677
let utilities = {};
15778
_.forEach(repeatingLinearBorderGradientLengths, (length, lengthKey) => {
@@ -170,31 +91,7 @@ module.exports = function() {
17091
return utilities;
17192
})();
17293

173-
const repeatingRadialBorderGradientUtilities = (function() {
174-
let utilities = {};
175-
_.forEach(repeatingRadialBorderGradientLengths, (length, lengthKey) => {
176-
_.forEach(repeatingRadialBorderGradientColors, (colors, colorKey) => {
177-
colors = normalizeColors(colors, false);
178-
if (!colors) {
179-
return; // continue
180-
}
181-
_.forEach(repeatingRadialBorderGradientPositions, (position, positionKey) => {
182-
_.forEach(repeatingRadialBorderGradientSizes, (size, sizeKey) => {
183-
_.forEach(repeatingRadialBorderGradientShapes, (shape, shapeKey) => {
184-
utilities[radialBorderGradientSelector(shapeKey, sizeKey, positionKey, colorKey, lengthKey)] = {
185-
borderImage: radialBorderGradientValue(shape, size, position, colors, length),
186-
};
187-
});
188-
});
189-
});
190-
});
191-
});
192-
return utilities;
193-
})();
194-
19594
addUtilities(linearBorderGradientUtilities, linearBorderGradientVariants);
196-
addUtilities(radialBorderGradientUtilities, radialBorderGradientVariants);
19795
addUtilities(repeatingLinearBorderGradientUtilities, repeatingLinearBorderGradientVariants);
198-
addUtilities(repeatingRadialBorderGradientUtilities, repeatingRadialBorderGradientVariants);
19996
};
20097
};

0 commit comments

Comments
 (0)