Skip to content
This repository has been archived by the owner on Jul 25, 2023. It is now read-only.

Commit

Permalink
fix: media queries order
Browse files Browse the repository at this point in the history
  • Loading branch information
@vis97c
vis97c committed May 22, 2021
1 parent ba8afc4 commit 880067e
Show file tree
Hide file tree
Showing 11 changed files with 570 additions and 534 deletions.
8 changes: 6 additions & 2 deletions package.json
View file
Expand Up @@ -53,14 +53,18 @@
"cssnano-preset-advanced": "^4.0.7",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"postcss-cli": "^7.1.1",
"node-css-mqpacker": "^8.0.1",
"postcss": "^8.2.10",
"postcss-cli": "^8.3.1",
"postcss-combine-media-query": "^1.0.1",
"postcss-custom-properties": "^9.1.1",
"postcss-merge-selectors": "vis97c/postcss-merge-selectors",
"postcss-precision": "https://github.com/TedMeftah/postcss-precision#1.0.0",
"postcss-sort-media-queries": "^3.8.9",
"prettier": "^2.0.5",
"sass": "^1.26.10",
"sass": "1.32.10",
"semantic-release": "^17.1.1",
"sort-css-media-queries": "vis97c/sort-css-media-queries",
"stylelint": "^13.6.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-prettier": "^1.1.2"
Expand Down
5 changes: 4 additions & 1 deletion postcss.config.js
View file
Expand Up @@ -12,17 +12,20 @@ const nano = {
],
};

const sortCSSmq = require("sort-css-media-queries");

