tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

FIX: linting

Browse Source
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

61
src/scss/_animations.scss
View File

@ -1,44 +1,45 @@
// pulse // pulse
@keyframes pulse { @keyframes pulse {
0% { 0% {
transform: scale(1); transform: scale(1);
} }
50% { 50% {
transform: scale(0.8); transform: scale(0.8);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
} }
} }
@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;
} }
} }
@keyframes expand { @keyframes expand {
from { from {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
} }
to {
max-height: 500rem; to {
max-height: 200vh; max-height: 500rem;
overflow: visible; max-height: 200vh;
} overflow: visible;
}
} }

98
src/scss/_colors.scss
View File

@ -1,36 +1,36 @@
// 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;
// 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;
$blue: $clr-blue !default; $blue: $clr-blue !default;
@ -48,22 +48,22 @@ $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;
$primary: $blue !default; $primary: $blue !default;
@ -79,17 +79,17 @@ $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;
// UI color variables // UI color variables

375
src/scss/_mixings.scss
View File

@ -1,234 +1,227 @@
@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, &:focus {
&:focus { @content;
@content;
}
} }
}
} }
@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 {
padding-top: $padding;
} }
} @else {
padding-top: $padding;
}
} }
@mixin input-placeholder { @mixin input-placeholder {
&.placeholder { &.placeholder {
@content; @content;
} }
&:-moz-placeholder { &:-moz-placeholder {
@content; @content;
} }
&::-moz-placeholder { &::-moz-placeholder {
@content; @content;
} }
&:-ms-input-placeholder { &:-ms-input-placeholder {
@content; @content;
} }
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
@content; @content;
} }
} }
@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() {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
&:before { &:before {
content: attr(data-text); content: attr(data-text);
content: attr(data-text) / ''; content: attr(data-text) / "";
height: 0; font-weight: bold;
visibility: hidden; height: 0;
overflow: hidden; overflow: hidden;
user-select: none; pointer-events: none;
pointer-events: none; user-select: none;
font-weight: bold; visibility: hidden;
} }
} }
@mixin dropdowns-dark() { @mixin dropdowns-dark() {
.navbar-dark { .navbar-dark {
.nav-link { .nav-link {
@include hover-focus { @include hover-focus {
background: $navbar-dark-hover-background; background: $navbar-dark-hover-background;
} }
}
.active>.nav-link,
.nav-link.active {
background: $navbar-dark-active-background;
}
.nav-link.show,
.navbar-nav .show>.nav-link {
background: $navbar-dark-show-background;
color: $navbar-dark-show-color;
}
} }
.dropdown-menu.bg-dark { .active > .nav-link,
border-color: $dark; .nav-link.active {
background: $navbar-dark-active-background;
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
cursor: default;
color: $navbar-dark-disabled-color;
}
}
.show>.nav-link,
.active>.nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
.dropdown-item {
@include hover-focus {
color: $navbar-dark-hover-color;
background: $navbar-dark-hover-background;
}
&.active,
&:active {
background: $navbar-dark-active-background;
}
.nav-link {
background: none;
}
}
} }
.nav-link.show,
.navbar-nav .show > .nav-link {
background: $navbar-dark-show-background;
color: $navbar-dark-show-color;
}
}
.dropdown-menu.bg-dark {
border-color: $dark;
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-dark-disabled-color;
cursor: default;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
.dropdown-item {
@include hover-focus {
background: $navbar-dark-hover-background;
color: $navbar-dark-hover-color;
}
&.active,
&:active {
background: $navbar-dark-active-background;
}
.nav-link {
background: none;
}
}
}
} }
@mixin dropdown-hovers() { @mixin dropdown-hovers() {
.dropdown.show { .dropdown.show {
.dropdown { .dropdown {
&:hover,
&:hover, &.active,
&.active, &:focus {
&:focus { .dropdown-menu {
.dropdown-menu { display: block;
display: block;
}
}
} }
}
}
}
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
.dropdown-hover ul li {
position: relative;
} }
@media only screen and (min-width: map-get($grid-breakpoints, 'md')) { .dropdown-hover ul li {
.dropdown-hover ul li { &:hover,
position: relative; &.active,
&:focus {
> .dropdown-toggle::after {
transform: rotate(-90deg);
} }
.dropdown-hover ul li { > ul {
display: block;
&:hover,
&.active,
&:focus {
>.dropdown-toggle::after {
transform: rotate(-90deg);
}
>ul {
display: block;
}
}
}
.dropdown-hover ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul li {
position: relative;
}
.dropdown-hover ul ul li {
&:hover,
&.active,
&:focus {
>ul {
display: block;
}
}
}
.dropdown-hover ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul ul li {
position: relative;
}
.dropdown-hover ul ul ul li {
&:hover,
&.active,
&:focus {
ul {
display: block;
}
}
}
.dropdown-hover ul ul ul ul {
position: absolute;
top: 0;
left: -100%;
min-width: 250px;
display: none;
z-index: 1;
} }
}
} }
.dropdown-hover ul ul {
display: none;
left: 0;
min-width: 250px;
position: absolute;
top: 100%;
}
.dropdown-hover ul ul li {
position: relative;
}
.dropdown-hover ul ul li {
&:hover,
&.active,
&:focus {
> ul {
display: block;
}
}
}
.dropdown-hover ul ul ul {
display: none;
left: 100%;
min-width: 250px;
position: absolute;
top: 0;
}
.dropdown-hover ul ul ul li {
position: relative;
}
.dropdown-hover ul ul ul li {
&:hover,
&.active,
&:focus {
ul {
display: block;
}
}
}
.dropdown-hover ul ul ul ul {
display: none;
left: -100%;
min-width: 250px;
position: absolute;
top: 0;
z-index: 1;
}
}
} }

54
src/scss/_typography.scss
View File

