mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-01-17 21:08:13 +01:00
Code Issues Releases Wiki Activity

Updated styling of close icon

Browse Source 
The .close icon now uses a Unicode character instead of the previous styling, saving precious space and making its code less complex.
This commit is contained in:
Angelos Chalaris 2017-05-10 22:55:45 +03:00
parent 6104029454
commit 393172e16f
17 changed files with 64 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
dist/mini-dark.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.
@ -1988,12 +1988,12 @@ ul.breadcrumbs li:last-child:after {
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
font-size: 2rem;
text-overflow: clip;
width: 1.5rem;
font-family: sans-serif;
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(57, 68, 74, 0);
vertical-align: top;
cursor: pointer;
@ -2004,26 +2004,10 @@ ul.breadcrumbs li:last-child:after {
background: #39444a;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #fafafa;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
content: "\00D7";
display: block;
text-align: center;
}
/*

2
dist/mini-dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

36
dist/mini-default.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.
@ -1989,12 +1989,12 @@ ul.breadcrumbs li:last-child:after {
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
font-size: 2rem;
text-overflow: clip;
width: 1.5rem;
font-family: sans-serif;
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(224, 224, 224, 0);
vertical-align: top;
cursor: pointer;
@ -2005,26 +2005,10 @@ ul.breadcrumbs li:last-child:after {
background: #e0e0e0;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #212121;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
content: "\00D7";
display: block;
text-align: center;
}
/*

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mini-lite.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.

34
dist/mini-nord.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
/*
Browsers resets and base typography.
@ -2031,12 +2031,12 @@ ul.breadcrumbs li:last-child:after {
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
width: 32px;
font-family: sans-serif;
font-size: 32px;
text-overflow: clip;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(236, 239, 244, 0);
vertical-align: top;
cursor: pointer;
@ -2047,26 +2047,10 @@ ul.breadcrumbs li:last-child:after {
background: #eceff4;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #2E3440;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
content: "\00D7";
display: block;
text-align: center;
}
/*

2
dist/mini-nord.min.css vendored
View File

File diff suppressed because one or more lines are too long

34
dist/mini-sucroa.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
/*
@ -1903,12 +1903,12 @@ ul.breadcrumbs li:last-child:after {
.close {
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
width: 32px;
font-family: sans-serif;
font-size: 32px;
text-overflow: clip;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba(232, 222, 255, 0);
vertical-align: top;
cursor: pointer;
@ -1919,26 +1919,10 @@ ul.breadcrumbs li:last-child:after {
background: #e8deff;
}
.close:before, .close:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: #211423;
}
.close:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.close:after {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
content: "\00D7";
display: block;
text-align: center;
}
/*

2
dist/mini-sucroa.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
docs/v2/DEVLOG.md
View File

@ -1109,3 +1109,8 @@
- Removed old classes produced using the generic shadow mixin in `utility`, replaced with `.shadowed` to let developers still have some generic shadow class. Updated docs as needed, codepens will be updated right before release.
- Updated the definitions of the responsive visibility helpers to utilize `!important` properly. Size is now `6.34KB` which seems pretty good, based on the fact that some of the existing components that are being removed were unused by most devs to begin with.
- Removed the `.nano` progress bar, as it served no real purpose. **Hugging cat** misses it already, but it had to go, don't judge. Size should be smaller but the tool I use (Refresh-SF) has crashed and I can't really check the gzipped size right now.
## 20170510
- Tonight's the night: Lots of updates and changes will be taking place (hopefully), as the next release needs to be fast-forwarded for a lot of reasons. Let the building begin.
- Updated the `.close` icon with the new styling, making it less complicated, using a Unicode character instead of custom pseudo-elements, size is now `6.24KB`.

4
src/flavors/mini-dark.scss
View File

@ -5,7 +5,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Basic rules for body and typography
$fore-color: #d0d0d0; // Text and general foreground color
@ -476,7 +476,7 @@ $breadcrumbs-border-style: 0; // Border style for breadcrumbs
$breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
$close-icon-name: 'close'; // Class name for close icon
$close-icon-size: 2rem; // Size of the close icon
$close-icon-size: 1.5rem; // Size of the close icon
$close-icon-back-color: #39444a; // Background color for the close icon
$close-icon-fore-color: #fafafa; // Foreground color for the close icon
$border-generic-name: 'bordered'; // Class name for generic border style

4
src/flavors/mini-default.scss
View File

@ -5,7 +5,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
@ -476,7 +476,7 @@ $breadcrumbs-border-style: 0; // Border style for breadcrumbs
$breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
$close-icon-name: 'close'; // Class name for close icon
$close-icon-size: 2rem; // Size of the close icon
$close-icon-size: 1.5rem; // Size of the close icon
$close-icon-back-color: #e0e0e0; // Background color for the close icon
$close-icon-fore-color: #212121; // Foreground color for the close icon
$border-generic-name: 'bordered'; // Class name for generic border style

2
src/flavors/mini-lite.scss
View File

@ -7,7 +7,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color

2
src/flavors/mini-nord.scss
View File

@ -5,7 +5,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
// Basic rules for body and typography

2
src/flavors/mini-sucroa.scss
View File

@ -5,7 +5,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.5 (Fermion)
mini.css version: v2.2.0
*/
// Google Fonts imports and usage
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');

30
src/mini/_utility.scss
View File

@ -109,12 +109,12 @@ $style-link-active-state: false !default; // [External flag - core] Should
// Close icon
.#{$close-icon-name}{
display: inline-block;
width: 0.75em;
height: 0.75em;
position: relative;
border-radius: 1em;
width: $close-icon-size;
font-family: sans-serif;
font-size: $close-icon-size;
text-overflow: clip;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba($close-icon-back-color,0);
vertical-align: top;
cursor: pointer;
@ -129,24 +129,10 @@ $style-link-active-state: false !default; // [External flag - core] Should
background: rgba($close-icon-back-color,1);
}
}
&:before, &:after {
display: inline-block;
width: 0.45em;
height: 0.1em;
position: absolute;
content: "";
top: 0.33em;
left: 0.155em;
text-overflow: clip;
background: $close-icon-fore-color;
}
&:before {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
&:after {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
content: "\00D7";
display: block;
text-align: center;
}
}
}