@angelscmf/front 1.0.21 → 1.0.23

package/README.md

@@ -5,3 +5,52 @@
 or
 
 > npm i -D @angelscmf/front
+
+
+# Angels' CMF CSS
+
+
+## Angels' Screen Ranges
+
+
+### Super Ranges
+
+.a-mobile-only
+.a-desktops-only
+
+
+### Only Range
+
+.a-mobile-only
+.a-tablet-only
+.a-laptop-only
+.a-desktop-only
+.a-large-only
+.a-extra-only
+
+
+### Range and Less
+
+.a-mobile-only
+.a-tablet-and-less
+.a-laptop-and-less
+.a-desktop-and-less
+.a-large-and-less
+
+
+### Range and More
+
+.a-tablet-and-more
+.a-laptop-and-more
+.a-desktop-and-more
+.a-large-and-more
+.a-extra-only
+
+
+## Angels' Messages
+
+* `<a-alert></a-alert>` (.a-alert, a-brick.a-alert, div.a-alert, p.a-alert, span.a-alert, ul.a-alert)
+* `<a-debug></a-debug>` (.a-debug, a-brick.a-debug, div.a-debug, p.a-debug, span.a-debug, ul.a-debug)
+* `<a-error></a-error>` .a-error, a-brick.a-error, div.a-error, p.a-error, span.a-error, ul.a-error
+* `<a-info></a-info>` (.a-info, a-brick.a-info, div.a-info, p.a-info, span.a-info, ul.a-info)
+* `<a-pass></a-pass>` (.a-pass, a-brick.a-pass, div.a-pass, p.a-pass, span.a-pass, ul.a-pass)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angelscmf/front",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "",
   "license": "ISC",
   "author": "",

package/sass/AngelsDesign.scss

@@ -2,6 +2,14 @@
 @forward 'AngelsTheme';
 @forward 'AngelsPageLayout';
 @forward 'AngelsHTMLElements';
+@forward 'AngelsClasses';
+@forward 'angelsMessages/AngelsAlert';
+@forward 'angelsMessages/AngelsDebug';
+@forward 'angelsMessages/AngelsError';
+@forward 'angelsMessages/AngelsInfo';
+@forward 'angelsMessages/AngelsPass';
+@forward 'AngelsScreenRanges';
 @forward 'angelsTags/a-block';
+@forward 'angelsTags/a-brick';
 @forward 'angelsTags/a-infra';
 @forward 'angelsTags/a-page';

package/sass/_AngelsClasses.scss

@@ -0,0 +1,15 @@
+/**
+ *  Angels' CMF Elements' styles.
+ */
+
+@use "AngelsVariables";
+
+/**
+ * Tech info class for small print information.
+ *
+ *  @example `<div class="a-tech-info">Release: 1.0.0</div>`
+ */
+.a-tech-info {
+    font-size: 10px;
+    font-family: 'Courier New', Courier, monospace;
+}

package/sass/_AngelsHTMLElements.scss