@ -1,20 +1,20 @@
.bg-dark { .bg-dark {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6, h6,
.h1, .h1,
.h2, .h2,
.h3, .h3,
.h4, .h4,
.h5, .h5,
.h6, .h6,
.typography, .typography,
a { a {
color: $white; color: $white;
} }
} }
h1, h1,
@ -32,21 +32,21 @@ h6,
ul, ul,
ol, ol,
p { p {
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.typography { .typography {
@include clearfix; @include clearfix;
@import './types/editor'; @import "./types/editor";
> *:first-child { > *:first-child {
margin-top: 0; margin-top: 0;
} }
> *:last-child { > *:last-child {
margin-bottom: 0; margin-bottom: 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 {
}
} }

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

@ -1,14 +1,14 @@
// remove paddings for elemental list cuz inner elements will have paddings // remove paddings for elemental list cuz inner elements will have paddings
.dnadesign__elementallist__model__elementlist { .dnadesign__elementallist__model__elementlist {
margin: 0; margin: 0;
padding-bottom: 0; padding-bottom: 0;
.element__content { .element__content {
--bs-gutter-x: 2rem; --bs-gutter-x: 2rem;
--bs-gutter-y: .5rem; --bs-gutter-y: 0.5rem;
} }
/*.element { /*.element {
padding-top: $element-reduced-spacer-y; padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y; padding-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-d-spacer-y; margin-top: $element-reduced-d-spacer-y;

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

@ -1,45 +1,44 @@
.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;
}
&:last-child {
margin-bottom: 0;
}
} }
&:last-child {
margin-bottom: 0;
}
}
} }
.element { .element {
position: relative; position: relative;
margin-top: $element-spacer-y; margin-top: $element-spacer-y;
margin-bottom: $element-spacer-y; margin-bottom: $element-spacer-y;
padding-top: $element-spacer-y; padding-top: $element-spacer-y;
padding-bottom: $element-spacer-y; padding-bottom: $element-spacer-y;
// Sidebar-like elements // Sidebar-like elements
&.secondary { &.secondary {
padding-top: ($element-reduced-spacer-y); padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y); padding-bottom: ($element-reduced-spacer-y);
} }
} }
// sub-elements // sub-elements
.element { .element {
.elemental-area { .elemental-area {
.element { .element {
.container,
.container, .container-fluid {
.container-fluid { padding: 0;
padding: 0; width: auto;
width: auto; }
}
}
} }
}
} }

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";

2
src/scss/elements/other.scss
View File

@ -2,5 +2,5 @@
* Basic styles for silverstripe-elemental * Basic styles for silverstripe-elemental
*/ */
.blog-post-info { .blog-post-info {
position: relative; position: relative;
} }

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

@ -1,38 +1,39 @@
// hide default page title cuz elemental object will be used to display titles // hide default page title cuz elemental object will be used to display titles
.element__breadcrumbs { .element__breadcrumbs {
//margin-bottom: calc(-2 * #{inspect($element-spacer-y)}); //margin-bottom: calc(-2 * #{inspect($element-spacer-y)});
.container {} .container {
}
.breadcrumb-link {
text-decoration: none;
&:hover,
&:focus,
&:active,
&.active {
color: $sidebar-nav-link-hover-color;
}
}
.active {
.breadcrumb-link { .breadcrumb-link {
text-decoration: none; color: $sidebar-nav-link-hover-color;
&:hover,
&:focus,
&:active,
&.active {
color: $sidebar-nav-link-hover-color;
}
}
.active {
.breadcrumb-link {
color: $sidebar-nav-link-hover-color;
}
} }
}
} }
.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)});
.page-header { .page-header {
line-height: 1em; line-height: 1em;
margin-bottom: 0; margin-bottom: 0;
} }
} }
.page-header-element:not(.d-block)+.element { .page-header-element:not(.d-block) + .element {
margin-top: 0; margin-top: 0;
} }

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

@ -1,57 +1,56 @@
// remove containers for child elements // remove containers for child elements
.sidebar__col { .sidebar__col {
position: relative; margin-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-spacer-y; margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y; position: relative;
} }
.content-holder__sidebar { .content-holder__sidebar {
.row { .row {
.container,
.container, .container-fluid {
.container-fluid { padding: 0;
padding: 0; width: auto;
width: auto;
}
} }
}
} }
.page-content-sidebar { .page-content-sidebar {
// Sidebar elements
.element {
padding-bottom: ($element-reduced-spacer-y);
padding-top: ($element-reduced-spacer-y);
// Sidebar elements &:first-child {
.element { padding-top: 0;
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y);
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
} }
&:last-child {
padding-bottom: 0;
}
}
} }
.element__widget {} .element__widget {
}
.widget__Site_Widgets_SubmenuWidget { .widget__Site_Widgets_SubmenuWidget {
.nav-link {
width: 100%;
&:hover,
&:focus,
&:active,
&.active {
color: $sidebar-nav-link-hover-color;
font-weight: bold;
}
}
.active {
.nav-link { .nav-link {
width: 100%; color: $sidebar-nav-link-hover-color;
font-weight: bold;
&:hover,
&:focus,
&:active,
&.active {
font-weight: bold;
color: $sidebar-nav-link-hover-color;
}
}
.active {
.nav-link {
font-weight: bold;
color: $sidebar-nav-link-hover-color;
}
} }
}
} }

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

@ -2,34 +2,43 @@
.dynamic__elements__image__elements__elementimage, .dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement { .site__elements__sliderelement {
.element-container { .element-container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.element__image {
min-width: 100%;
}
.carousel-slide {
align-items: center;
background: $sliderelement-carousel-slide-bg;
max-height: $sliderelement-carousel-slide-max-y;
.video {
height: 100%;
position: relative;
@include responsive-ratio(
$sliderelement-carousel-slide-ratio-x,
$sliderelement-carousel-slide-ratio-y,
true
);
iframe {
height: 100% !important;
height: unquote(
math.div(
$sliderelement-carousel-slide-ratio-y,
$sliderelement-carousel-slide-ratio-x
) * 100 + "vw"
) !important;
max-width: none; max-width: none;
padding-left: 0; position: absolute;
padding-right: 0; top: 0;
} width: 100vw !important;
}
.element__image {
min-width: 100%;
}
.carousel-slide {
background: $sliderelement-carousel-slide-bg;
max-height: $sliderelement-carousel-slide-max-y;
align-items: center;
.video {
position: relative;
height: 100%;
@include responsive-ratio($sliderelement-carousel-slide-ratio-x, $sliderelement-carousel-slide-ratio-y, true);
iframe {
position: absolute;
top: 0;
height: 100% !important;
width: 100vw !important;
max-width: none;
height: unquote(math.div($sliderelement-carousel-slide-ratio-y, $sliderelement-carousel-slide-ratio-x) * 100 + 'vw') !important;
}
}
} }
}
} }

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