module.exports = {
// Add plugin names as key and arguments as value
// Install them before as dependencies with npm or yarn
map: false,
plugins: [
// Optimizations
require("postcss-combine-media-query")({}),
require("node-css-mqpacker")({ sort: false }),
require("cssnano")(nano),
require("postcss-merge-selectors")({}),
require("postcss-precision")({}),
// optimize again
require("node-css-mqpacker")({ sort: sortCSSmq.desktopFirst }),
require("cssnano")(nano),
// More weight by polyfilling
require("autoprefixer")({}),
Expand Down
75 changes: 2 additions & 73 deletions src/base/_globals.scss
View file
Expand Up @@ -7,27 +7,6 @@
color: color(light);
}

// ::placeholder{
// color: color(secondary);
// }

// &::-webkit-scrollbar{
// width: 13px;
// background-color: color(dark);
// }
// &::-webkit-scrollbar-track{
// -webkit-box-shadow: none;
// }
// &::-webkit-scrollbar-thumb{
// background-color: color(secondary);
// border-style: solid;
// border-width: 0 3px;
// border-color:color(dark);
// &:hover{
// background-color: color(primary);
// }
// }

* {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -205,7 +184,7 @@ h6 {

// global font weight
// breaking it because it is too long
:not(a):not(b):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(button):not(strong) {
:not(a):not(b):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(th):not(button):not(strong) {
// xamu
&:not(label[class|="x"]):not([class*="__txtWe"]) {
// external brands
Expand All @@ -224,6 +203,7 @@ h3,
h4,
h5,
h6,
th,
button,
strong,
.x-btn,
Expand All @@ -238,57 +218,6 @@ strong,
}
}

// gaping fix
// flx & flxInline
//
// @group SharedStyles
[class*="-flx"] {
&:last-child:not([class*="x-item"]) {
&[class*="__flxR"] {
// row fix
> :not(.unfix__gaping) {
&[class*="__flx"][class*="-wrap"],
&[class*="__flx"][class*="-reverse"],
&[class*="__gapi"]:not([class*="ngX"]):not([class*="ngY"]):not([class*="__gaping-no"]) {
&:first-child:only-of-type,
&:last-child {
// margin-bottom: 0;
margin-right: calc(-1 * (var(--g) - var(--gx)));
margin-bottom: calc(-1 * (var(--g) - var(--gx)));
}
}
}
}
&[class*="__flxC"] {
// column fix
> :not(.unfix__gaping) {
&[class*="__flx"][class*="-wrap"],
&[class*="__flx"][class*="-reverse"],
&[class*="__gapi"]:not([class*="ngX"]):not([class*="ngY"]):not([class*="__gaping-no"]) {
&:first-child:only-of-type,
&:last-child {
// margin-bottom: 0;
margin-right: calc(-1 * (var(--g) - var(--gy)));
margin-bottom: calc(-1 * (var(--g) - var(--gy)));
}
}
}
}
}
// column & row fix
&[class*="__flxR"],
&[class*="__flxC"] {
// Row, Column
&:last-child:not([class*="x-item"]) > :last-child:not(.unfix__gaping) {
&[class*="__flx"][class*="-wrap"],
&[class*="__flx"][class*="-reverse"],
&[class*="__gapi"]:not([class*="ngX"]):not([class*="ngY"]):not([class*="__gaping-no"]) {
margin: 0;
}
}
}
}

// basic transition
//
// @group SharedStyles
Expand Down
46 changes: 13 additions & 33 deletions src/base/global-modifiers/_colors.scss
View file
@@ -1,40 +1,22 @@
// Striped child color
.xm__striped {
@include extend-viewports-classes {
// Striped
[class*="__str"] {
&:not(.x-table),
&.x-table tbody {
> :nth-child(odd) {
--cbg: #{color(secondary, 0.1)};
background-color: var(--cbg, color(secondary, 0.1));
}
}
// &.x-table thead > :nth-last-child(odd) {
// background-color: var(--cbg, color(secondary, 0.1));
// }
}

// Background color
.xm__bgColor {
@include extend-viewports-classes {
--cbg: #{color(light)};
}
}

// Border color
.xm__bdrColor {
@include extend-viewports-classes {
--cbc: #{color(secondary, 0.1)};
}
}

// defaults
[class*="__st"] {
// Striped
> :nth-child(odd) {
background-color: var(--cbg);
}
}
// Color
[class*="__bgC"]:not([class*="or-no"]) {
// Color
background-color: var(--cbg);
background-color: var(--cbg, color(light));
}
// Color
[class*="__bdrC"] {
// Color
border-color: var(--cbc);
border-color: var(--cbc, color(secondary, 0.1));
}

// text color & text shadow & background color & borderColor
Expand All @@ -45,9 +27,7 @@
// striped childs
.xm__striped-#{$name} {
@include extend-viewports-classes {
> :nth-child(odd) {
--cbg: #{color($name, 0.1)};
}
--cbg: #{color($name, 0.1)};
}
}

Expand Down
26 changes: 4 additions & 22 deletions src/base/global-modifiers/_text.scss
View file
Expand Up @@ -200,39 +200,21 @@
}
}

// default color
.xm__txtColor {
@include extend-viewports-classes {
&,
> :not([class*="__txtC"]):not([class|="x"]) {
// Color
--ccl: #{color(dark, 0.7)};
}
}
}
// Text color
[class*="__txtC"] {
&,
> :not([class*="__txtC"]):not([class|="x"]) {
// Color
color: var(--ccl);
color: var(--ccl, color(dark, 0.7));
}
}

// default text color
.xm__txtShadow {
@include extend-viewports-classes {
&,
> :not([class*="__txtSh"]):not([class|="x"]) {
// Shadow
--csh: #{color(dark, 0.3)};
}
}
}
// Shadow color
[class*="__txtSh"] {
&,
> :not([class*="__txtSh"]):not([class|="x"]) {
// Shadow
text-shadow: 1px 1px 1px var(--csh);
text-shadow: 1px 1px 1px var(--csh, color(dark, 0.3));
}
}

Expand Down
9 changes: 3 additions & 6 deletions src/components/_hr.scss
View file
@@ -1,6 +1,3 @@
// TODO: swicht to svg to create different themes
$hrPatternX: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFklEQVQYV2Pkd1//nwENfNwZyIguBgByogQC7WHnJwAAAABJRU5ErkJggg==";
$hrPatternY: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAE0lEQVQYV2Pgd1//nwEbwYADAAByIwoV0EDsZAAAAABJRU5ErkJggg==";
// Delimiter
//
// @group Components
Expand All @@ -18,7 +15,7 @@ hr {
// default theme
&:not([class*="__tm"]),
&.m__tm-secondary {
background-image: url($hrPatternX);
background-image: url("#{$rulerPatternX}");
}
}
}
Expand All @@ -35,7 +32,7 @@ hr {
// default theme
&:not([class*="__tm"]),
&.m__tm-secondary {
background-image: url($hrPatternY);
background-image: url("#{$rulerPatternY}");
}
}
}
Expand All @@ -62,7 +59,7 @@ hr {
background-repeat: round;
background-position: 50% 50%;
flex: 0 0 auto;
background-image: url($hrPatternX);
background-image: url("#{$rulerPatternX}");
&:last-child:not(:nth-child(2)) {
display: none;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/_text.scss
View file
Expand Up @@ -4,7 +4,7 @@
.x-txt {
--tw: normal;
text-align: var(--ta, initial);
color: var(--ccl, #{color(dark, 0.7)});
color: var(--ccl, color(dark, 0.7));
&:not([class*="-flx"]):not([class*="x-grd"]):not([class*="__txtAlignF"]) {
// Flx
display: block;
Expand Down
3 changes: 2 additions & 1 deletion src/index.scss
View file
Expand Up @@ -6,8 +6,9 @@
module concatenation
*/

@import "utils/module";

@media only screen {
@import "utils/module";
// @import "vendor/module"; // the vendors are independent in this built

:root {
Expand Down
46 changes: 46 additions & 0 deletions src/layouts/_flex.scss
View file
Expand Up @@ -195,4 +195,50 @@
}
}
}

// gaping fix
&:last-child:not([class*="x-item"]) {
&[class*="__flxR"] {
// row fix
> :not(.unfix__gaping) {
&[class*="__flx"][class*="-wrap"],
&[class*="__flx"][class*="-reverse"],
&[class*="__gapi"]:not([class*="ngX"]):not([class*="ngY"]):not([class*="__gaping-no"]) {
&:first-child:only-of-type,
&:last-child {
// margin-bottom: 0;
margin-right: calc(-1 * (var(--g) - var(--gx)));
margin-bottom: calc(-1 * (var(--g) - var(--gx)));
}
}
}
}
&[class*="__flxC"] {
// column fix
> :not(.unfix__gaping) {
&[class*="__flx"][class*="-wrap"],
&[class*="__flx"][class*="-reverse"],
&[class*="__gapi"]:not([class*="ngX"]):not([class*="ngY"]):not([class*="__gaping-no"]) {
&:first-child:only-of-type,
&:last-child {
// margin-bottom: 0;
margin-right: calc(-1 * (var(--g) - var(--gy)));
margin-bottom: calc(-1 * (var(--g) - var(--gy)));
}
}
}
}
}
// column & row fix
&[class*="__flxR"],
&[class*="__flxC"] {
// Row, Column
&:last-child:not([class*="x-item"]) > :last-child:not(.unfix__gaping) {
&[class*="__flx"][class*="-wrap"],
&[class*="__flx"][class*="-reverse"],
&[class*="__gapi"]:not([class*="ngX"]):not([class*="ngY"]):not([class*="__gaping-no"]) {
margin: 0;
}
}
}
}
4 changes: 4 additions & 0 deletions src/utils/_variables.scss
View file
Expand Up @@ -89,3 +89,7 @@ $minColumnSize: 18rem; // 280px aprox

// max text block width
$maxTextWidth: 66ch; // 780px aprox

// TODO: swicht to svg to create different themes
$rulerPatternX: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFklEQVQYV2Pkd1//nwENfNwZyIguBgByogQC7WHnJwAAAABJRU5ErkJggg==";
$rulerPatternY: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAE0lEQVQYV2Pgd1//nwEbwYADAAByIwoV0EDsZAAAAABJRU5ErkJggg==";

0 comments on commit 880067e

Please sign in to comment.