unit.gl 0.0.28 → 0.0.30

package/scss/display/_device.scss

@@ -1,10 +1,10 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
-// Licensed under the Apache License, Version 2.00 (the "License");
+// 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.00
+// 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,
@@ -16,6 +16,7 @@
 
 
 
+
 // Device Attribute Map
 $devices: (
     // iPhones

package/scss/display/_display_orientation.scss

@@ -1,10 +1,10 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
-// Licensed under the Apache License, Version 2.00 (the "License");
+// 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.00
+// 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,
@@ -17,8 +17,6 @@
 
 
 
-
-
 // Mixins for Media Queries Based on Device Orientation
 // ============================================================================
 // These mixins provide a convenient way to apply styles based on the orientation of the device.

package/scss/display/_index.scss

@@ -0,0 +1,13 @@
+// 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/guides/_index.scss

@@ -0,0 +1,13 @@
+// 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/index.scss

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// 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.
@@ -13,8 +13,6 @@
 // limitations under the License.
 
 
-@charset "utf-8";
-
 /**
 * unit.gl
 *
@@ -27,28 +25,24 @@
 * @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
 */
 
-@use "sass:math";
-
+@charset "utf-8";
 
+@use "sass:math";
 
-@import "_reset";
-@import "_global";
-@import "_layer";
+@forward "variables";
+@forward "mixins";
 
 
-@import "_paper";
 
 
-@import "_view";
+@forward "reset";
+@forward "global";
 
-@import "_unit_functions";
-@import "_unit";
 
 
-// @import "_scale";
+@forward "helper";
+@forward "guide";
 
-// @import "_helper";
-// @import "_guide";
 
 
-// @import "base/base";
+@forward "classes";

package/scss/math/{_math_arithmetic.scss → _arithmetic.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// 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.

package/scss/math/_index.scss

@@ -0,0 +1,13 @@
+// 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/{_math_ratio.scss → _ratio.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// 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.

package/scss/math/{_math_scale.scss → _scale.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// 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.

package/scss/math/{_math_sequence.scss → _sequence.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// 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.

package/scss/mixins/_index.scss

@@ -0,0 +1,19 @@
+// 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.
+
+
+
+@forward "paper";
+@forward "view";
+@forward "ratio";

package/scss/mixins/_paper.scss

@@ -0,0 +1,35 @@
+// 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.
+
+
+// ============================================================================
+// Paper Module
+// ============================================================================
+
+@use "../variables" as *;
+
+// Apply Function
+// ============================================================================
+
+@mixin set_paper_size($size) {
+    @if map-has-key($paper-sizes, $size) {
+        $size-map: map-get($paper-sizes, $size);
+        width: map-get($size-map, width);
+        height: map-get($size-map, height);
+    } @else {
+        @warn "Invalid paper size: #{$size}.";
+    }
+}
+
+

package/scss/mixins/_ratio.scss

@@ -0,0 +1,171 @@
+// 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 *;
+
+
+// ============================================================================
+// Layout | Ratio
+// ============================================================================
+
+// Aspect Ratio Box:
+// Creates a container with a specific aspect ratio.
+// @mixin aspect-ratio($width, $height) {
+//   position: relative;
+//   &:before {
+//       content: '';
+//       display: block;
+//       padding-top: calc(($height / $width) * 100%);
+//   }
+//   > * {
+//       position: absolute;
+//       top: 0;
+//       left: 0;
+//       right: 0;
+//       bottom: 0;
+//   }
+// }
+
+// .ratio-box {
+//   @include aspect-ratio(16, 9);
+// }
+
+@mixin ratio ($val01, $val02) {
+    aspect-ratio: calc($val01 / $val02);
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+    // vertical-align: top;
+}
+
+@mixin ratio_1x1   { @include ratio(1, 1); }
+@mixin ratio_1x2   { @include ratio(1, 2); }
+@mixin ratio_2x1   { @include ratio(2, 1); }
+@mixin ratio_1x3   { @include ratio(1, 3); }
+@mixin ratio_3x1   { @include ratio(3, 1); }
+@mixin ratio_1x4   { @include ratio(1, 4); }
+@mixin ratio_4x1   { @include ratio(4, 1); }
+@mixin ratio_3x2   { @include ratio(3, 2); }
+@mixin ratio_2x3   { @include ratio(2, 3); }
+@mixin ratio_4x3   { @include ratio(4, 3); }
+@mixin ratio_3x4   { @include ratio(3, 4); }
+@mixin ratio_16x9  { @include ratio(16, 9); }
+@mixin ratio_16x10 { @include ratio(16, 10); }
+
+.ratio_1x1   { @include ratio_1x1; }
+.ratio_1x2   { @include ratio_1x2; }
+.ratio_2x1   { @include ratio_2x1; }
+.ratio_1x3   { @include ratio_1x3; }
+.ratio_3x1   { @include ratio_3x1; }
+.ratio_1x4   { @include ratio_1x4; }
+.ratio_4x1   { @include ratio_4x1; }
+.ratio_3x2   { @include ratio_3x2; }
+.ratio_2x3   { @include ratio_2x3; }
+.ratio_4x3   { @include ratio_4x3; }
+.ratio_3x4   { @include ratio_3x4; }
+.ratio_16x9  { @include ratio_16x9; }
+.ratio_16x10 { @include ratio_16x10; }
+
+
+// . 
+// ----------------------------------------------------------------------------
+
+@mixin ratio_p ($val01) {
+    padding-bottom: $val01;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+    // vertical-align: top;
+}
+
+@mixin ratio_p_1x1   { @include ratio_p(100.00%); }
+@mixin ratio_p_1x2   { @include ratio_p(200.00%); }
+@mixin ratio_p_2x1   { @include ratio_p( 50.00%); }
+@mixin ratio_p_1x3   { @include ratio_p(300.00%); }
+@mixin ratio_p_3x1   { @include ratio_p( 33.33%); }
+@mixin ratio_p_1x4   { @include ratio_p(400.00%); }
+@mixin ratio_p_4x1   { @include ratio_p( 25.00%); }
+@mixin ratio_p_2x3   { @include ratio_p(150.00%); }
+@mixin ratio_p_3x2   { @include ratio_p( 66.67%); }
+@mixin ratio_p_3x4   { @include ratio_p(133.33%); }
+@mixin ratio_p_4x3   { @include ratio_p( 75.00%); }
+@mixin ratio_p_16x9  { @include ratio_p( 56.25%); }
+@mixin ratio_p_16x10 { @include ratio_p( 62.50%); }
+
+.ratio_p_1x1   { @include ratio_p_1x1; }
+.ratio_p_1x2   { @include ratio_p_1x2; }
+.ratio_p_2x1   { @include ratio_p_2x1; }
+.ratio_p_1x3   { @include ratio_p_1x3; }
+.ratio_p_3x1   { @include ratio_p_3x1; }
+.ratio_p_1x4   { @include ratio_p_1x4; }
+.ratio_p_4x1   { @include ratio_p_4x1; }
+.ratio_p_3x2   { @include ratio_p_3x2; }
+.ratio_p_2x3   { @include ratio_p_2x3; }
+.ratio_p_4x3   { @include ratio_p_4x3; }
+.ratio_p_3x4   { @include ratio_p_3x4; }
+.ratio_p_16x9  { @include ratio_p_16x9; }
+.ratio_p_16x10 { @include ratio_p_16x10; }
+
+
+
+
+  // https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss
+  // Credit: Nicolas Gallagher and SUIT CSS.
+
+// .ratio {
+//     position: relative;
+//     width: 100%;
+
+//     &::before {
+//         display: block;
+//         padding-top: var(--#{$prefix}aspect-ratio);
+//         content: "";
+//     }
+
+//     > * {
+//         position: absolute;
+//         top: 0;
+//         left: 0;
+//         width: 100%;
+//         height: 100%;
+//     }
+// }
+
+// @each $key, $ratio in $aspect-ratios {
+//     .ratio-#{$key} {
+//         --#{$prefix}aspect-ratio: #{$ratio};
+//     }
+// }
+
+
+// @mixin aspect-ratio($width, $height) {
+//     position: relative;
+
+//     &::before {
+//         display: block;
+//         content: "";
+//         width: 100%;
+//         padding-top: calc((#{$height} / #{$width}) * 100%);
+//     }
+
+//     > * {
+//         position: absolute;
+//         top: 0;
+//         right: 0;
+//         bottom: 0;
+//         left: 0;
+//     }
+// }

package/scss/mixins/_view.scss

@@ -0,0 +1,79 @@
+// 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 *;
+
+// ============================================================================
+// Media | Screen
+// ============================================================================
+
+// Media Query Mixins
+// ============================================================================
+
+@mixin breakpoint($size) {
+    @if map-has-key($breakpoints, $size) {
+        @media (min-width: map-get($breakpoints, $size)) {
+            @content;
+        }
+    } @else {
+        @warn "Invalid breakpoint: #{$size}.";
+    }
+}
+
+@mixin media_xs {
+    @media (min-width: $media_xs) { @content; }
+}
+  
+@mixin media_sm {
+    @media (min-width: $media_sm) { @content; }
+}
+
+
+@mixin media_md {
+    @media (min-width: $media_md) { @content; }
+}
+  
+@mixin media_lg {
+    @media (min-width: $media_lg) { @content; }
+}
+  
+
+@mixin media_xl {
+    @media (min-width: $media_xl) { @content; }
+}
+  
+@mixin media_sl {
+    @media (min-width: $media_sl) { @content; }
+}
+  
+
+// Example
+// @include breakpoint(md) {
+//     // Styles for medium screens and up
+// }
+  
+
+// Syntax
+// @media media type and (condition: breakpoint) {
+//   // CSS rules
+// }
+
+// @media screen, print {
+//     /* … */
+//   }
+
+// @media (min-width: 30em) and (orientation: landscape) {
+//     /* … */
+//   }

package/scss/variables/_index.scss

@@ -0,0 +1,24 @@
+// 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.
+
+
+@forward "layer";
+@forward "paper";
+
+@forward "unit_conversion";
+@forward "unit_functions";
+
+@forward "unit";
+
+@forward "scale";

package/scss/{_layer.scss → variables/_layer.scss}

@@ -1,4 +1,4 @@
-// Copyright 2020 Scape Agency BV
+// 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.
@@ -14,7 +14,6 @@
 
 
 
-
 /// Layer Map
 /// Z-index Layers
 $layers: (

package/scss/{_paper.scss → variables/_paper.scss}

@@ -1,10 +1,10 @@
-// Copyright 2020 Scape Agency BV
+// Copyright 2024 Scape Agency BV
 
-// Licensed under the Apache License, Version 2.00 (the "License");
+// 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.00
+// 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,
@@ -306,109 +306,3 @@ $paper_sizes: (
 ) !default;
 
 
-// Apply Function
-// ============================================================================
-
-@mixin set_paper_size($size) {
-    @if map-has-key($paper-sizes, $size) {
-        $size-map: map-get($paper-sizes, $size);
-        width: map-get($size-map, width);
-        height: map-get($size-map, height);
-    } @else {
-        @warn "Invalid paper size: #{$size}.";
-    }
-}
-
-
-$paper_size_ansi_a: map-get($paper_sizes, 'ansi_a');
-$paper_size_ansi_b: map-get($paper_sizes, 'ansi_b');
-$paper_size_ansi_c: map-get($paper_sizes, 'ansi_c');
-$paper_size_ansi_d: map-get($paper_sizes, 'ansi_d');
-$paper_size_ansi_e: map-get($paper_sizes, 'ansi_e');
-
-$paper_size_ansi_a_width: map-get($paper_size_ansi_a, width);
-$paper_size_ansi_a_height: map-get($paper_size_ansi_a, height);
-
-.paper {
-    &.ansi_a {
-      width: map-get($paper_size_ansi_a, width);
-      height: map-get($paper_size_ansi_a, height);
-    }
-
-    // Add similar classes for other sizes...
-}
-  
-// Usage
-// ============================================================================
-
-.paper {
-
-    // Q Series
-    // ------------------------------------------------------------------------
-    &.q0    { @include set_paper_size("q0"); }
-    &.q1    { @include set_paper_size("q1"); }
-    &.q2    { @include set_paper_size("q2"); }
-    &.q3    { @include set_paper_size("q3"); }
-    &.q4    { @include set_paper_size("q4"); }
-    &.q5    { @include set_paper_size("q5"); }
-    &.q6    { @include set_paper_size("q6"); }
-    &.q7    { @include set_paper_size("q7"); }
-    &.q8    { @include set_paper_size("q8"); }
-    &.q9    { @include set_paper_size("q9"); }
-    &.q10   { @include set_paper_size("q10"); }
-
-    // ISO A Series
-    // ------------------------------------------------------------------------
-    &.iso_a0    { @include set_paper_size("iso_a0"); }
-    &.iso_a1    { @include set_paper_size("iso_a1"); }
-    &.iso_a2    { @include set_paper_size("iso_a2"); }
-    &.iso_a3    { @include set_paper_size("iso_a3"); }
-    &.iso_a4    { @include set_paper_size("iso_a4"); }
-    &.iso_a5    { @include set_paper_size("iso_a5"); }
-    &.iso_a6    { @include set_paper_size("iso_a6"); }
-    &.iso_a7    { @include set_paper_size("iso_a7"); }
-    &.iso_a8    { @include set_paper_size("iso_a8"); }
-    &.iso_a9    { @include set_paper_size("iso_a9"); }
-    &.iso_a10   { @include set_paper_size("iso_a10"); }
-
-}
-
-// Function to calculate ISO paper sizes
-// @function iso-paper-size($number) {
-//     $base-width:   841mm;
-//     $base-height: 1189mm;
-
-//     @for $i from 0 through $number {
-//         $base-width: $base-width / if($i > 0, 2, 1);
-//         $base-height: $base-height / if($i > 0 and $i % 2 == 0, 2, 1);
-//     }
-
-//     @return (width: $base-width, height: $base-height);
-// }
-
-
-// Function to calculate ISO B-series paper sizes
-// @function iso-paper-size-b($number) {
-//     $base-width: 1000mm; // Approximate base width for B0
-//     $base-height: 1414mm; // Approximate base height for B0
-  
-//     @for $i from 0 through $number {
-//       $base-width: $base-width / if($i > 0, sqrt(2), 1);
-//       $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
-//     }
-  
-//     @return (width: $base-width, height: $base-height);
-//   }
-
-// Function to calculate ISO C-series paper sizes
-// @function iso-paper-size-c($number) {
-//     $base-width: 917mm; // Approximate base width for C0
-//     $base-height: 1297mm; // Approximate base height for C0
-  
-//     @for $i from 0 through $number {
-//       $base-width: $base-width / if($i > 0, sqrt(2), 1);
-//       $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1);
-//     }
-  
-//     @return (width: $base-width, height: $base-height);
-//   }