@ -1,30 +1,30 @@
.field { .field {
flex-direction: row; flex-direction: row;
&__label { &__label {
padding-right: $form-spacer-x; align-items: center;
display: inline-flex; display: inline-flex;
align-items: center; padding-right: $form-spacer-x;
&+.field__content { & + .field__content {
padding-left: $form-spacer-x; padding-left: $form-spacer-x;
}
} }
}
.field__content { .field__content {
flex: 1 1 auto; flex: 1 1 auto;
} }
&.CompositeField { &.CompositeField {
flex-direction: column; flex-direction: column;
} }
} }
.field.password { .field.password {
.show-password { .show-password {
position: absolute; color: $input-color;
top: 0.5em; position: absolute;
right: 0.5em; right: 0.5em;
color: $input-color; 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";

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

@ -1,30 +1,30 @@
#SiteWideAlerts { #SiteWideAlerts {
position: fixed; bottom: 0;
bottom: 0; position: fixed;
right: 0; right: 0;
z-index: 99999; z-index: 99999;
.btn-close { .btn-close {
background: none; background: none;
} }
.alert { .alert {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.alert-offline { .alert-offline {
display: none; display: none;
} }
.is-online { .is-online {
.alert-offline { .alert-offline {
display: none; display: none;
} }
} }
.is-offline { .is-offline {
.alert-offline { .alert-offline {
display: flex; display: flex;
} }
} }

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

@ -1,43 +1,42 @@
html, html,
body { body {
min-height: 100%; min-height: 100%;
min-height: 100vh; min-height: 100vh;
} }
// sticky footer // sticky footer
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
--body-gutter-x: #{inspect($body-gutter-x)}; --body-gutter-x: #{inspect($body-gutter-x)};
--body-gutter-y: #{inspect($body-gutter-y)}; --body-gutter-y: #{inspect($body-gutter-y)};
--body-double-gutter-x: #{inspect($body-double-gutter-x)}; --body-double-gutter-x: #{inspect($body-double-gutter-x)};
--body-double-gutter-y: #{inspect($body-double-gutter-y)}; --body-double-gutter-y: #{inspect($body-double-gutter-y)};
--body-gutter-reduced-x: #{inspect($body-gutter-reduced-x)}; --body-gutter-reduced-x: #{inspect($body-gutter-reduced-x)};
--body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)}; --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
--body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)}; --body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
--body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)}; --body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
.wrapper { .wrapper {
flex: 1 0 auto; flex: 1 0 auto;
margin-bottom: $element-spacer-y; margin-bottom: $element-spacer-y;
} }
.footer { .footer {
flex-shrink: 0; flex-shrink: 0;
margin-top: $element-spacer-y; margin-top: $element-spacer-y;
} }
} }
@media (min-width: $extra-large-screen) { @media (min-width: $extra-large-screen) {
html,
body {
font-size: 0.9vw !important;
}
html, .container {
body { max-width: 80vw;
font-size: .9vw !important; }
}
.container {
max-width: 80vw;
}
} }
// don't let images be wider than the parent layer // don't let images be wider than the parent layer
@ -46,57 +45,56 @@ a,
span, span,
button, button,
i { i {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
iframe, iframe,
img { img {
max-width: 100%; max-width: 100%;
} }
ul, ul,
table, table,
p { p {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.a { .a {
cursor: pointer; cursor: pointer;
color: $link-color; color: $link-color;
text-decoration: $link-decoration; text-decoration: $link-decoration;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
color: $link-hover-color; color: $link-hover-color;
} }
} }
// exclude bootstrap-table // exclude bootstrap-table
[data-toggle='table'] { [data-toggle="table"] {
&:hover,
&:hover, &.active,
&.active, &:focus {
&:focus { opacity: 1;
opacity: 1; }
}
} }
[data-toggle='collapse'] { [data-toggle="collapse"] {
&[aria-expanded='true'] { &[aria-expanded="true"] {
.accordion-icon { .accordion-icon {
&:before { &:before {
content: '\f068'; content: "\f068";
} }
}
} }
}
} }
// transactions // transactions
@ -119,7 +117,7 @@ textarea,
.message, .message,
[data-toggle], [data-toggle],
[data-toggle] * { [data-toggle] * {
transition: all 0.4s ease; transition: all 0.4s ease;
} }
.a, .a,
@ -127,46 +125,43 @@ a,
[data-toggle], [data-toggle],
button, button,
.btn { .btn {
&:hover,
&.active,
&[aria-expanded="true"] {
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: scale(1.5);
}
}
&:hover,
&[aria-expanded="true"] {
opacity: 0.8;
}
&.disabled {
opacity: 0.5;
cursor: default;
&:hover, &:hover,
&.active, &.active,
&[aria-expanded='true'] { &[aria-expanded="true"] {
> .fa,
>.fa, > .far,
>.far, > .fas,
>.fas, > .fab,
>.fab, &.fa,
&.fa, &.far,
&.far, &.fas,
&.fas, &.fab {
&.fab { transform: rotate(0deg);
transform: scale(1.5); }
}
}
&:hover,
&[aria-expanded='true'] {
opacity: 0.8;
}
&.disabled {
opacity: 0.5;
cursor: default;
&:hover,
&.active,
&[aria-expanded='true'] {
>.fa,
>.far,
>.fas,
>.fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(0deg);
}
}
} }
}
} }

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";

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

