amotify 0.0.5 → 0.0.7

package/dist/Templates/PlayGround/parts.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayGround = void 0;
-var _global_1 = require("@global");
+var _global_1 = require("../../Global/@export");
 var useEffect = _global_1.React.useEffect, useState = _global_1.React.useState;
-var _atoms_1 = require("@atoms");
-var _mols_1 = require("@mols");
-var _orgs_1 = require("@orgs");
-var _functions_1 = require("@functions");
+var _atoms_1 = require("../../Atoms/@export");
+var _mols_1 = require("../../Molecules/@export");
+var _orgs_1 = require("../../Organisms/@export");
+var _functions_1 = require("../../Functions/@export");
 var PlayGround = function () {
     return (_global_1.React.createElement(_global_1.React.Fragment, null,
         _global_1.React.createElement(_mols_1.Column, { gap: 2 },

package/dist/launch.js

@@ -8,12 +8,12 @@ require("./@types/_");
 var publicURI = 'https://public.comun.jp/';
 exports.publicURI = publicURI;
 require("./@jsminAmotifyExtension/_");
-var _global_1 = require("@global");
-var _atoms_1 = require("@atoms");
-var _mols_1 = require("@mols");
-var _orgs_1 = require("@orgs");
-var _temps_1 = require("@temps");
-var _functions_1 = require("@functions");
+var _global_1 = require("./Global/@export");
+var _atoms_1 = require("./Atoms/@export");
+var _mols_1 = require("./Molecules/@export");
+var _orgs_1 = require("./Organisms/@export");
+var _temps_1 = require("./Templates/@export");
+var _functions_1 = require("./Functions/@export");
 var config_1 = require("./config");
 var amotify = {
     config: config_1.defaultConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
@@ -41,6 +41,7 @@
     "@types/google.maps": "^3.50.0",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.5",
+    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "babel-loader": "^8.2.3",
     "babel-preset-preact": "^2.0.0",
@@ -49,17 +50,17 @@
     "dotenv": "^16.0.3",
     "express": "^4.17.2",
     "jsmin-front": "^0.0.5",
+    "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.8.1",
     "sass": "^1.49.8",
     "sass-loader": "^12.6.0",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.8",
+    "tsc-alias": "^1.8.8",
     "webpack": "^5.69.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
-    "webpack-remove-empty-scripts": "^0.7.3",
-    "@types/react-router": "^5.1.20",
-    "mini-css-extract-plugin": "^2.7.6"
+    "webpack-remove-empty-scripts": "^0.7.3"
   }
-}
+}

package/src/@jsminAmotifyExtension/_.tsx

@@ -0,0 +1,4 @@
+import './variables';
+import './fetch';
+import './formCollect';
+import './spreadSheet';

package/src/@jsminAmotifyExtension/fetch.tsx

@@ -0,0 +1,107 @@
+const fetcher = async ( params: JsminExtension.Fetch.Input & {
+  method: string
+},callback?: JsminExtension.Fetch.callback ) => {
+  let {
+    method,
+    key = $.uuidGen( 16 ),
+    url = '',
+    trafficControl = 500,
+    // trafficControl = 1000,
+    preventMultiRequest = true,
+    topLoader = false,
+    cornerLoader = true,
+    ...Params
+  } = params || {}
+
+  let result: Jsmin.Fetch.Output = await ( async () => {
+    let exist = $.fetch.waitList.includes( key );
+
+    if ( preventMultiRequest && exist ) {
+      return {
+        ok: false,
+        status: 405,
+        statusText: 'NoAcceptedMultiRequests',
+        body: 'NoAcceptedMultiRequests',
+        requestTime: 0,
+        rawData: null as any
+      }
+    }
+
+    $.fetch.waitList = [ ...$.fetch.waitList,key ];
+
+    if ( !url.match( /https?:/ ) ) {
+      url = '/' + url.replace( /^\//,"" );
+
+      Params.headers = {
+        ...$.fetch.defaultHeaders || {},
+        ...Params.headers || {}
+      }
+    }
+
+    amotify.fn.Loader.fn.mini.active( params.key || '' );
+    !topLoader || amotify.fn.Loader.fn.top.active();
+    !cornerLoader || amotify.fn.Loader.fn.corner.active();
+
+    let result = await $.ajax( {
+      method,
+      url,
+      ...Params
+    } );
+    if ( $.fetch.defaultResultCallback ) $.fetch.defaultResultCallback( result );
+
+    if ( trafficControl ) {
+      let { requestTime } = result;
+      if ( requestTime <= trafficControl ) {
+        let CoolDownTime = Number( trafficControl - requestTime );
+        await ( () => {
+          result.requestTime = trafficControl;
+          return new Promise( ( resolve,reject ) => {
+            setTimeout( () => {
+              resolve( void 0 );
+            },CoolDownTime );
+          } );
+        } )();
+      }
+    }
+
+    amotify.fn.Loader.fn.mini.stop( params.key || '' );
+    !topLoader || amotify.fn.Loader.fn.top.stop();
+    !cornerLoader || amotify.fn.Loader.fn.corner.stop();
+    $.fetch.waitList.splice( $.fetch.waitList.findIndex( ( a ) => a == key ),1 );
+    return result;
+  } )();
+
+  if ( callback ) callback( result );
+  return result;
+}
+
+$.fetch = {
+  get: async ( params,callback ) => {
+    return await fetcher( { ...params,method: 'get' },callback );
+  },
+  post: async ( params,callback ) => {
+    return await fetcher( { ...params,method: 'post' },callback );
+  },
+  options: async ( params,callback ) => {
+    return await fetcher( { ...params,method: 'options' },callback );
+  },
+  put: async ( params,callback ) => {
+    return await fetcher( { ...params,method: 'put' },callback );
+  },
+  waitList: [],
+  defaultHeaders: {},
+  defaultResultCallback: ( result ) => {
+    let {
+      status,
+      statusText
+    } = result;
+    if ( status == 500 ) {
+      $.NoticeHttpStatus( {
+        status,statusText,
+        label: <>
+          Internal Server Error
+        </>
+      } );
+    }
+  }
+}

package/src/@jsminAmotifyExtension/formCollect.tsx

@@ -0,0 +1,89 @@
+import {
+  useStore
+} from '@global';
+
+let formProcess = false;
+$.formCollect = async ( form ) => {
+  if ( formProcess ) return {
+    valid: false,
+    data: {}
+  }
+
+  let focusElement: HTMLElement = document.activeElement as any;
+  if ( focusElement ) focusElement.blur();
+
+  formProcess = true;
+  let Inputs = $( `[data-form="${ form }"]` ),
+    totalValid = 1,
+    Values: plainObject = {}
+
+  for ( let index = 0; index < Inputs.length; index++ ) {
+    let Input = Inputs[ index ];
+
+    let { componentId = '' } = Input.dataset;
+    let componentData = useStore.get( componentId );
+
+    if ( componentData && componentData.Refresh ) await componentData.Refresh();
+
+    let {
+      value: displayValue,
+      name,
+      checked,
+      dataset: {
+        value,
+        inputType = '',
+        validation
+      }
+    } = Inputs[ index ] as any;
+    let Value: any = value;
+
+    validation = Number( ( validation ?? 'true' ) == 'true' );
+
+    if ( inputType == 'hidden' ) {
+      if ( Value ) Value = JSON.parse( Value );
+    } else if ( [ 'radio','checkbox','checker' ].includes( inputType ) ) {
+      if ( Value ) {
+        Value = JSON.parse( Value );
+        if ( $.is.array( Value ) ) {
+          Value = Value.map( ( v ) => JSON.parse( v ) )
+        } else {
+          Value = JSON.parse( Value );
+        }
+        if ( inputType == 'radio' ) {
+          Value = Value[ 0 ];
+        }
+        if ( inputType == 'checker' ) {
+          Value = Boolean( Value[ 0 ] );
+        }
+      }
+    } else if ( [ 'chips-single','chips-multi' ].includes( inputType ) ) {
+      Value = JSON.parse( Value );
+      if ( Value.length ) {
+        if ( inputType == 'chips-single' ) Value = Value[ 0 ];
+      }
+    } else if ( inputType == 'time' ) {
+      if ( Value ) Value = JSON.parse( Value );
+    } else if ( inputType == 'select' ) {
+      if ( Value ) Value = JSON.parse( Value );
+    } else if ( inputType == 'file' ) {
+      if ( componentData ) {
+        let files = componentData.Files;
+        Value = files;
+      }
+    } else if ( inputType == 'slider' ) {
+      if ( Value ) Value = JSON.parse( Value );
+    } else if ( inputType == 'switch' ) {
+      Value = checked | 0;
+    }
+    let valid = ( validation ?? 1 ) | 0;
+    totalValid &= valid;
+
+    if ( validation ) Values[ name ] = Value;
+  }
+
+  formProcess = false;
+  return {
+    valid: Boolean( totalValid ),
+    data: Values
+  };
+}

package/src/@jsminAmotifyExtension/spreadSheet.tsx

@@ -0,0 +1,159 @@
+export { }
+import { publicURI } from '../launch';
+
+declare global {
+  var ExcelJS: any;
+}
+{
+  const D: JsminExtension.SpreadSheet.Instance = ( wb,fn ) => {
+    return new ( D.fn as any ).SpreadSheet( wb,fn );
+  }
+  D.fn = D.prototype = {} as any
+  $.extend( {
+    SpreadSheet: function ( workbook: JsminExtension.SpreadSheet.Method,fileName: string ) {
+      this.workbook = workbook;
+      this.fileName = fileName;
+      return this;
+    },
+    getWorkbook: function () {
+      return this.workbook;
+    },
+    updateFileName: function ( fileName: string ) {
+      this.fileName = fileName;
+      return this;
+    },
+    updateMerges: function ( merges: JsminExtension.SpreadSheet.MergeTypes[][] ) {
+      let json = this.toJson() as JsminExtension.SpreadSheet.JsonTypes;
+      json.sheets.forEach( ( sheet,index ) => {
+        let sheetMerges = merges[ index ];
+        const worksheet = this.workbook.getWorksheet( sheet.sheetName );
+        for ( let [ from,to ] of sheetMerges ) {
+          if ( from && to ) worksheet.mergeCells( from + ':' + to );
+        }
+      } );
+    },
+    updateStyles: function ( styles: JsminExtension.SpreadSheet.StyleTypes[][] ) {
+      let json = this.toJson() as JsminExtension.SpreadSheet.JsonTypes;
+      json.sheets.forEach( ( sheet,index ) => {
+        let sheetStyles = styles[ index ];
+        const worksheet = this.workbook.getWorksheet( sheet.sheetName );
+        for ( let style of sheetStyles ) {
+          let {
+            type,
+            target,
+            values
+          } = style;
+          let Targets = $.flatArray( target );
+
+          for ( let [ key,value ] of Object.entries( values ) )
+            for ( let Target of Targets )
+              worksheet[ 'get' + type.toCapital() ]( Target )[ key ] = value;
+        }
+      } );
+    },
+    toJson: function () {
+      let json: any = {
+        fileName: this.fileName,
+        sheets: []
+      };
+      this.workbook.eachSheet( ( sheet: any,id: any ) => {
+        let sheetJson: any = {
+          sheetName: sheet.name,
+          rows: []
+        };
+        sheet.eachRow( ( row: any,rowIndex: any ) => {
+          let [ emp,...values ] = row.values;
+          sheetJson.rows.push( values );
+        } );
+        json.sheets.push( sheetJson );
+      } );
+      return json;
+    },
+    export: async function ( fileType?: 'xlsx' | 'csv' ) {
+      fileType = fileType || 'xlsx';
+
+      const uint8Array = await this.workbook[ fileType ].writeBuffer();
+      const blob = new Blob( [ uint8Array ],{ type: 'application/octet-binary' } );
+      const dummyAnchor = document.createElement( 'a' );
+      dummyAnchor.href = ( window.URL || window.webkitURL ).createObjectURL( blob );
+      dummyAnchor.download = this.fileName + '.' + fileType;
+      dummyAnchor.click();
+      dummyAnchor.remove();
+    },
+  },D );
+
+  ( D.fn as any ).SpreadSheet.prototype = D.fn;
+  ( D.fn as any ).SpreadSheet.prototype.constructor = D;
+
+  $.spreadSheet = {
+    readFromFile: async ( file ) => {
+      if ( !window.ExcelJS ) {
+        await amotify.config.readExtraCDN( publicURI + '@env/@foreign/exceljs.min.js' );
+      }
+      if ( !window.ExcelJS ) return;
+
+      const workbook = new ExcelJS.Workbook();
+      let readFile = await file.read( 'binaryString' );
+      const buffer = ( readFile as any ).target.result;
+      let fileName = file.name.replace( /\.[^/.]+$/,'' );
+      return D( await workbook.xlsx.load( buffer ),fileName );
+    },
+    readFromJson: async ( params ) => {
+      if ( !window.ExcelJS ) {
+        await amotify.config.readExtraCDN( publicURI + '@env/@foreign/exceljs.min.js' );
+      }
+      if ( !window.ExcelJS ) return;
+
+      let {
+        sheets,
+        fileName = ''
+      } = params;
+      fileName = fileName || $.uuidGen();
+
+      const workbook = new ExcelJS.Workbook();
+
+      sheets.forEach( ( sheet,index ) => {
+        let {
+          sheetName,
+          headers = [],
+          rows,
+          merges = [],
+          styles = []
+        } = sheet;
+        sheetName = sheetName || 'シート' + ( index + 1 );
+
+        workbook.addWorksheet( sheetName );
+        const worksheet = workbook.getWorksheet( sheetName );
+
+        let Headers = headers.map( ( header,index ) => {
+          let { key,value } = header;
+          return {
+            key: key,
+            header: value
+          }
+        } );
+
+        worksheet.columns = Headers;
+        worksheet.addRows( rows );
+
+        for ( let [ from,to ] of merges ) {
+          if ( from && to ) worksheet.mergeCells( from + ':' + to );
+        }
+        for ( let style of styles ) {
+          let {
+            type,
+            target,
+            values
+          } = style;
+          let Targets = $.flatArray( target );
+
+          for ( let [ key,value ] of Object.entries( values ) )
+            for ( let Target of Targets )
+              worksheet[ 'get' + type.toCapital() ]( Target )[ key ] = value;
+        }
+      } );
+
+      return D( workbook,fileName );
+    }
+  }
+}

package/src/@jsminAmotifyExtension/variables.tsx

@@ -0,0 +1,130 @@
+$.NoticeHttpStatus = ( params ) => {
+  let {
+    status,
+    statusText,
+    label,
+    ...others
+  } = params;
+
+  if ( status >= 400 ) {
+    others = {
+      backgroundColor: 'nega',
+      ...others,
+    }
+  }
+
+  amotify.fn.SnackBar.add( {
+    children: <amotify.atoms.Box>
+      <amotify.mols.Text.Paragraph>
+        通信ステータス : { status } { statusText }
+      </amotify.mols.Text.Paragraph>
+      <amotify.mols.Text.Normal>
+        { label }
+      </amotify.mols.Text.Normal>
+    </amotify.atoms.Box>,
+    ...others
+  } );
+}
+$.copyToClipboard = async ( rawData ) => {
+  let data = '';
+  if ( $.is.string( rawData ) ) data = rawData
+  else if ( $.is.function( rawData ) ) data = rawData() as any;
+
+  let response = {
+    ok: false,
+    body: 'NotSupported'
+  }
+
+  await ( async () => {
+    let result;
+    if ( navigator.clipboard ) {
+      result = await navigator
+        .clipboard
+        .writeText( data )
+        .then(
+          () => true,
+          () => false
+        )
+      if ( !result ) return;
+    } else {
+      let input = document.createElement( 'input' );
+      $( document.body ).append( input );
+      input.value = data;
+      input.select();
+      result = document.execCommand( 'copy' );
+      document.body.removeChild( input );
+
+      if ( !result ) return;
+    }
+
+    amotify.fn.SnackBar.add( {
+      children: 'クリップボードにコピーしました'
+    } );
+    response = {
+      ok: true,
+      body: ''
+    };
+  } )();
+
+  return response;
+}
+$.isJSXElement = function ( v ): v is JSX.Element {
+  return v.$$typeof === Symbol.for( 'react.element' );
+}
+$.getCurrentLocation = () => {
+  return new Promise( ( resolve,reject ) => {
+    navigator.geolocation.getCurrentPosition( ( position ) => {
+      let {
+        latitude,
+        longitude
+      } = position.coords;
+      resolve( {
+        ok: true,
+        status: 200,
+        body: {
+          lat: latitude,
+          lng: longitude
+        }
+      } );
+    },( error ) => {
+      resolve( {
+        ok: false,
+        status: 500,
+        body: {
+          reason: error
+        }
+      } );
+    } );
+  } );
+}
+$.CDNReader = ( url ) => {
+  return new Promise( ( resolve,reject ) => {
+    let tag = document.createElement( 'script' );
+    tag.src = url;
+    tag.addEventListener( 'load',() => {
+      resolve( 'OK' );
+    } );
+    $( document.body ).append( tag );
+  } );
+}
+$.ImageLoader = ( dataUrl,img ) => {
+  return new Promise( ( resolve,reject ) => {
+    let Img = img ? img : new Image();
+    Img.onload = () => resolve( Img );
+    Img.onerror = ( e ) => reject( e );
+    Img.src = dataUrl;
+  } );
+}
+$.extend( {
+  zen2hanNumber: function ( this: string ) {
+    return this.replace( /[０-９]/g,function ( s: any ) {
+      return String.fromCharCode( s.charCodeAt( 0 ) - 0xFEE0 );
+    } )
+      .replace( /[-－﹣−‐⁃‑‒–—﹘―⎯⏤ーｰ─━]/g,'-' )
+      .replace( /￥/,'¥' )
+      .replace( /、/,',' )
+      .replace( /（/,'(' )
+      .replace( /）/,')' )
+      .replace( /＋/,'+' );
+  }
+},String );

package/src/@styles/@app.scss

@@ -0,0 +1,4 @@
+@use './@variables/customProps' as *;
+@forward './@variables/var';
+@forward './init';
+@forward './UniStyling';

package/src/@styles/@variables/customProps.scss

@@ -0,0 +1,109 @@
+$color-theme: hsl(var(--color-theme-hsl));
+$color-theme-opacity-high : hsla(var(--color-theme-hsl), var(--color-theme-opacity-high));
+$color-theme-opacity-middle : hsla(var(--color-theme-hsl), var(--color-theme-opacity-middle));
+$color-theme-opacity-low : hsla(var(--color-theme-hsl), var(--color-theme-opacity-low));
+$color-theme-opacity-few : hsla(var(--color-theme-hsl), var(--color-theme-opacity-few));
+@function cAlfa($a) {
+  @return hsla(var(--color-theme-hsl), $a );
+}
+$color-theme-lightest : hsl(var(--cH), calc(var(--cS)*1.3), calc(var(--cL) * 1.4));
+$color-theme-lighter : hsl(var(--cH), calc(var(--cS)*1.2), calc(var(--cL) * 1.25));
+$color-theme-lighten : hsl(var(--cH), calc(var(--cS)*1.1), calc(var(--cL) * 1.1));
+$color-theme-darken : hsl(var(--cH), calc(var(--cS)*.9), calc(var(--cL) * 0.9));
+$color-theme-darker : hsl(var(--cH), calc(var(--cS)*.8), calc(var(--cL) * 0.75));
+$color-theme-darkest : hsl(var(--cH), calc(var(--cS)*.7), calc(var(--cL) * 0.6));
+//
+$color-positive : rgba(var(--color-positive-rgb), 1);
+$color-negative : rgba(var(--color-negative-rgb), 1);
+$color-warning : rgba(var(--color-warning-rgb), 1);
+$color-dark : rgba(var(--color-dark-rgb), 1);
+$color-base: rgba(var(--color-base-rgb), 1);
+$color-cloud : rgba(var(--color-cloud-rgb), 1);
+$color-monoPrime : rgba(var(--color-monoPrime-rgb));
+$color-monoSecond : rgba(var(--color-monoSecond-rgb));
+//
+$color-layer1: hsl(var(--color-layer1-hsl));
+$color-layer2: hsl(var(--color-layer2-hsl));
+$color-layer3: hsl(var(--color-layer3-hsl));
+$color-layer4: hsl(var(--color-layer4-hsl));
+$color-layer5: hsl(var(--color-layer5-hsl));
+$color-layer6: hsl(var(--color-layer6-hsl));
+//
+$color-layer-opacity-high : hsla(var(--color-layer4-hsl), .6);
+$color-layer-opacity-middle : hsla(var(--color-layer4-hsl), .4);
+$color-layer-opacity-low : hsla(var(--color-layer4-hsl), .3);
+$color-layer-opacity-few : hsla(var(--color-layer4-hsl), .15);
+// border ish
+$border-thin : 1px solid var(--border-color-thin);
+$border-normal : 1px solid var(--border-color-normal);
+// borderRadius
+$border-radius1 : var(--border-radius1);
+$border-radius1_6 : calc($border-radius1 * 1 / 6);
+$border-radius1_3 : calc($border-radius1 * 1 / 3);
+$border-radius2_3 : calc($border-radius1 * 2 / 3);
+$border-radius2 : var(--border-radius2);
+$border-radius3 : var(--border-radius3);
+$border-radius4 : var(--border-radius4);
+$border-radius5 : var(--border-radius5);
+$border-radius6 : var(--border-radius6);
+$border-radius7 : var(--border-radius7);
+// fontColor
+$font-color1 : rgb(var(--font-color1-rgb));
+$font-color2 : rgb(var(--font-color2-rgb));
+$font-color3 : rgb(var(--font-color3-rgb));
+$font-color4 : rgb(var(--font-color4-rgb));
+$font-color5 : rgb(var(--font-color5-rgb));
+$font-color6 : rgb(var(--font-color6-rgb));
+$font-color-logoTitle : var(--font-color-logoTitle);
+// fontSize
+$font-size0 : var(--font-size0);
+$font-size1 : var(--font-size1);
+$font-size2 : var(--font-size2);
+$font-size3 : var(--font-size3);
+$font-size4 : var(--font-size4);
+$font-size5 : var(--font-size5);
+$font-size6 : var(--font-size6);
+$font-size7 : var(--font-size7);
+$font-size8 : var(--font-size8);
+//
+$shadow-color : var(--sc);
+$shadow0 : 0px 1px 2px 0px rgba(var(--sc), .05);
+$shadow1 : 0px 1px 2px 0px rgba(var(--sc), .3);
+$shadow2 : 0px 2px 4px 0px rgba(var(--sc), .25);
+$shadow3 : 1px 6px 12px rgba(var(--sc), .2);
+$shadow4 : 1rem 1.5rem 3rem rgba(var(--sc), .21);
+$animation-time-short : var(--animation-time1);
+$animation-time-middle : var(--animation-time2);
+$animation-time-long : var(--animation-time3);
+$animation-time-veryLong : var(--animation-time4);
+$animation-style1 : var(--animation-style1);
+$animation-style2 : var(--animation-style2);
+//
+$unit1 : var(--grid-unit);
+$unit1_12 : calc($unit1 * 1 / 12);
+$unit1_6 : calc($unit1 * 1 / 6);
+$unit1_4 : calc($unit1 * 1 / 4);
+$unit1_3 : calc($unit1 * 1 / 3);
+$unit1_2 : calc($unit1 * 1 / 2);
+$unit2_3 : calc($unit1 * 2 / 3);
+$unit3_4 : calc($unit1 * 3 / 4);
+$unit1-5 : calc($unit1 * 3 / 2);
+$unit2 : calc($unit1 * 2);
+$unit2-5 : calc($unit1 * 2.5);
+$unit3 : calc($unit1 * 3);
+$unit3-5 : calc($unit1 * 3.5);
+$unit4 : calc($unit1 * 4);
+$unit6 : calc($unit1 * 6);
+$unit8 : calc($unit1 * 8);
+$unit10 : calc($unit1 * 10);
+$unit12 : calc($unit1 * 12);
+//
+$safe-area-top : var(--safe-area-top);
+$safe-area-bottom : var(--safe-area-bottom);
+$viewHeight : var(--viewHeight);
+$topNavigationHeight : var(--topNavHeight);
+$sideNavigationHeight : var(--sideNavHeight);
+$footerNavigationHeight: var(--footerNavHeight);
+$topBase: var(--topBase);
+$contentHeight : var(--contentHeight);
+$breakPoint : 834px;