Skip to content

Commit b22aaf5

Browse files
philscott-rgphilscott-rg
authored
Merge pull request #536 from red-gate/responsive-corner-rounding-classes
Responsive corner rounding classes
2 parents 9eea877 + 2604510 commit b22aaf5

9 files changed

+134
-41
lines changed

‎dist/honeycomb.app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/honeycomb.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/honeycomb.css.cheatsheet.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2335,14 +2335,70 @@ <h1>Honeycomb web toolkit class name cheatsheet</h1>
23352335

23362336
<ul>
23372337
<li>.rounded--bottom</li>
2338+
<li>.rounded--bottom--large</li>
2339+
<li>.rounded--bottom--max</li>
2340+
<li>.rounded--bottom--medium</li>
2341+
<li>.rounded--bottom--mini</li>
2342+
<li>.rounded--bottom--small</li>
23382343
<li>.rounded--bottom-left</li>
2344+
<li>.rounded--bottom-left--large</li>
2345+
<li>.rounded--bottom-left--max</li>
2346+
<li>.rounded--bottom-left--medium</li>
2347+
<li>.rounded--bottom-left--mini</li>
2348+
<li>.rounded--bottom-left--small</li>
23392349
<li>.rounded--bottom-right</li>
2350+
<li>.rounded--bottom-right--large</li>
2351+
<li>.rounded--bottom-right--max</li>
2352+
<li>.rounded--bottom-right--medium</li>
2353+
<li>.rounded--bottom-right--mini</li>
2354+
<li>.rounded--bottom-right--small</li>
23402355
<li>.rounded--circle</li>
2356+
<li>.rounded--circle--large</li>
2357+
<li>.rounded--circle--max</li>
2358+
<li>.rounded--circle--medium</li>
2359+
<li>.rounded--circle--mini</li>
2360+
<li>.rounded--circle--small</li>
2361+
<li>.rounded--large</li>
23412362
<li>.rounded--left</li>
2363+
<li>.rounded--left--large</li>
2364+
<li>.rounded--left--max</li>
2365+
<li>.rounded--left--medium</li>
2366+
<li>.rounded--left--mini</li>
2367+
<li>.rounded--left--small</li>
2368+
<li>.rounded--max</li>
2369+
<li>.rounded--medium</li>
2370+
<li>.rounded--mini</li>
2371+
<li>.rounded--none</li>
2372+
<li>.rounded--none--large</li>
2373+
<li>.rounded--none--max</li>
2374+
<li>.rounded--none--medium</li>
2375+
<li>.rounded--none--mini</li>
2376+
<li>.rounded--none--small</li>
23422377
<li>.rounded--right</li>
2378+
<li>.rounded--right--large</li>
2379+
<li>.rounded--right--max</li>
2380+
<li>.rounded--right--medium</li>
2381+
<li>.rounded--right--mini</li>
2382+
<li>.rounded--right--small</li>
2383+
<li>.rounded--small</li>
23432384
<li>.rounded--top</li>
2385+
<li>.rounded--top--large</li>
2386+
<li>.rounded--top--max</li>
2387+
<li>.rounded--top--medium</li>
2388+
<li>.rounded--top--mini</li>
2389+
<li>.rounded--top--small</li>
23442390
<li>.rounded--top-left</li>
2391+
<li>.rounded--top-left--large</li>
2392+
<li>.rounded--top-left--max</li>
2393+
<li>.rounded--top-left--medium</li>
2394+
<li>.rounded--top-left--mini</li>
2395+
<li>.rounded--top-left--small</li>
23452396
<li>.rounded--top-right</li>
2397+
<li>.rounded--top-right--large</li>
2398+
<li>.rounded--top-right--max</li>
2399+
<li>.rounded--top-right--medium</li>
2400+
<li>.rounded--top-right--mini</li>
2401+
<li>.rounded--top-right--small</li>
23462402

23472403
</ul>
23482404
<li>.scheme</li>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "honeycomb-web-toolkit",
3-
"version": "14.3.17",
3+
"version": "14.3.18",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/red-gate/honeycomb-web-toolkit"

‎src/corners/css/_main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// Corners
22
@import 'settings';
3+
@import 'mixins';
34
@import 'utilities';
45
@import 'rules';

‎src/corners/css/_mixins.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'mixins/honeycomb.corners.mixins.corners'