@ -3,126 +3,125 @@
*/ */
.meta-MetaWindow { .meta-MetaWindow {
z-index: 1031; z-index: 1031;
.meta-nav { .meta-nav {
text-decoration: none; text-decoration: none;
} }
} }
.pulse { .pulse {
animation: pulse 0.8s linear infinite; animation: pulse 0.8s linear infinite;
} }
// navs // navs
.navbar-toggler { .navbar-toggler {
transition: transform ease 0.4s; transition: transform ease 0.4s;
} }
.navbar-toggler-icon { .navbar-toggler-icon {
width: auto; height: auto;
height: auto; width: auto;
} }
.nav-item, .nav-item,
.nav-link { .nav-link {
display: flex; display: flex;
} }
button.nav-link { button.nav-link {
border: 0; border: 0;
outline: 0; letter-spacing: inherit;
text-transform: inherit; outline: 0;
letter-spacing: inherit; text-transform: 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 {
position: absolute; bottom: 1em;
right: 0.5em; position: absolute;
bottom: 1em; right: 0.5em;
} }
} }
.navbar-nav .dropdown-toggle.nav-link { .navbar-nav .dropdown-toggle.nav-link {
padding-right: 1.5em; padding-right: 1.5em;
} }
.dropdown.show .dropdown-toggle::after, .dropdown.show .dropdown-toggle::after,
.dropdown-toggle.active-dropdown::after, .dropdown-toggle.active-dropdown::after,
.dropdown-toggle.active::after { .dropdown-toggle.active::after {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.dropdown-menu { .dropdown-menu {
padding: 0; border-radius: 0;
border-radius: 0; overflow: hidden;
will-change: max-height, display; padding: 0;
overflow: hidden; transition: none;
transition: none; will-change: max-height, display;
&.show { &.show {
animation: expand 2s; animation: expand 2s;
animation-fill-mode: both; animation-fill-mode: both;
overflow: visible; overflow: visible;
} }
.dropdown-list { .dropdown-list {
@extend .list-unstyled; @extend .list-unstyled;
} }
.dropdown-menu { .dropdown-menu {
top: 0; left: 100%;
left: 100%; top: 0;
} }
} }
.dropdown-item { .dropdown-item {
white-space: normal; white-space: normal;
} }
.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;
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.btn-toolbar { .btn-toolbar {
margin-top: $form-spacer-y; margin-top: $form-spacer-y;
} }
// rewrite btn opacity on hover // rewrite btn opacity on hover
.btn { .btn {
&:hover,
&:hover, &.active,
&.active, &:focus {
&:focus { opacity: 1;
opacity: 1; }
}
} }
// SS-messages // SS-messages
.alert+.alert { .alert + .alert {
border-top: 0; border-top: 0;
} }
/*.message { /*.message {
@ -150,27 +149,26 @@ 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 {
position: relative; position: relative;
will-change: position, top; will-change: position, top;
} }

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

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

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

@ -4,40 +4,39 @@
// 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 { display: block;
display: block; }
}
}
} }
}
} }
// 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 {
display: none;
@media (min-width: $full-body-min-width) {
display: inherit;
}
}
@media not all and (hover: none) {
> .dropdown-toggle-touch {
display: inherit;
} }
>.dropdown-toggle-fl { > .dropdown-toggle-notouch {
display: none; display: none;
@media (min-width: $full-body-min-width) {
display: inherit;
}
}
@media not all and (hover: none) {
>.dropdown-toggle-touch {
display: inherit;
}
>.dropdown-toggle-notouch {
display: none;
}
} }
}
} }

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

@ -3,37 +3,37 @@
*/ */
.loading { .loading {
animation: fade 0.5s linear infinite; animation: fade 0.5s linear infinite;
} }
.graphql-page { .graphql-page {
&.response-404 { &.response-404 {
filter: grayscale(1); cursor: not-allowed;
opacity: 0.5; filter: grayscale(1);
cursor: not-allowed; opacity: 0.5;
} }
} }
.is-offline { .is-offline {
iframe { iframe {
display: none; display: none;
} }
.graphql-page { .graphql-page {
&.response-523 { &.response-523 {
filter: grayscale(1); cursor: not-allowed;
opacity: 0.5; filter: grayscale(1);
cursor: not-allowed; opacity: 0.5;
}
} }
}
} }
body.ajax-loading { body.ajax-loading {
overflow: hidden; height: 100vh;
height: 100vh; overflow: hidden;
#Header { #Header {
position: relative; position: relative;
z-index: 2001; z-index: 2001;
} }
} }

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

