14.2.5 (#10)

- [Menu] Slight markup changes on Mega Menu - [Menu] Change mega menu class name and structure - [CSS] Refactor color variables into its own file `_colors.scss` - [CSS] Change all instance of var(--textDim) to var(--gray)
hrsetyono · Oct 21, 2022 · 79be96e · 79be96e
1 parent 4dcdb23
commit 79be96e
Show file tree

Hide file tree

Showing 55 changed files with 667 additions and 618 deletions.
diff --git a/acf-json/group_63520484a302e.json b/acf-json/group_63520484a302e.json
@@ -0,0 +1,87 @@
+{
+    "key": "group_63520484a302e",
+    "title": "User Profile",
+    "fields": [
+        {
+            "key": "field_63520494d4184",
+            "label": "Gender",
+            "name": "gender",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "male": "Male",
+                "female": "Female",
+                "other": "Other"
+            },
+            "default_value": false,
+            "allow_null": 0,
+            "multiple": 0,
+            "ui": 0,
+            "return_format": "value",
+            "ajax": 0,
+            "placeholder": ""
+        },
+        {
+            "key": "field_635204bbd4185",
+            "label": "Job",
+            "name": "job",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": "",
+            "maxlength": ""
+        },
+        {
+            "key": "field_635204c5d4186",
+            "label": "Birthday",
+            "name": "birthday",
+            "type": "date_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "display_format": "d M Y",
+            "return_format": "d M Y",
+            "first_day": 1
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "user_form",
+                "operator": "==",
+                "value": "edit"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1666319637
+}
diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
@@ -0,0 +1,152 @@
+// This file is using .scss format to make it easier to write Maps & List
+$colors: (
+  ( hex: #2c3e50, var: '--text',       slug: 'text-base' ),
+  ( hex: #ffffff, var: '--textInvert', slug: 'text-invert' ),
+
+  ( hex: #888888, var: '--gray',       slug: 'gray' ),
+  ( hex: #5C5C5C, var: '--grayDark',   slug: 'gray-dark' ),
+  ( hex: #E0E0E0, var: '--grayLight',  slug: 'gray-light' ),
+
+  ( hex: #5C6BC0, var: '--color1',      slug: 'color-1',),
+  ( hex: #3F4EA2, var: '--color1Dark',  slug: 'color-1-dark' ),
+  ( hex: #D3D7EE, var: '--color1Light', slug: 'color-1-light' ),
+
+  ( hex: #2ecc71, var: '--color2',      slug: 'color-2' ),
+  ( hex: #26A65B, var: '--color2Dark',  slug: 'color-2-dark' ),
+  ( hex: #def7e8, var: '--color2Light', slug: 'color-2-light' ),
+
+  ( hex: #e74c3c, var: '--color3',      slug: 'color-3' ),
+  ( hex: #fbdedb, var: '--color3Light', slug: 'color-3-light' ),
+);
+
+// Use this for the Filter value https://codepen.io/hrsetyono/pen/BaxyJQv - Useful to change the color of a PNG 
+// If you don't use PNG icon, feel free to remove the filter
+$filters: (
+  'text-base': invert(18%) sepia(12%) saturate(1870%) hue-rotate(169deg) brightness(94%) contrast(83%),
+  'text-invert': invert(100%) sepia(10%) saturate(7462%) hue-rotate(173deg) brightness(117%) contrast(108%),
+
+  'gray': invert(60%) sepia(0%) saturate(0%) hue-rotate(151deg) brightness(90%) contrast(88%),
+  'gray-dark': invert(35%) sepia(0%) saturate(0%) hue-rotate(193deg) brightness(98%) contrast(89%),
+  'gray-light': invert(100%) sepia(2%) saturate(1493%) hue-rotate(171deg) brightness(114%) contrast(76%),
+
+  'color-1': invert(59%) sepia(80%) saturate(2621%) hue-rotate(178deg) brightness(91%) contrast(87%),
+  'color-1-dark': invert(39%) sepia(9%) saturate(4187%) hue-rotate(163deg) brightness(95%) contrast(86%),
+  'color-1-light': invert(87%) sepia(18%) saturate(184%) hue-rotate(170deg) brightness(105%) contrast(95%),
+
+  'color-2': invert(64%) sepia(63%) saturate(493%) hue-rotate(92deg) brightness(90%) contrast(90%),
+  'color-2-dark': invert(49%) sepia(22%) saturate(1352%) hue-rotate(92deg) brightness(103%) contrast(90%),
+  'color-2-light': invert(98%) sepia(67%) saturate(213%) hue-rotate(65deg) brightness(100%) contrast(95%),
+
+  'color-3': invert(59%) sepia(98%) saturate(5598%) hue-rotate(343deg) brightness(99%) contrast(83%),
+  'color-3-light': invert(96%) sepia(66%) saturate(482%) hue-rotate(292deg) brightness(101%) contrast(97%)
+);
+
+// BRAND COLORS
+// Used in gutenberg/_core-widget.sass
+// $social-colors: (
+//   amazon: #f90,
+//   bandcamp: #1ea0c3,
+//   behance: #0757fe,
+//   chain: #382110,
+//   codepen: #1e1f26,
+//   deviantart: #02e49b,
+//   dribbble: #e94c89,
+//   dropbox: #4280ff,
+//   etsy: #f45800,
+//   facebook: #1977f2,
+//   feed: #382110,
+//   fivehundredpx: #000,
+//   flickr: #0461dd,
+//   foursquare: #e65678,
+//   github: #24292d,
+//   goodreads: #382110,
+//   google: #ea4434,
+//   instagram: #f00075,
+//   lastfm: #e21b24,
+//   linkedin: #0577b5,
+//   line: #03c302,
+//   mail: #f0f0f0,
+//   mastodon: #3288d4,
+//   medium: #02ab6c,
+//   meetup: #f6405f,
+//   patreon: #ff424d,
+//   pinterest: #e60122,
+//   pocket: #ef4155,
+//   reddit: #fe4500,
+//   skype: #0478d7,
+//   snapchat: #fefc00,
+//   soundcloud: #ff5600,
+//   spotify: #1bd760,
+//   telegram: #08c,
+//   tiktok: #000,
+//   tumblr: #011835,
+//   twitch: #6440a4,
+//   twitter: #21a1f3,
+//   vimeo: #1eb7ea,
+//   vk: #4680c2,
+//   wordpress: #3499cd,
+//   jetpack-whatsapp: #25d366,
+//   whatsapp: #25d366,
+//   wechat: #7bb32e,
+//   yelp: #d32422,
+//   youtube: #ff0100
+// );
+
+// COLORS CSS VARIABLE
+:root {
+  @each $c in $colors {
+    $var: map-get($c, 'var');
+    $hex: map-get($c, 'hex');
+    $slug: map-get($c, 'slug');
+
+    #{$var} : #{$hex};
+    // RGB version for transparency
+    // How to use: `rgba(--color1, .5)` which will output `rgba(var(--color1RGB), .5)`
+    #{$var}RGB : #{ red($hex) }, #{ green($hex) }, #{ blue($hex) };
+    #{$var}Filter: map-get($filters, $slug);
+  }
+
+  // Other colors
+  --siteBg      : #f8f9fb;
+  --siteBgColor : #f8f9fb;
+  --panelBg     : #eff1f5;
+
+  --colorAlert      : #e74c3c;
+  --colorAlertLight : #f8cdc9;
+
+  // Backward compatibility for old color names
+  --main: var(--color1);
+  --mainDark: var(--color1Dark);
+  --mainLight: var(--color1Light);
+  --sub: var(--color2);
+  --subDark: var(--color2Dark);
+  --subLight: var(--color2Light);
+  --extra: var(--color3);
+  --extraLight: var(--color3Light);
+}
+
+///// GUTENBERG COLOR CLASSES
+
+[class*="-background-color"] {
+  background-color: var(--bgColor);
+}
+.has-text-color,
+.has-inline-color {
+  color: var(--textColor, var(--text));
+}
+
+@each $c in $colors {
+  $var: map-get($c, 'var');
+  $slug: map-get($c, 'slug');
+  $filter: map-get($filters, $slug);
+
+  .has-#{$slug}-background-color {
+    --bgColor: var(#{$var});
+    --bgColorRGB: var(#{$var}RGB);
+  }
+  .has-#{$slug}-color {
+    --textColor: var(#{$var});
+    --textColorRGB: var(#{$var}RGB);
+    --filterColor: #{$filter};
+  }
+}
diff --git a/assets/css/_helpers.sass b/assets/css/_helpers.sass
@@ -1,5 +1,47 @@
 @use "sass:math"
 
+///// MEDIA QUERY
+//
+// You can use the variable in @media block like this:
+//
+// @media ($below-xs)
+//   ...
+// @media ($above-xs) and ($below-m)
+//   ...
+
+$size-xsmall : 480px
+$size-small  : 768px
+$size-medium : 960px
+$size-large  : 1120px
+
+$below-xs: "max-width:#{ $size-xsmall }"
+$above-xs: "min-width:#{ $size-xsmall + 1px }"
+$below-s: "max-width:#{ $size-small }"
+$above-s: "min-width:#{ $size-small + 1px }"
+$below-m: "max-width:#{ $size-medium }"
+$above-m: "min-width:#{ $size-medium + 1px }"
+$below-l: "max-width:#{ $size-large }"
+$above-l: "min-width:#{ $size-large + 1px }"
+
+$below-nav: $below-s // small navigation breakpoint
+$above-nav: $above-s
+
+$below-adminbar: "max-width:782px"
+$above-adminbar: "min-width:783px"
+
+$portrait: "orientation: portrait"
+$landscape: "orientation: landscape"
+$retina: "min-resolution: 192dpi"
+
+// Media query for below or equal the size
+@function below( $size-px )
+  @return "max-width: #{$size-px}"
+
+// Media query for above the size
+@function above( $size-px )
+  @return "min-width: #{$size-px}"
+
+
 ///// FUNCTIONS
 
 //
@@ -15,16 +57,6 @@
   @if $b and $a
     @return rgbA( $r, $g, $b, $a )
 
-
-// Media query for below or equal the size
-@function below( $size-px )
-  @return "max-width: #{$size-px}"
-
-// Media query for above the size
-@function above( $size-px )
-  @return "min-width: #{$size-px}"
-
-
 ///// MIXINS
 
 // Position
@@ -106,4 +138,4 @@
     border-left-color: $color
   @else if $direction == nw
     border-width: $height $width 0 0
-    border-top-color: $color
+    border-top-color: $color