tonyair
/
webpack-bootstrap-ui-kit
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

FIX: linting

This commit is contained in:
Tony Air 2021-08-18 20:38:12 +02:00
parent c486468b06
commit ac87faa1a8
46 changed files with 1537 additions and 1579 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/app_map.api.css vendored
View File

@ -1 +1 @@
.mapAPI-map{height:30rem}.mapboxgl-popup{display:flex;font-size:.8rem;height:7rem;left:0;line-height:1.2em;pointer-events:none;position:absolute;top:0;width:16rem;z-index:4}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-content{background:#fff;border-radius:.25rem;box-shadow:0 .1rem .8rem 0 rgba(0,0,0,.4);color:#212529;min-height:5rem;min-width:16rem;padding:.8rem;pointer-events:auto;position:relative}.mapboxgl-popup-close-button{border-top-right-radius:.25rem;font-size:2rem;padding:.5rem;position:absolute;right:0;top:0;z-index:2}.mapboxgl-popup-close-button:focus,.mapboxgl-popup-close-button:hover{background:#0d6efd;color:#fff}.mapboxgl-popup-tip{border:.8rem solid transparent;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-marker{align-items:flex-end;color:#0d6efd;cursor:pointer;display:flex;font-size:30px;height:30px;justify-content:center;line-height:1em;text-align:center;width:30px}.mapboxgl-marker .fab,.mapboxgl-marker .far,.mapboxgl-marker .fas,.mapboxgl-marker .marker-icon{animation:pulse .8s linear infinite}.mapboxgl-cluster{align-items:center;animation:pulse .8s linear infinite;background:#0dcaf0;border-radius:100%;color:color-yiq(#0dcaf0);display:flex;font-size:1.2rem;font-weight:700}.mapboxgl-cluster:after,.mapboxgl-cluster:before{background:#0dcaf0;border-radius:100%;content:"";display:block;height:140%;left:50%;opacity:.2;position:absolute;top:50%;transform:translate(-50%,-50%);width:140%;z-index:-1}.mapboxgl-cluster:after{height:180%;width:180%} .mapAPI-map{height:30rem}.mapboxgl-popup{display:flex;font-size:.8rem;height:7rem;left:0;line-height:1.2em;pointer-events:none;position:absolute;top:0;width:16rem;z-index:4}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-content{background:#fff;border-radius:.25rem;box-shadow:0 .1rem .8rem 0 rgba(0,0,0,.4);color:#212529;min-height:5rem;min-width:16rem;padding:.8rem;pointer-events:auto;position:relative}.mapboxgl-popup-close-button{border-top-right-radius:.25rem;font-size:2rem;padding:.5rem;position:absolute;right:0;top:0;z-index:2}.mapboxgl-popup-close-button:focus,.mapboxgl-popup-close-button:hover{background:#0d6efd;color:#fff}.mapboxgl-popup-tip{border:.8rem solid transparent;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:0;border-top-color:#fff}.mapboxgl-marker{align-items:flex-end;color:#0d6efd;cursor:pointer;display:flex;font-size:30px;height:30px;justify-content:center;line-height:1em;text-align:center;width:30px}.mapboxgl-marker .fab,.mapboxgl-marker .far,.mapboxgl-marker .fas,.mapboxgl-marker .marker-icon{animation:pulse .8s linear infinite}.mapboxgl-cluster{align-items:center;animation:pulse .8s linear infinite;background:#0dcaf0;border-radius:100%;color:color-yiq(#0dcaf0);display:flex;font-size:1.2rem;font-weight:700}.mapboxgl-cluster:after,.mapboxgl-cluster:before{background:#0dcaf0;border-radius:100%;content:"";display:block;height:140%;left:50%;opacity:.2;position:absolute;top:50%;transform:translate(-50%,-50%);width:140%;z-index:-1}.mapboxgl-cluster:after{height:180%;width:180%}

2
dist/index.html vendored
View File

@ -1,4 +1,4 @@
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1629163289846"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><script defer="defer" src="js/app_map.api.js"></script><link href="css/app.css" rel="stylesheet"/><link href="css/app_map.api.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../img/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11 <!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1629311676872"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><script defer="defer" src="js/app_map.api.js"></script><link href="css/app.css" rel="stylesheet"/><link href="css/app_map.api.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../img/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
]><div class="main-bn alert alert-danger" role="alert"> ]><div class="main-bn alert alert-danger" role="alert">
<a <a
href="https://www.google.com/chrome/browser/desktop/" href="https://www.google.com/chrome/browser/desktop/"

2
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [17 Aug 2021 at 03:24]</title> <title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [18 Aug 2021 at 20:37]</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" /> <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
<script> <script>

