unit.gl 0.0.30 → 0.0.32

package/css/unit.gl.css

@@ -268,6 +268,87 @@ html {
   display: inline-block;
 }
 
+/**
+* unit.gl
+*
+* @description     Layout Engine
+* @author          Scape Agency (https://www.scape.agency)
+* @version         v1.0.0
+* @copyright       2020-2024 Scape Agency (https://www.scape.agency)
+* @website         https://www.unit.gl/
+* @repository      https://github.com/scape-agency/unit.gl/
+* @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
+*/
+/**
+* unit.gl
+*
+* @description     Layout Engine
+* @author          Scape Agency (https://www.scape.agency)
+* @version         v1.0.0
+* @copyright       2020-2024 Scape Agency (https://www.scape.agency)
+* @website         https://www.unit.gl/
+* @repository      https://github.com/scape-agency/unit.gl/
+* @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
+*/
+/**
+* unit.gl
+*
+* @description     Layout Engine
+* @author          Scape Agency (https://www.scape.agency)
+* @version         v1.0.0
+* @copyright       2020-2024 Scape Agency (https://www.scape.agency)
+* @website         https://www.unit.gl/
+* @repository      https://github.com/scape-agency/unit.gl/
+* @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
+*/
+.guide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.guide_graph {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background-size: 0.25rem 0.25rem;
+  background-image: repeating-linear-gradient(to bottom, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%), repeating-linear-gradient(to right, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%);
+}
+
+.guide_baseline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background-size: 100% 1.5rem;
+  background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%);
+}
+
+/**
+* unit.gl
+*
+* @description     Layout Engine
+* @author          Scape Agency (https://www.scape.agency)
+* @version         v1.0.0
+* @copyright       2020-2024 Scape Agency (https://www.scape.agency)
+* @website         https://www.unit.gl/
+* @repository      https://github.com/scape-agency/unit.gl/
+* @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
+*/
 /**
 * unit.gl
 *
@@ -466,65 +547,6 @@ html, body {
   margin: 0;
 }
 
-/**
-* unit.gl
-*
-* @description     Layout Engine
-* @author          Scape Agency (https://www.scape.agency)
-* @version         v1.0.0
-* @copyright       2020-2024 Scape Agency (https://www.scape.agency)
-* @website         https://www.unit.gl/
-* @repository      https://github.com/scape-agency/unit.gl/
-* @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
-*/
-/**
-* unit.gl
-*
-* @description     Layout Engine
-* @author          Scape Agency (https://www.scape.agency)
-* @version         v1.0.0
-* @copyright       2020-2024 Scape Agency (https://www.scape.agency)
-* @website         https://www.unit.gl/
-* @repository      https://github.com/scape-agency/unit.gl/
-* @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
-*/
-.guide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  pointer-events: none;
-  z-index: 9999;
-}
-
-.guide_graph {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  pointer-events: none;
-  z-index: 9999;
-  background-size: 0.25rem 0.25rem;
-  background-image: repeating-linear-gradient(to bottom, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%), repeating-linear-gradient(to right, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%);
-}
-
-.guide_baseline {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  pointer-events: none;
-  z-index: 9999;
-  background-size: 100% 1.5rem;
-  background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%);
-}
-
 /**
 * unit.gl
 *

package/css/unit.gl.min.css

@@ -1,2 +1,2 @@
-:root{--q:$q}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(12px + unit_strip(12px)*(100vw - 320px)/unit_strip(1120px))}}@media screen and (min-width:1440px){html{font-size:24px}}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}.guide,.guide_graph{height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph{background-image:repeating-linear-gradient(180deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%);background-size:.25rem .25rem}.guide_baseline{background-image:repeating-linear-gradient(180deg,cyan 0 1px,transparent 1px 100%);background-size:100% 1.5rem;height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}
+:root{--q:$q}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(12px + unit_strip(12px)*(100vw - 320px)/unit_strip(1120px))}}@media screen and (min-width:1440px){html{font-size:24px}}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}.guide,.guide_graph{height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph{background-image:repeating-linear-gradient(180deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%);background-size:.25rem .25rem}.guide_baseline{background-image:repeating-linear-gradient(180deg,cyan 0 1px,transparent 1px 100%);background-size:100% 1.5rem;height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
 /*# sourceMappingURL=to.css.map */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unit.gl",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "Layout Engine.",
   "keywords": [
     "unit.gl",

package/scss/index.scss

@@ -32,17 +32,7 @@
 @forward "variables";
 @forward "mixins";
 
-
-
-
 @forward "reset";
 @forward "global";
 
-
-
-@forward "helper";
-@forward "guide";
-
-
-
 @forward "classes";

package/scss/mixins/_device.scss

@@ -0,0 +1,42 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+@use "../variables" as *;
+
+/// Generalized Media Query Mixin
+/// Creates a media query based on device attributes defined in $devices map.
+/// @param $device - The key name of the device in the $devices map.
+/// Usage Example:
+/// @include device-media-query('iphone-6-7-8') {// Styles specific to iPhone 6, 7, 8}
+@mixin device-media-query($device) {
+    // Retrieve the device attributes from the map
+    $attributes: map-get($devices, $device);
+    
+    // Extract individual attributes with default fallbacks
+    $min-width: if(map-has-key($attributes, "min-width"), map-get($attributes, "min-width"), null);
+    $max-width: if(map-has-key($attributes, "max-width"), map-get($attributes, "max-width"), null);
+    $pixel-ratio: if(map-has-key($attributes, "pixel-ratio"), map-get($attributes, "pixel-ratio"), 1); // Default to 1
+
+    // Construct the media query string
+    $media-query: "only screen";
+    $media-query: if($min-width != null, $media-query + " and (min-device-width: #{$min-width})", $media-query);
+    $media-query: if($max-width != null, $media-query + " and (max-device-width: #{$max-width})", $media-query);
+    $media-query: if($pixel-ratio != 1, $media-query + " and (-webkit-device-pixel-ratio: #{$pixel-ratio})", $media-query);
+
+    // Apply the media query
+    @media #{$media-query} {
+        @content;
+    }
+}