@ -1,138 +1,141 @@
.sidebar__col { .sidebar__col {
position: relative; margin-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-spacer-y; margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y; position: relative;
} }
.content-holder__sidebar { .content-holder__sidebar {
> .container { > .container {
padding: 0; padding: 0;
} }
} }
#SiteWideMessage { #SiteWideMessage {
text-align: center; text-align: center;
.alert { .alert {
margin-bottom: 0; margin-bottom: 0;
.btn-close { .btn-close {
margin-top: -0.5rem; float: right;
float: right; margin-top: -0.5rem;
} }
} }
} }
#Header { #Header {
background-color: $header-bg; background-color: $header-bg;
color: $header-color; color: $header-color;
a { a {
color: $header-link; color: $header-link;
} }
.nav-container { .nav-container {
display: flex; align-items: flex-end;
justify-content: flex-end; display: flex;
align-items: flex-end; justify-content: flex-end;
position: static; position: static;
} }
.logo { .logo {
filter: invert(100%); filter: invert(100%);
} }
.tagline { .tagline {
display: inline-block; display: inline-block;
font-size: 1.2rem; font-size: 1.2rem;
margin-left: 2em; margin-left: 2em;
} }
} }
#Navigation { #Navigation {
font-size: 1.5rem; background: $header-bg;
text-transform: uppercase; font-size: 1.5rem;
letter-spacing: 0.25rem; letter-spacing: 0.25rem;
width: 100%; text-transform: uppercase;
background: $header-bg; width: 100%;
.navbar-toggler { .navbar-toggler {
color: $main-nav-link-color; color: $main-nav-link-color;
font-size: $main-nav-toggler-size; font-size: $main-nav-toggler-size;
} }
.nav-item, .nav-item,
.nav-link { .nav-link {
flex-direction: column; flex-direction: column;
/*@media (min-width: $full-body-min-width) { /*@media (min-width: $full-body-min-width) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
}*/ }*/
} }
.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,
&.active { &.active {
background: $main-nav-link-hover-bg; background: $main-nav-link-hover-bg;
color: $main-nav-link-hover-color; color: $main-nav-link-hover-color;
} }
} }
.active { .active {
> .nav-link { > .nav-link {
background: $main-nav-link-hover-bg; background: $main-nav-link-hover-bg;
color: $main-nav-link-hover-color; color: $main-nav-link-hover-color;
} }
} }
.nav-item .nav-dropdown { .nav-item .nav-dropdown {
.fa-chevron-right .fa-chevron-right
//&:after //&:after
{ {
display: none; display: none;
} }
} }
.dropdown-menu { .dropdown-menu {
border-color: $main-nav-dropdown-bg; background: $main-nav-dropdown-bg;
background: $main-nav-dropdown-bg; border-color: $main-nav-dropdown-bg;
margin-top: 0; 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;
} }
} }
.dropdown-item { .dropdown-item {
&.active, &.active,
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background: $main-nav-dropdown-hover-bg; background: $main-nav-dropdown-hover-bg;
.nav-item-link { .nav-item-link {
color: $main-nav-dropdown-hover-color; color: $main-nav-dropdown-hover-color;
} }
} }
.nav-item-link {
width: 100%;
justify-content: flex-start;
align-items: flex-start;
}
}
@media (min-width: $full-body-min-width) { .nav-item-link {
.navbar-nav > .nav-item { align-items: flex-start;
padding-right: 2rem; justify-content: flex-start;
padding-left: 2rem; width: 100%;
} }
.dropdown-item .nav-item-link { }
padding-left: 1rem;
padding-right: 1rem; @media (min-width: $full-body-min-width) {
} .navbar-nav > .nav-item {
} padding-left: 2rem;
padding-right: 2rem;
}
.dropdown-item .nav-item-link {
padding-left: 1rem;
padding-right: 1rem;
}
}
} }
/*#MainContent { /*#MainContent {
@ -141,37 +144,37 @@
}*/ }*/
#PageBreadcumbs { #PageBreadcumbs {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
#Footer { #Footer {
display: flex; background-color: $footer-bg;
flex-direction: column; color: $footer-color;
background-color: $footer-bg; display: flex;
color: $footer-color; 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,
.a { .a {
color: $footer-link; color: $footer-link;
} }
.footer { .footer {
padding-top: $element-reduced-spacer-y; background-color: $footer-footer-bg;
padding-bottom: $element-reduced-spacer-y; padding-bottom: $element-reduced-spacer-y;
background-color: $footer-footer-bg; padding-top: $element-reduced-spacer-y;
.copyright { .copyright {
padding-right: 0.5rem; padding-right: 0.5rem;
} }
li { li {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
} }

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

@ -1,39 +1,41 @@
@import "~bootstrap-table/src/bootstrap-table.scss"; @import "~bootstrap-table/src/bootstrap-table.scss";
.bootstrap-table { .bootstrap-table {
.fixed-table-container { .fixed-table-container {
.table { .table {
thead th { thead th {
.both, .asc, .desc { .both,
background-image: none; .asc,
.desc {
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;
} }
}
.asc:after {
content: "\f0de";
}
.desc:after {
content: "\f0dd";
}
.both:after {
content: "\f0dc";
}
.th-inner.sortable {
&:hover,
&:focus {
opacity: .8;
}
}
}
} }
.asc:after {
content: "\f0de";
}
.desc:after {
content: "\f0dd";
}
.both:after {
content: "\f0dc";
}
.th-inner.sortable {
&:hover,
&:focus {
opacity: 0.8;
}
}
}
} }
}
} }

48
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,13 +39,13 @@
@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;
} }

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

@ -1,57 +1,57 @@
.message { .message {
@extend .alert !optional; @extend .alert !optional;
&.warning { &.warning {
@extend .alert-warning !optional; @extend .alert-warning !optional;
} }
&.error { &.error {
@extend .alert-danger !optional; @extend .alert-danger !optional;
} }
} }
.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 {
position: absolute; height: 100%;
top: 0; left: 0;
left: 0; position: absolute;
height: 100%; top: 0;
width: 100%; width: 100%;
} }
} }
.embed-responsive-4by3 { .embed-responsive-4by3 {
padding-top: 75%; padding-top: 75%;
} }
#ForgotPassword { #ForgotPassword {
margin: 1rem 0; margin: 1rem 0;
width: 100%; width: 100%;
} }
#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,
button, button,
div, div,
i, i,
span { span {
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;
} }
} }

4
src/scss/libs/silverstripe.shop.scss
View File

@ -1,8 +1,8 @@
.cart-footer { .cart-footer {
margin-top: $grid-gutter-height * 0.5; margin-top: $grid-gutter-height * 0.5;
} }
.address-panel, .address-panel,
.account-nav { .account-nav {
margin-bottom: $grid-gutter-height * 0.5; margin-bottom: $grid-gutter-height * 0.5;
} }

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";

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