13
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
"version": "4.2.2", "version": "4.2.3",
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause", "license": "BSD-2-Clause",
@ -16,11 +16,11 @@
"scripts": { "scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.serve.js", "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.serve.js",
"dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.serve.js", "dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.serve.js",
"build": "eslint ./src --config eslint.config.json --fix && sass-lint ./src --config sass-lint.yml -v -q --fix && cross-env NODE_ENV=production webpack --progress --stats-all", "build": "cross-env NODE_ENV=production webpack --progress --stats-all",
"lint:check": "eslint ./src --config eslint.config.json && sass-lint ./src --config sass-lint.yml -v -q", "lint:fix": "eslint './src/**/*.js' -c eslint.config.json --fix && sass-lint-auto-fix -s -c ./sass-lint.yml './src/**/*.scss'",
"lint:fix": "eslint ./src --config eslint.config.json --fix && sass-lint ./src --config sass-lint.yml -v -q --fix", "lint:js": "eslint './src/**/*.js' -c eslint.config.json",
"lint:js": "eslint ./src --config eslint.config.json", "lint:scss": "sass-lint ./src/**/*.scss -c sass-lint.yml -v",
"lint:sass": "sass-lint ./src --config sass-lint.yml -v -q", "lint:check": "yarn lint:js && yarn lint:scss",
"prebuild": "yarn lint:fix && rimraf dist", "prebuild": "yarn lint:fix && rimraf dist",
"prepare": "yarn lint:fix && yarn build", "prepare": "yarn lint:fix && yarn build",
"prunecaches": "rimraf ./node_modules/.cache/", "prunecaches": "rimraf ./node_modules/.cache/",
@ -158,6 +158,7 @@
"routie": "0.0.1", "routie": "0.0.1",
"sass": "*", "sass": "*",
"sass-lint": "^1.13.1", "sass-lint": "^1.13.1",
"sass-lint-auto-fix": "^0.21.2",
"sass-lint-fix": "^1.12.1", "sass-lint-fix": "^1.12.1",
"sass-loader": "^12.1.0", "sass-loader": "^12.1.0",
"scheduler": "^0.20.2", "scheduler": "^0.20.2",

10
sass-lint.yml
View File

@ -1,8 +1,8 @@
# sass-lint config to match the AirBNB style guide # sass-lint config to match the AirBNB style guide
files: files:
include: 'app/client/src/**/*.scss' include: 'src/**/*.scss'
ignore: ignore:
- 'app/src/thirdparty/*' - 'src/thirdparty/*'
options: options:
formatter: stylish formatter: stylish
merge-default-rules: false merge-default-rules: false
@ -18,8 +18,8 @@ rules:
nesting-depth: nesting-depth:
- 1 - 1
- max-depth: 3 - max-depth: 3
no-ids: 1 no-ids: 0
no-important: 1 no-important: 0
no-misspelled-properties: no-misspelled-properties:
- 1 - 1
- extra-properties: - extra-properties:
@ -54,7 +54,7 @@ rules:
clean-import-paths: clean-import-paths:
- 2 - 2
- filename-extension: false - filename-extension: false
leading-underscore: false - leading-underscore: true
no-debug: 2 no-debug: 2
no-empty-rulesets: 2 no-empty-rulesets: 2
no-invalid-hex: 2 no-invalid-hex: 2

7
src/scss/_animations.scss
View File

@ -16,18 +16,18 @@
@keyframes fade { @keyframes fade {
0% { 0% {
opacity: 1;
filter: grayscale(0); filter: grayscale(0);
opacity: 1;
} }
50% { 50% {
opacity: 0.5;
filter: grayscale(1); filter: grayscale(1);
opacity: 0.5;
} }
100% { 100% {
opacity: 1;
filter: grayscale(0); filter: grayscale(0);
opacity: 1;
} }
} }
@ -36,6 +36,7 @@
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
} }
to { to {
max-height: 500rem; max-height: 500rem;
max-height: 200vh; max-height: 200vh;

80
src/scss/_colors.scss
View File

@ -1,18 +1,18 @@
// Google material colors Ref: https://material.io/design/color/ // Google material colors Ref: https://material.io/design/color/
@import '~material-design-color/material-color.scss'; @import "~material-design-color/material-color";
// Bootstrap Color system adapter // Bootstrap Color system adapter
$white: $clr-white !default; $white: $clr-white !default;
$gray-100: map-get($clr-grey-list, '100') !default; $gray-100: map-get($clr-grey-list, "100") !default;
$gray-200: map-get($clr-grey-list, '200') !default; $gray-200: map-get($clr-grey-list, "200") !default;
$gray-300: map-get($clr-grey-list, '300') !default; $gray-300: map-get($clr-grey-list, "300") !default;
$gray-400: map-get($clr-grey-list, '400') !default; $gray-400: map-get($clr-grey-list, "400") !default;
$gray-500: map-get($clr-grey-list, '500') !default; $gray-500: map-get($clr-grey-list, "500") !default;
$gray-600: map-get($clr-grey-list, '600') !default; $gray-600: map-get($clr-grey-list, "600") !default;
$gray-700: map-get($clr-grey-list, '700') !default; $gray-700: map-get($clr-grey-list, "700") !default;
$gray-800: map-get($clr-grey-list, '800') !default; $gray-800: map-get($clr-grey-list, "800") !default;
$gray-900: map-get($clr-grey-list, '900') !default; $gray-900: map-get($clr-grey-list, "900") !default;
$black: $clr-black !default; $black: $clr-black !default;
$grays: () !default; $grays: () !default;
@ -20,15 +20,15 @@ $grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge( $grays: map-merge(
( (
'100': $gray-100, "100": $gray-100,
'200': $gray-200, "200": $gray-200,
'300': $gray-300, "300": $gray-300,
'400': $gray-400, "400": $gray-400,
'500': $gray-500, "500": $gray-500,
'600': $gray-600, "600": $gray-600,
'700': $gray-700, "700": $gray-700,
'800': $gray-800, "800": $gray-800,
'900': $gray-900 "900": $gray-900,
), ),
$grays $grays
) !default; ) !default;
@ -49,19 +49,19 @@ $colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge( $colors: map-merge(
( (
'blue': $blue, "blue": $blue,
'indigo': $indigo, "indigo": $indigo,
'purple': $purple, "purple": $purple,
'pink': $pink, "pink": $pink,
'red': $red, "red": $red,
'orange': $orange, "orange": $orange,
'yellow': $yellow, "yellow": $yellow,
'green': $green, "green": $green,
'teal': $teal, "teal": $teal,
'cyan': $cyan, "cyan": $cyan,
'white': $white, "white": $white,
'gray': $gray-600, "gray": $gray-600,
'gray-dark': $gray-800 "gray-dark": $gray-800,
), ),
$colors $colors
) !default; ) !default;
@ -80,14 +80,14 @@ $theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge( $theme-colors: map-merge(
( (
'primary': $primary, "primary": $primary,
'secondary': $secondary, "secondary": $secondary,
'success': $success, "success": $success,
'info': $info, "info": $info,
'warning': $warning, "warning": $warning,
'danger': $danger, "danger": $danger,
'light': $light, "light": $light,
'dark': $dark "dark": $dark,
), ),
$theme-colors $theme-colors
) !default; ) !default;

69
src/scss/_mixings.scss
View File

@ -1,10 +1,9 @@
@use "sass:math"; @use "sass:math";
@import '~bootstrap/scss/mixins'; @import "~bootstrap/scss/mixins";
@mixin hover-disabled() { @mixin hover-disabled() {
&:not(.disabled) { &:not(.disabled) {
&.active, &.active,
&:active, &:active,
&:hover, &:hover,
@ -14,24 +13,22 @@
} }
} }
@mixin pseudo($display: block, $pos: absolute, $content: '') { @mixin pseudo($display: block, $pos: absolute, $content: "") {
content: $content; content: $content;
display: $display; display: $display;
position: $pos; position: $pos;
} }
@mixin responsive-ratio($x, $y, $pseudo: false) { @mixin responsive-ratio($x, $y, $pseudo: false) {
$padding: unquote(math.div($y, $x) * 100 + '%'); $padding: unquote(math.div($y, $x) * 100 + "%");
@if $pseudo { @if $pseudo {
&:before { &:before {
@include pseudo($pos: relative); @include pseudo($pos: relative);
width: 100%;
padding-top: $padding; padding-top: $padding;
width: 100%;
} }
} } @else {
@else {
padding-top: $padding; padding-top: $padding;
} }
} }
@ -60,9 +57,9 @@
@mixin truncate($truncation-boundary) { @mixin truncate($truncation-boundary) {
max-width: $truncation-boundary; max-width: $truncation-boundary;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
@mixin fix-bold() { @mixin fix-bold() {
@ -71,13 +68,13 @@
&:before { &:before {
content: attr(data-text); content: attr(data-text);
content: attr(data-text) / ''; content: attr(data-text) / "";
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
pointer-events: none;
font-weight: bold; font-weight: bold;
height: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
visibility: hidden;
} }
} }
@ -89,13 +86,13 @@
} }
} }
.active>.nav-link, .active > .nav-link,
.nav-link.active { .nav-link.active {
background: $navbar-dark-active-background; background: $navbar-dark-active-background;
} }
.nav-link.show, .nav-link.show,
.navbar-nav .show>.nav-link { .navbar-nav .show > .nav-link {
background: $navbar-dark-show-background; background: $navbar-dark-show-background;
color: $navbar-dark-show-color; color: $navbar-dark-show-color;
} }
@ -112,13 +109,13 @@
} }
&.disabled { &.disabled {
cursor: default;
color: $navbar-dark-disabled-color; color: $navbar-dark-disabled-color;
cursor: default;
} }
} }
.show>.nav-link, .show > .nav-link,
.active>.nav-link, .active > .nav-link,
.nav-link.show, .nav-link.show,
.nav-link.active { .nav-link.active {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
@ -126,8 +123,8 @@
.dropdown-item { .dropdown-item {
@include hover-focus { @include hover-focus {
color: $navbar-dark-hover-color;
background: $navbar-dark-hover-background; background: $navbar-dark-hover-background;
color: $navbar-dark-hover-color;
} }
&.active, &.active,
@ -145,7 +142,6 @@
@mixin dropdown-hovers() { @mixin dropdown-hovers() {
.dropdown.show { .dropdown.show {
.dropdown { .dropdown {
&:hover, &:hover,
&.active, &.active,
&:focus { &:focus {
@ -156,32 +152,31 @@
} }
} }
@media only screen and (min-width: map-get($grid-breakpoints, 'md')) { @media only screen and (min-width: map-get($grid-breakpoints, "md")) {
.dropdown-hover ul li { .dropdown-hover ul li {
position: relative; position: relative;
} }
.dropdown-hover ul li { .dropdown-hover ul li {
&:hover, &:hover,
&.active, &.active,
&:focus { &:focus {
>.dropdown-toggle::after { > .dropdown-toggle::after {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
>ul { > ul {
display: block; display: block;
} }
} }
} }
.dropdown-hover ul ul { .dropdown-hover ul ul {
position: absolute; display: none;
top: 100%;
left: 0; left: 0;
min-width: 250px; min-width: 250px;
display: none; position: absolute;
top: 100%;
} }
.dropdown-hover ul ul li { .dropdown-hover ul ul li {
@ -189,22 +184,21 @@
} }
.dropdown-hover ul ul li { .dropdown-hover ul ul li {
&:hover, &:hover,
&.active, &.active,
&:focus { &:focus {
>ul { > ul {
display: block; display: block;
} }
} }
} }
.dropdown-hover ul ul ul { .dropdown-hover ul ul ul {
position: absolute; display: none;
top: 0;
left: 100%; left: 100%;
min-width: 250px; min-width: 250px;
display: none; position: absolute;
top: 0;
} }
.dropdown-hover ul ul ul li { .dropdown-hover ul ul ul li {
@ -212,7 +206,6 @@
} }
.dropdown-hover ul ul ul li { .dropdown-hover ul ul ul li {
&:hover, &:hover,
&.active, &.active,
&:focus { &:focus {
@ -223,11 +216,11 @@
} }
.dropdown-hover ul ul ul ul { .dropdown-hover ul ul ul ul {
position: absolute; display: none;
top: 0;
left: -100%; left: -100%;
min-width: 250px; min-width: 250px;
display: none; position: absolute;
top: 0;
z-index: 1; z-index: 1;
} }
} }

2
src/scss/_typography.scss
View File

@ -40,7 +40,7 @@ p {
.typography { .typography {
@include clearfix; @include clearfix;
@import './types/editor'; @import "./types/editor";
> *:first-child { > *:first-child {
margin-top: 0; margin-top: 0;

120
src/scss/_variables.scss
View File

@ -1,51 +1,37 @@
@use 'sass:map'; @use "sass:map";
@import '~bootstrap/scss/functions'; @import "~bootstrap/scss/functions";
@import '~bootstrap/scss/variables'; @import "~bootstrap/scss/variables";
@import '_mixings'; @import "mixings";
//@import '_colors'; //@import "_colors";
// bootstrap settings // bootstrap settings
// screen size - 32px (ex. 1400 - 32 = 1368) // screen size - 32px (ex. 1400 - 32 = 1368)
$grid-breakpoints: (xs: 0, $grid-breakpoints: (
sm: 576px, xs: 0,
md: 768px, sm: 576px,
lg: 992px, md: 768px,
xl: 1168px, lg: 992px,
xxl: 1368px, xl: 1168px,
xxxl: 1568px, xxl: 1368px,
xxxxl: 1868px) !default; xxxl: 1568px,
xxxxl: 1868px,
) !default;
// screen size - (32px * 2) (ex. 1400 - 64 = 1336) // screen size - (32px * 2) (ex. 1400 - 64 = 1336)
$container-max-widths: (sm: 540px, $container-max-widths: (
md: 720px, sm: 540px,
lg: 960px, md: 720px,
xl: 1136px, lg: 960px,
xxl: 1336px, xl: 1136px,
xxxl: 1536px, xxl: 1336px,
xxxxl: 1836px) !default; xxxl: 1536px,
xxxxl: 1836px,
) !default;
$font-family-sans-serif: -apple-system, $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
BlinkMacSystemFont, $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
'Noto Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji' !default;
$font-family-monospace: SFMono-Regular,
Menlo,
Monaco,
Consolas,
'Liberation Mono',
'Courier New',
monospace !default;
$font-family-base: 'Roboto', $font-family-base: "Roboto", $font-family-sans-serif !default;
$font-family-sans-serif !default;
$spacer: 1rem !default; $spacer: 1rem !default;
$headings-margin-bottom: $spacer !default; $headings-margin-bottom: $spacer !default;
@ -70,20 +56,20 @@ $enable-negative-margins: true !default;
$enable-deprecation-messages: true !default; $enable-deprecation-messages: true !default;
$enable-important-utilities: true !default; $enable-important-utilities: true !default;
$breadcrumb-divider: quote('/') !default; $breadcrumb-divider: quote("/") !default;
// ui framework settings // ui framework settings
$body-gutter-x: $spacer !default; $body-gutter-x: $spacer !default;
$body-gutter-y: $spacer !default; $body-gutter-y: $spacer !default;
$body-double-gutter-x: $body-gutter-x*2 !default; $body-double-gutter-x: $body-gutter-x * 2 !default;
$body-double-gutter-y: $body-gutter-y*2 !default; $body-double-gutter-y: $body-gutter-y * 2 !default;
$body-gutter-reduced-x: $body-gutter-x*0.5 !default; $body-gutter-reduced-x: $body-gutter-x * 0.5 !default;
$body-gutter-reduced-y: $body-gutter-y*0.5 !default; $body-gutter-reduced-y: $body-gutter-y * 0.5 !default;
$body-gutter-reduced-d-x: $body-gutter-x*0.25 !default; $body-gutter-reduced-d-x: $body-gutter-x * 0.25 !default;
$body-gutter-reduced-d-y: $body-gutter-y*0.25 !default; $body-gutter-reduced-d-y: $body-gutter-y * 0.25 !default;
$form-spacer-x: $spacer !default; $form-spacer-x: $spacer !default;
$form-spacer-y: $spacer !default; $form-spacer-y: $spacer !default;
@ -97,48 +83,14 @@ $element-reduced-spacer-y: map.get($spacers, 2) !default;
$element-reduced-d-spacer-x: map.get($spacers, 1) !default; $element-reduced-d-spacer-x: map.get($spacers, 1) !default;
$element-reduced-d-spacer-y: map.get($spacers, 1) !default; $element-reduced-d-spacer-y: map.get($spacers, 1) !default;
/*
$font-size-base: 1rem !default;
// start font-sizing from h2
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $h1-font-size !default;
$h3-font-size: $font-size-base * 2 !default;
$h4-font-size: $font-size-base * 1.75 !default;
$h5-font-size: $font-size-base * 1.5 !default;
$h6-font-size: $font-size-base * 1.25 !default;
$grid-gutter-x: 2rem !default;
$grid-gutter-y: 2rem !default;
$grid-gutter-xs-x: $grid-gutter-x / 2 !default;
$grid-gutter-element-y: $grid-gutter-y !default;
$field-gutter-y: $grid-gutter-y / 2 !default;
$col-block-gutter-y: $grid-gutter-y / 4 !default;
// bootstrap minify bugfix:
$navbar-dark-toggler-icon-bg: none !default;
$navbar-light-toggler-icon-bg: none !default;
// IE > 9
$enable-flex: true !default;
$enable-responsive-font-sizes: true !default;
// Add your site-wide + content editor typography styling
$nav-link-hover-bg: darken($body-bg, 10%);
$nav-link-hover-color: lighten($body-color, 10%);
*/
$body-bg: #fff !default; $body-bg: #fff !default;
$body-color: #212529 !default; $body-color: #212529 !default;
// site specific variables // site specific variables
$extra-large-screen: 2000px !default; $extra-large-screen: 2000px !default;
$full-body-min-width: map-get($grid-breakpoints, 'lg') !default; $full-body-min-width: map-get($grid-breakpoints, "lg") !default;
$typography-breakpoint: map-get($grid-breakpoints, 'sm') - 1 !default; $typography-breakpoint: map-get($grid-breakpoints, "sm") - 1 !default;
$header-bg: var(--bs-dark) !default; $header-bg: var(--bs-dark) !default;
$header-color: var(--bs-light) !default; $header-color: var(--bs-light) !default;

17
src/scss/app.scss
View File

@ -4,12 +4,12 @@
//@import "~bootstrap-timepicker/css/bootstrap-timepicker.css"; //@import "~bootstrap-timepicker/css/bootstrap-timepicker.css";
// Your custom variables // Your custom variables
@import '_variables'; @import "variables";
@import '_animations'; @import "animations";
@import '~@a2nt/meta-lightbox-js/src/scss/app'; @import "~@a2nt/meta-lightbox-js/src/scss/app";
@import 'libs/bootstrap'; @import "libs/bootstrap";
@import 'libs/silverstripe'; @import "libs/silverstripe";
// By default we prefer font awesome CDN // By default we prefer font awesome CDN
//@import "_libs/_fontawesome"; //@import "_libs/_fontawesome";
@ -17,8 +17,7 @@
//@import '_ui/_lightbox'; //@import '_ui/_lightbox';
//@import '_ui/_flyout'; //@import '_ui/_flyout';
// Your custom styling // Your custom styling
@import '_typography'; @import "typography";
@import 'layout'; @import "layout";
@import 'elements'; @import "elements";

3
src/scss/elements/accordion.scss
View File

@ -1,3 +1,4 @@
.site__elements__accordion { .site__elements__accordion {
>.element-container>.accordion {} > .element-container > .accordion {
}
} }

2
src/scss/elements/grid.list.scss
View File

@ -5,7 +5,7 @@
.element__content { .element__content {
--bs-gutter-x: 2rem; --bs-gutter-x: 2rem;
--bs-gutter-y: .5rem; --bs-gutter-y: 0.5rem;
} }
/*.element { /*.element {

7
src/scss/elements/grid.scss
View File

@ -1,10 +1,10 @@
.elemental-area { .elemental-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
--bs-gutter-x: .75rem; --bs-gutter-x: 0.75rem;
--bs-gutter-y: .5rem; --bs-gutter-y: 0.5rem;
>.element { > .element {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
@ -34,7 +34,6 @@
.element { .element {
.elemental-area { .elemental-area {
.element { .element {
.container, .container,
.container-fluid { .container-fluid {
padding: 0; padding: 0;

14
src/scss/elements/index.scss
View File

@ -1,7 +1,7 @@
@import 'grid'; @import "grid";
@import 'grid.list'; @import "grid.list";
@import 'page'; @import "page";
@import 'slider'; @import "slider";
@import 'sidebar'; @import "sidebar";
@import 'accordion'; @import "accordion";
@import 'other'; @import "other";

7
src/scss/elements/page.scss
View File

@ -2,7 +2,8 @@
.element__breadcrumbs { .element__breadcrumbs {
//margin-bottom: calc(-2 * #{inspect($element-spacer-y)}); //margin-bottom: calc(-2 * #{inspect($element-spacer-y)});
.container {} .container {
}
.breadcrumb-link { .breadcrumb-link {
text-decoration: none; text-decoration: none;
@ -23,7 +24,7 @@
} }
.page-header-element { .page-header-element {
--bs-gutter-y: .75rem; --bs-gutter-y: 0.75rem;
display: none; display: none;
//margin-bottom: calc(-1 * #{inspect($element-spacer-y)}); //margin-bottom: calc(-1 * #{inspect($element-spacer-y)});
@ -33,6 +34,6 @@
} }
} }
.page-header-element:not(.d-block)+.element { .page-header-element:not(.d-block) + .element {
margin-top: 0; margin-top: 0;
} }

15
src/scss/elements/sidebar.scss
View File

@ -1,13 +1,12 @@
// remove containers for child elements // remove containers for child elements
.sidebar__col { .sidebar__col {
position: relative;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y; margin-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-spacer-y;
position: relative;
} }
.content-holder__sidebar { .content-holder__sidebar {
.row { .row {
.container, .container,
.container-fluid { .container-fluid {
padding: 0; padding: 0;
@ -17,11 +16,10 @@
} }
.page-content-sidebar { .page-content-sidebar {
// Sidebar elements // Sidebar elements
.element { .element {
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y); padding-bottom: ($element-reduced-spacer-y);
padding-top: ($element-reduced-spacer-y);
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
@ -33,7 +31,8 @@
} }
} }
.element__widget {} .element__widget {
}
.widget__Site_Widgets_SubmenuWidget { .widget__Site_Widgets_SubmenuWidget {
.nav-link { .nav-link {
@ -43,15 +42,15 @@
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
font-weight: bold;
color: $sidebar-nav-link-hover-color; color: $sidebar-nav-link-hover-color;
font-weight: bold;
} }
} }
.active { .active {
.nav-link { .nav-link {
font-weight: bold;
color: $sidebar-nav-link-hover-color; color: $sidebar-nav-link-hover-color;
font-weight: bold;
} }
} }
} }

21
src/scss/elements/slider.scss
View File

@ -13,22 +13,31 @@
} }
.carousel-slide { .carousel-slide {
align-items: center;
background: $sliderelement-carousel-slide-bg; background: $sliderelement-carousel-slide-bg;
max-height: $sliderelement-carousel-slide-max-y; max-height: $sliderelement-carousel-slide-max-y;
align-items: center;
.video { .video {
position: relative;
height: 100%; height: 100%;
@include responsive-ratio($sliderelement-carousel-slide-ratio-x, $sliderelement-carousel-slide-ratio-y, true); position: relative;
@include responsive-ratio(
$sliderelement-carousel-slide-ratio-x,
$sliderelement-carousel-slide-ratio-y,
true
);
iframe { iframe {
height: 100% !important;
height: unquote(
math.div(
$sliderelement-carousel-slide-ratio-y,
$sliderelement-carousel-slide-ratio-x
) * 100 + "vw"
) !important;
max-width: none;
position: absolute; position: absolute;
top: 0; top: 0;
height: 100% !important;
width: 100vw !important; width: 100vw !important;
max-width: none;
height: unquote(math.div($sliderelement-carousel-slide-ratio-y, $sliderelement-carousel-slide-ratio-x) * 100 + 'vw') !important;
} }
} }
} }

12
src/scss/layout/forms/basics.scss
View File

@ -2,11 +2,11 @@
flex-direction: row; flex-direction: row;
&__label { &__label {
padding-right: $form-spacer-x;
display: inline-flex;
align-items: center; align-items: center;
display: inline-flex;
padding-right: $form-spacer-x;
&+.field__content { & + .field__content {
padding-left: $form-spacer-x; padding-left: $form-spacer-x;
} }
} }
@ -22,9 +22,9 @@
.field.password { .field.password {
.show-password { .show-password {
position: absolute;
top: 0.5em;
right: 0.5em;
color: $input-color; color: $input-color;
position: absolute;
right: 0.5em;
top: 0.5em;
} }
} }

2
src/scss/layout/forms/index.scss
View File

@ -1 +1 @@
@import './basics'; @import "./basics";

8
src/scss/layout/index.scss
View File

@ -1,5 +1,5 @@
@import '../_variables'; @import "../_variables";
@import '../_animations'; @import "../_animations";
@import './main'; @import "./main";
@import './forms'; @import "./forms";

2
src/scss/layout/main/alerts.scss
View File

@ -1,6 +1,6 @@
#SiteWideAlerts { #SiteWideAlerts {
position: fixed;
bottom: 0; bottom: 0;
position: fixed;
right: 0; right: 0;
z-index: 99999; z-index: 99999;

37
src/scss/layout/main/base.scss
View File

@ -29,10 +29,9 @@ body {
} }
@media (min-width: $extra-large-screen) { @media (min-width: $extra-large-screen) {
html, html,
body { body {
font-size: .9vw !important; font-size: 0.9vw !important;
} }
.container { .container {
@ -80,8 +79,7 @@ p {
} }
// exclude bootstrap-table // exclude bootstrap-table
[data-toggle='table'] { [data-toggle="table"] {
&:hover, &:hover,
&.active, &.active,
&:focus { &:focus {
@ -89,11 +87,11 @@ p {
} }
} }
[data-toggle='collapse'] { [data-toggle="collapse"] {
&[aria-expanded='true'] { &[aria-expanded="true"] {
.accordion-icon { .accordion-icon {
&:before { &:before {
content: '\f068'; content: "\f068";
} }
} }
} }
@ -127,15 +125,13 @@ a,
[data-toggle], [data-toggle],
button, button,
.btn { .btn {
&:hover, &:hover,
&.active, &.active,
&[aria-expanded='true'] { &[aria-expanded="true"] {
> .fa,
>.fa, > .far,
>.far, > .fas,
>.fas, > .fab,
>.fab,
&.fa, &.fa,
&.far, &.far,
&.fas, &.fas,
@ -145,7 +141,7 @@ button,
} }
&:hover, &:hover,
&[aria-expanded='true'] { &[aria-expanded="true"] {
opacity: 0.8; opacity: 0.8;
} }
@ -155,12 +151,11 @@ button,
&:hover, &:hover,
&.active, &.active,
&[aria-expanded='true'] { &[aria-expanded="true"] {
> .fa,
>.fa, > .far,
>.far, > .fas,
>.fas, > .fab,
>.fab,
&.fa, &.fa,
&.far, &.far,
&.fas, &.fas,

8
src/scss/layout/main/index.scss
View File

@ -1,6 +1,6 @@
@import './base'; @import "./base";
@import './main'; @import "./main";
@import './alerts'; @import "./alerts";
// states // states
@import './states'; @import "./states";

28
src/scss/layout/main/main.scss
View File

@ -20,8 +20,8 @@
} }
.navbar-toggler-icon { .navbar-toggler-icon {
width: auto;
height: auto; height: auto;
width: auto;
} }
.nav-item, .nav-item,
@ -31,25 +31,25 @@
button.nav-link { button.nav-link {
border: 0; border: 0;
letter-spacing: inherit;
outline: 0; outline: 0;
text-transform: inherit; text-transform: inherit;
letter-spacing: inherit;
} }
.navbar-toggler { .navbar-toggler {
&[aria-expanded='true'] { &[aria-expanded="true"] {
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
.dropdown-toggle { .dropdown-toggle {
position: relative;
padding-right: 1.5em; padding-right: 1.5em;
position: relative;
&:after { &:after {
bottom: 1em;
position: absolute; position: absolute;
right: 0.5em; right: 0.5em;
bottom: 1em;
} }
} }
@ -64,11 +64,11 @@ button.nav-link {
} }
.dropdown-menu { .dropdown-menu {
padding: 0;
border-radius: 0; border-radius: 0;
will-change: max-height, display;
overflow: hidden; overflow: hidden;
padding: 0;
transition: none; transition: none;
will-change: max-height, display;
&.show { &.show {
animation: expand 2s; animation: expand 2s;
@ -81,8 +81,8 @@ button.nav-link {
} }
.dropdown-menu { .dropdown-menu {
top: 0;
left: 100%; left: 100%;
top: 0;
} }
} }
@ -91,10 +91,10 @@ button.nav-link {
} }
.field { .field {
position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: $form-spacer-y 0; margin: $form-spacer-y 0;
position: relative;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@ -111,7 +111,6 @@ button.nav-link {
// rewrite btn opacity on hover // rewrite btn opacity on hover
.btn { .btn {
&:hover, &:hover,
&.active, &.active,
&:focus { &:focus {
@ -121,7 +120,7 @@ button.nav-link {
// SS-messages // SS-messages
.alert+.alert { .alert + .alert {
border-top: 0; border-top: 0;
} }
@ -150,24 +149,23 @@ button.nav-link {
}*/ }*/
.list-group-item.active { .list-group-item.active {
a, a,
.a { .a {
color: $list-group-active-color; color: $list-group-active-color;
} }
} }
[aria-expanded='true'] { [aria-expanded="true"] {
.fa-bars { .fa-bars {
&:before { &:before {
content: '\f00d'; content: "\f00d";
} }
} }
} }
.jsSidebarUI { .jsSidebarUI {
position: relative;
min-height: 100%; min-height: 100%;
position: relative;
} }
.jsSidebarUI__inner { .jsSidebarUI__inner {

4
src/scss/layout/main/states/index.scss
View File

@ -1,2 +1,2 @@
@import './mobile'; @import "./mobile";
@import './network'; @import "./network";

9
src/scss/layout/main/states/mobile.scss
View File

@ -5,7 +5,6 @@
// display dropdown on hover + focus // display dropdown on hover + focus
@media (min-width: $full-body-min-width) { @media (min-width: $full-body-min-width) {
.dropdown-hover { .dropdown-hover {
&:hover, &:hover,
&:focus { &:focus {
.dropdown-menu { .dropdown-menu {
@ -17,13 +16,13 @@
// custom toggler for mobile view // custom toggler for mobile view
.dropdown { .dropdown {
>.dropdown-toggle-sm { > .dropdown-toggle-sm {
@media (min-width: $full-body-min-width) { @media (min-width: $full-body-min-width) {
display: none; display: none;
} }
} }
>.dropdown-toggle-fl { > .dropdown-toggle-fl {
display: none; display: none;
@media (min-width: $full-body-min-width) { @media (min-width: $full-body-min-width) {
@ -32,11 +31,11 @@
} }
@media not all and (hover: none) { @media not all and (hover: none) {
>.dropdown-toggle-touch { > .dropdown-toggle-touch {
display: inherit; display: inherit;
} }
>.dropdown-toggle-notouch { > .dropdown-toggle-notouch {
display: none; display: none;
} }
} }

6
src/scss/layout/main/states/network.scss
View File

@ -8,9 +8,9 @@
.graphql-page { .graphql-page {
&.response-404 { &.response-404 {
cursor: not-allowed;
filter: grayscale(1); filter: grayscale(1);
opacity: 0.5; opacity: 0.5;
cursor: not-allowed;
} }
} }
@ -21,16 +21,16 @@
.graphql-page { .graphql-page {
&.response-523 { &.response-523 {
cursor: not-allowed;
filter: grayscale(1); filter: grayscale(1);
opacity: 0.5; opacity: 0.5;
cursor: not-allowed;
} }
} }
} }
body.ajax-loading { body.ajax-loading {
overflow: hidden;
height: 100vh; height: 100vh;
overflow: hidden;
#Header { #Header {
position: relative; position: relative;

41
src/scss/layout/test.scss
View File

@ -1,8 +1,9 @@
.sidebar__col { .sidebar__col {
position: relative;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y; margin-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-spacer-y;
position: relative;
} }
.content-holder__sidebar { .content-holder__sidebar {
> .container { > .container {
padding: 0; padding: 0;
@ -14,8 +15,8 @@
.alert { .alert {
margin-bottom: 0; margin-bottom: 0;
.btn-close { .btn-close {
margin-top: -0.5rem;
float: right; float: right;
margin-top: -0.5rem;
} }
} }
} }
@ -29,9 +30,9 @@
} }
.nav-container { .nav-container {
align-items: flex-end;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end;
position: static; position: static;
} }
@ -47,11 +48,11 @@
} }
#Navigation { #Navigation {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.25rem;
width: 100%;
background: $header-bg; background: $header-bg;
font-size: 1.5rem;
letter-spacing: 0.25rem;
text-transform: uppercase;
width: 100%;
.navbar-toggler { .navbar-toggler {
color: $main-nav-link-color; color: $main-nav-link-color;
@ -69,8 +70,8 @@
} }
.nav-link { .nav-link {
color: $main-nav-link-color;
background: $main-nav-link-bg; background: $main-nav-link-bg;
color: $main-nav-link-color;
&:focus, &:focus,
&:hover, &:hover,
@ -96,10 +97,10 @@
} }
.dropdown-menu { .dropdown-menu {
border-color: $main-nav-dropdown-bg;
background: $main-nav-dropdown-bg; background: $main-nav-dropdown-bg;
margin-top: 0; border-color: $main-nav-dropdown-bg;
border-top: 0; border-top: 0;
margin-top: 0;
min-width: 100%; min-width: 100%;
.nav-item-link { .nav-item-link {
color: $main-nav-dropdown-color; color: $main-nav-dropdown-color;
@ -116,18 +117,20 @@
color: $main-nav-dropdown-hover-color; color: $main-nav-dropdown-hover-color;
} }
} }
.nav-item-link { .nav-item-link {
width: 100%;
justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start;
width: 100%;
} }
} }
@media (min-width: $full-body-min-width) { @media (min-width: $full-body-min-width) {
.navbar-nav > .nav-item { .navbar-nav > .nav-item {
padding-right: 2rem;
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem;
} }
.dropdown-item .nav-item-link { .dropdown-item .nav-item-link {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
@ -146,14 +149,14 @@
} }
#Footer { #Footer {
display: flex;
flex-direction: column;
background-color: $footer-bg; background-color: $footer-bg;
color: $footer-color; color: $footer-color;
display: flex;
flex-direction: column;
> .wrapper { > .wrapper {
padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y; padding-bottom: $element-reduced-spacer-y;
padding-top: $element-reduced-spacer-y;
} }
a, a,
@ -162,9 +165,9 @@
} }
.footer { .footer {
padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y;
background-color: $footer-footer-bg; background-color: $footer-footer-bg;
padding-bottom: $element-reduced-spacer-y;
padding-top: $element-reduced-spacer-y;
.copyright { .copyright {
padding-right: 0.5rem; padding-right: 0.5rem;

10
src/scss/libs/bootstrap-table.scss vendored
View File

@ -4,14 +4,16 @@
.fixed-table-container { .fixed-table-container {
.table { .table {
thead th { thead th {
.both, .asc, .desc { .both,
.asc,
.desc {
background-image: none; background-image: none;
&:after { &:after {
margin-left: .5em; content: "";
content: '';
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
margin-left: 0.5em;
} }
} }
@ -30,7 +32,7 @@
.th-inner.sortable { .th-inner.sortable {
&:hover, &:hover,
&:focus { &:focus {
opacity: .8; opacity: 0.8;
} }
} }
} }

46
src/scss/libs/bootstrap.scss vendored
View File

@ -1,30 +1,30 @@
// Bootstrap // Bootstrap
// Configuration // Configuration
@import '~bootstrap/scss/functions'; @import "~bootstrap/scss/functions";
@import '~bootstrap/scss/variables'; @import "~bootstrap/scss/variables";
@import '~bootstrap/scss/mixins'; @import "~bootstrap/scss/mixins";
@import '~bootstrap/scss/utilities'; @import "~bootstrap/scss/utilities";
// Layout & components // Layout & components
@import '~bootstrap/scss/root'; @import "~bootstrap/scss/root";
@import '~bootstrap/scss/reboot'; @import "~bootstrap/scss/reboot";
@import '~bootstrap/scss/type'; @import "~bootstrap/scss/type";
@import '~bootstrap/scss/containers'; @import "~bootstrap/scss/containers";
@import '~bootstrap/scss/grid'; @import "~bootstrap/scss/grid";
@import '~bootstrap/scss/tables'; @import "~bootstrap/scss/tables";
@import '~bootstrap/scss/forms'; @import "~bootstrap/scss/forms";
@import '~bootstrap/scss/buttons'; @import "~bootstrap/scss/buttons";
@import '~bootstrap/scss/transitions'; @import "~bootstrap/scss/transitions";
// Optional // Optional
//@import '~bootstrap/scss/images'; //@import '~bootstrap/scss/images';
@import '~bootstrap/scss/dropdown'; @import "~bootstrap/scss/dropdown";
@import '~bootstrap/scss/nav'; @import "~bootstrap/scss/nav";
@import '~bootstrap/scss/navbar'; @import "~bootstrap/scss/navbar";
@import '~bootstrap/scss/breadcrumb'; @import "~bootstrap/scss/breadcrumb";
@import '~bootstrap/scss/pagination'; @import "~bootstrap/scss/pagination";
@import '~bootstrap/scss/alert'; @import "~bootstrap/scss/alert";
@import '~bootstrap/scss/close'; @import "~bootstrap/scss/close";
/*@import '~bootstrap/scss/button-group'; /*@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/card'; @import '~bootstrap/scss/card';
@ -39,12 +39,12 @@
@import '~bootstrap/scss/spinners';*/ @import '~bootstrap/scss/spinners';*/
// Helpers // Helpers
@import '~bootstrap/scss/helpers'; @import "~bootstrap/scss/helpers";
// Utilities // Utilities
@import '~bootstrap/scss/utilities/api'; @import "~bootstrap/scss/utilities/api";
@import '../ui/carousel'; @import "../ui/carousel";
.navbar { .navbar {
justify-content: flex-end; justify-content: flex-end;

12
src/scss/libs/silverstripe.scss
View File

@ -12,14 +12,14 @@
.embed-responsive-4by3, .embed-responsive-4by3,
.embed-responsive-16by9 { .embed-responsive-16by9 {
position: relative;
padding-top: 56.25%; padding-top: 56.25%;
position: relative;
iframe { iframe {
height: 100%;
left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
height: 100%;
width: 100%; width: 100%;
} }
} }
@ -35,12 +35,12 @@
#BetterNavigator { #BetterNavigator {
display: none; display: none;
top: 50% !important;
margin-top: -41px; margin-top: -41px;
top: 50% !important;
&.open { &.open {
top: 0 !important;
margin-top: 0; margin-top: 0;
top: 0 !important;
} }
a, a,
@ -51,7 +51,7 @@
background-size: auto; background-size: auto;
} }
@media (min-width: map-get($grid-breakpoints, 'md')) { @media (min-width: map-get($grid-breakpoints, "md")) {
display: block; display: block;
} }
} }

6
src/scss/test-build.scss
View File

@ -1,3 +1,3 @@
@import 'app'; @import "app";
@import 'layout/test'; @import "layout/test";
@import '~bootstrap/scss/accordion'; @import "~bootstrap/scss/accordion";

30
src/scss/types/cms.scss
View File

@ -8,24 +8,24 @@
// Fix form actions // Fix form actions
#Form_ItemEditForm_MajorActions_Holder { #Form_ItemEditForm_MajorActions_Holder {
border: 0;
margin-bottom: 0;
min-width: 30%; min-width: 30%;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0;
border: 0;
} }
#Form_EditForm_MajorActions_Holder { #Form_EditForm_MajorActions_Holder {
border: 0;
margin-bottom: 0;
min-width: 70%; min-width: 70%;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0;
border: 0;
} }
#Form_ItemEditForm_RightGroup_Holder { #Form_ItemEditForm_RightGroup_Holder {
border: 0;
margin-bottom: 0;
min-width: 20%; min-width: 20%;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0;
border: 0;
} }
// make edit icon always shown // make edit icon always shown
@ -54,15 +54,15 @@
// correct scrolls // correct scrolls
body.cms { body.cms {
overflow-x: hidden;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
} }
// short fields margins/paddings // short fields margins/paddings
.fields-compact { .fields-compact {
.form-group { .form-group {
padding-bottom: 0.5rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
padding-bottom: 0.5rem;
.form__field-label { .form__field-label {
font-weight: bold; font-weight: bold;
@ -95,19 +95,19 @@ body.cms {
width: 100%; width: 100%;
.form__fieldgroup { .form__fieldgroup {
display: flex;
flex: 0 0 100% !important;
flex-wrap: wrap;
margin: 0 !important; margin: 0 !important;
max-width: 100% !important;
padding: 0 !important; padding: 0 !important;
width: 100% !important; width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
display: flex;
flex-wrap: wrap;
>.form-group { > .form-group {
padding: 0 1rem;
margin: 0 !important;
flex: 1 1 50%; flex: 1 1 50%;
margin: 0 !important;
max-width: 50%; max-width: 50%;
padding: 0 1rem;
} }
} }
} }

60
src/scss/types/editor.scss
View File

@ -1,8 +1,8 @@
@import '../_variables'; @import "../_variables";
@import '~bootstrap/scss/tables'; @import "~bootstrap/scss/tables";
$typography-breakpoint: map-get($grid-breakpoints, 'sm') - 1 !default; $typography-breakpoint: map-get($grid-breakpoints, "sm") - 1 !default;
html, html,
body { body {
@ -34,8 +34,8 @@ img,
.image, .image,
.ss-htmleditorfield-file { .ss-htmleditorfield-file {
display: block; display: block;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y; margin-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-spacer-y;
max-width: 100%; max-width: 100%;
@media (min-width: $typography-breakpoint + 1) { @media (min-width: $typography-breakpoint + 1) {
@ -58,8 +58,8 @@ img,
&.start, &.start,
&.left, &.left,
&.leftAlone { &.leftAlone {
float: left;
clear: left; clear: left;
float: left;
@media (min-width: $typography-breakpoint + 1) { @media (min-width: $typography-breakpoint + 1) {
margin: 0 $element-reduced-spacer-x $element-reduced-spacer-y 0; margin: 0 $element-reduced-spacer-x $element-reduced-spacer-y 0;
@ -69,8 +69,8 @@ img,
&.end, &.end,
&.right, &.right,
&.rightAlone { &.rightAlone {
float: right;
clear: right; clear: right;
float: right;
@media (min-width: $typography-breakpoint + 1) { @media (min-width: $typography-breakpoint + 1) {
margin: $element-reduced-spacer-y 0 0 $element-reduced-spacer-x; margin: $element-reduced-spacer-y 0 0 $element-reduced-spacer-x;
@ -78,8 +78,8 @@ img,
} }
iframe { iframe {
width: 100% !important;
height: 100% !important; height: 100% !important;
width: 100% !important;
} }
} }
@ -115,9 +115,9 @@ img,
} }
table { table {
width: 100%;
max-width: 100%;
border-collapse: collapse; border-collapse: collapse;
max-width: 100%;
width: 100%;
@extend .table; @extend .table;
@extend .table-striped; @extend .table-striped;
@ -130,8 +130,8 @@ table {
tr, tr,
td, td,
th { th {
border: 0;
background: none !important; background: none !important;
border: 0;
box-shadow: none !important; box-shadow: none !important;
} }
} }
@ -142,9 +142,9 @@ ol {
padding-left: $spacer; padding-left: $spacer;
li { li {
position: relative;
padding-left: 0.5em;
margin: 0.5em 0; margin: 0.5em 0;
padding-left: 0.5em;
position: relative;
} }
} }
@ -156,15 +156,15 @@ ul {
padding-left: 0; padding-left: 0;
&:before { &:before {
content: '\2022'; content: "\2022";
display: inline-block; display: inline-block;
margin-right: 0.5em;
position: absolute;
left: -0.75em;
font-size: 1em; font-size: 1em;
top: -0.1em;
left: -0.75em;
margin-right: 0.5em;
opacity: 0.5; opacity: 0.5;
position: absolute;
top: -0.1em;
} }
} }
} }
@ -179,11 +179,11 @@ iframe {
max-width: 100% !important; max-width: 100% !important;
@media (max-width: $typography-breakpoint) { @media (max-width: $typography-breakpoint) {
display: block;
width: 100% !important;
border: 0 !important; border: 0 !important;
display: block;
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
width: 100% !important;
} }
} }
@ -200,22 +200,22 @@ img {
@media (max-width: $typography-breakpoint) { @media (max-width: $typography-breakpoint) {
.d-typography-breakpoint-none { .d-typography-breakpoint-none {
position: absolute; border: 0;
width: 1px; clip: rect(0, 0, 0, 0);
height: 1px; height: 1px;
padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); padding: 0;
position: absolute;
white-space: nowrap; white-space: nowrap;
border: 0; width: 1px;
} }
thead { thead {
display: block; display: block;
text-align: center; text-align: center;
>tr { > tr {
display: flex; display: flex;
} }
} }
@ -230,11 +230,11 @@ img {
&:before { &:before {
content: attr(data-label); content: attr(data-label);
font-weight: bold;
width: 50%;
min-width: 50%;
padding: 0 $spacer*0.5;
display: block; display: block;
font-weight: bold;
min-width: 50%;
padding: 0 $spacer * 0.5;
width: 50%;
} }
} }
} }

4
src/scss/types/map.api.scss
View File

@ -1,2 +1,2 @@
@import '../_variables'; @import "../_variables";
@import '../ui/map.api'; @import "../ui/map.api";

51
src/scss/types/order.scss
View File

@ -1,45 +1,46 @@
@import "../_variables"; @import "../_variables";
h1.title { h1.title {
display: block;
text-align: right;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
text-transform: uppercase; display: block;
line-height: 1.5em; line-height: 1.5em;
text-align: right;
text-transform: uppercase;
} }
.warningMessage { .warningMessage {
position: relative; background-color: #fff3cd;
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent; border: $alert-border-width solid transparent;
border-color: #ffeeba;
color: #856404;
@include border-radius($alert-border-radius); @include border-radius($alert-border-radius);
color: #856404; margin-bottom: $alert-margin-bottom;
background-color: #fff3cd; padding: $alert-padding-y $alert-padding-x;
border-color: #ffeeba; position: relative;
} }
#Content { #Content {
text-align: left;
margin: auto; margin: auto;
padding-left: 20px; padding-left: 20px;
text-align: left;
} }
#Content td {} #Content td {
}
#Content .emailTitle { #Content .emailTitle {
font-family: $font-family-base; font-family: $font-family-base;
font-weight: normal;
font-size: $h1-font-size; font-size: $h1-font-size;
font-weight: normal;
} }
#Content .PageTitle { #Content .PageTitle {
padding: 5px;
color: $body-color; color: $body-color;
font-size: 14px;
font-family: $font-family-base; font-family: $font-family-base;
font-size: 14px;
padding: 5px;
} }
#Content .footer td { #Content .footer td {
@ -51,7 +52,7 @@ h1.title {
} }
#Content .typography { #Content .typography {
padding: 0px 10px; padding: 0 10px;
} }
#Content .typography a { #Content .typography a {
@ -72,8 +73,8 @@ h1.title {
} }
#Content .typography p { #Content .typography p {
margin: 0.75em 0em;
color: $body-color; color: $body-color;
margin: 0.75em 0;
} }
table#SenderTable .sender, table#SenderTable .sender,
@ -95,27 +96,27 @@ table#MetaTable .label {
} }
table.infotable { table.infotable {
border: 1px solid $border-color;
border-collapse: collapse;
width: 100%;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
background: $body-bg; background: $body-bg;
border: 1px solid $border-color;
border-bottom: 1px solid $border-color;
border-collapse: collapse;
border-top: 1px solid $border-color;
margin-top: 10px; margin-top: 10px;
width: 100%;
} }
table.infotable td.product.title { table.infotable td.product.title {
color: $link-color; color: $link-color;
font-family: $font-family-base;
font-size: $h3-font-size; font-size: $h3-font-size;
font-weight: normal; font-weight: normal;
font-family: $font-family-base;
} }
table.infotable tr td, table.infotable tr td,
table.infotable tr th { table.infotable tr th {
padding: 5px;
color: $body-color;
border: 1px solid $border-color; border: 1px solid $border-color;
color: $body-color;
padding: 5px;
} }
table.infotable td { table.infotable td {
@ -127,8 +128,8 @@ table.infotable tr.summary {
} }
table.infotable td.ordersummary { table.infotable td.ordersummary {
font-size: 1em;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
font-size: 1em;
} }
table.infotable tr th { table.infotable tr th {

26
src/scss/ui/carousel.scss
View File

@ -1,4 +1,4 @@
@import '~bootstrap/scss/carousel'; @import "~bootstrap/scss/carousel";
/* /*
* Bootstrap carousel improvement * Bootstrap carousel improvement
@ -22,13 +22,13 @@ $carousel-controls-hover-bg: transparentize($black, 0.4) !default;
$carousel-slide-img-loading-max-height: 25vh !default; $carousel-slide-img-loading-max-height: 25vh !default;
.carousel-slide { .carousel-slide {
min-height: $carousel-slide-min-height;
display: flex;
justify-content: center;
align-items: flex-start; align-items: flex-start;
display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
min-height: $carousel-slide-min-height;
>.container { > .container {
position: relative; position: relative;
} }
@ -36,8 +36,8 @@ $carousel-slide-img-loading-max-height: 25vh !default;
width: 100%; width: 100%;
iframe { iframe {
width: 100% !important;
height: auto !important; height: auto !important;
width: 100% !important;
} }
} }
@ -53,9 +53,9 @@ $carousel-slide-img-loading-max-height: 25vh !default;
.carousel-control-prev, .carousel-control-prev,
.carousel-control-next { .carousel-control-next {
z-index: $carousel-controls-zindex;
font-size: $carousel-controls-font-size; font-size: $carousel-controls-font-size;
text-shadow: $carousel-controls-shadow; text-shadow: $carousel-controls-shadow;
z-index: $carousel-controls-zindex;
&:hover, &:hover,
&:focus { &:focus {
@ -77,17 +77,17 @@ $carousel-slide-img-loading-max-height: 25vh !default;
} }
.carousel-caption { .carousel-caption {
right: 0;
left: auto;
width: 50%;
bottom: 0; bottom: 0;
left: auto;
right: 0;
width: 50%;
} }
.slide-link__media { .slide-link__media {
position: absolute; bottom: 0;
opacity: 0;
left: 0; left: 0;
opacity: 0;
position: absolute;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0;
} }

14
src/scss/ui/flyout.scss
View File

@ -7,15 +7,15 @@ $flyout-title-color: #fff !default;
$flyout-transition: right 2s; $flyout-transition: right 2s;
.flyout-FlyoutUI { .flyout-FlyoutUI {
position: absolute;
z-index: 99;
transform: translateY(-50%);
transition: $flyout-transition;
right: -100%;
top: 50%;
background: $flyout-bg; background: $flyout-bg;
color: $flyout-color; color: $flyout-color;
padding: $flyout-padding; padding: $flyout-padding;
position: absolute;
right: -100%;
top: 50%;
transform: translateY(-50%);
transition: $flyout-transition;
z-index: 99;
&__active { &__active {
display: block; display: block;
@ -28,7 +28,7 @@ $flyout-transition: right 2s;
&__close { &__close {
position: absolute; position: absolute;
top: $flyout-height-padding;
right: $flyout-width-padding; right: $flyout-width-padding;
top: $flyout-height-padding;
} }
} }

16
src/scss/ui/mailchimp.scss
View File

@ -4,20 +4,23 @@
.mc-field-group { .mc-field-group {
@extend .form-group; @extend .form-group;
} }
input[type='text'],
input[type='email'] { input[type="text"],
input[type="email"] {
@extend .form-control; @extend .form-control;
} }
input[type='submit'] {
input[type="submit"] {
@extend .btn; @extend .btn;
@extend .btn-primary; @extend .btn-primary;
display: block;
margin: 0 auto; margin: 0 auto;
width: 50%; width: 50%;
display: block;
} }
.clear { .clear {
float: none;
clear: both; clear: both;
float: none;
} }
.input-group { .input-group {
@ -26,7 +29,8 @@
li { li {
list-style: none; list-style: none;
} }
input[type='checkbox'] {
input[type="checkbox"] {
@extend .form-check-input; @extend .form-check-input;
} }

74
src/scss/ui/map.api.scss
View File

@ -17,15 +17,15 @@ $map-popup-color: $body-color !default;
.mapboxgl { .mapboxgl {
&-popup { &-popup {
width: $map-popup-width; display: flex;
height: $map-popup-height;
font-size: $map-popup-font-size; font-size: $map-popup-font-size;
height: $map-popup-height;
left: 0;
line-height: 1.2em; line-height: 1.2em;
pointer-events: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; width: $map-popup-width;
display: flex;
pointer-events: none;
z-index: 4; z-index: 4;
} }
@ -36,24 +36,24 @@ $map-popup-color: $body-color !default;
} }
&-popup-content { &-popup-content {
min-width: $map-popup-width;
background: $map-popup-bg; background: $map-popup-bg;
color: $map-popup-color;
position: relative;
pointer-events: auto;
padding: 0.8rem;
border-radius: 0.25rem; border-radius: 0.25rem;
min-height: 5rem;
box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4);
color: $map-popup-color;
min-height: 5rem;
min-width: $map-popup-width;
padding: 0.8rem;
pointer-events: auto;
position: relative;
} }
&-popup-close-button { &-popup-close-button {
border-top-right-radius: 0.25rem;
font-size: 2rem;
padding: 0.5rem;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
font-size: 2rem;
padding: 0.5rem;
border-top-right-radius: 0.25rem;
z-index: 2; z-index: 2;
&:hover, &:hover,
@ -64,29 +64,29 @@ $map-popup-color: $body-color !default;
} }
&-popup-tip { &-popup-tip {
width: 0;
height: 0;
border: 0.8rem solid transparent; border: 0.8rem solid transparent;
height: 0;
width: 0;
z-index: 1; z-index: 1;
} }
&-popup-anchor-bottom &-popup-tip { &-popup-anchor-bottom &-popup-tip {
border-top-color: $map-popup-bg;
align-self: center; align-self: center;
border-bottom: none; border-bottom: 0;
border-top-color: $map-popup-bg;
} }
&-marker { &-marker {
width: $map-marker-size; align-items: flex-end;
height: $map-marker-size;
font-size: $map-marker-size;
line-height: 1em;
color: $map-marker-color; color: $map-marker-color;
cursor: pointer; cursor: pointer;
text-align: center;
display: flex; display: flex;
align-items: flex-end; font-size: $map-marker-size;
height: $map-marker-size;
justify-content: center; justify-content: center;
line-height: 1em;
text-align: center;
width: $map-marker-size;
.marker-icon, .marker-icon,
.fas, .fas,
@ -97,35 +97,35 @@ $map-popup-color: $body-color !default;
} }
&-cluster { &-cluster {
background: $info;
color: color-yiq($info);
border-radius: 100%;
font-weight: bold;
font-size: 1.2rem;
display: flex;
align-items: center; align-items: center;
animation: pulse 0.8s linear infinite; animation: pulse 0.8s linear infinite;
background: $info;
border-radius: 100%;
color: color-yiq($info);
display: flex;
font-size: 1.2rem;
font-weight: bold;
&::before, &::before,
&::after { &::after {
background: $info;
border-radius: 100%;
content: ""; content: "";
display: block; display: block;
position: absolute;
width: 140%;
height: 140%; height: 140%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%; left: 50%;
background: $info;
opacity: 0.2; opacity: 0.2;
border-radius: 100%; position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 140%;
z-index: -1; z-index: -1;
} }
&::after { &::after {
width: 180%;
height: 180%; height: 180%;
width: 180%;
} }
} }
} }

29
src/scss/ui/multislider.scss
View File

@ -1,42 +1,43 @@
$grid-gutter-element-height: 2rem !default; $grid-gutter-element-height: 2rem !default;
.jsMultiSlider { .jsMultiSlider {
position: relative;
display: flex;
margin-bottom: $grid-gutter-element-height*0.5;
align-items: center; align-items: center;
display: flex;
justify-content: center; justify-content: center;
margin-bottom: $grid-gutter-element-height * 0.5;
min-width: 100%; min-width: 100%;
position: relative;
&-active { &-active {
margin-bottom: 0; margin-bottom: 0;
} }
.slide { .slide {
position: relative;
padding: 0 0.5rem; padding: 0 0.5rem;
position: relative;
} }
} }
.jsMultiSlider-container { .jsMultiSlider-container {
margin-bottom: $grid-gutter-element-height * 0.5;
position: relative; position: relative;
margin-bottom: $grid-gutter-element-height*0.5;
.slider-actions { .slider-actions {
font-size: 2rem; font-size: 2rem;
.act { .act {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center; align-items: center;
bottom: 0;
display: flex;
justify-content: center; justify-content: center;
left: 0;
position: absolute;
text-decoration: none; text-decoration: none;
top: 0;
&-slider-prev {} &-slider-prev {
}
&-slider-next { &-slider-next {
left: auto; left: auto;
@ -47,10 +48,10 @@ $grid-gutter-element-height: 2rem !default;
} }
.jsMultiSlider-slides-container { .jsMultiSlider-slides-container {
overflow: hidden;
margin: 0 2rem; margin: 0 2rem;
overflow: hidden;
>.slider-nav { > .slider-nav {
position: relative; position: relative;
} }
} }