#258 Fix var / add max with / beautify sass

This commit is contained in:
Miguel D 2020-12-09 23:07:13 -05:00
parent 7e13e40b74
commit 09d95012d9
5 changed files with 76 additions and 222 deletions

View File

@ -1,41 +1,50 @@
{
"editorconfig" : true,
"indent_size" : 2,
"editorconfig": true,
"indent_char": " ",
"force_indentation": true,
"preserve_newlines": false,
"indent_with_tabs": false,
"keep_array_indentation": false,
"break_chained_methods": false,
"indent_scripts": "keep",
"brace_style": "collapse",
"space_before_conditional": true,
"unescape_strings": false,
"jslint_happy": false,
"end_with_newline": true,
"wrap_line_length": "0",
"indent_inner_html": true,
"comma_first": false,
"e4x": true,
"indent_empty_lines": false,
"beautifiers": [
"JS-Beautify",
"Prettier",
"Pretty Diff",
"ESLint"
],
"html": {
"indent_size" : 4,
"indent_char" : " ",
"end_with_newline" : true,
"wrap_attributes" : "force-aligned",
"brace_style" : "end-expand",
"unformatted" : ["abbr", "area", "audio", "b", "bdi", "bdo", "br","canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym", "address", "big", "dt", "ins", "strike", "tt", "link", "meta", "option", "script"],
"beautifiers" : [
"JS-Beautify"
],
"js": {
"indent_size": 2
},
"css": {
"indent_size": 2
}
"allowed_file_extensions": ["htm", "html", "xhtml", "xml"],
"indent_size": 4,
"wrap_attributes": "auto",
"unformatted": ["img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "svg"]
},
"css": {
"beautifiers" : [
"Prettier",
"Pretty Diff",
"JS-Beautify"
],
"align_assignments" : true,
"indent_size" : 2,
"end_with_comma" : true,
"end_with_newline" : true
"allowed_file_extensions": ["css", "scss", "sass", "less"],
"indent_size": 2,
"align_assignments": true,
"end_with_comma": true
},
"JavaScript": {
"indent_size" : 2,
"indent_char" : " ",
"align_assignments" : true,
"preserve-newlines" : true,
"beautifiers" : [
"Pretty Diff"
]
"js": {
"allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
"indent_size": 2,
"indent_level": 0,
"quotes": "single",
"align_assignments": true,
"space_after_anon_function": true,
"space_in_empty_paren": true,
"end_with_comma": true,
"end_with_semicolon": true
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -195,7 +195,7 @@
<p :style="'color: ' + data.brightPurple">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 14 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.blabrightCyanck">
<p :style="'color: ' + data.brightCyan">
&block;&block;&block; <span>*** AaBbMmYyZz . Color 15 ---</span> &block;&block;&block;
</p>
<p :style="'color: ' + data.brightWhite">

View File

@ -1,58 +1,16 @@
@mixin m360 {
@media (min-width: 359px) {
@content;
}
}
@mixin m450 {
@media (min-width: 449px) {
@content;
}
}
@mixin m576 {
@media (min-width: 575px) {
@content;
}
}
@mixin m600 {
@media (min-width: 599px) {
@content;
}
}
@mixin m768 {
@media (min-width: 767px) {
@content;
}
}
@mixin m900 {
@media (min-width: 889px) {
@content;
}
}
@mixin m992 {
@media (min-width: 991px) {
@content;
}
}
@mixin m1200 {
@media (min-width: 1199px) {
@content;
}
}
@mixin m1400 {
@media (min-width: 1399px) {
@content;
}
}
@mixin m1800 {
@media (min-width: 1799px) {
@content;
}
}
@mixin m2200 {
@media (min-width: 2199px) {
@content;
}
}
@mixin m360 { @media (min-width: 360px) { @content; } }
@mixin m450 { @media (min-width: 450px) { @content; } }
@mixin m576 { @media (min-width: 576px) { @content; } }
@mixin m600 { @media (min-width: 600px) { @content; } }
@mixin m650 { @media (min-width: 650px) { @content; } }
@mixin m768 { @media (min-width: 768px) { @content; } }
@mixin m800 { @media (min-width: 800px) { @content; } }
@mixin m900 { @media (min-width: 900px) { @content; } }
@mixin m992 { @media (min-width: 992px) { @content; } }
@mixin m1200 { @media (min-width: 1200px) { @content; } }
@mixin m1400 { @media (min-width: 1400px) { @content; } }
@mixin m1800 { @media (min-width: 1800px) { @content; } }
@mixin m2200 { @media (min-width: 2200px) { @content; } }
a,
abbr,
@ -137,11 +95,8 @@ var,
video {
margin : 0;
padding : 0;
vertical-align: baseline;
border : 0;
font : inherit;
}
@ -162,7 +117,6 @@ section {
body {
background-color: #e7e7e7;
font-family : "Open Sans", sans-serif;
font-size : 1.6rem;
line-height : 1;
@ -198,13 +152,11 @@ q {
.cd-tab-filter-wrapper:after {
display: table;
clear : both;
content: "";
}
table {
border-spacing : 0;
border-collapse: collapse;
}
@ -226,18 +178,15 @@ html {
a {
text-decoration: none;
color : #41307c;
}
.cd-header {
position: relative;
height : 150px;
h1 {
color : #fff;
font-size : 2.4rem;
font-weight: 300;
}
@ -254,15 +203,27 @@ a {
.cd-main-content {
position : relative;
min-height: 100vh;
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {
max-width: 72%;
margin: 0 auto;
}
@include m1800 {}
@include m2200 {}
&.is-fixed {
.cd-tab-filter-wrapper {
position: fixed;
top : 0;
left : 0;
width : 100%;
}
@ -272,15 +233,12 @@ a {
.cd-filter {
position: fixed;
overflow: hidden;
height : 100vh;
form {
overflow : auto;
-webkit-overflow-scrolling: touch;
height : 100vh;
}
}
@ -303,7 +261,6 @@ a {
.cd-tab-filter-wrapper {
z-index : 1;
background-color : #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
box-shadow : 0 1px 1px rgba(0, 0, 0, 0.08);
@ -312,7 +269,6 @@ a {
.cd-tab-filter {
position: relative;
z-index : 1;
width : 140px;
height : 50px;
margin : 0 auto;
@ -322,19 +278,15 @@ a {
top : 50%;
right : 14px;
bottom : auto;
display : inline-block;
width : 1pc;
height : 1pc;
content : "";
-webkit-transition: all 0.3s;
transition : all 0.3s;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
pointer-events : none;
background : url("../img/cd-icon-arrow.svg") center center no-repeat;
}
@ -342,7 +294,6 @@ a {
position : absolute;
top : 0;
left : 0;
background-color : #fff;
-webkit-box-shadow: inset 0 -2px 0 #41307c;
box-shadow : inset 0 -2px 0 #41307c;
@ -358,11 +309,9 @@ a {
a {
display : block;
width : 140px;
height : 50px;
padding-left: 14px;
line-height : 50px;
&.selected {
@ -394,7 +343,6 @@ a {
@media only screen and (min-width: 768px) {
.cd-tab-filter {
width : auto;
cursor: auto;
&::after {
@ -403,9 +351,7 @@ a {
ul {
position : static;
text-align : center;
background : 0 0;
-webkit-box-shadow: none;
box-shadow : none;
@ -427,11 +373,8 @@ a {
a {
width : auto;
padding : 0 1em;
text-transform: uppercase;
color : #9a9a9a;
font-size : 1.3rem;
font-weight : 700;
}
@ -465,10 +408,8 @@ a {
@media only screen and (min-width: 1170px) {
.cd-tab-filter {
float : right;
width : 100%;
margin : 0;
-webkit-transition: width 0.3s;
transition : width 0.3s;
@ -484,31 +425,25 @@ a {
li {
display : inline-block;
margin-right : 2em;
margin-bottom : 1.6em;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.1);
&.gap {
display: inline-block;
height : 0;
opacity: 0;
}
}
img {
display: block;
width : 100%;
}
.cd-fail-message {
display : none;
text-align: center;
}
}
@ -522,7 +457,6 @@ a {
&:after {
display: table;
clear : both;
content: "";
}
}
@ -536,9 +470,7 @@ a {
@media only screen and (min-width: 1170px) {
.cd-gallery {
float : right;
padding : 50px 2%;
-webkit-transition: width 0.3s;
transition : width 0.3s;
@ -555,7 +487,6 @@ a {
.cd-filter {
width : 280px;
height : 100%;
-webkit-transition : -webkit-transform 0.3s, box-shadow 0.3s;
-webkit-transition : -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
transition : -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
@ -565,18 +496,15 @@ a {
-webkit-transform : translateX(-100%);
transform : translateZ(0);
transform : translateX(-100%);
background : #fff;
-webkit-box-shadow : 4px 4px 20px transparent;
box-shadow : 4px 4px 20px transparent;
-webkit-backface-visibility: hidden;
backface-visibility : hidden;
&::before {
width : 100%;
height : 50px;
content: "";
}
@ -584,9 +512,7 @@ a {
position : absolute;
z-index : 3;
top : 0;
height : 50px;
line-height: 50px;
}
}
@ -595,9 +521,7 @@ a {
position : absolute;
z-index : 3;
top : 0;
height : 50px;
line-height: 50px;
}
@ -608,16 +532,12 @@ a {
.cd-close {
right : 0;
width : 60px;
-webkit-transition: opacity 0.3s;
transition : opacity 0.3s;
text-align : center;
opacity : 0;
color : #fff;
font-size : 1.3rem;
}
}
@ -629,7 +549,6 @@ a {
.cd-filter.filter-is-visible {
-webkit-transform : translateX(0);
transform : translateX(0);
-webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
box-shadow : 4px 4px 20px rgba(0, 0, 0, 0.2);
@ -649,14 +568,10 @@ a {
.cd-filter-trigger {
left : 0;
overflow : hidden;
width : 60px;
white-space: nowrap;
text-indent: 100%;
color : transparent;
background : url("../img/cd-icon-filter.svg") center center no-repeat;
}
@ -665,7 +580,6 @@ a {
.cd-select::after,
h4::before {
top : 50%;
content : "";
-webkit-transform: translateY(-50%);
-ms-transform : translateY(-50%);
@ -678,18 +592,14 @@ a {
@media only screen and (min-width: 1170px) {
.cd-filter-trigger {
left : 2%;
width : auto;
padding-left : 24px;
-webkit-transition : color 0.3s;
transition : color 0.3s;
text-indent : 0;
text-transform : uppercase;
color : #9a9a9a;
background-position: left center;
font-size : 1.3rem;
font-weight : 700;
}
@ -712,19 +622,15 @@ a {
h4 {
position : relative;
margin-bottom : 0.2em;
padding : 10px 0 10px 20px;
cursor : pointer;
-webkit-user-select: none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
text-transform : uppercase;
color : #9a9a9a;
font-size : 1.3rem;
font-weight : 700;
}
@ -739,17 +645,14 @@ a {
&::before {
position : absolute;
left : 0;
width : 1pc;
height : 1pc;
-webkit-transition: -webkit-transform 0.3s;
transition : -webkit-transform 0.3s;
transition : transform 0.3s;
transition : transform 0.3s, -webkit-transform 0.3s;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
background : url("../img/cd-icon-arrow.svg") center center no-repeat;
}
@ -766,7 +669,6 @@ a {
border : 2px solid #e6e6e6;
border-radius : 0;
background-color: #fff;
font-family : "Open Sans", sans-serif;
}
@ -775,10 +677,8 @@ a {
&[type=text] {
width : 100%;
padding : 0.8em;
-webkit-box-shadow: none;
box-shadow : none;
-webkit-appearance: none;
-moz-appearance : none;
-ms-appearance : none;
@ -790,10 +690,8 @@ a {
select {
width : 100%;
padding : 0.8em;
-webkit-box-shadow: none;
box-shadow : none;
-webkit-appearance: none;
-moz-appearance : none;
-ms-appearance : none;
@ -819,7 +717,6 @@ a {
input[type=search] {
border-color : transparent;
background-color: #e6e6e6;
font-size : 1.6rem !important;
&::-webkit-search-cancel-button {
@ -834,23 +731,18 @@ a {
position : absolute;
z-index : 1;
right : 14px;
display : block;
width : 1pc;
height : 1pc;
-webkit-transform: translateY(-50%);
transform : translateY(-50%);
pointer-events : none;
background : url("../img/cd-icon-arrow.svg") center center no-repeat;
}
}
select {
cursor : pointer;
font-size: 1.4rem;
&::-ms-expand {
@ -860,7 +752,6 @@ a {
.list li {
position : relative;
margin-bottom: 0.8em;
&:last-of-type {
@ -875,10 +766,8 @@ a {
z-index : 2;
top : 0;
left : 0;
margin : 0;
padding : 0;
opacity : 0;
}
}
@ -886,12 +775,10 @@ a {
.checkbox-label,
.radio-label {
padding-left : 24px;
-webkit-user-select: none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
font-size : 1.4rem;
}
@ -900,9 +787,7 @@ a {
&::before {
position : absolute;
top : 50%;
display : block;
content : "";
-webkit-transform: translateY(-50%);
transform : translateY(-50%);
@ -914,9 +799,7 @@ a {
&::before {
position : absolute;
top : 50%;
display : block;
content : "";
-webkit-transform: translateY(-50%);
transform : translateY(-50%);
@ -926,7 +809,6 @@ a {
.checkbox-label::before,
.radio-label::before {
left : 0;
width : 1pc;
height: 1pc;
}
@ -939,7 +821,6 @@ a {
.checkbox-label::after {
width : 1pc;
height : 1pc;
background: url("../img/cd-icon-check.svg") center center no-repeat;
}
@ -951,10 +832,8 @@ a {
&::after {
left : 5px;
width : 6px;
height : 6px;
background-color: #fff;
}
}
@ -1015,40 +894,32 @@ body {
h2 {
margin-bottom: 30px;
color : #595647;
font-size : 26px;
}
h3 {
margin : 30px 0 20px;
color : #595647;
font-size: 22px;
}
code[class*=language-],
pre[class*=language-] {
margin : 0;
font-size: 14px;
}
}
.cd-header h1 {
text-align : center;
line-height: 30px;
span {
display : block;
overflow : hidden;
white-space: nowrap;
text-indent: 100%;
color : #fff;
}
}
@ -1069,7 +940,6 @@ body {
.cd-header {
text-align : center;
background-color: #fff;
}
@media only screen and (min-width: 768px) {
@ -1094,7 +964,6 @@ body {
*/
.code-wrap {
position : relative;
margin-top: 15px;
pre {
@ -1105,13 +974,9 @@ body {
position : absolute;
top : 25px;
right : 3px;
display : inline-block;
padding : 3px 5px 2px 7px;
cursor : pointer;
border : 1px solid #d8d8d8;
border-radius : 3px;
background-color: #F5F2F0;
@ -1137,20 +1002,15 @@ body {
.terminal {
box-sizing: border-box;
margin : 0 0 50px;
box-shadow: 5px 5px 11px #737373, -5px -5px 11px #b1b1b1;
.bar {
position : relative;
width : 100%;
height : 25px;
text-align : center;
border-radius : 5px 5px 0 0;
background-color: #D9D9D9;
font-size : 0;
.bar__title {
@ -1158,11 +1018,8 @@ body {
top : 4px;
right : 0;
left : 0;
margin : 0 auto;
color : #5e5e5e;
font-family: Arial;
font-size : 14px;
font-weight: 400;
@ -1179,7 +1036,6 @@ body {
.body {
box-sizing : border-box;
padding : 30px;
border : 1px solid #D9D9D9;
border-radius: 0 0 5px 5px;
@ -1189,10 +1045,8 @@ body {
p {
margin : 0;
padding : 0;
font-size : 20px;
line-height: 1.1;
@include m360 {}
@include m450 {}
@include m576 {}
@ -1213,22 +1067,18 @@ body {
span {
letter-spacing: 2px;
font-size : 16px;
@include m360 {}
@include m450 {}
@include m576 {}
@include m600 {}
@include m768 {
letter-spacing: 1px;
font-size : 12px;
}
@include m900 {}
@include m992 {
letter-spacing: 1.5px;
font-size : 15px;
}
@include m1200 {
@ -1245,11 +1095,9 @@ body {
font-size: 0;
span {
display : inline-block;
width : 12.5%;
height: 30px;
display: inline-block;
width : 12.5%;
height : 30px;
}
}
@ -1261,13 +1109,10 @@ body {
.btn {
display : inline-block;
width : 10px;
height : 10px;
margin : 0 4px;
cursor : pointer;
border-radius : 100px;
background-color: #000000;
}