Skip to content

Commit aaf37d1

Browse files
Yann BragaYann Braga
Yann Braga
authored and
Yann Braga
committed
refactor(ribbon-item): creates mixin to remove repetitive code
1 parent c07458e commit aaf37d1

File tree

2 files changed

+76
-94
lines changed

2 files changed

+76
-94
lines changed

‎src/pages/miscellaneous/item-ribbon/item-ribbon.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<ion-header>
22
<ion-navbar>
3-
<ion-title>item-ribbon</ion-title>
3+
<ion-title>Item Ribbon</ion-title>
44
</ion-navbar>
55
</ion-header>
66

@@ -31,7 +31,7 @@
3131
</ion-item>
3232

3333
<ion-item class="item-ribbon">
34-
<span class="ribbon java-script">
34+
<span class="ribbon javascript">
3535
<span>JS</span>
3636
</span>
3737
<ion-thumbnail item-left>

‎src/pages/miscellaneous/item-ribbon/item-ribbon.scss

Lines changed: 74 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,90 @@
11
page-item-ribbon {
2-
3-
$default: #f53d3d;
4-
5-
.item-ribbon{
6-
background-color: #fff;
7-
position: relative;
8-
filter: none;
9-
opacity: 1;
10-
.ribbon {
11-
position: absolute;
12-
right: -5px;
13-
top: -5px;
14-
z-index: 2;
15-
overflow: hidden;
16-
width: 75px;
17-
height: 75px;
18-
text-align: right;
19-
span {
20-
font-size: 1rem;
21-
font-weight: bold;
22-
color: #fff;
23-
text-transform: uppercase;
24-
text-align: center;
25-
line-height: 20px;
26-
-webkit-transform: rotate(45deg);
27-
transform: rotate(45deg);
28-
-webkit-transform: rotate(45deg);
29-
width: 100px;
30-
display: block;
31-
background: $default;
32-
position: absolute;
33-
top: 19px;
34-
right: -21px;
35-
&::before {
36-
content: "";
37-
position: absolute;
38-
left: 0;
39-
top: 100%;
40-
z-index: -1;
41-
border-left: 3px solid $default;
42-
border-right: 3px solid transparent;
43-
border-bottom: 3px solid transparent;
44-
border-top: 3px solid $default;
45-
}
46-
&::after {
47-
content: "";
48-
position: absolute;
49-
right: 0;
50-
top: 100%;
51-
z-index: -1;
52-
border-left: 3px solid transparent;
53-
border-right: 3px solid $default;
54-
border-bottom: 3px solid transparent;
55-
border-top: 3px solid $default;
56-
}
57-
}
2+
// Creates a ribbon effect with the given options:
3+
@mixin ribbonize ($ribbon-color, $text-color: white, $border-width: 3px) {
4+
span {
5+
color: $text-color;
6+
background: $ribbon-color;
7+
&::before {
8+
border-left: $border-width solid $ribbon-color;
9+
border-top: $border-width solid $ribbon-color;
5810
}
59-
}
60-
61-
$cruzeiro: #387ef5;
62-
.ribbon.cruzeiro {
63-
span {
64-
background: $cruzeiro;
65-
&::before {
66-
border-left: 3px solid $cruzeiro;
67-
border-top: 3px solid $cruzeiro;
68-
}
69-
&::after {
70-
border-right: 3px solid $cruzeiro;
71-
border-top: 3px solid $cruzeiro;
72-
}
11+
&::after {
12+
border-right: $border-width solid $ribbon-color;
13+
border-top: $border-width solid $ribbon-color;
7314
}
7415
}
16+
}
7517

18+
$default: #f53d3d;
19+
$cruzeiro: #387ef5;
20+
$atletico: darken(#f4f4f4, 45%);
21+
$javascript: #f7e023;
7622

77-
$atletico: darken(#f4f4f4, 45%);
78-
.ribbon.atletico {
23+
.item-ribbon{
24+
background-color: #fff;
25+
position: relative;
26+
filter: none;
27+
opacity: 1;
28+
.ribbon {
29+
position: absolute;
30+
right: -5px;
31+
top: -5px;
32+
z-index: 2;
33+
overflow: hidden;
34+
width: 75px;
35+
height: 75px;
36+
text-align: right;
7937
span {
80-
background: $atletico;
38+
font-size: 1rem;
39+
font-weight: bold;
40+
color: #fff;
41+
text-transform: uppercase;
42+
text-align: center;
43+
line-height: 20px;
44+
transform: rotate(45deg);
45+
-webkit-transform: rotate(45deg);
46+
width: 100px;
47+
display: block;
48+
background: $default;
49+
position: absolute;
50+
top: 19px;
51+
right: -21px;
8152
&::before {
82-
border-left: 3px solid $atletico;
83-
border-top: 3px solid $atletico;
53+
content: "";
54+
position: absolute;
55+
left: 0;
56+
top: 100%;
57+
z-index: -1;
58+
border-left: 3px solid $default;
59+
border-right: 3px solid transparent;
60+
border-bottom: 3px solid transparent;
61+
border-top: 3px solid $default;
8462
}
8563
&::after {
86-
border-right: 3px solid $atletico;
87-
border-top: 3px solid $atletico;
64+
content: "";
65+
position: absolute;
66+
right: 0;
67+
top: 100%;
68+
z-index: -1;
69+
border-left: 3px solid transparent;
70+
border-right: 3px solid $default;
71+
border-bottom: 3px solid transparent;
72+
border-top: 3px solid $default;
8873
}
8974
}
9075
}
76+
}
9177

92-
$java-script: #f7e023;
93-
.ribbon.java-script {
94-
span {
95-
color: black;
96-
background: $java-script;
97-
&::before {
98-
border-left: 3px solid $java-script;
99-
border-top: 3px solid $java-script;
100-
}
101-
&::after {
102-
border-right: 3px solid $java-script;
103-
border-top: 3px solid $java-script;
104-
}
105-
}
106-
}
78+
.ribbon.cruzeiro {
79+
@include ribbonize($cruzeiro);
80+
}
81+
82+
.ribbon.atletico {
83+
@include ribbonize($atletico);
84+
}
10785

86+
.ribbon.javascript {
87+
@include ribbonize($javascript, black);
88+
}
89+
10890
}

0 commit comments

Comments
 (0)