@@ -118,6 +118,7 @@
     }
 
     :root {
+        --a-header1-color: var(--a-headers-color);
         --a-header1-lineHeight: var(--a-headers-lineHeight);
         --a-header1-margin: 0;
         --a-header1-size: #{AngelsVariables.$aFontSize + 6};
@@ -125,13 +126,16 @@
 
     h1,
     h1.a-h1 {
-        color: var(--a-header1-color, var(--a-headers-color));
+        color: var(--a-header1-color);
         font-size: var(--a-header1-size);
+        font-weight: normal;
+        line-height: var(--a-header1-lineHeight);
         margin: var(--a-header1-margin);
         padding: 0;
     }
 
     :root {
+        --a-header2-color: var(--a-headers-color);
         --a-header2-lineHeight: var(--a-headers-lineHeight);
         --a-header2-margin: 0;
         --a-header2-size: #{AngelsVariables.$aFontSize + 5};
@@ -139,15 +143,17 @@
 
     h2,
     h2.a-h2 {
-        color: var(--a-header2-color, var(--a-headers-color));
+        color: var(--a-header2-color);
         font-size: var(--a-header2-size);
         font-weight: normal;
         letter-spacing: 2px;
+        line-height: var(--a-header2-lineHeight);
         margin: var(--a-header2-margin);
         padding: 0;
     }
 
     :root {
+        --a-header3-color: var(--a-headers-color);
         --a-header3-lineHeight: var(--a-headers-lineHeight);
         --a-header3-margin: 0;
         --a-header3-size: #{AngelsVariables.$aFontSize + 4};
@@ -155,15 +161,17 @@
 
     h3,
     h3.a-h3 {
-        color: var(--a-header3-color, var(--a-headers-color));
+        color: var(--a-header3-color);
         font-size: var(--a-header3-size);
         font-weight: normal;
         letter-spacing: 2px;
+        line-height: var(--a-header3-lineHeight);
         margin: var(--a-header3-margin);
         padding: 0;
     }
 
     :root {
+        --a-header4-color: var(--a-headers-color);
         --a-header4-lineHeight: var(--a-headers-lineHeight);
         --a-header4-margin: 0;
         --a-header4-size: #{AngelsVariables.$aFontSize + 3};
@@ -171,12 +179,17 @@
 
     h4,
     h4.a-h4 {
+        color: var(--a-header4-color);
         font-size: var(--a-header4-size);
+        font-weight: normal;
+        letter-spacing: 2px;
+        line-height: var(--a-header4-lineHeight);
         margin: var(--a-header4-margin);
         padding: 0;
     }
 
     :root {
+        --a-header5-color: var(--a-headers-color);
         --a-header5-lineHeight: var(--a-headers-lineHeight);
         --a-header5-margin: 0;
         --a-header5-size: #{AngelsVariables.$aFontSize + 2};
@@ -184,12 +197,17 @@
 
     h5,
     h5.a-h5 {
+        color: var(--a-header5-color);
         font-size: var(--a-header5-size);
+        font-weight: normal;
+        letter-spacing: 2px;
+        line-height: var(--a-header5-lineHeight);
         margin: var(--a-header5-margin);
         padding: 0;
     }
 
     :root {
+        --a-header6-color: var(--a-headers-color);
         --a-header6-lineHeight: var(--a-headers-lineHeight);
         --a-header6-margin: 0;
         --a-header6-size: #{AngelsVariables.$aFontSize + 1};
@@ -197,7 +215,11 @@
 
     h6,
     h6.a-h6 {
+        color: var(--a-header6-color);
         font-size: var(--a-header6-size);
+        font-weight: normal;
+        letter-spacing: 2px;
+        line-height: var(--a-header6-lineHeight);
         margin: var(--a-header6-margin);
         padding: 0;
     }

package/sass/_AngelsScreenRanges.scss

@@ -0,0 +1,105 @@
+@use "AngelsVariables" as *;
+
+.a-mobiles-only {
+
+    @media (min-width: $a-laptop-max-width) {
+        display: none;
+    }
+}
+
+.a-desktops-only {
+
+    @media (min-width: $a-desktop-min-width) {
+        display: none;
+    }
+}
+
+.a-mobile-only {
+    @media (min-width: $a-mobile-min-width) {
+        display: none;
+    }
+}
+
+.a-tablet-only {
+    @media (min-width: $a-tablet-min-width) and (max-width: $a-tablet-max-width) {
+        display: none;
+    }
+}
+
+.a-laptop-only {
+    @media (min-width: $a-laptop-min-width) and (max-width: $a-laptop-max-width) {
+        display: none;
+    }
+}
+
+.a-desktop-only {
+    @media (min-width: $a-desktop-min-width) and (max-width: $a-desktop-max-width) {
+        display: none;
+    }
+}
+
+.a-large-only {
+    @media (min-width: $a-large-min-width) and (max-width: $a-large-max-width) {
+        display: none;
+    }
+}
+
+.a-extra-only {
+    @media (min-width: $a-extra-min-width) {
+        display: none;
+    }
+}
+
+/**
+ * a Range and Less section
+ */
+.a-tablet-and-less {
+    @media (min-width: $a-laptop-min-width) {
+        display: none;
+    }
+}
+
+.a-laptop-and-less {
+    @media (min-width: $a-desktop-min-width) {
+        display: none;
+    }
+}
+
+.a-desktop-and-less {
+    @media (min-width: $a-large-min-width) {
+        display: none;
+    }
+}
+
+.a-large-and-less {
+    @media (min-width: $a-extra-min-width) {
+        display: none;
+    }
+}
+
+/**
+ * a Range and More section
+ */
+.a-tablet-and-more {
+    @media (max-width: $a-mobile-max-width) {
+        display: none;
+    }
+}
+
+.a-laptop-and-more {
+    @media (max-width: $a-tablet-max-width) {
+        display: none;
+    }
+}
+
+.a-desktop-and-more {
+    @media (max-width: $a-laptop-max-width) {
+        display: none;
+    }
+}
+
+.a-large-and-more {
+    @media (max-width: $a-desktop-max-width) {
+        display: none;
+    }
+}

package/sass/_AngelsTheme.scss

@@ -29,6 +29,8 @@
     --a-fontFamily: Verdana, Arial, Helvetica, sans-serif;
     --a-fontSize: 16px;
     --a-lineHeight: 24px;
+    --a-lineHeightHalf: 12px;
+    --a-lineHeightQuarter: 6px;
     --a-note-color: palevioletred;
     --a-textColor: #4B2E2E;
 }

package/sass/_AngelsVariables.scss

@@ -21,7 +21,7 @@ $aFontSize: 16px;
  */
 $a-mobile-min-width: 300px;
 // $a-mobile-max-width: 413.98px;
-$a-mobile-max-width: 533.98px;
+$a-mobile-max-width: 539.98px;
 // $a-tablet-min-width: 414px;
 $a-tablet-min-width: 540px;
 $a-tablet-max-width: 767.98px;

package/sass/angelsMessages/_AngelsAlert.scss

@@ -0,0 +1,38 @@
+:root {
+    --a-alert-space: var(--a-lineHeightHalf);
+    --a-alert-spaceHalf: var(--a-lineHeightQuarter);
+    --a-alert-borderColor: #ff6b6b;
+    --a-alert-background: #fff5f5;
+    --a-alert-color: #d90429;
+}
+
+a-alert,
+div.a-alert,
+p.a-alert {
+    display: block;
+    padding: var(--a-alert-space);
+}
+
+a-brick.a-alert,
+span.a-alert {
+    padding: 0 var(--a-alert-spaceHalf);
+}
+
+ul.a-alert {
+    list-style-type: disc;
+    padding-top: var(--a-alert-space);
+    padding-bottom: var(--a-alert-space);
+}
+
+a-alert,
+.a-alert {
+    box-shadow: inset 0 0 2px 2px var(--a-alert-borderColor);
+    background: var(--a-alert-background);
+    color: var(--a-alert-color);
+    border-radius: var(--a-borderRadius);
+    position: relative;
+
+    &:empty {
+        display: none;
+    }
+}

package/sass/angelsMessages/_AngelsDebug.scss

@@ -0,0 +1,38 @@
+:root {
+    --a-debug-space: var(--a-lineHeightHalf);
+    --a-debug-spaceHalf: var(--a-lineHeightQuarter);
+    --a-debug-borderColor: #f0ad4e;
+    --a-debug-background: #fffaf0;
+    --a-debug-color: #5d3c00;
+}
+
+a-debug,
+div.a-debug,
+p.a-debug {
+    display: block;
+    padding: var(--a-debug-space);
+}
+
+a-brick.a-debug,
+span.a-debug {
+    padding: 0 var(--a-debug-spaceHalf);
+}
+
+ul.a-debug {
+    list-style-type: disc;
+    padding-top: var(--a-debug-space);
+    padding-bottom: var(--a-debug-space);
+}
+
+a-debug,
+.a-debug {
+    box-shadow: inset 0 0 0px 1px var(--a-debug-borderColor);
+    background: var(--a-debug-background);
+    color: var(--a-debug-color);
+    border-radius: var(--a-borderRadius);
+    position: relative;
+
+    &:empty {
+        display: none;
+    }
+}

package/sass/angelsMessages/_AngelsError.scss

@@ -0,0 +1,38 @@
+:root {
+    --a-error-space: var(--a-lineHeightHalf);
+    --a-error-spaceHalf: var(--a-lineHeightQuarter);
+    --a-error-borderColor: #f28b82;
+    --a-error-background: #fff1f0;
+    --a-error-color: #c0392b;
+}
+
+a-error,
+div.a-error,
+p.a-error {
+    display: block;
+    padding: var(--a-error-space);
+}
+
+a-brick.a-error,
+span.a-error {
+    padding: 0 var(--a-error-spaceHalf);
+}
+
+ul.a-error {
+    list-style-type: disc;
+    padding-top: var(--a-error-space);
+    padding-bottom: var(--a-error-space);
+}
+
+a-error,
+.a-error {
+    box-shadow: inset 0 0 0px 1px var(--a-error-borderColor);
+    background: var(--a-error-background);
+    color: var(--a-error-color);
+    border-radius: var(--a-borderRadius);
+    position: relative;
+
+    &:empty {
+        display: none;
+    }
+}

package/sass/angelsMessages/_AngelsInfo.scss

@@ -0,0 +1,38 @@
+:root {
+    --a-info-space: var(--a-lineHeightHalf);
+    --a-info-spaceHalf: var(--a-lineHeightQuarter);
+    --a-info-borderColor: #4dabf7;
+    --a-info-background: #f0f8ff;
+    --a-info-color: #1c5d99;
+}
+
+a-info,
+div.a-info,
+p.a-info {
+    display: block;
+    padding: var(--a-info-space);
+}
+
+a-brick.a-info,
+span.a-info {
+    padding: 0 var(--a-info-spaceHalf);
+}
+
+ul.a-info {
+    list-style-type: disc;
+    padding-top: var(--a-info-space);
+    padding-bottom: var(--a-info-space);
+}
+
+a-info,
+.a-info {
+    box-shadow: inset 0 0 0px 1px var(--a-info-borderColor);
+    background: var(--a-info-background);
+    color: var(--a-info-color);
+    border-radius: var(--a-borderRadius);
+    position: relative;
+
+    &:empty {
+        display: none;
+    }
+}

package/sass/angelsMessages/_AngelsPass.scss

@@ -0,0 +1,38 @@
+:root {
+    --a-pass-space: var(--a-lineHeightHalf);
+    --a-pass-spaceHalf: var(--a-lineHeightQuarter);
+    --a-pass-borderColor: #38d9a9;
+    --a-pass-background: #f0fffa;
+    --a-pass-color: #0b8f6a;
+}
+
+a-pass,
+div.a-pass,
+p.a-pass {
+    display: block;
+    padding: var(--a-pass-space);
+}
+
+a-brick.a-pass,
+span.a-pass {
+    padding: 0 var(--a-pass-spaceHalf);
+}
+
+ul.a-pass {
+    list-style-type: disc;
+    padding-top: var(--a-pass-space);
+    padding-bottom: var(--a-pass-space);
+}
+
+a-pass,
+.a-pass {
+    box-shadow: inset 0 0 0px 1px var(--a-pass-borderColor);
+    background: var(--a-pass-background);
+    color: var(--a-pass-color);
+    border-radius: var(--a-borderRadius);
+    position: relative;
+
+    &:empty {
+        display: none;
+    }
+}

package/sass/angelsTags/_a-brick.scss

@@ -0,0 +1,3 @@
+a-brick {
+    display: inline-block;
+}