‎src/corners/css/mixins/_honeycomb.corners.mixins.corners.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// Build the corner rounding rules, with optional suffix
2+
@mixin buildCorners($suffix: "") {
3+
.rounded#{$suffix} {
4+
@include rounded;
5+
}
6+
7+
.rounded--top#{$suffix} {
8+
@include rounded-top;
9+
}
10+
11+
.rounded--bottom#{$suffix} {
12+
@include rounded-bottom;
13+
}
14+
15+
.rounded--left#{$suffix} {
16+
@include rounded-left;
17+
}
18+
19+
.rounded--right#{$suffix} {
20+
@include rounded-right;
21+
}
22+
23+
.rounded--top-left#{$suffix} {
24+
@include rounded-top-left;
25+
}
26+
27+
.rounded--top-right#{$suffix} {
28+
@include rounded-top-right;
29+
}
30+
31+
.rounded--bottom-right#{$suffix} {
32+
@include rounded-bottom-right;
33+
}
34+
35+
.rounded--bottom-left#{$suffix} {
36+
@include rounded-bottom-left;
37+
}
38+
39+
.rounded--circle#{$suffix} {
40+
@include rounded-circle;
41+
}
42+
43+
.rounded--none#{$suffix} {
44+
border-radius: 0px !important;
45+
}
46+
}

‎src/corners/css/objects/_honeycomb.corners.objects.corners.scss

Lines changed: 19 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,23 @@
22
#ROUNDED CORNERS
33
\*------------------------------------*/
44

5-
.rounded {
6-
@include rounded;
7-
}
8-
9-
.rounded--top {
10-
@include rounded-top;
11-
}
12-
13-
.rounded--bottom {
14-
@include rounded-bottom;
15-
}
16-
17-
.rounded--left {
18-
@include rounded-left;
19-
}
20-
21-
.rounded--right {
22-
@include rounded-right;
23-
}
24-
25-
.rounded--top-left {
26-
@include rounded-top-left;
27-
}
28-
29-
.rounded--top-right {
30-
@include rounded-top-right;
31-
}
32-
33-
.rounded--bottom-right {
34-
@include rounded-bottom-right;
35-
}
36-
37-
.rounded--bottom-left {
38-
@include rounded-bottom-left;
39-
}
40-
41-
.rounded--circle {
42-
@include rounded-circle;
5+
@include buildCorners("");
6+
7+
/**
8+
* Build the rounded corners classes at breakpoints, using Desktop first approach, like the
9+
* responsive mixin in the base module.
10+
*/
11+
@if $hc-responsive {
12+
$hc-breakpoints: false !default;
13+
@if $hc-breakpoints {
14+
@each $breakpoint in $hc-breakpoints {
15+
$name: nth($breakpoint, 1);
16+
$width: nth($breakpoint, 2);
17+
$declaration: "(#{$hc-mqProperty} #{$width})";
18+
19+
@media #{$declaration} {
20+
@include buildCorners("--#{$name}");
21+
}
22+
}
23+
}
4324
}

‎src/corners/css/snippets/_honeycomb.corners.snippets.corners.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,29 @@
1212
@mixin rounded-top () {
1313
@include px-rem(border-top-left-radius, $hc-corner-radius);
1414
@include px-rem(border-top-right-radius, $hc-corner-radius);
15+
border-bottom-right-radius: 0;
16+
border-bottom-left-radius: 0;
1517
}
1618

1719
@mixin rounded-bottom () {
1820
@include px-rem(border-bottom-left-radius, $hc-corner-radius);
1921
@include px-rem(border-bottom-right-radius, $hc-corner-radius);
22+
border-top-left-radius: 0;
23+
border-top-right-radius: 0;
2024
}
2125

2226
@mixin rounded-left () {
2327
@include px-rem(border-top-left-radius, $hc-corner-radius);
2428
@include px-rem(border-bottom-left-radius, $hc-corner-radius);
29+
border-top-right-radius: 0;
30+
border-bottom-right-radius: 0;
2531
}
2632

2733
@mixin rounded-right () {
2834
@include px-rem(border-top-right-radius, $hc-corner-radius);
2935
@include px-rem(border-bottom-right-radius, $hc-corner-radius);
36+
border-top-left-radius: 0;
37+
border-bottom-left-radius: 0;
3038
}
3139

3240
@mixin rounded-top-left () {

0 commit comments

Comments
 (0)