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

Commit

Permalink
feat: basic table
Browse files Browse the repository at this point in the history
  • Loading branch information
@vis97c
vis97c committed May 23, 2021
1 parent 880067e commit ef36e12
Show file tree
Hide file tree
Showing 13 changed files with 150 additions and 61 deletions.
24 changes: 12 additions & 12 deletions src/base/_globals.scss
View file
Expand Up @@ -32,41 +32,41 @@

h1:not([class*="__txtSi"]):not([class*="swal"]) {
// Size
font-size: $fontSizeExtraLarge;
font-size: size(xl);
br {
display: none;
}
@media (min-width: $viewportMd + 1) {
font-size: $fontSizeExtraExtraLarge;
font-size: size(xx);
br {
display: inline;
}
}
}
h2:not([class*="__txtSi"]):not([class*="swal"]) {
// Size
font-size: $fontSizeLarge;
font-size: size(lg);
br {
display: none;
}
@media (min-width: $viewportMd + 1) {
font-size: $fontSizeExtraLarge;
font-size: size(xl);
br {
display: inline;
}
}
}
h3:not([class*="__txtSi"]):not([class*="swal"]) {
// Size
font-size: $fontSizeLarge;
font-size: size(lg);
}
h4:not([class*="__txtSi"]):not([class*="swal"]) {
// Size
font-size: $fontSizeMedium;
font-size: size(md);
}

code {
font-family: font(code);
font-family: family(code);
}

