diff --git a/package-lock.json b/package-lock.json index 22e9df4..8cc0ad6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "validation-form", - "version": "2.1.2", + "version": "2.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "validation-form", - "version": "2.1.2", + "version": "2.1.3", "license": "ISC", "devDependencies": { "@babel/core": "^7.26.0", diff --git a/package.json b/package.json index 086d8a1..d9f0d63 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "2.1.2", + "version": "2.1.3", "name": "validation-form", "description": "Customized form with validation for different types of fields.", "author": "beatrizsmerino@gmail.com", diff --git a/src/sass/abstracts/functions/_abstracts-functions-contains.sass b/src/sass/abstracts/functions/_abstracts-functions-contains.sass index 8eb58ce..ed19ddc 100644 --- a/src/sass/abstracts/functions/_abstracts-functions-contains.sass +++ b/src/sass/abstracts/functions/_abstracts-functions-contains.sass @@ -1,36 +1,10 @@ // ABSTRACTS - FUNCTIONS -// contain (find contain in a list) +// CONTAINS // ================================================= -// Description: -// ------------------------------------ -// This function 'contains' check whether an item belongs to a list or not. For example it`s using in the mixin mediaquery. - -// Require: -// ------------------------------------ -// This function require: -// -// Args: -// ------------------ -// - $list -// @param {List} List of items to check into. -// - $item -// @param {any} Item to check within the list. -// -// This function return: -// -// @return {bool} True/false if the item is contained in the list. - -// Use: -// ------------------------------------ -// @if not contains($rules, $rule) -// $rule: 'max' - -// Declaration: -// ------------------------------------ @function contains($list, $item) - @return index($list, $item) !=null \ No newline at end of file + @return index($list, $item) != null diff --git a/src/sass/abstracts/mixins/_abstracts-mixins-media-queries.scss b/src/sass/abstracts/mixins/_abstracts-mixins-media-queries.scss deleted file mode 100644 index 22ecabc..0000000 --- a/src/sass/abstracts/mixins/_abstracts-mixins-media-queries.scss +++ /dev/null @@ -1,72 +0,0 @@ -// ABSTRACTS - MIXINS -// MEDIA -// ================================================= - - - - - -// Description: -// ------------------------------------ -// Create mediaquery for breakpoint given. -// This mixin 'media' generate the rule @media in a way more easy, passing only the parameters of size breakpoint, min/max and width/height. - -// Require: -// ------------------------------------ -// External means: -// - $breakpoints -// @optional {map} Map with breakpoints names and values is required if param is key. -// -// Args: -// - $breakpoint -// @param {num/string} Breakpoint to define the media query. It accepts 'numbers' with and without units (px will be asigned if unitless) or 'key' within a previous $breakpoints map defined (see @optional), or variables previously defined. -// Values: $var | sizePX | size% | sizeEM | sizeREM -// - $rule -// @param {string} Defines if it will be a max-width or min-width mediaquery. -// Default: max -// Values: max | min -// - $dimension -// @param {string} Defines if it will be a width or height mediaquery. -// Default: width -// Values: width | height - -// Declaration: -// ------------------------------------ -@mixin media($breakpoint, $rule: "max", $dimension: "width", $unit: "px") { - $rules: "max", "min"; - $dimensions: "width", "height"; - $units: "px", "em", "rem", "%", "vw", "vh"; - @if not contains($rules, $rule) { - $rule: "max"; - } - @if not contains($dimensions, $dimension) { - $rule: "width"; - } - @if type-of($breakpoint) == number { - @if unitless($breakpoint) { - @media (#{$rule}-#{$dimension}: #{$breakpoint} + $unit) { - @content; - } - } @else if contains($units, unit($breakpoint)) { - @media (#{$rule}-#{$dimension}: #{$breakpoint}) { - @content; - } - } @else { - @error "Invalid units provided"; - } - } @else if variable_exists(breakpoints) { - @if map-has-key($breakpoints, $breakpoint) { - @media (#{$rule}-#{$dimension}: #{inspect(map-get($breakpoints, $breakpoint))}) { - @content; - } - } @else { - @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "+"Available breakpoints are: #{map-keys($breakpoints)}."; - } - } @else if variable_exists(breakpoint) { - @media (#{$rule}-#{$dimension}: #{$breakpoint}) { - @content; - } - } @else { - @error "Neither $breakpoints map nor variable provided are defined"; - } -} diff --git a/src/sass/abstracts/mixins/_abstracts-mixins-media.scss b/src/sass/abstracts/mixins/_abstracts-mixins-media.scss new file mode 100644 index 0000000..7c1757e --- /dev/null +++ b/src/sass/abstracts/mixins/_abstracts-mixins-media.scss @@ -0,0 +1,49 @@ +// ABSTRACTS - MIXINS +// MEDIA +// ================================================= + + + + + +@mixin media($breakpoint, $rule: "max", $dimension: "width", $unit: "px") { + $rules: "max", "min"; + $dimensions: "width", "height"; + $units: "px", "em", "rem", "%", "vw", "vh"; + + @if not contains($rules, $rule) { + $rule: "max"; + } + + @if not contains($dimensions, $dimension) { + $rule: "width"; + } + + @if type-of($breakpoint) == number { + @if unitless($breakpoint) { + @media (#{$rule}-#{$dimension}: #{$breakpoint + $unit}) { + @content; + } + } @else if contains($units, unit($breakpoint)) { + @media (#{$rule}-#{$dimension}: #{$breakpoint}) { + @content; + } + } @else { + @error "Invalid units provided"; + } + } @else if variable_exists(breakpoints) { + @if map-has-key($breakpoints, $breakpoint) { + @media (#{$rule}-#{$dimension}: #{inspect(map-get($breakpoints, $breakpoint))}) { + @content; + } + } @else { + @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}."; + } + } @else if variable_exists(breakpoint) { + @media (#{$rule}-#{$dimension}: #{$breakpoint}) { + @content; + } + } @else { + @error "Neither $breakpoints map nor variable provided are defined"; + } +} diff --git a/src/sass/abstracts/mixins/_abstracts-mixins-position.sass b/src/sass/abstracts/mixins/_abstracts-mixins-position.sass index 2ccc946..221c370 100644 --- a/src/sass/abstracts/mixins/_abstracts-mixins-position.sass +++ b/src/sass/abstracts/mixins/_abstracts-mixins-position.sass @@ -1,35 +1,11 @@ -// ABSTRACTS - MIXIN -// position (top, bottom, left, right) +// ABSTRACTS - MIXINS +// POSITION // ================================================= -// Description: -// ------------------------------------ -// $Recycle.BinThis mixin 'position' is used for move the element inside of his element father, who have the property CSS position: relative. - -// Require: -// ------------------------------------ -// This mixin require: -// -// External means: -// ------------------ -// Mixin prefix -// -// Args: -// ------------------ -// - $vertical -// @param {string} Position vertical inside of element father. -// Values: center | top | bottom -// - $horizontal -// @param {string} Position horizontal inside of element father. -// Default: NULL -// Values: center | left | right - -// Declaration: -// ------------------------------------ @mixin position($vertical, $horizontal: NULL) position: absolute diff --git a/src/sass/abstracts/mixins/_abstracts-mixins-prefix-animation.sass b/src/sass/abstracts/mixins/_abstracts-mixins-prefix-animation.sass index ed6885f..582a7d6 100644 --- a/src/sass/abstracts/mixins/_abstracts-mixins-prefix-animation.sass +++ b/src/sass/abstracts/mixins/_abstracts-mixins-prefix-animation.sass @@ -1,44 +1,14 @@ -// ABSTRACTS - MIXIN -// prefix animation +// ABSTRACTS - MIXINS +// PREFIX-ANIMATION // ================================================= -// Description: -// ------------------------------------ -// http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/ - -// Require: -// ------------------------------------ -// This file need the files: -// tools > _tools-mixins-prefix-keyframes.sass -// tools > _tools-mixins-prefix-animation.sass - -// Use: -// ------------------------------------ -// use example: -// 1.create keyframe -// animations > _animations-keyframes -// -// @include keyframes(move-the-object) -// 0% -// left: 100px -// 100% -// left: 200px -// -// 2. Call the animation keyframe -// objects > _objects-...sass -// -// .object-to-animate -// @include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s') - -// Declaration: -// ------------------------------------ @mixin animation($animate...) $max: length($animate) - $animations: '' + $animations: "" @for $i from 1 through $max $animations: #{$animations + nth($animate, $i)} @@ -50,4 +20,4 @@ -webkit-animation: $animations -moz-animation: $animations -o-animation: $animations - animation: $animations \ No newline at end of file + animation: $animations diff --git a/src/sass/abstracts/mixins/_abstracts-mixins-prefix-keyframes.sass b/src/sass/abstracts/mixins/_abstracts-mixins-prefix-keyframes.sass index 4240d3f..c75116a 100644 --- a/src/sass/abstracts/mixins/_abstracts-mixins-prefix-keyframes.sass +++ b/src/sass/abstracts/mixins/_abstracts-mixins-prefix-keyframes.sass @@ -1,41 +1,11 @@ -// ABSTRACTS - MIXIN -// prefix keyframes: webkit moz ms o +// ABSTRACTS - MIXINS +// PREFIX-KEYFRAMES // ================================================= -// Description: -// ------------------------------------ -// http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/ - -// Require: -// ------------------------------------ -// This file need the files: -// tools > _tools-mixins-prefix-keyframes.sass -// tools > _tools-mixins-prefix-animation.sass - -// Use: -// ------------------------------------ -// use example: -// 1.create keyframe -// animations > _animations-keyframes -// -// @include keyframes(move-the-object) -// 0% -// left: 100px -// 100% -// left: 200px -// -// 2. Call the animation keyframe -// objects > _objects-...sass -// -// .object-to-animate -// @include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s') - -// Declaration: -// ------------------------------------ @mixin keyframes($animationName) @-webkit-keyframes #{$animationName} @content @@ -47,4 +17,4 @@ @content @keyframes #{$animationName} - @content \ No newline at end of file + @content diff --git a/src/sass/abstracts/mixins/_abstracts-mixins-prefix.sass b/src/sass/abstracts/mixins/_abstracts-mixins-prefix.sass index 5be5b5f..2282526 100644 --- a/src/sass/abstracts/mixins/_abstracts-mixins-prefix.sass +++ b/src/sass/abstracts/mixins/_abstracts-mixins-prefix.sass @@ -1,42 +1,28 @@ -// ABSTRACTS - MIXIN -// prefix: webkit moz ms o (transform, transition...) +// ABSTRACTS - MIXINS +// PREFIX // ================================================= -// MIXIN - PREFIX +// PREFIX // ------------------------------------ @mixin prefix($property, $value, $prefixes: webkit moz ms o) @each $prefix in $prefixes - #{'-' + $prefix + '-' + $property}: $value + #{"-" + $prefix + "-" + $property}: $value - // Output standard non-prefixed declaration #{$property}: $value -// Use: -// @include prefix(transform, rotate(45deg)) - - -// MIXIN - TRANSFORM +// TRANSFORM // ------------------------------------ @mixin prefix--multiple($declarations, $prefixes: webkit moz ms o) @each $property, $value in $declarations @each $prefix in $prefixes - #{'-' + $prefix + '-' + $property}: $value + #{"-" + $prefix + "-" + $property}: $value - // Output standard non-prefixed declaration #{$property}: $value - - -// Use: -// @include prefix(( -// column-count: 3, -// column-gap: 1.5em, -// column-rule: 2px solid hotpink -// ), webkit moz ms o) \ No newline at end of file diff --git a/src/sass/abstracts/variables/_abstracts-variables-breakpoints.scss b/src/sass/abstracts/variables/_abstracts-variables-breakpoints.scss index ff0cdbe..d54e1e2 100644 --- a/src/sass/abstracts/variables/_abstracts-variables-breakpoints.scss +++ b/src/sass/abstracts/variables/_abstracts-variables-breakpoints.scss @@ -1,27 +1,24 @@ -// ABSTRACTS -VARIABLES -// variables-media +// ABSTRACTS - VARIABLES +// BREAKPOINTS // ================================================= -// SIZES -// ------------------------------------ -// xs - mobile -// sm - mobile -// md - iPad portrait -// lg - iPad portrait -// xl - iPad landscape -// xxl - laptop -// xxl - big display - $breakpoints: ( xs: 480px, + // mobile portrait sm: 576px, + // mobile landscape md: 768px, + // tablet portrait lg: 992px, + // tablet portrait xl: 1024px, + // tablet landscape xxl: 1280px, + // laptop xxxl: 1600px, + // desktop ) !default; diff --git a/src/sass/abstracts/variables/_abstracts-variables-colors.sass b/src/sass/abstracts/variables/_abstracts-variables-colors.sass index 3de485e..7136f5b 100644 --- a/src/sass/abstracts/variables/_abstracts-variables-colors.sass +++ b/src/sass/abstracts/variables/_abstracts-variables-colors.sass @@ -1,19 +1,13 @@ // ABSTRACTS - VARIABLES -// colors +// COLORS // ================================================= -// COLOR CORPORATIVE -// ------------------------------------ -$color-brand-1: #42b883 -$color-brand-2: #35495e - - -// GRAYSCALE -// ------------------------------------ +// GRAY SCALE +// ---------------------------------------------------------------------- $color-gray-100: #ffffff $color-gray-98: #f3f3f3 $color-gray-95: #EDEDED @@ -33,14 +27,11 @@ $color-gray-10: #171717 $color-gray-0: #000000 -// MESSAGE -// ------------------------------------ -$color-error: tomato -$color-success: teal + // SOCIAL MEDIA -// ------------------------------------ +// ---------------------------------------------------------------------- $color-500px: #0099e5 $color-amazon: #ff9900 $color-android: #a4c639 @@ -52,61 +43,61 @@ $color-discord: #7289da $color-dribbble: #ea4c89 $color-dropbox: #007ee5 $color-facebook: #3b5998 -// ------------------------------ +// ------------------ $color-flickr--blue: #006add $color-flickr--pink: #f40083 -// ------------------------------ +// ------------------ $color-foursquare--blue: #2d5be3 $color-foursquare--navy: #073282 $color-foursquare--pink: #f94877 -// ------------------------------ +// ------------------ $color-github: #9CDAF1 -// ------------------------------ +// ------------------ $color-google--blue: #4285f4 $color-google--green: #34a853 $color-google--red: #ea4335 $color-google--yellow: #fbbc05 -// ------------------------------ +// ------------------ $color-google-plus: #db4437 -// ------------------------------ +// ------------------ $color-instagram--blue: #4c5fd7 $color-instagram--magenta: #c32aa3 $color-instagram--orange: #f46f30 $color-instagram--purple: #7232bd $color-instagram--yellow: #ffdc7d -// ------------------------------ +// ------------------ $color-joomla--blue: #0D6DAB $color-joomla--green: #5AA427 $color-joomla--red: #E52627 $color-joomla--orange: #FC8F30 $color-joomla--black: #3B3A40 -// ------------------------------ +// ------------------ $color-lastfm: #D51007 $color-linkedin: #007bb5 -// ------------------------------ +// ------------------ $color-listly--blue: #52b1b3 $color-listly--orange: #df6d46 -// ------------------------------ +// ------------------ $color-mastodon: #2b90d9 $color-medium: #02b875 -// ------------------------------ +// ------------------ $color-microsoft--blue: #03a5f0 $color-microsoft--green: #80bb03 $color-microsoft--red: #f35022 $color-microsoft--yellow: #ffb903 -// ------------------------------ +// ------------------ $color-periscope: #40a4c4 $color-pinterest: #bd081c $color-pocket: #ee4056 -// ------------------------------ +// ------------------ $color-quora--blue: #2b6dad $color-quora--red: #aa2200 -// ------------------------------ +// ------------------ $color-reddit: #ff5700 -// ------------------------------ +// ------------------ $color-skype--blue: #00aff0 $color-skype--dk-blue: #0078d7 -// ------------------------------ +// ------------------ $color-slack--green-blue: #1a937d $color-slack--mosss: #3eb890 $color-slack--olive: #65863a @@ -116,14 +107,14 @@ $color-slack--red: #cc2027 $color-slack--sky-blue: #70cadb $color-slack--violet: #472a49 $color-slack--yellow: #e8a723 -// ------------------------------ +// ------------------ $color-slideshare--blue: #00a0dc $color-slideshare--orange: #e68523 -// ------------------------------ +// ------------------ $color-snapchat: #fffc00 $color-soundcloud: #ff5500 $color-spotify: #1ed760 -// ------------------------------ +// ------------------ $color-stackoverflow: #f48024 $color-steam: #00adee $color-stumbleupon: #e94826 @@ -136,14 +127,32 @@ $color-twitter: #1da1f2 $color-vimeo: #1ab7ea $color-vine: #00b489 $color-vk: #4a76a8 -// ------------------------------ +// ------------------ $color-whatsapp--green: #25d366 $color-whatsapp--teal-1: #075e54 $color-whatsapp--teal-2: #128c7e -// ------------------------------ +// ------------------ $color-wordpress--blue: #00749C $color-wordpress--black: #444140 $color-wordpress--white: #fff -// ------------------------------ +// ------------------ $color-yahoo: #430297 -$color-youtube: #ff0000 \ No newline at end of file +$color-youtube: #ff0000 + + + + + +// BRAND +// ---------------------------------------------------------------------- +$color-brand-1: #42b883 +$color-brand-2: #35495e + + + + + +// STATUS +// ---------------------------------------------------------------------- +$color-error: tomato +$color-success: teal diff --git a/src/sass/abstracts/variables/_abstracts-variables-typography.sass b/src/sass/abstracts/variables/_abstracts-variables-fonts.sass similarity index 54% rename from src/sass/abstracts/variables/_abstracts-variables-typography.sass rename to src/sass/abstracts/variables/_abstracts-variables-fonts.sass index 71c769a..32117bd 100644 --- a/src/sass/abstracts/variables/_abstracts-variables-typography.sass +++ b/src/sass/abstracts/variables/_abstracts-variables-fonts.sass @@ -1,26 +1,25 @@ // ABSTRACTS - VARIABLES -// typography +// FONTS // ================================================= -// FONTS - FAMILY CORPORATIVE -// ------------------------------------ -$font-family-1: 'Raleway', helvetica, sans-serif +// BRAND +// ---------------------------------------------------------------------- +$font-brand-1: "Raleway", "Helvetica", sans-serif -// FONTS - SIZE CONVERSION -// ------------------------------------ +// CONVERSION +// ---------------------------------------------------------------------- // px to em more easy -> based to 10px insted of 16px // 1em = 16px -> default css // 16px * 0.625 = 10px -> now // 1.6em * 10px = 16px -> use -// $font-size--html: 62.5% $font-size--body: 10px @@ -28,8 +27,8 @@ $font-size--body: 10px -// FONTS - SIZE H1-H6 -// ------------------------------------ +// H1-H6 +// ---------------------------------------------------------------------- $font-size--h1: 3.6rem !default // 36px $font-size--h2: 2.8rem !default // 28px $font-size--h3: 2.4rem !default // 24px @@ -41,18 +40,18 @@ $font-size--h6: 1.6rem !default // 16px -// FONTS - SIZE BASE -// ------------------------------------ +// BASE +// ---------------------------------------------------------------------- $font-size--global: 1.6rem !default -$line-height--global: 2.4rem !default +$font-line-height--global: 2.4rem !default -// FONTS - FORMAT VARIANTS -// ------------------------------------ +// FORMAT +// ---------------------------------------------------------------------- $format--tiny: 0.25 !default $format--small: 0.5 !default $format--large: 2 !default -$format--huge: 4 !default \ No newline at end of file +$format--huge: 4 !default diff --git a/src/sass/vendor/_animation.scss b/src/sass/animations/_animations-animate-css.scss similarity index 100% rename from src/sass/vendor/_animation.scss rename to src/sass/animations/_animations-animate-css.scss diff --git a/src/sass/animations/_animations-keyframes-fade.sass b/src/sass/animations/_animations-keyframes-fade.sass index 4ff3514..27a51df 100644 --- a/src/sass/animations/_animations-keyframes-fade.sass +++ b/src/sass/animations/_animations-keyframes-fade.sass @@ -1,16 +1,13 @@ // ANIMATIONS -// keyframes: -// fadeIn, fadeInTop, fadeInBottom, fadeInRight fadeInLeft -// fadeOut, fadeOutTop, fadeOutBottom, fadeOutRight fadeOutLeft -// fadeInOut, fadeOutIn +// KEYFRAMES-FADE // ================================================= -// KEYFRAMES - FADE IN -// ------------------------------------ +// FADE IN +// ---------------------------------------------------------------------- @include keyframes(fadeIn) 0% opacity: 0 @@ -21,8 +18,8 @@ -// KEYFRAMES - FADE OUT -// ------------------------------------ +// FADE OUT +// ---------------------------------------------------------------------- @include keyframes(fadeOut) 0% opacity: 1 @@ -33,8 +30,8 @@ -// KEYFRAMES - FADE IN OUT -// ------------------------------------ +// FADE IN OUT +// ---------------------------------------------------------------------- @include keyframes(fadeInOut) 0% opacity: 1 @@ -43,4 +40,4 @@ 55% opacity: 0 100% - opacity: 0 \ No newline at end of file + opacity: 0 diff --git a/src/sass/animations/_animations-keyframes-move.sass b/src/sass/animations/_animations-keyframes-move.sass index ef46139..048350c 100644 --- a/src/sass/animations/_animations-keyframes-move.sass +++ b/src/sass/animations/_animations-keyframes-move.sass @@ -1,14 +1,13 @@ // ANIMATIONS -// keyframes: -// position and translate (top, bottom, right, left) +// KEYFRAMES-MOVE // ================================================= -// KEYFRAMES - MOVE IN -// ------------------------------------ +// MOVE IN +// ---------------------------------------------------------------------- @include keyframes(moveInBottomToTop) 0% opacity: 0 @@ -48,8 +47,8 @@ -// KEYFRAMES - MOVE OUT -// ------------------------------------ +// MOVE OUT +// ---------------------------------------------------------------------- @include keyframes(moveOutTopToBottom) 0% opacity: 1 @@ -83,4 +82,4 @@ @include prefix(transform, translate3d(0, 0, 0)) 100% opacity: 0 - @include prefix(transform, translate3d(-100%, 0, 0)) \ No newline at end of file + @include prefix(transform, translate3d(-100%, 0, 0)) diff --git a/src/sass/animations/_animations-keyframes-size.sass b/src/sass/animations/_animations-keyframes-size.sass index 52c2184..0f06984 100644 --- a/src/sass/animations/_animations-keyframes-size.sass +++ b/src/sass/animations/_animations-keyframes-size.sass @@ -1,13 +1,13 @@ // ANIMATIONS -// keyframes: zoomIn, zoomOut, radar, radarCenter +// KEYFRAMES-SIZE // ================================================= -// KEYFRAMES - ZOOM IN -// ------------------------------------ +// ZOOM IN +// ---------------------------------------------------------------------- @include keyframes(zoomIn) from opacity: 0 @@ -21,8 +21,8 @@ -// KEYFRAMES - ZOOM OUT -// ------------------------------------ +// ZOOM OUT +// ---------------------------------------------------------------------- @include keyframes(zoomOut) from opacity: 1 @@ -36,8 +36,8 @@ -// KEYFRAMES - RADAR -// ------------------------------------ +// RADAR +// ---------------------------------------------------------------------- @include keyframes(radar) from @include prefix(transform, scale3d(1, 1, 1)) @@ -49,8 +49,8 @@ -// KEYFRAMES - RADAR CENTER -// ------------------------------------ +// RADAR CENTER +// ---------------------------------------------------------------------- @include keyframes(radarCenter) to - @include prefix(transform, translate(-50%, -50%) scale3d(1.05, 1.05, 1.05)) \ No newline at end of file + @include prefix(transform, translate(-50%, -50%) scale3d(1.05, 1.05, 1.05)) diff --git a/src/sass/base/_base-typography.sass b/src/sass/base/_base-fonts.sass similarity index 56% rename from src/sass/base/_base-typography.sass rename to src/sass/base/_base-fonts.sass index ae00f59..bdc80ba 100644 --- a/src/sass/base/_base-typography.sass +++ b/src/sass/base/_base-fonts.sass @@ -1,5 +1,5 @@ // BASE -// typography +// FONTS // ================================================= @@ -7,7 +7,7 @@ // HTML -// ------------------------------------ +// ---------------------------------------------------------------------- html font-size: $font-size--html @@ -15,21 +15,21 @@ html -// BODY and RESET FONT -// ------------------------------------ +// BODY +// ---------------------------------------------------------------------- body font-size: $font-size--global body, textarea - font-family: $font-family-1 + font-family: $font-brand-1 // H1-H6 -// ------------------------------------ +// ---------------------------------------------------------------------- h1 font-size: $font-size--h1 @@ -49,4 +49,4 @@ h6 font-size: $font-size--h6 p - line-height: 150% \ No newline at end of file + line-height: 150% diff --git a/src/sass/base/_base-reset-ericmeyer.scss b/src/sass/base/_base-reset-ericmeyer.scss index 7eaf017..58af684 100644 --- a/src/sass/base/_base-reset-ericmeyer.scss +++ b/src/sass/base/_base-reset-ericmeyer.scss @@ -1,5 +1,5 @@ -// GENERICS -// reset styles: download Reset Eric Meyer (dont change) +// BASE +// RESET-ERICMEYER // ================================================= @@ -7,8 +7,8 @@ /* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) + v2.0 | 20110126 + License: none (public domain) */ html, diff --git a/src/sass/base/_base-reset-normalize.scss b/src/sass/base/_base-reset-normalize.scss index 0307190..1b58e3f 100644 --- a/src/sass/base/_base-reset-normalize.scss +++ b/src/sass/base/_base-reset-normalize.scss @@ -1,5 +1,5 @@ -// GENERICS -// reset styles: download Reset Normalize (dont change) +// BASE +// RESET-NORMALIZE // ================================================= diff --git a/src/sass/base/_base-reset-personal.sass b/src/sass/base/_base-reset-personal.sass index ff50931..8592316 100644 --- a/src/sass/base/_base-reset-personal.sass +++ b/src/sass/base/_base-reset-personal.sass @@ -1,7 +1,5 @@ -// GENERICS -// reset styles (reset personal complementary to download) -// Change : 17-09-2017 -// Date : 17-09-2017 +// BASE +// RESET-PERSONAL // ================================================= @@ -36,14 +34,14 @@ time, mark, audio, video // FONT -// ================================================= +// ---------------------------------------------------------------------- textarea, address font-style: normal // TEXT -// ================================================= +// ---------------------------------------------------------------------- a, span display: inline-block @@ -64,7 +62,7 @@ table // IMAGE -// ================================================= +// ---------------------------------------------------------------------- img width: 100% font-style: italic @@ -73,7 +71,7 @@ img // FORM -// ================================================= +// ---------------------------------------------------------------------- input, button, select @@ -103,7 +101,7 @@ textarea button cursor: pointer - + input &[type="submit"], &[type="reset"] diff --git a/src/sass/components/_components-button.sass b/src/sass/components/_components-button.sass index e0879bd..ffd9d8c 100644 --- a/src/sass/components/_components-button.sass +++ b/src/sass/components/_components-button.sass @@ -1,5 +1,5 @@ // COMPONENTS -// button +// BUTTON // ================================================= @@ -31,4 +31,3 @@ >* &:not(:last-child) margin-right: 1.6rem - \ No newline at end of file diff --git a/src/sass/components/_components-container.sass b/src/sass/components/_components-container.sass index c540e88..f40d977 100644 --- a/src/sass/components/_components-container.sass +++ b/src/sass/components/_components-container.sass @@ -1,5 +1,5 @@ // COMPONENTS -// container +// CONTAINER // ================================================= @@ -13,4 +13,4 @@ position: relative .inner - padding: 0 3rem \ No newline at end of file + padding: 0 3rem diff --git a/src/sass/components/_components-form-ckeditor.sass b/src/sass/components/_components-form-ckeditor.sass index 9b856a9..3d685e8 100644 --- a/src/sass/components/_components-form-ckeditor.sass +++ b/src/sass/components/_components-form-ckeditor.sass @@ -1,5 +1,5 @@ // COMPONENTS -// ckeditor +// FORM-CKEDITOR // ================================================= @@ -13,6 +13,6 @@ &:hover, &:focus border-color: $color-brand-1 - + &.error - border-color: $color-error \ No newline at end of file + border-color: $color-error diff --git a/src/sass/components/_components-form-error.sass b/src/sass/components/_components-form-error.sass index c2ce473..b7cc101 100644 --- a/src/sass/components/_components-form-error.sass +++ b/src/sass/components/_components-form-error.sass @@ -1,5 +1,5 @@ // COMPONENTS -// error +// FORM-ERROR // ================================================= @@ -29,4 +29,4 @@ form &:hover .check__mark - border-color: $color-gray-0 \ No newline at end of file + border-color: $color-gray-0 diff --git a/src/sass/components/_components-form-input-check.sass b/src/sass/components/_components-form-input-check.sass index d41370b..eb8c85a 100644 --- a/src/sass/components/_components-form-input-check.sass +++ b/src/sass/components/_components-form-input-check.sass @@ -1,5 +1,5 @@ // COMPONENTS -// form-input-check: checkbox and radio buttons +// FORM-INPUT-CHECK // ================================================= @use "sass:math" @use "sass:color" @@ -8,7 +8,7 @@ -/* settings */ +// Settings $check-label-margin-left: 1.6rem // ------------------ $check-input-size: 3.2rem @@ -20,6 +20,8 @@ $check-input-background-color-checked: $color-brand-1 $check-mark-width: 0.8 $check-mark-height: 1.6 $check-mark-color: $color-gray-100 +// ------------------ +$contrast: 5% @@ -33,17 +35,17 @@ $check-mark-color: $color-gray-100 font-size: 1.6rem user-select: none cursor: pointer - - /* On mouse-over */ + + // On mouse-over &:hover .check__input ~ .check__mark - background-color: color.scale($color: $color-brand-1, $lightness: -5%) - + background-color: color.scale($color: $color-brand-1, $lightness: math.div($contrast, -1)) + &__label margin-left: $check-label-margin-left position: relative - - /* Hide the browser's default checkbox */ + + // Hide the browser's default checkbox &__input width: $check-input-size height: $check-input-size @@ -54,16 +56,16 @@ $check-mark-color: $color-gray-100 left: 0 opacity: 0 cursor: pointer - - /* When the checkbox is checked*/ + + // When the checkbox is checked &:checked ~ .check__mark background-color: $check-input-background-color-checked - - /* Show the checkmark when checked */ + + // Show the checkmark when checked &:checked ~ .check__mark:after display: block - - /* Create a custom checkbox */ + + // Create a custom checkbox &__mark width: $check-input-size height: $check-input-size @@ -74,8 +76,8 @@ $check-mark-color: $color-gray-100 border-style: solid border-color: $check-input-border-color background-color: $check-input-background-color - - /* Create the checkmark/indicator (hidden when not checked) */ + + // Create the checkmark/indicator (hidden when not checked) &:after content: "" display: none @@ -91,4 +93,4 @@ $check-mark-color: $color-gray-100 .check &__input &[type="radio"] ~ .check__mark - border-radius: 50% \ No newline at end of file + border-radius: 50% diff --git a/src/sass/components/_components-form-input-color.sass b/src/sass/components/_components-form-input-color.sass index 405caf4..c76745f 100644 --- a/src/sass/components/_components-form-input-color.sass +++ b/src/sass/components/_components-form-input-color.sass @@ -1,25 +1,28 @@ // COMPONENTS -// form-input-color +// FORM-INPUT-COLOR // ================================================= +// Settings $field-color-size: 4rem $field-color-label-margin: 1.6rem + + .field-color display: flex align-items: center - + &:not(:last-child) margin-bottom: 0.5rem - + &__label margin-left: $field-color-label-margin font-size: 1.6rem - + &__input width: $field-color-size height: $field-color-size @@ -39,4 +42,4 @@ $field-color-label-margin: 1.6rem left: 50% transform: translate3d(-50%, -50%, 0) border-radius: 50% - border: none \ No newline at end of file + border: none diff --git a/src/sass/components/_components-form-input-range.sass b/src/sass/components/_components-form-input-range.sass index cc2cc36..f7b17ae 100644 --- a/src/sass/components/_components-form-input-range.sass +++ b/src/sass/components/_components-form-input-range.sass @@ -1,5 +1,5 @@ // COMPONENTS -// form-input-range +// FORM-INPUT-RANGE // ================================================= @use "sass:math" @use "sass:color" @@ -14,33 +14,36 @@ // Version 1.5.2 // MIT License -$track-color: $color-gray-90 !default -$thumb-color: $color-brand-1 !default +// Settings +$track-color: $color-gray-90 +$thumb-color: $color-brand-1 +// ------------------ +$thumb-radius: 1.2rem +$thumb-height: 2.4rem +$thumb-width: 2.4rem +$thumb-shadow-size: 0.4rem +$thumb-shadow-blur: 0.4rem +$thumb-shadow-color: rgba($color-gray-0, .2) +$thumb-border-width: 0.2rem +$thumb-border-color: $color-gray-90 +// ------------------ +$track-width: 100% +$track-height: 0.8rem +$track-shadow-size: 0.1rem +$track-shadow-blur: 0.1rem +$track-shadow-color: rgba($color-gray-0, .2) +$track-border-width: 0.2rem +$track-border-color: $color-gray-80 +// ------------------ +$track-radius: 0.5rem +$contrast: 5% +// ------------------ +$ie-bottom-track-color: color.scale($color: $track-color, $lightness: math.div($contrast, -1)) -$thumb-radius: 1.2rem !default -$thumb-height: 2.4rem !default -$thumb-width: 2.4rem !default -$thumb-shadow-size: 0.4rem !default -$thumb-shadow-blur: 0.4rem !default -$thumb-shadow-color: rgba($color-gray-0, .2) !default -$thumb-border-width: 0.2rem !default -$thumb-border-color: $color-gray-90 !default -$track-width: 100% !default -$track-height: 0.8rem !default -$track-shadow-size: 0.1rem !default -$track-shadow-blur: 0.1rem !default -$track-shadow-color: rgba($color-gray-0, .2) !default -$track-border-width: 0.2rem !default -$track-border-color: $color-gray-80 !default - -$track-radius: 0.5rem !default -$contrast: 5% !default - -$ie-bottom-track-color: color.scale($color: $track-color, $lightness: math.div($contrast, -1)) !default @mixin shadow($shadow-size, $shadow-blur, $shadow-color) - box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size color.scale($color: $shadow-color, $lightness: 5%) + box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size color.scale($color: $shadow-color, $lightness: $contrast) @mixin track @@ -59,42 +62,42 @@ $ie-bottom-track-color: color.scale($color: $track-color, $lightness: math.div($ cursor: default height: $thumb-height width: $thumb-width - -.range[type='range'] + +.range[type="range"] -webkit-appearance: none background: transparent margin: math.div($thumb-height, 2) width: $track-width height: 5.4rem - + &::-moz-focus-outer border: 0 - + &:focus outline: 0 - + &::-webkit-slider-runnable-track background: color.scale($color: $track-color, $lightness: $contrast) - + &::-ms-fill-lower background: $track-color - + &::-ms-fill-upper background: color.scale($color: $track-color, $lightness: $contrast) - + &::-webkit-slider-runnable-track @include track @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color) background: $track-color border: $track-border-width solid $track-border-color border-radius: $track-radius - + &::-webkit-slider-thumb @include thumb -webkit-appearance: none margin-top: (math.div(-$track-border-width * 2 + $track-height, 2) - math.div($thumb-height, 2)) - + &::-moz-range-track @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color) @include track @@ -102,33 +105,33 @@ $ie-bottom-track-color: color.scale($color: $track-color, $lightness: math.div($ border: $track-border-width solid $track-border-color border-radius: $track-radius height: math.div($track-height, 2) - + &::-moz-range-thumb @include thumb - + &::-ms-track @include track background: transparent border-color: transparent border-width: math.div($thumb-height, 2) color: transparent - + &::-ms-fill-lower @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color) background: $ie-bottom-track-color border: $track-border-width solid $track-border-color border-radius: ($track-radius * 2) - + &::-ms-fill-upper @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color) background: $track-color border: $track-border-width solid $track-border-color border-radius: ($track-radius * 2) - + &::-ms-thumb @include thumb margin-top: math.div($track-height, 4) - + &:disabled &::-webkit-slider-thumb, &::-moz-range-thumb, @@ -136,4 +139,4 @@ $ie-bottom-track-color: color.scale($color: $track-color, $lightness: math.div($ &::-webkit-slider-runnable-track, &::-ms-fill-lower, &::-ms-fill-upper - cursor: not-allowed \ No newline at end of file + cursor: not-allowed diff --git a/src/sass/components/_components-form-require.sass b/src/sass/components/_components-form-require.sass index ccd0094..7237c4f 100644 --- a/src/sass/components/_components-form-require.sass +++ b/src/sass/components/_components-form-require.sass @@ -1,5 +1,5 @@ // COMPONENTS -// require +// FORM-REQUIRE // ================================================= @@ -14,4 +14,4 @@ right: -1.6rem display: inline-block font-size: 4rem - color: $color-error \ No newline at end of file + color: $color-error diff --git a/src/sass/components/_components-form-select.sass b/src/sass/components/_components-form-select.sass index a6d0257..43acbaa 100644 --- a/src/sass/components/_components-form-select.sass +++ b/src/sass/components/_components-form-select.sass @@ -1,5 +1,5 @@ // COMPONENTS -// select +// FORM-SELECT // ================================================= @@ -11,7 +11,7 @@ &__wrapper position: relative - + &__arrow margin: 0 position: absolute @@ -22,4 +22,4 @@ @include prefix(transform, translateY(-50%)) font-size: 2rem color: $color-gray-0 - pointer-events: none \ No newline at end of file + pointer-events: none diff --git a/src/sass/components/_components-form.sass b/src/sass/components/_components-form.sass index 6b48b9f..1dd66d5 100644 --- a/src/sass/components/_components-form.sass +++ b/src/sass/components/_components-form.sass @@ -1,10 +1,10 @@ // COMPONENTS -// form +// FORM // ================================================= - + .form &__group @@ -15,7 +15,7 @@ &__column display: flex - @include media('md') + @include media("md") flex-direction: column &:not(:last-of-type) @@ -24,14 +24,14 @@ > * flex: 1 - @include media('md') + @include media("md") width: 100% flex: none &:not(:last-of-type) margin-right: 2.4rem - @include media('md') + @include media("md") margin-right: 0 margin-bottom: 2.4rem @@ -39,27 +39,27 @@ &:not(:last-of-type) margin-right: 3rem - @include media('lg') + @include media("lg") margin-bottom: 4rem &--3 - @include media('lg') + @include media("lg") flex-direction: column >* - @include media('lg') + @include media("lg") width: 100% flex: none &:not(:last-of-type) margin-right: 2.4rem - @include media('lg') + @include media("lg") margin-right: 0 margin-bottom: 2.4rem > .fieldset &:not(:last-of-type) - @include media('lg') + @include media("lg") margin-bottom: 4rem > .form @@ -67,11 +67,11 @@ &:not(:last-of-type) margin-bottom: 0 - @include media('md') + @include media("md") margin-right: 0 margin-bottom: 2.4rem - - + + > .fieldset, > * &:not(:last-child) @@ -96,19 +96,19 @@ background-color: $color-gray-100 &::-webkit-input-placeholder - /* Chrome/Opera/Safari */ + // Chrome/Opera/Safari font-weight: 200 &::-moz-placeholder - /* Firefox 19+ */ + // Firefox 19+ font-weight: 200 &:-ms-input-placeholder - /* IE 10+ */ + // IE 10+ font-weight: 200 &:-moz-placeholder - /* Firefox 18- */ + // Firefox 18- font-weight: 200 &:hover, @@ -130,10 +130,10 @@ background-color: $color-brand-1 box-shadow: 0 0 1.6rem rgba($color-gray-0, 0.8) - @include media('md') + @include media("md") display: flex justify-content: center - + .legend width: 100% @@ -149,4 +149,4 @@ display: inline-block font-size: 2rem font-weight: 600 - color: $color-brand-2 \ No newline at end of file + color: $color-brand-2 diff --git a/src/sass/components/_components-icon.sass b/src/sass/components/_components-icon.sass index 891748e..8f98292 100644 --- a/src/sass/components/_components-icon.sass +++ b/src/sass/components/_components-icon.sass @@ -1,5 +1,5 @@ // COMPONENTS -// icon +// ICON // ================================================= @@ -10,8 +10,8 @@ display: flex justify-content: center align-item: center - + i font-style: normal line-height: 100% - pointer-events: none \ No newline at end of file + pointer-events: none diff --git a/src/sass/components/_components-link.sass b/src/sass/components/_components-link.sass index 0519c7e..e57c08c 100644 --- a/src/sass/components/_components-link.sass +++ b/src/sass/components/_components-link.sass @@ -1,5 +1,5 @@ // COMPONENTS -// link +// LINK // ================================================= @@ -9,7 +9,7 @@ .link font-weight: 700 color: $color-brand-1 - + &:hover color: $color-brand-2 - text-decoration: underline \ No newline at end of file + text-decoration: underline diff --git a/src/sass/components/_components-message.sass b/src/sass/components/_components-message.sass index 7d8fea3..49a8518 100644 --- a/src/sass/components/_components-message.sass +++ b/src/sass/components/_components-message.sass @@ -1,5 +1,5 @@ // COMPONENTS -// messages +// MESSAGE // ================================================= @@ -16,25 +16,25 @@ @include prefix(box-shadow, 0 0 2rem rgba($color-gray-0, 0.1)) opacity: 0 @include prefix(transform, translate3d(0, -100%, 0)) - + &__inner margin: 0.5rem display: flex position: relative - + &__text padding: 1.6rem 3rem 1.6rem 1.6rem font-size: 1.6rem font-weight: 400 color: $color-gray-95 - + .link font-weight: 700 color: $color-gray-100 &:hover text-decoration: underline - + &__close position: absolute top: 0 @@ -43,25 +43,25 @@ font-weight: 600 color: $color-gray-95 cursor: pointer - + &:hover color: $color-gray-100 - + &--success, &--error .message &__text, &__close color: $color-gray-100 - + &--success background-color: $color-success - + &--error background-color: $color-error - + &.is-show @include animation(moveInTopToBottom 0.2s ease-in 0s forwards) &.is-hide - @include animation(moveOutBottomToTop 0.2s ease-in 0s forwards) \ No newline at end of file + @include animation(moveOutBottomToTop 0.2s ease-in 0s forwards) diff --git a/src/sass/components/_components-page.sass b/src/sass/components/_components-page.sass index 99ddc9d..d8bfa56 100644 --- a/src/sass/components/_components-page.sass +++ b/src/sass/components/_components-page.sass @@ -1,5 +1,5 @@ // COMPONENTS -// page +// PAGE // ================================================= @use "sass:color" @@ -18,4 +18,4 @@ font-size: 4.8rem color: color.scale($color: $color-brand-1, $lightness: -20%) - // &__content \ No newline at end of file + // &__content diff --git a/src/sass/styles.sass b/src/sass/styles.sass index 3b6226f..4677105 100644 --- a/src/sass/styles.sass +++ b/src/sass/styles.sass @@ -1,57 +1,42 @@ -// INDEX -// ============================================================================= -// ABSTRACTS / UTITILITIES.......helpers tools which don’t output any CSS when compiled: variables,mixins, extends, functions... -// VENDORS.......................code from external libraries and frameworks: bootstrap, foundation, jquery-ui... -// BASE..........................standard styles: reset, typography... -// LAYOUT........................handles the layout: header, nav, main, section, article, aside, footer, grid-system, forms... -// COMPONENTS....................small modules reusable: modal, button, list, slider, carrousel... -// PAGES.........................styles specific to individual pages: home, about, services, products, gallery, quotes, contact... -// THEMES........................sections of your site contain alternate color schemes: default theme, admin theme... +// PARTIALS SASS +// =============================================================================== // ABSTRACTS -// ================================================= -@import "abstracts/variables/abstracts-variables-colors" -@import "abstracts/variables/abstracts-variables-typography" -@import "abstracts/variables/abstracts-variables-breakpoints" -// ------------------------------ +// ---------------------------------------------------------------------- @import "abstracts/functions/abstracts-functions-contains" -// ------------------------------ -@import "abstracts/mixins/abstracts-mixins-media-queries" +// ------------------ +@import "abstracts/mixins/abstracts-mixins-media" @import "abstracts/mixins/abstracts-mixins-position" @import "abstracts/mixins/abstracts-mixins-prefix" @import "abstracts/mixins/abstracts-mixins-prefix-keyframes" @import "abstracts/mixins/abstracts-mixins-prefix-animation" - - - - - - -// VENDORS -// ================================================= -// @import "vendor/animation" +// ------------------ +@import "abstracts/variables/abstracts-variables-colors" +@import "abstracts/variables/abstracts-variables-fonts" +@import "abstracts/variables/abstracts-variables-breakpoints" // BASE -// ================================================= +// ---------------------------------------------------------------------- // @import "base/base-reset-ericmeyer" // @import "base/base-reset-normalize" @import "base/base-reset-personal" -@import "base/base-typography" +@import "base/base-fonts" // ANIMATIONS -// ================================================= +// ---------------------------------------------------------------------- +// @import "animations/animations-animate-css" @import "animations/animations-keyframes-fade" @import "animations/animations-keyframes-move" @import "animations/animations-keyframes-size" @@ -60,15 +45,8 @@ -// LAYOUT -// ================================================= - - - - - // COMPONENTS -// ================================================= +// ---------------------------------------------------------------------- @import "components/components-container" @import "components/components-page" @import "components/components-link" @@ -83,17 +61,3 @@ @import "components/components-form-require" @import "components/components-form-error" @import "components/components-form-ckeditor" - - - - - -// PAGES -// ================================================= - - - - - -// THEMES -// ================================================= \ No newline at end of file