@ -3,82 +3,82 @@
#Menu-Dynamic-Elements-Sponsors-Admin-SponsorsAdmin, #Menu-Dynamic-Elements-Sponsors-Admin-SponsorsAdmin,
#Menu-Dynamic-Elements-Admin-TestimonialsAdmin, #Menu-Dynamic-Elements-Admin-TestimonialsAdmin,
#Menu-Dynamic-Elements-Promos-Admin-PromosAdmin { #Menu-Dynamic-Elements-Promos-Admin-PromosAdmin {
display: none; display: none;
} }
// Fix form actions // Fix form actions
#Form_ItemEditForm_MajorActions_Holder { #Form_ItemEditForm_MajorActions_Holder {
min-width: 30%; border: 0;
padding-bottom: 0; margin-bottom: 0;
margin-bottom: 0; min-width: 30%;
border: 0; padding-bottom: 0;
} }
#Form_EditForm_MajorActions_Holder { #Form_EditForm_MajorActions_Holder {
min-width: 70%; border: 0;
padding-bottom: 0; margin-bottom: 0;
margin-bottom: 0; min-width: 70%;
border: 0; padding-bottom: 0;
} }
#Form_ItemEditForm_RightGroup_Holder { #Form_ItemEditForm_RightGroup_Holder {
min-width: 20%; border: 0;
padding-bottom: 0; margin-bottom: 0;
margin-bottom: 0; min-width: 20%;
border: 0; padding-bottom: 0;
} }
// make edit icon always shown // make edit icon always shown
.grid-field__icon-action { .grid-field__icon-action {
&.edit-link { &.edit-link {
opacity: 1; opacity: 1;
} }
} }
// correct primary buttons coloring // correct primary buttons coloring
.toolbar--south { .toolbar--south {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
} }
.btn-outline-primary { .btn-outline-primary {
color: #999; color: #999;
} }
} }
#ActionMenus_MoreOptions { #ActionMenus_MoreOptions {
.btn-primary { .btn-primary {
color: #5589a7; color: #5589a7;
} }
} }
// 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;
}
&:after {
margin-bottom: 0.25rem;
}
} }
.form-group:after, &:after {
.form__divider:after { margin-bottom: 0.25rem;
display: none;
} }
}
/*.mce-edit-area { .form-group:after,
.form__divider:after {
display: none;
}
/*.mce-edit-area {
height: 5em; height: 5em;
iframe { iframe {
height: 5em !important; height: 5em !important;
@ -90,33 +90,33 @@ body.cms {
} }
.fields-row { .fields-row {
margin: 0 !important;
padding: 0 0 2em !important;
width: 100%;
.form__fieldgroup {
display: flex;
flex: 0 0 100% !important;
flex-wrap: wrap;
margin: 0 !important; margin: 0 !important;
padding: 0 0 2em !important; max-width: 100% !important;
width: 100%; padding: 0 !important;
width: 100% !important;
.form__fieldgroup { > .form-group {
margin: 0 !important; flex: 1 1 50%;
padding: 0 !important; margin: 0 !important;
width: 100% !important; max-width: 50%;
max-width: 100% !important; padding: 0 1rem;
flex: 0 0 100% !important;
display: flex;
flex-wrap: wrap;
>.form-group {
padding: 0 1rem;
margin: 0 !important;
flex: 1 1 50%;
max-width: 50%;
}
} }
}
} }
// notifications rendering // notifications rendering
.notifications-list { .notifications-list {
.alert { .alert {
.btn-close { .btn-close {
display: none; display: none;
}
} }
}
} }

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

@ -1,13 +1,13 @@
@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 {
background: $body-bg; background: $body-bg;
color: $body-color; color: $body-color;
} }
h1, h1,
@ -22,151 +22,151 @@ h6,
.h4, .h4,
.h5, .h5,
.h6 { .h6 {
color: $headings-color; color: $headings-color;
} }
a { a {
color: $link-color; color: $link-color;
} }
img, img,
.captionImage, .captionImage,
.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) {
margin-left: $element-reduced-spacer-x;
margin-right: $element-reduced-spacer-x;
}
&.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
&.w-100 {
margin-left: 0;
margin-right: 0;
text-align: center;
}
&.start,
&.left,
&.leftAlone {
clear: left;
float: left;
@media (min-width: $typography-breakpoint + 1) { @media (min-width: $typography-breakpoint + 1) {
margin-left: $element-reduced-spacer-x; margin: 0 $element-reduced-spacer-x $element-reduced-spacer-y 0;
margin-right: $element-reduced-spacer-x;
} }
}
&.center { &.end,
margin-left: auto; &.right,
margin-right: auto; &.rightAlone {
text-align: center; clear: right;
float: right;
@media (min-width: $typography-breakpoint + 1) {
margin: $element-reduced-spacer-y 0 0 $element-reduced-spacer-x;
} }
}
&.w-100 { iframe {
margin-left: 0; height: 100% !important;
margin-right: 0; width: 100% !important;
text-align: center; }
}
&.start,
&.left,
&.leftAlone {
float: left;
clear: left;
@media (min-width: $typography-breakpoint + 1) {
margin: 0 $element-reduced-spacer-x $element-reduced-spacer-y 0;
}
}
&.end,
&.right,
&.rightAlone {
float: right;
clear: right;
@media (min-width: $typography-breakpoint + 1) {
margin: $element-reduced-spacer-y 0 0 $element-reduced-spacer-x;
}
}
iframe {
width: 100% !important;
height: 100% !important;
}
} }
.captionImage { .captionImage {
img { img {
margin-bottom: $element-reduced-spacer-y !important; margin-bottom: $element-reduced-spacer-y !important;
} }
.caption { .caption {
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
.left, .left,
.text-left, .text-left,
.text-start { .text-start {
text-align: left; text-align: left;
} }
.center, .center,
.text-center { .text-center {
text-align: center; text-align: center;
} }
.right, .right,
.text-right, .text-right,
.text-end { .text-end {
text-align: right; text-align: right;
} }
.text-justify { .text-justify {
text-align: justify; text-align: justify;
} }
table { table {
width: 100%; border-collapse: collapse;
max-width: 100%; max-width: 100%;
border-collapse: collapse; width: 100%;
@extend .table; @extend .table;
@extend .table-striped; @extend .table-striped;
@extend .table-bordered; @extend .table-bordered;
&.table-none { &.table-none {
@extend .table-borderless; @extend .table-borderless;
border: 0; border: 0;
tr, tr,
td, td,
th { th {
border: 0; background: none !important;
background: none !important; border: 0;
box-shadow: none !important; box-shadow: none !important;
}
} }
}
} }
ul, ul,
ol { ol {
padding-left: $spacer; padding-left: $spacer;
li { li {
position: relative; margin: 0.5em 0;
padding-left: 0.5em; padding-left: 0.5em;
margin: 0.5em 0; position: relative;
} }
} }
ul { ul {
list-style: none;
li {
list-style: none; list-style: none;
padding-left: 0;
li { &:before {
list-style: none; content: "\2022";
padding-left: 0; display: inline-block;
font-size: 1em;
&:before { left: -0.75em;
content: '\2022'; margin-right: 0.5em;
display: inline-block; opacity: 0.5;
margin-right: 0.5em; position: absolute;
top: -0.1em;
position: absolute;
left: -0.75em;
font-size: 1em;
top: -0.1em;
opacity: 0.5;
}
} }
}
} }
table, table,
@ -176,15 +176,15 @@ th,
td, td,
img, img,
iframe { iframe {
max-width: 100% !important; max-width: 100% !important;
@media (max-width: $typography-breakpoint) { @media (max-width: $typography-breakpoint) {
display: block; border: 0 !important;
width: 100% !important; display: block;
border: 0 !important; padding-left: 0 !important;
padding-left: 0 !important; padding-right: 0 !important;
padding-right: 0 !important; width: 100% !important;
} }
} }
table, table,
@ -193,52 +193,52 @@ tr,
th, th,
td, td,
img { img {
@media (max-width: $typography-breakpoint) { @media (max-width: $typography-breakpoint) {
height: auto !important; height: auto !important;
} }
} }
@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; padding: 0;
clip: rect(0, 0, 0, 0); position: absolute;
white-space: nowrap; white-space: nowrap;
border: 0; width: 1px;
}
thead {
display: block;
text-align: center;
> tr {
display: flex;
} }
}
thead { tbody {
display: block; display: block;
text-align: center; }
>tr { td {
display: flex; display: flex;
} flex-direction: column;
}
&:before {
tbody { content: attr(data-label);
display: block; display: block;
} font-weight: bold;
min-width: 50%;
td { padding: 0 $spacer * 0.5;
display: flex; width: 50%;
flex-direction: column;
&:before {
content: attr(data-label);
font-weight: bold;
width: 50%;
min-width: 50%;
padding: 0 $spacer*0.5;
display: block;
}
} }
}
} }
img { img {
border: 1px dashed; border: 1px dashed;
} }

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";

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

@ -1,163 +1,164 @@
@import "../_variables"; @import "../_variables";
h1.title { h1.title {
display: block; border-bottom: 1px solid $border-color;
text-align: right; display: block;
border-bottom: 1px solid $border-color; line-height: 1.5em;
text-transform: uppercase; text-align: right;
line-height: 1.5em; text-transform: uppercase;
} }
.warningMessage { .warningMessage {
position: relative; background-color: #fff3cd;
padding: $alert-padding-y $alert-padding-x; border: $alert-border-width solid transparent;
margin-bottom: $alert-margin-bottom; border-color: #ffeeba;
border: $alert-border-width solid transparent; 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-family: $font-family-base;
font-size: 14px; font-size: 14px;
font-family: $font-family-base; padding: 5px;
} }
#Content .footer td { #Content .footer td {
padding: 10px; padding: 10px;
} }
#Content .footer td.right { #Content .footer td.right {
text-align: right; text-align: right;
} }
#Content .typography { #Content .typography {
padding: 0px 10px; padding: 0 10px;
} }
#Content .typography a { #Content .typography a {
font-size: 1em; font-size: 1em;
text-decoration: underline; text-decoration: underline;
} }
#Content .typography a:hover { #Content .typography a:hover {
text-decoration: none; text-decoration: none;
} }
#Content .typography ul { #Content .typography ul {
padding: 2px 15px; padding: 2px 15px;
} }
#Content .typography ul li { #Content .typography ul li {
padding: 2px 5px; padding: 2px 5px;
} }
#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,
table#SenderTable .meta { table#SenderTable .meta {
width: 50%; width: 50%;
} }
table#MetaTable { table#MetaTable {
margin-left: auto; margin-left: auto;
} }
table#MetaTable .label { table#MetaTable .label {
font-weight: bold; font-weight: bold;
} }
#ShippingTable td, #ShippingTable td,
#ShippingTable th { #ShippingTable th {
width: 50%; width: 50%;
} }
table.infotable { table.infotable {
border: 1px solid $border-color; background: $body-bg;
border-collapse: collapse; border: 1px solid $border-color;
width: 100%; border-bottom: 1px solid $border-color;
border-top: 1px solid $border-color; border-collapse: collapse;
border-bottom: 1px solid $border-color; border-top: 1px solid $border-color;
background: $body-bg; 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-size: $h3-font-size; font-family: $font-family-base;
font-weight: normal; font-size: $h3-font-size;
font-family: $font-family-base; font-weight: normal;
} }
table.infotable tr td, table.infotable tr td,
table.infotable tr th { table.infotable tr th {
padding: 5px; border: 1px solid $border-color;
color: $body-color; color: $body-color;
border: 1px solid $border-color; padding: 5px;
} }
table.infotable td { table.infotable td {
vertical-align: middle; vertical-align: middle;
} }
table.infotable tr.summary { table.infotable tr.summary {
font-weight: bold; font-weight: bold;
} }
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 {
font-weight: bold; font-weight: bold;
} }
table.infotable tr td a { table.infotable tr td a {
color: $link-color; color: $link-color;
text-decoration: underline; text-decoration: underline;
} }
table.infotable tr td a:hover { table.infotable tr td a:hover {
text-decoration: none; text-decoration: none;
} }
table.infotable .modifierRow, table.infotable .modifierRow,
table.infotable .threeColHeader { table.infotable .threeColHeader {
text-align: right; text-align: right;
} }
table.infotable .right { table.infotable .right {
text-align: right; text-align: right;
} }
table.infotable .center { table.infotable .center {
text-align: center; text-align: center;
} }
table.infotable .left, table.infotable .left,
table.infotable th { table.infotable th {
text-align: left; text-align: left;
} }

88
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,72 +22,72 @@ $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; align-items: flex-start;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: flex-start; justify-content: center;
flex-direction: column; min-height: $carousel-slide-min-height;
>.container { > .container {
position: relative; position: relative;
}
.video {
width: 100%;
iframe {
height: auto !important;
width: 100% !important;
} }
}
.video { .img {
width: 100%; display: block;
width: 100%;
}
iframe { img.loading {
width: 100% !important; max-height: $carousel-slide-img-loading-max-height;
height: auto !important; }
}
}
.img {
display: block;
width: 100%;
}
img.loading {
max-height: $carousel-slide-img-loading-max-height;
}
} }
.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 {
background: $carousel-controls-hover-bg; background: $carousel-controls-hover-bg;
} }
} }
.carousel-indicators li { .carousel-indicators li {
box-shadow: none; box-shadow: none;
} }
.carousel-title { .carousel-title {
color: $carousel-title-color; color: $carousel-title-color;
} }
.carousel-title, .carousel-title,
.carousel-content { .carousel-content {
text-shadow: $carousel-text-shadow; text-shadow: $carousel-text-shadow;
} }
.carousel-caption { .carousel-caption {
right: 0; bottom: 0;
left: auto; left: auto;
width: 50%; right: 0;
bottom: 0; width: 50%;
} }
.slide-link__media { .slide-link__media {
position: absolute; bottom: 0;
opacity: 0; left: 0;
left: 0; opacity: 0;
right: 0; position: absolute;
top: 0; right: 0;
bottom: 0; top: 0;
} }

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

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

12
src/scss/ui/form.stepped.scss
View File

@ -1,9 +1,9 @@
.form-stepped { .form-stepped {
.step { .step {
display: none !important; display: none !important;
&.active { &.active {
display: flex !important; display: flex !important;
} }
} }
} }

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

@ -1,53 +1,57 @@
#mc_embed_signup, #mc_embed_signup,
.mc_embed_signup { .mc_embed_signup {
padding: 2rem; padding: 2rem;
.mc-field-group { .mc-field-group {
@extend .form-group; @extend .form-group;
} }
input[type='text'],
input[type='email'] {
@extend .form-control;
}
input[type='submit'] {
@extend .btn;
@extend .btn-primary;
margin: 0 auto;
width: 50%;
display: block;
}
.clear {
float: none;
clear: both;
}
.input-group { input[type="text"],
@extend .form-check; input[type="email"] {
ul, @extend .form-control;
li { }
list-style: none;
}
input[type='checkbox'] {
@extend .form-check-input;
}
label { input[type="submit"] {
@extend .form-check-label; @extend .btn;
} @extend .btn-primary;
} display: block;
margin: 0 auto;
width: 50%;
}
.mce_inline_error, .clear {
#mce-success-response, clear: both;
#mce-error-response { float: none;
margin-top: 1rem; }
@extend .alert;
}
#mce-success-response { .input-group {
@extend .alert-success; @extend .form-check;
} ul,
li {
list-style: none;
}
.mce_inline_error, input[type="checkbox"] {
#mce-error-response { @extend .form-check-input;
@extend .alert-danger; }
}
label {
@extend .form-check-label;
}
}
.mce_inline_error,
#mce-success-response,
#mce-error-response {
margin-top: 1rem;
@extend .alert;
}
#mce-success-response {
@extend .alert-success;
}
.mce_inline_error,
#mce-error-response {
@extend .alert-danger;
}
} }

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

@ -11,121 +11,121 @@ $map-popup-bg: $white !default;
$map-popup-color: $body-color !default; $map-popup-color: $body-color !default;
.mapAPI-map { .mapAPI-map {
height: $map-height; height: $map-height;
//margin-bottom: $grid-gutter-element-height; //margin-bottom: $grid-gutter-element-height;
} }
.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;
line-height: 1.2em; left: 0;
position: absolute; line-height: 1.2em;
top: 0; pointer-events: none;
left: 0; position: absolute;
display: flex; top: 0;
pointer-events: none; width: $map-popup-width;
z-index: 4; z-index: 4;
}
&-popup-anchor-bottom,
&-popup-anchor-bottom-left,
&-popup-anchor-bottom-right {
flex-direction: column-reverse;
}
&-popup-content {
background: $map-popup-bg;
border-radius: 0.25rem;
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 {
border-top-right-radius: 0.25rem;
font-size: 2rem;
padding: 0.5rem;
position: absolute;
right: 0;
top: 0;
z-index: 2;
&:hover,
&:focus {
background: $primary;
color: $white;
}
}
&-popup-tip {
border: 0.8rem solid transparent;
height: 0;
width: 0;
z-index: 1;
}
&-popup-anchor-bottom &-popup-tip {
align-self: center;
border-bottom: 0;
border-top-color: $map-popup-bg;
}
&-marker {
align-items: flex-end;
color: $map-marker-color;
cursor: pointer;
display: flex;
font-size: $map-marker-size;
height: $map-marker-size;
justify-content: center;
line-height: 1em;
text-align: center;
width: $map-marker-size;
.marker-icon,
.fas,
.fab,
.far {
animation: pulse 0.8s linear infinite;
}
}
&-cluster {
align-items: center;
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,
&::after {
background: $info;
border-radius: 100%;
content: "";
display: block;
height: 140%;
left: 50%;
opacity: 0.2;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 140%;
z-index: -1;
} }
&-popup-anchor-bottom, &::after {
&-popup-anchor-bottom-left, height: 180%;
&-popup-anchor-bottom-right { width: 180%;
flex-direction: column-reverse;
}
&-popup-content {
min-width: $map-popup-width;
background: $map-popup-bg;
color: $map-popup-color;
position: relative;
pointer-events: auto;
padding: 0.8rem;
border-radius: 0.25rem;
min-height: 5rem;
box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4);
}
&-popup-close-button {
position: absolute;
right: 0;
top: 0;
font-size: 2rem;
padding: 0.5rem;
border-top-right-radius: 0.25rem;
z-index: 2;
&:hover,
&:focus {
background: $primary;
color: $white;
}
}
&-popup-tip {
width: 0;
height: 0;
border: 0.8rem solid transparent;
z-index: 1;
}
&-popup-anchor-bottom &-popup-tip {
border-top-color: $map-popup-bg;
align-self: center;
border-bottom: none;
}
&-marker {
width: $map-marker-size;
height: $map-marker-size;
font-size: $map-marker-size;
line-height: 1em;
color: $map-marker-color;
cursor: pointer;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
.marker-icon,
.fas,
.fab,
.far {
animation: pulse 0.8s linear infinite;
}
}
&-cluster {
background: $info;
color: color-yiq($info);
border-radius: 100%;
font-weight: bold;
font-size: 1.2rem;
display: flex;
align-items: center;
animation: pulse 0.8s linear infinite;
&::before,
&::after {
content: "";
display: block;
position: absolute;
width: 140%;
height: 140%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: $info;
opacity: 0.2;
border-radius: 100%;
z-index: -1;
}
&::after {
width: 180%;
height: 180%;
}
} }
}
} }

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

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