svg {
Expand Down Expand Up @@ -129,10 +129,10 @@ iframe {
color: color(light);
&:before {
content: "\f7a9";
font-family: font(awesome);
font-family: family(awesome);
font-weight: 900;
color: color(danger);
font-size: $fontSizeExtraExtraLarge;
font-size: size(xx);
width: 100%;
height: 100%;
position: absolute;
Expand Down Expand Up @@ -178,7 +178,7 @@ h3,
h4,
h5,
h6 {
// font-family: font(second);
// font-family: family(second);
--tw: normal;
}

Expand Down Expand Up @@ -210,10 +210,10 @@ strong,
.x-btnToggle {
&:not([class*="__txtWe"]) {
// Weight
font-weight: $fontWeightBold;
font-weight: weight(bold);
@supports (-moz-appearance: none) {
// firefox fix
font-weight: $fontWeightBoldAlt;
font-weight: weight(bold-alt);
}
}
}
Expand Down
24 changes: 15 additions & 9 deletions src/base/global-modifiers/_colors.scss
View file
@@ -1,20 +1,26 @@
// Striped
// Default striped
[class*="__str"] {
&:not(.x-table),
&.x-table tbody {
> :nth-child(odd) {
&:not(.x-table) {
> :nth-child(even) {
background-color: var(--cbg, color(secondary, 0.1));
}
}
// &.x-table thead > :nth-last-child(odd) {
// background-color: var(--cbg, color(secondary, 0.1));
// }
&.x-table tbody tr:nth-child(even) td:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--cbg, color(secondary, 0.1));
}
}
// Color
// Default color
[class*="__bgC"]:not([class*="or-no"]) {
background-color: var(--cbg, color(light));
}
// Color
// Default border color
[class*="__bdrC"] {
border-color: var(--cbc, color(secondary, 0.1));
}
Expand Down
10 changes: 5 additions & 5 deletions src/base/global-modifiers/_text.scss
View file
Expand Up @@ -75,20 +75,20 @@
.xm__txtWeight {
&-bold {
@include extend-viewports-classes {
font-weight: $fontWeightBold;
font-weight: weight(bold);
@supports (-moz-appearance: none) {
// firefox fix
font-weight: $fontWeightBoldAlt;
font-weight: weight(bold-alt);
}
}
}
&,
&-regular {
@include extend-viewports-classes {
font-weight: $fontWeightRegular;
font-weight: weight();
@supports (-moz-appearance: none) {
// firefox fix
font-weight: $fontWeightRegularAlt;
font-weight: weight(regular-alt);
}
}
}
Expand Down Expand Up @@ -189,7 +189,7 @@
.xm__txtSize,
.xm__txtSize-normal {
@include extend-viewports-classes {
font-size: $fontSize;
font-size: size();
}
}
@each $name, $size in $fontSizes {
Expand Down
4 changes: 2 additions & 2 deletions src/components/_inputCheckbox.scss
View file
Expand Up @@ -14,7 +14,7 @@ input[type^="c"].x-inCheckbox {
border-radius: 0.7rem;
border-width: 2px;
border-style: solid;
font-family: font(awesome);
font-family: family(awesome);
font-weight: 900;
text-align: center;
line-height: 1.7rem;
Expand All @@ -34,7 +34,7 @@ input[type^="c"].x-inCheckbox {
}
}
&:checked + label {
font-weight: $fontWeightBold;
font-weight: weight(bold);
&:after {
content: "\f00c";
// color: var(--cl, color(light));
Expand Down
4 changes: 2 additions & 2 deletions src/components/_inputRadio.scss
View file
Expand Up @@ -14,7 +14,7 @@ input[type^="r"].x-inRadio {
border-radius: 50%;
border-width: 2px;
border-style: solid;
font-family: font(awesome);
font-family: family(awesome);
font-weight: 900;
text-align: center;
line-height: 1.7rem;
Expand All @@ -34,7 +34,7 @@ input[type^="r"].x-inRadio {
}
}
&:checked + label {
font-weight: $fontWeightBold;
font-weight: weight(bold);
&:after {
content: "\f111";
// color: var(--cl, color(light));
Expand Down
2 changes: 1 addition & 1 deletion src/components/_navList.scss
View file
Expand Up @@ -20,7 +20,7 @@ nav.x-list {
&.is__active,
> input[type^="c"]:checked ~ {
.toggle__list {
font-weight: $fontWeightBold;
font-weight: weight(bold);
margin-bottom: 1rem;
i.x-icon,
.x-svg {
Expand Down
78 changes: 78 additions & 0 deletions src/components/_table.scss
View file
@@ -0,0 +1,78 @@
table.x-table {
table-layout: fixed;
border-collapse: collapse;
box-sizing: border-box;
border-spacing: 0;

&:not([class*="__txtA"]) {
// Align
tr {
th,
td {
&:not([class*="__txtA"]) {
text-align: var(--ta, left);
}
}
}
}
&:not([class*="__txtC"]) {
// Color
tr {
th:not([class*="__txtC"]) {
color: var(--ccl, color(secondary));
}
td:not([class*="__txtC"]) {
color: var(--ccl, color(dark, 0.7));
}
}
}

thead {
tr {
&:not(:first-child) {
border-top: 2px solid transparent;
&:after {
content: "";
width: calc(100% + 1rem);
display: block;
height: 2px;
position: absolute;
left: 0;
margin-top: -2px;
margin-left: -0.5rem;
margin-right: -0.5rem;
opacity: 0.2;
background-repeat: round;
background-position: 50% 50%;
flex: 0 0 auto;
background-image: var(--rbg, url("#{$rulerPatternX}"));
}
}
}
}
tbody {
box-shadow: 3px 3px 9px color(dark, 0.1);
tr {
&:not(:first-child) {
border-top: 2px solid color(secondary, 0.1);
}
td {
background: color(light);
}
th {
background: color(secondary, 0.1);
}
}
}
thead,
tbody {
width: 100%;
box-sizing: border-box;
}
tr {
td,
th {
padding: 0.7rem 1rem;
}
}
}
1 change: 1 addition & 0 deletions src/components/module.scss
View file
Expand Up @@ -478,6 +478,7 @@ select.x-inSelect {
@import "inputRadio";
@import "inputSelect";
@import "navList";
@import "table";

// non tag associated
@import "text";
Expand Down
8 changes: 4 additions & 4 deletions src/index.scss
View file
Expand Up @@ -41,20 +41,20 @@
overflow-y: auto;
overflow-x: hidden;
font-size: 100%;
font-weight: $fontWeightRegular;
font-weight: weight();
text-rendering: optimizeLegibility;
@supports (-moz-appearance: none) {
// firefox fix, font weight bug
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: $fontWeightRegularAlt;
font-weight: weight(regular-alt);
}
}

body {
width: 100%;
font-family: font(primary);
font-size: $fontSize;
font-family: family(primary);
font-size: size();
overflow: hidden;
@media (max-width: $viewportMd) and (hover: none) {
@supports (-moz-appearance: none) {
Expand Down
2 changes: 1 addition & 1 deletion src/pseudos/_tooltip.scss
View file
Expand Up @@ -18,7 +18,7 @@
font-size: 0.7rem;
opacity: 0;
border-radius: 0.5rem;
font-weight: $fontWeightRegular;
font-weight: weight();
box-shadow: 3px 3px 9px color(dark, 0.3);
box-sizing: content-box;
border: 2px solid color(light, 0.1);
Expand Down
13 changes: 12 additions & 1 deletion src/utils/_funciones.scss
View file
Expand Up @@ -6,10 +6,21 @@
}

//retorna la fuente del mapa de fuentes
@function font($font-name) {
@function family($font-name: primary) {
$index: index(($fonts), ($font-name map-get($fonts, $font-name)));
@return var(--f-#{$index}, #{map-get($fonts, $font-name)});
}

//returns the size from the map of sizes
@function size($font-size: nm) {
@return map-get($fontSizes, $font-size);
}

//returns the weight from the map of weights
@function weight($font-weight: regular) {
@return map-get($fontWeights, $font-weight);
}

//retorna el color del mapa de colores
@function color($color-name, $rgb: false) {
$index: index(($colors), ($color-name map-get($colors, $color-name)));
Expand Down
39 changes: 16 additions & 23 deletions src/utils/_variables.scss
View file
Expand Up @@ -52,32 +52,25 @@ $viewports: (
xl: $viewportXl,
);

// font size
$fontSizeExtraSmall: 0.7rem;
$fontSizeSmall: 0.9rem;
$fontSize: 1rem;
$fontSizeMedium: 1.2rem;
$fontSizeLarge: 1.8rem;
$fontSizeExtraLarge: 2.8rem;
$fontSizeExtraExtraLarge: 3.8rem;
$fontSizeMaximum: 4.8rem;

// font sizes
$fontSizes: (
xs: $fontSizeExtraSmall,
sm: $fontSizeSmall,
md: $fontSizeMedium,
lg: $fontSizeLarge,
xl: $fontSizeExtraLarge,
xxl: $fontSizeExtraExtraLarge,
max: $fontSizeMaximum,
xs: 0.7rem,
sm: 0.9rem,
nm: 1rem,
md: 1.2rem,
lg: 1.8rem,
xl: 2.8rem,
xx: 3.8rem,
mx: 4.8rem,
);

// font weight
$fontWeightRegular: 400;
$fontWeightBold: 600;
// firefox fix: font weight
$fontWeightRegularAlt: 300;
$fontWeightBoldAlt: 500;
// font weights
$fontWeights: (
regular: 400,
bold: 600,
regular-alt: 300,
bold-alt: 500,
);

// line height
$lineHeight: 1.2em;
Expand Down

0 comments on commit ef36e12

Please sign in to comment.