package/scss/{display/_display_orientation.scss → mixins/_display.scss}

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 
+@use "../variables" as *;
 
 
 
@@ -61,14 +62,11 @@
 /// Mixin for targeting specific aspect ratios
 /// @param $width - Width of the aspect ratio
 /// @param $height - Height of the aspect ratio
-@mixin aspect-ratio($width, $height) {
-    @media (aspect-ratio: #{$width}/#{$height}) {
-        @content;
-    }
-}
-
-
-
+// @mixin aspect-ratio($width, $height) {
+//     @media (aspect-ratio: #{$width}/#{$height}) {
+//         @content;
+//     }
+// }
 
 
 

package/scss/{_guide.scss → mixins/_guide.scss}

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 
-@use "variables" as *;
+@use "../variables" as *;
 
 // ============================================================================
 // Utilities | Guides

package/scss/{_helper.scss → mixins/_helper.scss}

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 
-@use "variables" as *;
+@use "../variables" as *;
 
 
 

package/scss/mixins/_index.scss

@@ -17,3 +17,7 @@
 @forward "paper";
 @forward "view";
 @forward "ratio";
+@forward "device";
+@forward "display";
+@forward "guide";
+@forward "helper";

package/scss/{display → variables}/_device.scss

@@ -15,8 +15,6 @@
 
 
 
-
-
 // Device Attribute Map
 $devices: (
     // iPhones
@@ -64,7 +62,7 @@ $devices: (
     // ------------------------------------------------------------------------
     "macbook-air":      ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2),
     "macbook-pro":      ("min-width": 1680px, "max-width": 3072px, "pixel-ratio": 2),
-    "imac":             ("min-width": 1920px, "max-width": 5120px, "pixel-ratio": 2)
+    "imac":             ("min-width": 1920px, "max-width": 5120px, "pixel-ratio": 2),
 
     // Additional Devices
     // ------------------------------------------------------------------------
@@ -75,33 +73,8 @@ $devices: (
     "xiaomi-mi9":       ("min-width":  393px, "max-width":  851px, "pixel-ratio": 3),
     "surface-book":     ("min-width": 1500px, "max-width": 2000px, "pixel-ratio": 2),
     "dell-xps":         ("min-width": 1920px, "max-width": 3840px, "pixel-ratio": 2),
-    "lenovo-thinkpad":  ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2)
+    "lenovo-thinkpad":  ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2),
 
 );
 
 
-/// Generalized Media Query Mixin
-/// Creates a media query based on device attributes defined in $devices map.
-/// @param $device - The key name of the device in the $devices map.
-/// Usage Example:
-/// @include device-media-query('iphone-6-7-8') {// Styles specific to iPhone 6, 7, 8}
-@mixin device-media-query($device) {
-    // Retrieve the device attributes from the map
-    $attributes: map-get($devices, $device);
-    
-    // Extract individual attributes with default fallbacks
-    $min-width: if(map-has-key($attributes, "min-width"), map-get($attributes, "min-width"), null);
-    $max-width: if(map-has-key($attributes, "max-width"), map-get($attributes, "max-width"), null);
-    $pixel-ratio: if(map-has-key($attributes, "pixel-ratio"), map-get($attributes, "pixel-ratio"), 1); // Default to 1
-
-    // Construct the media query string
-    $media-query: "only screen";
-    $media-query: if($min-width != null, $media-query + " and (min-device-width: #{$min-width})", $media-query);
-    $media-query: if($max-width != null, $media-query + " and (max-device-width: #{$max-width})", $media-query);
-    $media-query: if($pixel-ratio != 1, $media-query + " and (-webkit-device-pixel-ratio: #{$pixel-ratio})", $media-query);
-
-    // Apply the media query
-    @media #{$media-query} {
-        @content;
-    }
-}

package/scss/variables/_index.scss

@@ -13,6 +13,10 @@
 // limitations under the License.
 
 
+// ============================================================================
+// Unit.gl | Variables
+// ============================================================================
+
 @forward "layer";
 @forward "paper";
 
@@ -22,3 +26,7 @@
 @forward "unit";
 
 @forward "scale";
+
+@forward "view";
+
+@forward "device";

package/scss/guides/_index.scss

@@ -1,13 +0,0 @@
-// Copyright 2024 Scape Agency BV
-
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-
-// http://www.apache.org/licenses/LICENSE-2.0
-
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.

package/scss/math/_index.scss

@@ -1,13 +0,0 @@
-// Copyright 2024 Scape Agency BV
-
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-
-// http://www.apache.org/licenses/LICENSE-2.0
-
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.