From 8ba642128a5218b2cf6b2f86f5042b73f5158a9e Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Sun, 21 Oct 2018 17:06:38 -0400 Subject: [PATCH 01/13] Build output as of bdf829aa349aeb15fb9837612901504db14d59a5 --- dist/css/example.min.css | 1 + dist/icon.png | Bin 0 -> 1794 bytes dist/index.html | 450 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 451 insertions(+) create mode 100644 dist/css/example.min.css create mode 100644 dist/icon.png create mode 100644 dist/index.html diff --git a/dist/css/example.min.css b/dist/css/example.min.css new file mode 100644 index 0000000..3a5a902 --- /dev/null +++ b/dist/css/example.min.css @@ -0,0 +1 @@ +:root{--main-color: #00B5FC;--main-color-darker: #00A0DF;--second-color: #39444D;--second-color-darker: #272F37;--third-color: #FBFBFC;--third-color-darker: #ececf1;--reset-color:#ffffff;--link-color:gray;--link-hover-color:rgba(0,0,0, 0.87);--link-hover-color-inverted:#ececf1;--border-color:whitesmoke;--border-color-darker:rgba(0,0,0, 0.25);--std-gutter:0.6rem;--std-gutter-ex:0.9735rem;--hero-gutter:2rem;--hero-gutter-ex:3rem;--border-radius:4px;--border-radius-sm:2px;--border-radius-default:0;--main-font:'IBM Plex Sans', sans-serif;--main-row-height:44.8px}html{font-size:62.5%;height:100%}body{font-size:1.4rem;min-height:100%;font-family:var(--main-font);overflow:hidden}a{text-decoration:none;color:var(--link-color)}a:hover{color:var(--link-hover-color)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb{background:rgba(208,208,208,0.8)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(208,208,208,0.5)}.disabled{opacity:0.5;pointer-events:none}.navigation-list,.navigation-list li{list-style:none;margin:0}.header{background-color:var(--main-color);height:var(--main-row-height);display:flex;align-items:center;padding-left:90px}.logo{position:absolute;top:0;left:0}.navigation{padding:var(--std-gutter)}.navigation-list{padding:0}.navigation-list ul{padding-left:var(--std-gutter)}.navigation-item{--std-gutter:0.3rem;--std-gutter-ex:0.6rem;padding:var(--std-gutter) var(--std-gutter-ex)}.navigation-item a{color:var(--third-color)}.navigation-item a:hover{color:var(--main-color)}.navigation-item a{background-color:var(--second-color-darker);color:var(--third-color);border-radius:var(--border-radius);display:inline-block;padding:var(--std-gutter) var(--std-gutter-ex);text-decoration:none;transition:box-shadow 250ms ease-in-out}.navigation-item a:hover{box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1)}.navigation-item.docs{--second-color-darker:#196fc1}.navigation-item.docs a:hover{color:var(--reset-color)}.navigation-item.components{--second-color-darker:#c119a7}.navigation-item.components a:hover{color:var(--reset-color)}.popover{padding:var(--std-gutter-ex)}.popover-item{padding:var(--std-gutter) var(--std-gutter-ex)}.footer{padding:var(--std-gutter-ex);background-color:var(--second-color-darker);color:var(--third-color);font-size:1.1rem;box-sizing:border-box;height:100%;line-height:1}.footer a{color:var(--link-color)}.footer a:hover{color:var(--link-hover-color-inverted)}.components-nav-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){.components-nav-grid{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;grid-template-rows:1fr}}.components-nav-grid>a{--link-color:var(--reset-color);--link-hover-color:var(--reset-color);padding:var(--std-gutter-ex);background-color:#d23fbb;border-bottom:3px solid #e479d4;cursor:pointer;font-size:1.1rem}.components-nav-grid>a.active{background-color:#c119a7;border-bottom:3px solid #9c1587;cursor:default}.docs-nav-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr ;grid-template-rows:1fr}.docs-nav-grid>a{--link-color:var(--reset-color);--link-hover-color:var(--reset-color);padding:var(--std-gutter-ex);background-color:#3f8ad2;border-bottom:3px solid #79b0e4;cursor:pointer;font-size:1.1rem}.docs-nav-grid>a.active{background-color:#196fc1;border-bottom:3px solid #155a9c;cursor:default}#components-cards{display:grid;grid-gap:var(--hero-gutter);grid-template-columns:1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){#components-cards{grid-template-columns:1fr 1fr ;grid-template-rows:1fr}}#components-typography{display:grid;grid-gap:var(--hero-gutter);grid-template-columns:1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){#components-typography{grid-template-columns:1fr 1fr ;grid-template-rows:1fr}}.card{border:1px solid var(--third-color-darker);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-1{border:1px solid var(--border-color-darker);box-shadow:0 1px 6px 0 rgba(0,0,0,0.07),0 3px 4px 0 rgba(0,0,0,0.06),0 1px 7px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-2{border:1px solid var(--border-color-darker);box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-3{border:1px solid var(--border-color-darker);box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-4{border:1px solid var(--border-color-darker);box-shadow:0 12px 16px 2px rgba(0,0,0,0.07),0 5px 22px 4px rgba(0,0,0,0.06),0 6px 13px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-5{border:1px solid var(--border-color-darker);box-shadow:0 15px 22px 2px rgba(0,0,0,0.07),0 6px 34px 5px rgba(0,0,0,0.06),0 7px 14px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.txt-nav-title{font-weight:600}.txt-super-hero{font-size:3.6rem;font-weight:300}.txt-hero{font-size:2.4rem;font-weight:300}.txt-title{font-size:1.8rem}.txt-lg{font-size:1.6rem}.txt-md{font-size:1.5rem}.txt-sm{font-size:1.3rem}.txt-xs{font-size:1.2rem}.txt-xxs{font-size:1.1rem}.txt-link{--link-color:var(--main-color);--link-hover-color:var(--main-color-darker)}.sub-title{font-size:1.2rem;color:var(--third-color)}.grid-container{display:grid;height:100vh;grid-template-columns:1fr;grid-template-rows:var(--main-row-height) 1.9fr;grid-template-areas:"Masthead" "Layout"}.Masthead{grid-area:Masthead;position:fixed;top:0;width:100%;z-index:2}.Layout{display:grid;grid-area:Layout;grid-template-columns:250px 1.7fr;grid-template-rows:1fr;grid-template-areas:"Nav Main"}.Main{display:grid;grid-area:Main;grid-template-columns:1fr;grid-template-rows:1.9fr 55px;grid-template-areas:"." "MainFooter";background-color:var(--third-color)}.MastheadMain{height:100vh;position:relative}.MastheadMain .content-scrollable{position:relative;top:var(--main-row-height);height:calc(100vh - 200px);overflow-y:auto;width:calc(100vw - 250px);overflow-x:auto}@media only screen and (max-width: 1200px){.MastheadMain .content-scrollable{height:calc(100vh - 238px);overflow-y:auto}}.MastheadMain section{padding:var(--hero-gutter-ex)}.MastheadMain-content{background-color:#9c1587;color:var(--reset-color);position:sticky;top:var(--main-row-height);z-index:1}.MastheadMain-content>div{transition:box-shadow 250ms ease-in-out;box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1)}.MastheadMain-content>div:hover{box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1)}.MastheadMain.docs .MastheadMain-content{background-color:#155a9c;border-bottom:1px solid}.MastheadMain-hero{padding:var(--std-gutter-ex)}.MainFooter{grid-area:MainFooter;position:fixed;bottom:0;width:100%}.Nav{grid-area:Nav;background-color:var(--second-color);color:var(--third-color);box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1);height:100vh;position:fixed;width:250px;height:calc(100vh - var(--main-row-height));overflow:auto;transition:box-shadow 250ms ease-in-out}.Nav:hover{box-shadow:0 12px 16px 2px rgba(0,0,0,0.07),0 5px 22px 4px rgba(0,0,0,0.06),0 6px 13px 0 rgba(0,0,0,0.1)}.external-link-font-awesome{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmlld0JveD0iMCAtMjU2IDE4NTAgMTg1MCIgICBpZD0ic3ZnMzAyNSIgICB2ZXJzaW9uPSIxLjEiICAgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC4zLjEgcjk4ODYiICAgd2lkdGg9IjEwMCUiICAgaGVpZ2h0PSIxMDAlIiAgIHNvZGlwb2RpOmRvY25hbWU9ImV4dGVybmFsX2xpbmtfZm9udF9hd2Vzb21lLnN2ZyI+ICA8bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTMwMzUiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzMzAzMyIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iNjQwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNDgwIiAgICAgaWQ9Im5hbWVkdmlldzMwMzEiICAgICBzaG93Z3JpZD0iZmFsc2UiICAgICBpbmtzY2FwZTp6b29tPSIwLjEzMTY5NjQzIiAgICAgaW5rc2NhcGU6Y3g9Ijg5NiIgICAgIGlua3NjYXBlOmN5PSI4OTYiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMDI1IiAvPiAgPGcgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDMwLjM3Mjg4MSwxNDI2Ljk0OTIpIiAgICAgaWQ9ImczMDI3Ij4gICAgPHBhdGggICAgICAgZD0iTSAxNDA4LDYwOCBWIDI4OCBRIDE0MDgsMTY5IDEzMjMuNSw4NC41IDEyMzksMCAxMTIwLDAgSCAyODggUSAxNjksMCA4NC41LDg0LjUgMCwxNjkgMCwyODggdiA4MzIgUSAwLDEyMzkgODQuNSwxMzIzLjUgMTY5LDE0MDggMjg4LDE0MDggaCA3MDQgcSAxNCwwIDIzLC05IDksLTkgOSwtMjMgdiAtNjQgcSAwLC0xNCAtOSwtMjMgLTksLTkgLTIzLC05IEggMjg4IHEgLTY2LDAgLTExMywtNDcgLTQ3LC00NyAtNDcsLTExMyBWIDI4OCBxIDAsLTY2IDQ3LC0xMTMgNDcsLTQ3IDExMywtNDcgaCA4MzIgcSA2NiwwIDExMyw0NyA0Nyw0NyA0NywxMTMgdiAzMjAgcSAwLDE0IDksMjMgOSw5IDIzLDkgaCA2NCBxIDE0LDAgMjMsLTkgOSwtOSA5LC0yMyB6IG0gMzg0LDg2NCBWIDk2MCBxIDAsLTI2IC0xOSwtNDUgLTE5LC0xOSAtNDUsLTE5IC0yNiwwIC00NSwxOSBMIDE1MDcsMTA5MSA4NTUsNDM5IHEgLTEwLC0xMCAtMjMsLTEwIC0xMywwIC0yMywxMCBMIDY5NSw1NTMgcSAtMTAsMTAgLTEwLDIzIDAsMTMgMTAsMjMgbCA2NTIsNjUyIC0xNzYsMTc2IHEgLTE5LDE5IC0xOSw0NSAwLDI2IDE5LDQ1IDE5LDE5IDQ1LDE5IGggNTEyIHEgMjYsMCA0NSwtMTkgMTksLTE5IDE5LC00NSB6IiAgICAgICBpZD0icGF0aDMwMjkiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHN0eWxlPSJmaWxsOndoaXRlIiAvPiAgPC9nPjwvc3ZnPg==);width:10px;height:10px;display:inline-block;margin-left:var(--std-gutter)}.icon-docs{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEzLjUgMGgtMTJjLTAuODI1IDAtMS41IDAuNjc1LTEuNSAxLjV2MTNjMCAwLjgyNSAwLjY3NSAxLjUgMS41IDEuNWgxMmMwLjgyNSAwIDEuNS0wLjY3NSAxLjUtMS41di0xM2MwLTAuODI1LTAuNjc1LTEuNS0xLjUtMS41ek0xMyAxNGgtMTF2LTEyaDExdjEyek00IDdoN3YxaC03ek00IDloN3YxaC03ek00IDExaDd2MWgtN3pNNCA1aDd2MWgtN3oiPjwvcGF0aD48L3N2Zz4=);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top}.icon-components{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEzIDExLjVsMS41IDEuNSA1LTUtNS01LTEuNSAxLjUgMy41IDMuNXoiPjwvcGF0aD48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNyA0LjVsLTEuNS0xLjUtNSA1IDUgNSAxLjUtMS41LTMuNS0zLjV6Ij48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEwLjk1OCAyLjM1MmwxLjA4NSAwLjI5Ni0zIDExLTEuMDg1LTAuMjk2IDMtMTF6Ij48L3BhdGg+PC9zdmc+);width:20px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top}.icon-support{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTggMGMtNC40MTggMC04IDMuNTgyLTggOHMzLjU4MiA4IDggOCA4LTMuNTgyIDgtOC0zLjU4Mi04LTgtOHpNNSA4YzAtMS42NTcgMS4zNDMtMyAzLTNzMyAxLjM0MyAzIDMtMS4zNDMgMy0zIDMtMy0xLjM0My0zLTN6TTE0LjQ2OCAxMC42Nzl2MGwtMi43NzItMS4xNDhjMC4xOTYtMC40NzIgMC4zMDQtMC45ODkgMC4zMDQtMS41MzFzLTAuMTA4LTEuMDU5LTAuMzA0LTEuNTMxbDIuNzcyLTEuMTQ4YzAuMzQyIDAuODI1IDAuNTMyIDEuNzMgMC41MzIgMi42NzlzLTAuMTg5IDEuODU0LTAuNTMyIDIuNjc5djB6TTEwLjY3OSAxLjUzMnYwIDBsLTEuMTQ4IDIuNzcyYy0wLjQ3Mi0wLjE5Ni0wLjk4OS0wLjMwNC0xLjUzMS0wLjMwNHMtMS4wNTkgMC4xMDgtMS41MzEgMC4zMDRsLTEuMTQ4LTIuNzcyYzAuODI1LTAuMzQyIDEuNzMtMC41MzIgMi42NzktMC41MzJzMS44NTQgMC4xODkgMi42NzkgMC41MzJ6TTEuNTMyIDUuMzIxbDIuNzcyIDEuMTQ4Yy0wLjE5NiAwLjQ3Mi0wLjMwNCAwLjk4OS0wLjMwNCAxLjUzMXMwLjEwOCAxLjA1OSAwLjMwNCAxLjUzMWwtMi43NzIgMS4xNDhjLTAuMzQyLTAuODI1LTAuNTMyLTEuNzMtMC41MzItMi42NzlzMC4xODktMS44NTQgMC41MzItMi42Nzl6TTUuMzIxIDE0LjQ2OGwxLjE0OC0yLjc3MmMwLjQ3MiAwLjE5NiAwLjk4OSAwLjMwNCAxLjUzMSAwLjMwNHMxLjA1OS0wLjEwOCAxLjUzMS0wLjMwNGwxLjE0OCAyLjc3MmMtMC44MjUgMC4zNDItMS43MyAwLjUzMi0yLjY3OSAwLjUzMnMtMS44NTQtMC4xODktMi42NzktMC41MzJ6Ij48L3BhdGg+PC9zdmc+);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top} diff --git a/dist/icon.png b/dist/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4aaa109cefa7faa95708f261f7ffb82d0c158bef GIT binary patch literal 1794 zcmZuyYg7_w8s?&i7c|S&12B3`IbP*WU3@v?1^Bwk<;6U6WWYLcX`$6Jl1 zc&Tu#hEAR|u?ay={<7n?J=G(F9>^|30RMaS|Vp9{b6C54&k_$?@Euh^hNz;Tcj4*1Am z;TJG?Oq+=c$p`cP>=Y5q1~%%htT#+F70`UA&Rhj%hwaMgo@P1+#(sSe2=v;=KVYCb z52y#!@51f@(E|YlsK{7k{C|jE#l3&d>++`NUR*k6PgabQ6lb2y&#w6tNnSVP^$hnX z`CC6Nt8P{0*=k6Nj=aNqUpQOKO*=Y5C+J6O*$Zl@Gb0p>8V@tN${S1vKcbzTydeJS;puI%yI~3zueMCB z1EC$Pv|`CoIbs(m^CjsfA9f*RZ*R?KbnyPD7=>J9~;g4i}aCX34`B{dk63bnT5c+4}-V$Dse4_nr zx%7eZ-AHr9{cR@E{yA;keZrE*y6#r-Yx&@~kc#~;jmnA>yS>CO5^D@$TA}a;PJpqe zaaE$qB0mE(R&cj{w>% zmqP0Sq`$n%Yc%v7?%=iXt-n8e%1CzBO?qeEj2@-5oIe_WB=Aa~83QYTtN9R=7zm>g z!3ZTg${8s@s3;J$Nd7zd9d52QOS4v?<@!u97c`#b}t64_&I#~pb#skI3$XoFsr0W_m(r|xPO>nc59~N zv92bVPie%m!pd^EI&sG`{0|p08?AwcEyOLGas1DXF1A*r_L*rDDP+R0U~+s8yzX*# zBWXx_Fg(BIa(eG0Eq>Z8vw9*6hxB=x;oC>br^cu}!&h%_SR#}i`z1Qu5eZNvzN#oWzEd4`zefZsFOMfS@sQ67RO>tK@HVG z9%W6;@85H@D(JA7K(WS6Q}?Z@Z&}($HQZma%j_ltqx(a00@HSP#Hh*Lckx$jXMvIw zygo1ZVPq8Wqr32972ELm{}L!*0@DI5ucl*{1Iy#Jbk+T zXbGm~Ne}WoZ=owaB^~v1X=|U0fQRN)1??$An>V^G+Uv?Nm5qz^=d{TOlUah5@f%1B z`&&bKo|nwf&CU!zB{-^KQ;346hFGZEg+?Op^}2k|@$wq+oJV$W+FMg`awpuCSR$VS zN+wt_)w48ZDaKAyEG9(4@DCe2jI?b+TakCbu#+GCp@;a#q^p*avapkbVW?+?vL#ig zfi8gPo|^U&c@OvjqSkcTqGJ0?Fwp_G60!_80cy%s3(4oo73>cnv~WIX*}NlM_1igw zQrDDKI^nudfP-l^i1&VqOJwRc1(CmOZ`5wJL3AUTE@c;MBa4`E*GjTg=kakFyFm0m w(%@qj{5vK-hQxmepqG;a|G)$KwiN~NZ1~~a9ee{-A8LTGBN4$Zft1330aQpq82|tP literal 0 HcmV?d00001 diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..d5eee68 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,450 @@ + + + + + + + + + TLS | The Least Supported CSS Framework. + + + + + + + + + +
+
+
+ + The Least Supported CSS Framework +
+
+
+
+ +
+
Soon...
+
+ +
+
+

+ Docs: Getting Started +

+ +
+ 01. +
Getting Started
+ + 02. +
Tips
+ + 03. +
Browser Support
+ + 04. +
Examples
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+

+ Docs: Tips +

+ +
+ 01. +
Getting Started
+ + 02. +
Tips
+ + 03. +
Browser Support
+ + 04. +
Examples
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+

+ Components: Cards +

+ +
+ 01. +
Cards
+ + 02. +
Typography
+ + 03. +
Buttons
+ + 04. +
Lists
+ + 05. +
Forms
+ + 06. +
Tables
+ + 07. +
Layout
+ + 08. +
Utilities
+ +
+
+ +
+
+ +
+

+ Mixins +

+
@mixin card($padding, $margin: '', $border-color: '', $elevation: '') {
+
+    @if $border-color != '' {
+        border:1px solid $border-color;
+    }
+
+    @if $elevation != '' {
+        @include elevation($elevation)
+    }
+
+    @if $margin != '' {
+        margin:$margin;
+    }
+
+    padding:$padding;
+}
+
+ + + +
+ + +
+

+ Usage +

+

Use with + +

+ 
container
+
+
+

+ +
+ 
.card{
+    @include card(var(--std-gutter-ex), var(--third-color-darker));
+    @include container(var(--reset-color));
+}
+
+
+ +
+
+

+ Elevation +

+
elevation 1
+
elevation 2
+
elevation 3
+
elevation 4
+
elevation 5
+
+ +
+
+ +
+ +
+
+

+ Components: Typography +

+ +
+ 01. +
Cards
+ + 02. +
Typography
+ + 03. +
Buttons
+ + 04. +
Lists
+ + 05. +
Forms
+ + 06. +
Tables
+ + 07. +
Layout
+ + 08. +
Utilities
+ +
+
+ +
+
+
+

+ Examples +

+

+ text-super-hero +

+

+ text-hero +

+

+ text-title +

+

+ text-lg +

+
+ text-md +
+
+ text-sm +
+
+ text-xs +
+
+ text-xxs +
+

+ Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem + Ipsum + has been the industry's standard dummy text ever since the 1500s, when an unknown + printer took a galley of type and scrambled it to make a type specimen book. It has + survived not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the release + of + Letraset sheets containing Lorem Ipsum passages, and more recently with desktop + publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

+
+
+

+ Mixins +

+ 
@mixin text-xxs{
+    @include font-size(1.1);
+}
+
+@mixin text-xs{
+    @include font-size(1.2);
+}
+
+@mixin text-sm{
+    @include font-size(1.3);
+}
+
+@mixin text-md{
+    @include font-size(1.5);
+}
+
+@mixin text-lg{
+    @include font-size(1.6);
+}
+
+@mixin text-title{
+    @include font-size(1.8);
+}
+
+@mixin text-hero($font-weight: 300){
+    @include font-size(2.4);
+    font-weight:$font-weight;
+}
+@mixin text-super-hero($font-weight: 300){
+    @include font-size(3.6);
+    font-weight:$font-weight;
+}
+
+@mixin text-color-link($color, $hover-color){
+    a{
+        color:$color;
+        &:hover{
+            color:$hover-color;
+        }
+    }
+}
+
+ + +
+
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ + + + + + \ No newline at end of file From 07d15d3b2a29eb1aaa64ca4ebef05a8064984de8 Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Sun, 21 Oct 2018 17:07:34 -0400 Subject: [PATCH 02/13] .gitignore and package.json updated for deployment --- .gitignore | 1 - package.json | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 763301f..40b878d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ -dist/ node_modules/ \ No newline at end of file diff --git a/package.json b/package.json index 11ffd72..ae67409 100644 --- a/package.json +++ b/package.json @@ -46,8 +46,8 @@ "scripts": { "start": "npm run watch", "build": "npm run clean && npm run sass", - "clean": "rimraf dist", - "sass": "node-sass --output-style compressed src/_example.scss dist/example.min.css", - "watch": "nodemon -e scss -x \"npm run sass\" && browser-sync start --server --files \"dist/*.css\"" + "clean": "rimraf dist/css", + "sass": "node-sass --output-style compressed src/_example.scss dist/css/example.min.css", + "watch": "nodemon -e scss -x \"npm run sass\" && browser-sync start --server --files \"dist/css/*.css\"" } } From 3bfa8a49797bd91cab675efedea29cd445cd7b7f Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Sun, 21 Oct 2018 17:13:43 -0400 Subject: [PATCH 03/13] Move index.html to root --- dist/icon.png => icon.png | Bin dist/index.html => index.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename dist/icon.png => icon.png (100%) rename dist/index.html => index.html (99%) diff --git a/dist/icon.png b/icon.png similarity index 100% rename from dist/icon.png rename to icon.png diff --git a/dist/index.html b/index.html similarity index 99% rename from dist/index.html rename to index.html index d5eee68..098616a 100644 --- a/dist/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + From 6f22f857a064cd2428be83ad04b13d18442f83d0 Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Wed, 24 Oct 2018 07:09:26 -0400 Subject: [PATCH 04/13] Deploy new build containing mobile design --- dist/css/example.min.css | 2 +- dist/css/millennial-bank.min.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/css/example.min.css b/dist/css/example.min.css index 3a5a902..40612cc 100644 --- a/dist/css/example.min.css +++ b/dist/css/example.min.css @@ -1 +1 @@ -:root{--main-color: #00B5FC;--main-color-darker: #00A0DF;--second-color: #39444D;--second-color-darker: #272F37;--third-color: #FBFBFC;--third-color-darker: #ececf1;--reset-color:#ffffff;--link-color:gray;--link-hover-color:rgba(0,0,0, 0.87);--link-hover-color-inverted:#ececf1;--border-color:whitesmoke;--border-color-darker:rgba(0,0,0, 0.25);--std-gutter:0.6rem;--std-gutter-ex:0.9735rem;--hero-gutter:2rem;--hero-gutter-ex:3rem;--border-radius:4px;--border-radius-sm:2px;--border-radius-default:0;--main-font:'IBM Plex Sans', sans-serif;--main-row-height:44.8px}html{font-size:62.5%;height:100%}body{font-size:1.4rem;min-height:100%;font-family:var(--main-font);overflow:hidden}a{text-decoration:none;color:var(--link-color)}a:hover{color:var(--link-hover-color)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb{background:rgba(208,208,208,0.8)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(208,208,208,0.5)}.disabled{opacity:0.5;pointer-events:none}.navigation-list,.navigation-list li{list-style:none;margin:0}.header{background-color:var(--main-color);height:var(--main-row-height);display:flex;align-items:center;padding-left:90px}.logo{position:absolute;top:0;left:0}.navigation{padding:var(--std-gutter)}.navigation-list{padding:0}.navigation-list ul{padding-left:var(--std-gutter)}.navigation-item{--std-gutter:0.3rem;--std-gutter-ex:0.6rem;padding:var(--std-gutter) var(--std-gutter-ex)}.navigation-item a{color:var(--third-color)}.navigation-item a:hover{color:var(--main-color)}.navigation-item a{background-color:var(--second-color-darker);color:var(--third-color);border-radius:var(--border-radius);display:inline-block;padding:var(--std-gutter) var(--std-gutter-ex);text-decoration:none;transition:box-shadow 250ms ease-in-out}.navigation-item a:hover{box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1)}.navigation-item.docs{--second-color-darker:#196fc1}.navigation-item.docs a:hover{color:var(--reset-color)}.navigation-item.components{--second-color-darker:#c119a7}.navigation-item.components a:hover{color:var(--reset-color)}.popover{padding:var(--std-gutter-ex)}.popover-item{padding:var(--std-gutter) var(--std-gutter-ex)}.footer{padding:var(--std-gutter-ex);background-color:var(--second-color-darker);color:var(--third-color);font-size:1.1rem;box-sizing:border-box;height:100%;line-height:1}.footer a{color:var(--link-color)}.footer a:hover{color:var(--link-hover-color-inverted)}.components-nav-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){.components-nav-grid{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;grid-template-rows:1fr}}.components-nav-grid>a{--link-color:var(--reset-color);--link-hover-color:var(--reset-color);padding:var(--std-gutter-ex);background-color:#d23fbb;border-bottom:3px solid #e479d4;cursor:pointer;font-size:1.1rem}.components-nav-grid>a.active{background-color:#c119a7;border-bottom:3px solid #9c1587;cursor:default}.docs-nav-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr ;grid-template-rows:1fr}.docs-nav-grid>a{--link-color:var(--reset-color);--link-hover-color:var(--reset-color);padding:var(--std-gutter-ex);background-color:#3f8ad2;border-bottom:3px solid #79b0e4;cursor:pointer;font-size:1.1rem}.docs-nav-grid>a.active{background-color:#196fc1;border-bottom:3px solid #155a9c;cursor:default}#components-cards{display:grid;grid-gap:var(--hero-gutter);grid-template-columns:1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){#components-cards{grid-template-columns:1fr 1fr ;grid-template-rows:1fr}}#components-typography{display:grid;grid-gap:var(--hero-gutter);grid-template-columns:1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){#components-typography{grid-template-columns:1fr 1fr ;grid-template-rows:1fr}}.card{border:1px solid var(--third-color-darker);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-1{border:1px solid var(--border-color-darker);box-shadow:0 1px 6px 0 rgba(0,0,0,0.07),0 3px 4px 0 rgba(0,0,0,0.06),0 1px 7px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-2{border:1px solid var(--border-color-darker);box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-3{border:1px solid var(--border-color-darker);box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-4{border:1px solid var(--border-color-darker);box-shadow:0 12px 16px 2px rgba(0,0,0,0.07),0 5px 22px 4px rgba(0,0,0,0.06),0 6px 13px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-5{border:1px solid var(--border-color-darker);box-shadow:0 15px 22px 2px rgba(0,0,0,0.07),0 6px 34px 5px rgba(0,0,0,0.06),0 7px 14px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.txt-nav-title{font-weight:600}.txt-super-hero{font-size:3.6rem;font-weight:300}.txt-hero{font-size:2.4rem;font-weight:300}.txt-title{font-size:1.8rem}.txt-lg{font-size:1.6rem}.txt-md{font-size:1.5rem}.txt-sm{font-size:1.3rem}.txt-xs{font-size:1.2rem}.txt-xxs{font-size:1.1rem}.txt-link{--link-color:var(--main-color);--link-hover-color:var(--main-color-darker)}.sub-title{font-size:1.2rem;color:var(--third-color)}.grid-container{display:grid;height:100vh;grid-template-columns:1fr;grid-template-rows:var(--main-row-height) 1.9fr;grid-template-areas:"Masthead" "Layout"}.Masthead{grid-area:Masthead;position:fixed;top:0;width:100%;z-index:2}.Layout{display:grid;grid-area:Layout;grid-template-columns:250px 1.7fr;grid-template-rows:1fr;grid-template-areas:"Nav Main"}.Main{display:grid;grid-area:Main;grid-template-columns:1fr;grid-template-rows:1.9fr 55px;grid-template-areas:"." "MainFooter";background-color:var(--third-color)}.MastheadMain{height:100vh;position:relative}.MastheadMain .content-scrollable{position:relative;top:var(--main-row-height);height:calc(100vh - 200px);overflow-y:auto;width:calc(100vw - 250px);overflow-x:auto}@media only screen and (max-width: 1200px){.MastheadMain .content-scrollable{height:calc(100vh - 238px);overflow-y:auto}}.MastheadMain section{padding:var(--hero-gutter-ex)}.MastheadMain-content{background-color:#9c1587;color:var(--reset-color);position:sticky;top:var(--main-row-height);z-index:1}.MastheadMain-content>div{transition:box-shadow 250ms ease-in-out;box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1)}.MastheadMain-content>div:hover{box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1)}.MastheadMain.docs .MastheadMain-content{background-color:#155a9c;border-bottom:1px solid}.MastheadMain-hero{padding:var(--std-gutter-ex)}.MainFooter{grid-area:MainFooter;position:fixed;bottom:0;width:100%}.Nav{grid-area:Nav;background-color:var(--second-color);color:var(--third-color);box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1);height:100vh;position:fixed;width:250px;height:calc(100vh - var(--main-row-height));overflow:auto;transition:box-shadow 250ms ease-in-out}.Nav:hover{box-shadow:0 12px 16px 2px rgba(0,0,0,0.07),0 5px 22px 4px rgba(0,0,0,0.06),0 6px 13px 0 rgba(0,0,0,0.1)}.external-link-font-awesome{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmlld0JveD0iMCAtMjU2IDE4NTAgMTg1MCIgICBpZD0ic3ZnMzAyNSIgICB2ZXJzaW9uPSIxLjEiICAgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC4zLjEgcjk4ODYiICAgd2lkdGg9IjEwMCUiICAgaGVpZ2h0PSIxMDAlIiAgIHNvZGlwb2RpOmRvY25hbWU9ImV4dGVybmFsX2xpbmtfZm9udF9hd2Vzb21lLnN2ZyI+ICA8bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTMwMzUiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzMzAzMyIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iNjQwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNDgwIiAgICAgaWQ9Im5hbWVkdmlldzMwMzEiICAgICBzaG93Z3JpZD0iZmFsc2UiICAgICBpbmtzY2FwZTp6b29tPSIwLjEzMTY5NjQzIiAgICAgaW5rc2NhcGU6Y3g9Ijg5NiIgICAgIGlua3NjYXBlOmN5PSI4OTYiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMDI1IiAvPiAgPGcgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDMwLjM3Mjg4MSwxNDI2Ljk0OTIpIiAgICAgaWQ9ImczMDI3Ij4gICAgPHBhdGggICAgICAgZD0iTSAxNDA4LDYwOCBWIDI4OCBRIDE0MDgsMTY5IDEzMjMuNSw4NC41IDEyMzksMCAxMTIwLDAgSCAyODggUSAxNjksMCA4NC41LDg0LjUgMCwxNjkgMCwyODggdiA4MzIgUSAwLDEyMzkgODQuNSwxMzIzLjUgMTY5LDE0MDggMjg4LDE0MDggaCA3MDQgcSAxNCwwIDIzLC05IDksLTkgOSwtMjMgdiAtNjQgcSAwLC0xNCAtOSwtMjMgLTksLTkgLTIzLC05IEggMjg4IHEgLTY2LDAgLTExMywtNDcgLTQ3LC00NyAtNDcsLTExMyBWIDI4OCBxIDAsLTY2IDQ3LC0xMTMgNDcsLTQ3IDExMywtNDcgaCA4MzIgcSA2NiwwIDExMyw0NyA0Nyw0NyA0NywxMTMgdiAzMjAgcSAwLDE0IDksMjMgOSw5IDIzLDkgaCA2NCBxIDE0LDAgMjMsLTkgOSwtOSA5LC0yMyB6IG0gMzg0LDg2NCBWIDk2MCBxIDAsLTI2IC0xOSwtNDUgLTE5LC0xOSAtNDUsLTE5IC0yNiwwIC00NSwxOSBMIDE1MDcsMTA5MSA4NTUsNDM5IHEgLTEwLC0xMCAtMjMsLTEwIC0xMywwIC0yMywxMCBMIDY5NSw1NTMgcSAtMTAsMTAgLTEwLDIzIDAsMTMgMTAsMjMgbCA2NTIsNjUyIC0xNzYsMTc2IHEgLTE5LDE5IC0xOSw0NSAwLDI2IDE5LDQ1IDE5LDE5IDQ1LDE5IGggNTEyIHEgMjYsMCA0NSwtMTkgMTksLTE5IDE5LC00NSB6IiAgICAgICBpZD0icGF0aDMwMjkiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHN0eWxlPSJmaWxsOndoaXRlIiAvPiAgPC9nPjwvc3ZnPg==);width:10px;height:10px;display:inline-block;margin-left:var(--std-gutter)}.icon-docs{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEzLjUgMGgtMTJjLTAuODI1IDAtMS41IDAuNjc1LTEuNSAxLjV2MTNjMCAwLjgyNSAwLjY3NSAxLjUgMS41IDEuNWgxMmMwLjgyNSAwIDEuNS0wLjY3NSAxLjUtMS41di0xM2MwLTAuODI1LTAuNjc1LTEuNS0xLjUtMS41ek0xMyAxNGgtMTF2LTEyaDExdjEyek00IDdoN3YxaC03ek00IDloN3YxaC03ek00IDExaDd2MWgtN3pNNCA1aDd2MWgtN3oiPjwvcGF0aD48L3N2Zz4=);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top}.icon-components{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEzIDExLjVsMS41IDEuNSA1LTUtNS01LTEuNSAxLjUgMy41IDMuNXoiPjwvcGF0aD48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNyA0LjVsLTEuNS0xLjUtNSA1IDUgNSAxLjUtMS41LTMuNS0zLjV6Ij48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEwLjk1OCAyLjM1MmwxLjA4NSAwLjI5Ni0zIDExLTEuMDg1LTAuMjk2IDMtMTF6Ij48L3BhdGg+PC9zdmc+);width:20px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top}.icon-support{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTggMGMtNC40MTggMC04IDMuNTgyLTggOHMzLjU4MiA4IDggOCA4LTMuNTgyIDgtOC0zLjU4Mi04LTgtOHpNNSA4YzAtMS42NTcgMS4zNDMtMyAzLTNzMyAxLjM0MyAzIDMtMS4zNDMgMy0zIDMtMy0xLjM0My0zLTN6TTE0LjQ2OCAxMC42Nzl2MGwtMi43NzItMS4xNDhjMC4xOTYtMC40NzIgMC4zMDQtMC45ODkgMC4zMDQtMS41MzFzLTAuMTA4LTEuMDU5LTAuMzA0LTEuNTMxbDIuNzcyLTEuMTQ4YzAuMzQyIDAuODI1IDAuNTMyIDEuNzMgMC41MzIgMi42NzlzLTAuMTg5IDEuODU0LTAuNTMyIDIuNjc5djB6TTEwLjY3OSAxLjUzMnYwIDBsLTEuMTQ4IDIuNzcyYy0wLjQ3Mi0wLjE5Ni0wLjk4OS0wLjMwNC0xLjUzMS0wLjMwNHMtMS4wNTkgMC4xMDgtMS41MzEgMC4zMDRsLTEuMTQ4LTIuNzcyYzAuODI1LTAuMzQyIDEuNzMtMC41MzIgMi42NzktMC41MzJzMS44NTQgMC4xODkgMi42NzkgMC41MzJ6TTEuNTMyIDUuMzIxbDIuNzcyIDEuMTQ4Yy0wLjE5NiAwLjQ3Mi0wLjMwNCAwLjk4OS0wLjMwNCAxLjUzMXMwLjEwOCAxLjA1OSAwLjMwNCAxLjUzMWwtMi43NzIgMS4xNDhjLTAuMzQyLTAuODI1LTAuNTMyLTEuNzMtMC41MzItMi42NzlzMC4xODktMS44NTQgMC41MzItMi42Nzl6TTUuMzIxIDE0LjQ2OGwxLjE0OC0yLjc3MmMwLjQ3MiAwLjE5NiAwLjk4OSAwLjMwNCAxLjUzMSAwLjMwNHMxLjA1OS0wLjEwOCAxLjUzMS0wLjMwNGwxLjE0OCAyLjc3MmMtMC44MjUgMC4zNDItMS43MyAwLjUzMi0yLjY3OSAwLjUzMnMtMS44NTQtMC4xODktMi42NzktMC41MzJ6Ij48L3BhdGg+PC9zdmc+);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top} +.navigation-list,.navigation-list li{list-style:none;margin:0}:root{--main-color: #00B5FC;--main-color-darker: #00A0DF;--second-color: #39444D;--second-color-darker: #272F37;--third-color: #FBFBFC;--third-color-darker: #ececf1;--reset-color:#ffffff;--link-color:gray;--link-hover-color:rgba(0,0,0, 0.87);--link-hover-color-inverted:#ececf1;--border-color:whitesmoke;--border-color-darker:rgba(0,0,0, 0.25);--std-gutter:0.6rem;--std-gutter-ex:0.9735rem;--hero-gutter:2rem;--hero-gutter-ex:3rem;--border-radius:4px;--border-radius-sm:2px;--border-radius-default:0;--main-font:'IBM Plex Sans', sans-serif;--main-row-height:44.8px}html{font-size:62.5%;height:100%}body{font-size:1.4rem;min-height:100%;font-family:var(--main-font);overflow:hidden}a{text-decoration:none;color:var(--link-color)}a:hover{color:var(--link-hover-color)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb{background:rgba(208,208,208,0.8)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(208,208,208,0.5)}.disabled{opacity:0.5;pointer-events:none}.header{background-color:var(--main-color);height:var(--main-row-height);display:flex;align-items:center;padding-left:90px}.logo{position:absolute;top:0;left:0}.navigation{padding:var(--std-gutter)}.navigation-list{padding:0}.navigation-list ul{padding-left:var(--std-gutter)}.navigation-item{--std-gutter:0.3rem;--std-gutter-ex:0.6rem;padding:var(--std-gutter) var(--std-gutter-ex)}.navigation-item a{color:var(--third-color)}.navigation-item a:hover{color:var(--main-color)}.navigation-item a{background-color:var(--second-color-darker);color:var(--third-color);border-radius:var(--border-radius);display:inline-block;padding:var(--std-gutter) var(--std-gutter-ex);text-decoration:none;transition:box-shadow 250ms ease-in-out}.navigation-item a:hover{box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1)}.navigation-item.docs{--second-color-darker:#196fc1}.navigation-item.docs a:hover{color:var(--reset-color)}.navigation-item.components{--second-color-darker:#c119a7}.navigation-item.components a:hover{color:var(--reset-color)}.popover{padding:var(--std-gutter-ex)}.popover-item{padding:var(--std-gutter) var(--std-gutter-ex)}.footer{padding:var(--std-gutter-ex);background-color:var(--second-color-darker);color:var(--third-color);font-size:1.1rem;box-sizing:border-box;height:100%;line-height:1}.footer a{color:var(--link-color)}.footer a:hover{color:var(--link-hover-color-inverted)}.components-nav-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){.components-nav-grid{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;grid-template-rows:1fr}}.components-nav-grid>a{--link-color:var(--reset-color);--link-hover-color:var(--reset-color);padding:var(--std-gutter-ex);background-color:#d23fbb;border-bottom:3px solid #e479d4;cursor:pointer;font-size:1.1rem}.components-nav-grid>a.active{background-color:#c119a7;border-bottom:3px solid #9c1587;cursor:default}.docs-nav-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr ;grid-template-rows:1fr}.docs-nav-grid>a{--link-color:var(--reset-color);--link-hover-color:var(--reset-color);padding:var(--std-gutter-ex);background-color:#3f8ad2;border-bottom:3px solid #79b0e4;cursor:pointer;font-size:1.1rem}.docs-nav-grid>a.active{background-color:#196fc1;border-bottom:3px solid #155a9c;cursor:default}#components-cards{display:grid;grid-gap:var(--hero-gutter);grid-template-columns:1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){#components-cards{grid-template-columns:1fr 1fr ;grid-template-rows:1fr}}#components-typography{display:grid;grid-gap:var(--hero-gutter);grid-template-columns:1fr ;grid-template-rows:1fr 1fr}@media only screen and (min-width: 1200px){#components-typography{grid-template-columns:1fr 1fr ;grid-template-rows:1fr}}.card{border:1px solid var(--third-color-darker);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-1{border:1px solid var(--border-color-darker);box-shadow:0 1px 6px 0 rgba(0,0,0,0.07),0 3px 4px 0 rgba(0,0,0,0.06),0 1px 7px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-2{border:1px solid var(--border-color-darker);box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-3{border:1px solid var(--border-color-darker);box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-4{border:1px solid var(--border-color-darker);box-shadow:0 12px 16px 2px rgba(0,0,0,0.07),0 5px 22px 4px rgba(0,0,0,0.06),0 6px 13px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.card-with-elevation-5{border:1px solid var(--border-color-darker);box-shadow:0 15px 22px 2px rgba(0,0,0,0.07),0 6px 34px 5px rgba(0,0,0,0.06),0 7px 14px 0 rgba(0,0,0,0.1);margin:var(--std-gutter-ex) var(--std-gutter);padding:var(--std-gutter-ex);background-color:var(--reset-color)}.txt-nav-title{font-weight:600}.txt-super-hero{font-size:3.6rem;font-weight:300}.txt-hero{font-size:2.4rem;font-weight:300}.txt-title{font-size:1.8rem}.txt-lg{font-size:1.6rem}.txt-md{font-size:1.5rem}.txt-sm{font-size:1.3rem}.txt-xs{font-size:1.2rem}.txt-xxs{font-size:1.1rem}.txt-link{--link-color:var(--main-color);--link-hover-color:var(--main-color-darker)}.sub-title{font-size:1.2rem;color:var(--third-color)}.grid-container{display:grid;height:100vh;grid-template-columns:1fr;grid-template-rows:var(--main-row-height) 1.9fr;grid-template-areas:"Masthead" "Layout"}.Masthead{grid-area:Masthead;position:fixed;top:0;width:100%;z-index:2}.Layout{display:grid;grid-area:Layout;grid-template-columns:250px 1.7fr;grid-template-rows:1fr;grid-template-areas:"Nav Main"}.Main{display:grid;grid-area:Main;grid-template-columns:1fr;grid-template-rows:1.9fr 55px;grid-template-areas:"." "MainFooter";background-color:var(--third-color)}.MastheadMain{height:100vh;position:relative}.MastheadMain .content-scrollable{position:relative;top:var(--main-row-height);height:calc(100vh - 200px);overflow-y:auto;width:calc(100vw - 250px);overflow-x:auto}@media only screen and (max-width: 1200px){.MastheadMain .content-scrollable{height:calc(100vh - 238px);overflow-y:auto}}.MastheadMain section{padding:var(--hero-gutter-ex)}.MastheadMain-content{background-color:#9c1587;color:var(--reset-color);position:sticky;top:var(--main-row-height);z-index:1}.MastheadMain-content>div{transition:box-shadow 250ms ease-in-out;box-shadow:0 6px 10px 0 rgba(0,0,0,0.07),0 1px 18px 0 rgba(0,0,0,0.06),0 3px 5px 0 rgba(0,0,0,0.1)}.MastheadMain-content>div:hover{box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1)}.MastheadMain.docs .MastheadMain-content{background-color:#155a9c;border-bottom:1px solid}.MastheadMain-hero{padding:var(--std-gutter-ex)}.MainFooter{grid-area:MainFooter;position:fixed;bottom:0;width:100%}.Nav{grid-area:Nav;background-color:var(--second-color);color:var(--third-color);box-shadow:0 9px 12px 2px rgba(0,0,0,0.07),0 3px 18px 3px rgba(0,0,0,0.06),0 5px 11px 0 rgba(0,0,0,0.1);height:100vh;position:fixed;width:250px;height:calc(100vh - var(--main-row-height));overflow:auto;transition:box-shadow 250ms ease-in-out}.Nav:hover{box-shadow:0 12px 16px 2px rgba(0,0,0,0.07),0 5px 22px 4px rgba(0,0,0,0.06),0 6px 13px 0 rgba(0,0,0,0.1)}.external-link-font-awesome{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmlld0JveD0iMCAtMjU2IDE4NTAgMTg1MCIgICBpZD0ic3ZnMzAyNSIgICB2ZXJzaW9uPSIxLjEiICAgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC4zLjEgcjk4ODYiICAgd2lkdGg9IjEwMCUiICAgaGVpZ2h0PSIxMDAlIiAgIHNvZGlwb2RpOmRvY25hbWU9ImV4dGVybmFsX2xpbmtfZm9udF9hd2Vzb21lLnN2ZyI+ICA8bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTMwMzUiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzMzAzMyIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iNjQwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNDgwIiAgICAgaWQ9Im5hbWVkdmlldzMwMzEiICAgICBzaG93Z3JpZD0iZmFsc2UiICAgICBpbmtzY2FwZTp6b29tPSIwLjEzMTY5NjQzIiAgICAgaW5rc2NhcGU6Y3g9Ijg5NiIgICAgIGlua3NjYXBlOmN5PSI4OTYiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMDI1IiAvPiAgPGcgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDMwLjM3Mjg4MSwxNDI2Ljk0OTIpIiAgICAgaWQ9ImczMDI3Ij4gICAgPHBhdGggICAgICAgZD0iTSAxNDA4LDYwOCBWIDI4OCBRIDE0MDgsMTY5IDEzMjMuNSw4NC41IDEyMzksMCAxMTIwLDAgSCAyODggUSAxNjksMCA4NC41LDg0LjUgMCwxNjkgMCwyODggdiA4MzIgUSAwLDEyMzkgODQuNSwxMzIzLjUgMTY5LDE0MDggMjg4LDE0MDggaCA3MDQgcSAxNCwwIDIzLC05IDksLTkgOSwtMjMgdiAtNjQgcSAwLC0xNCAtOSwtMjMgLTksLTkgLTIzLC05IEggMjg4IHEgLTY2LDAgLTExMywtNDcgLTQ3LC00NyAtNDcsLTExMyBWIDI4OCBxIDAsLTY2IDQ3LC0xMTMgNDcsLTQ3IDExMywtNDcgaCA4MzIgcSA2NiwwIDExMyw0NyA0Nyw0NyA0NywxMTMgdiAzMjAgcSAwLDE0IDksMjMgOSw5IDIzLDkgaCA2NCBxIDE0LDAgMjMsLTkgOSwtOSA5LC0yMyB6IG0gMzg0LDg2NCBWIDk2MCBxIDAsLTI2IC0xOSwtNDUgLTE5LC0xOSAtNDUsLTE5IC0yNiwwIC00NSwxOSBMIDE1MDcsMTA5MSA4NTUsNDM5IHEgLTEwLC0xMCAtMjMsLTEwIC0xMywwIC0yMywxMCBMIDY5NSw1NTMgcSAtMTAsMTAgLTEwLDIzIDAsMTMgMTAsMjMgbCA2NTIsNjUyIC0xNzYsMTc2IHEgLTE5LDE5IC0xOSw0NSAwLDI2IDE5LDQ1IDE5LDE5IDQ1LDE5IGggNTEyIHEgMjYsMCA0NSwtMTkgMTksLTE5IDE5LC00NSB6IiAgICAgICBpZD0icGF0aDMwMjkiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHN0eWxlPSJmaWxsOndoaXRlIiAvPiAgPC9nPjwvc3ZnPg==);width:10px;height:10px;display:inline-block;margin-left:var(--std-gutter)}.icon-docs{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEzLjUgMGgtMTJjLTAuODI1IDAtMS41IDAuNjc1LTEuNSAxLjV2MTNjMCAwLjgyNSAwLjY3NSAxLjUgMS41IDEuNWgxMmMwLjgyNSAwIDEuNS0wLjY3NSAxLjUtMS41di0xM2MwLTAuODI1LTAuNjc1LTEuNS0xLjUtMS41ek0xMyAxNGgtMTF2LTEyaDExdjEyek00IDdoN3YxaC03ek00IDloN3YxaC03ek00IDExaDd2MWgtN3pNNCA1aDd2MWgtN3oiPjwvcGF0aD48L3N2Zz4=);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top}.icon-components{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEzIDExLjVsMS41IDEuNSA1LTUtNS01LTEuNSAxLjUgMy41IDMuNXoiPjwvcGF0aD48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNyA0LjVsLTEuNS0xLjUtNSA1IDUgNSAxLjUtMS41LTMuNS0zLjV6Ij48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEwLjk1OCAyLjM1MmwxLjA4NSAwLjI5Ni0zIDExLTEuMDg1LTAuMjk2IDMtMTF6Ij48L3BhdGg+PC9zdmc+);width:20px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top}.icon-support{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTggMGMtNC40MTggMC04IDMuNTgyLTggOHMzLjU4MiA4IDggOCA4LTMuNTgyIDgtOC0zLjU4Mi04LTgtOHpNNSA4YzAtMS42NTcgMS4zNDMtMyAzLTNzMyAxLjM0MyAzIDMtMS4zNDMgMy0zIDMtMy0xLjM0My0zLTN6TTE0LjQ2OCAxMC42Nzl2MGwtMi43NzItMS4xNDhjMC4xOTYtMC40NzIgMC4zMDQtMC45ODkgMC4zMDQtMS41MzFzLTAuMTA4LTEuMDU5LTAuMzA0LTEuNTMxbDIuNzcyLTEuMTQ4YzAuMzQyIDAuODI1IDAuNTMyIDEuNzMgMC41MzIgMi42NzlzLTAuMTg5IDEuODU0LTAuNTMyIDIuNjc5djB6TTEwLjY3OSAxLjUzMnYwIDBsLTEuMTQ4IDIuNzcyYy0wLjQ3Mi0wLjE5Ni0wLjk4OS0wLjMwNC0xLjUzMS0wLjMwNHMtMS4wNTkgMC4xMDgtMS41MzEgMC4zMDRsLTEuMTQ4LTIuNzcyYzAuODI1LTAuMzQyIDEuNzMtMC41MzIgMi42NzktMC41MzJzMS44NTQgMC4xODkgMi42NzkgMC41MzJ6TTEuNTMyIDUuMzIxbDIuNzcyIDEuMTQ4Yy0wLjE5NiAwLjQ3Mi0wLjMwNCAwLjk4OS0wLjMwNCAxLjUzMXMwLjEwOCAxLjA1OSAwLjMwNCAxLjUzMWwtMi43NzIgMS4xNDhjLTAuMzQyLTAuODI1LTAuNTMyLTEuNzMtMC41MzItMi42NzlzMC4xODktMS44NTQgMC41MzItMi42Nzl6TTUuMzIxIDE0LjQ2OGwxLjE0OC0yLjc3MmMwLjQ3MiAwLjE5NiAwLjk4OSAwLjMwNCAxLjUzMSAwLjMwNHMxLjA1OS0wLjEwOCAxLjUzMS0wLjMwNGwxLjE0OCAyLjc3MmMtMC44MjUgMC4zNDItMS43MyAwLjUzMi0yLjY3OSAwLjUzMnMtMS44NTQtMC4xODktMi42NzktMC41MzJ6Ij48L3BhdGg+PC9zdmc+);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter);vertical-align:text-top} diff --git a/dist/css/millennial-bank.min.css b/dist/css/millennial-bank.min.css index b85c186..ebf0de4 100644 --- a/dist/css/millennial-bank.min.css +++ b/dist/css/millennial-bank.min.css @@ -1 +1 @@ -.list-nav,.list-nav li{list-style:none;margin:0}:root{--main-color: #00B5FC;--main-color-darker: #00A0DF;--link-color:#00B5FC;--link-hover-color:rgba(0,0,0, 0.87);--border-color:whitesmoke;--border-color-darker:rgba(0,0,0, 0.25);--body-text:#666;--body-text-emphasized:#000;--std-gutter:0.6rem;--std-gutter-ex:0.9735rem;--hero-gutter:2rem;--hero-gutter-ex:3rem;--border-radius:4px;--border-radius-sm:2px;--border-radius-default:0;--main-font:'Source Sans Pro', sans-serif}html{font-size:62.5%;height:100%}body{font-size:1.4rem;min-height:100%;font-family:var(--main-font);font-weight:300;color:var(--body-text)}a{text-decoration:none;color:var(--link-color)}a:hover{color:var(--link-hover-color)}h1,h2,h3{color:var(--body-text-emphasized)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb{background:rgba(208,208,208,0.8)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(208,208,208,0.5)}.disabled{opacity:0.5;pointer-events:none}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.logo{font-weight:600;white-space:nowrap}.logo a{color:var(--main-color)}.logo a:hover{color:var(--main-color)}.account-balance{font-size:3.6rem;font-weight:100;color:var(--body-text-emphasized)}.balance-description{font-size:1.1rem}.dropdown-profile{display:flex;align-items:center;justify-content:flex-end;font-size:1.6rem}.masthead-title{font-size:3.6rem;font-weight:100;display:flex;align-items:center}.list-nav{padding:0}.list-nav ul{padding-left:0}.list-nav li{margin:var(--std-gutter) 0}.card-container{display:flex;align-items:center;flex-wrap:wrap}.card-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);margin-left:0}.card-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.card-container .container-end{padding:30px}.transactions-header{background-color:var(--border-color);padding:.3rem;border-bottom:1px solid #8080802e;font-weight:400;text-transform:uppercase}.transactions-container{opacity:0.8;transition:opacity 500ms ease-in-out}.transactions-container:hover{opacity:1}.transactions-container .transaction-title{font-size:1.8rem}.transactions-container .transaction-meta-date{font-size:1.3rem}.transactions-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);display:flex;align-items:center;margin-left:0}.transactions-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.transactions-container .card-start{flex:auto 1 1}.transactions-container .card-end{flex:auto 0 1;border-left:1px solid var(--border-color);text-align:right;padding:var(--std-gutter-ex);font-size:1.8rem}.grid-container{display:grid;height:100%;grid-template-columns:0.35fr 1.85fr;grid-template-rows:1fr;grid-gap:20px 20px;grid-template-areas:"Aside Main";padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;width:80%;padding:var(--hero-gutter);min-height:calc(100vh - 40px)}.Aside{display:grid;grid-area:Aside;grid-template-columns:1fr;grid-template-rows:0.2fr 2.2fr 0.2fr;grid-gap:1px 1px;grid-template-areas:"AsideMasthead" "AsideContent" "AsideFooter"}.AsideFooter{grid-area:AsideFooter}.AsideContent{grid-area:AsideContent}.AsideMasthead{grid-area:AsideMasthead;text-align:center}.Main{display:grid;grid-area:Main;grid-template-columns:1fr;grid-template-rows:0.18fr 3fr 0.1fr;grid-gap:10px 10px;grid-template-areas:"Masthead" "Content" "Footer";overflow-x:hidden}.Content{grid-area:Content}.Footer{grid-area:Footer;font-size:1.1rem}.Masthead{display:grid;grid-area:Masthead;grid-template-columns:1fr;grid-template-rows:1fr 1.2fr;grid-gap:1px 1px;grid-template-areas:"MastheadNav" "MastheadMain";max-width:66vw}.MastheadMain{grid-area:MastheadMain}.MastheadNav{grid-area:MastheadNav}.Scenes{display:flex;width:330vw;transform:translateX(-132vw)}.Scenes .Content{width:66vw;z-index:0;transform:translateZ(0);transition:transform 600ms ease-in-out, opacity 600ms ease-in-out;opacity:1}.Scenes .Content.over{background:#fff}a[id="snapshot"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(1) a,a[id="network"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(2) a,a[id="pay"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(3) a,a[id="settings"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(1) a,a[id="contact"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(2) a{color:var(--main-color);font-weight:600}a[id="snapshot"]:target ~ .Main .Scenes div.Content{transform:translateX(0)}a[id="snapshot"]:target ~ .Main .Scenes div.Content:not(:nth-child(3)){opacity:0}a[id="network"]:target ~ .Main .Scenes div.Content{transform:translateX(-66vw)}a[id="network"]:target ~ .Main .Scenes div.Content:not(:nth-child(4)){opacity:0}a[id="pay"]:target ~ .Main .Scenes div.Content:not(:nth-child(5)){opacity:0}a[id="pay"]:target ~ .Main .Scenes section.Content{transform:translateX(-132vw)}a[id="settings"]:target ~ .Main .Scenes div.Content{transform:translateX(66vw)}a[id="settings"]:target ~ .Main .Scenes div.Content:not(:nth-child(2)){opacity:0}a[id="contact"]:target ~ .Main .Scenes div.Content{transform:translateX(132vw)}a[id="contact"]:target ~ .Main .Scenes div.Content:not(:nth-child(1)){opacity:0}.icon-user{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTkgMTEuMDQxdi0wLjgyNWMxLjEwMi0wLjYyMSAyLTIuMTY4IDItMy43MTYgMC0yLjQ4NSAwLTQuNS0zLTQuNXMtMyAyLjAxNS0zIDQuNWMwIDEuNTQ4IDAuODk4IDMuMDk1IDIgMy43MTZ2MC44MjVjLTMuMzkyIDAuMjc3LTYgMS45NDQtNiAzLjk1OWgxNGMwLTIuMDE1LTIuNjA4LTMuNjgyLTYtMy45NTl6Ij48L3BhdGg+PC9zdmc+);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter-ex);vertical-align:text-top;opacity:0.2;border:1px solid #000;border-radius:50%;padding:3px;background-repeat:no-repeat;background-position:center}.hidden-anchor{display:none} +.list-nav,.list-nav li{list-style:none;margin:0}:root{--main-color: #00B5FC;--main-color-darker: #00A0DF;--link-color:#00B5FC;--link-hover-color:rgba(0,0,0, 0.87);--border-color:whitesmoke;--border-color-darker:rgba(0,0,0, 0.25);--body-text:#666;--body-text-emphasized:#000;--std-gutter:0.6rem;--std-gutter-ex:0.9735rem;--hero-gutter:2rem;--hero-gutter-ex:3rem;--border-radius:4px;--border-radius-sm:2px;--border-radius-default:0;--main-font:'Source Sans Pro', sans-serif}html{font-size:62.5%;height:100%}body{font-size:1.4rem;min-height:100%;font-family:var(--main-font);font-weight:300;color:var(--body-text)}a{text-decoration:none;color:var(--link-color)}a:hover{color:var(--link-hover-color)}h1,h2,h3{color:var(--body-text-emphasized)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb{background:rgba(208,208,208,0.8)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(208,208,208,0.5)}.disabled{opacity:0.5;pointer-events:none}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.logo{font-weight:600;white-space:nowrap}.logo a{color:var(--main-color)}.logo a:hover{color:var(--main-color)}.account-balance{font-size:3.6rem;font-weight:100;color:var(--body-text-emphasized)}.balance-description{font-size:1.1rem}.dropdown-profile{display:flex;align-items:center;justify-content:flex-end;font-size:1.6rem}.masthead-title{font-size:3.6rem;font-weight:100;display:flex;align-items:center}.list-nav{padding:0}.list-nav ul{padding-left:0}.list-nav li{margin:var(--std-gutter) 0}.card-container{display:flex;align-items:center;flex-wrap:wrap}.card-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);margin-left:0}.card-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.card-container .container-end{padding:30px}.transactions-header{background-color:var(--border-color);padding:.3rem;border-bottom:1px solid #8080802e;font-weight:400;text-transform:uppercase}.transactions-container{opacity:0.8;transition:opacity 500ms ease-in-out}.transactions-container:hover{opacity:1}.transactions-container .transaction-title{font-size:1.8rem}.transactions-container .transaction-meta-date{font-size:1.3rem}.transactions-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);display:flex;align-items:center;margin-left:0}.transactions-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.transactions-container .card-start{flex:auto 1 1}.transactions-container .card-end{flex:auto 0 1;border-left:1px solid var(--border-color);text-align:right;padding:var(--std-gutter-ex);font-size:1.8rem}.grid-container{display:grid;height:100%;grid-template-columns:0.35fr 1.85fr;grid-template-rows:1fr;grid-gap:20px 20px;grid-template-areas:"Aside Main";padding-left:15px;padding-right:15px;margin-left:auto;margin-right:5px;width:90%;padding:var(--hero-gutter);min-height:calc(100vh - 40px)}@media only screen and (max-width: 518px){.grid-container{margin-right:auto;width:100%;box-sizing:border-box}}.Aside{display:grid;grid-area:Aside;grid-template-columns:1fr;grid-template-rows:0.2fr 2.2fr 0.2fr;grid-gap:1px 1px;grid-template-areas:"AsideMasthead" "AsideContent" "AsideFooter"}.AsideFooter{grid-area:AsideFooter}.AsideContent{grid-area:AsideContent}.AsideMasthead{grid-area:AsideMasthead;text-align:center}.Main{display:grid;grid-area:Main;grid-template-columns:1fr;grid-template-rows:0.18fr 3fr 0.1fr;grid-gap:10px 10px;grid-template-areas:"Masthead" "Content" "Footer";overflow-x:hidden}.Content{grid-area:Content}.Footer{grid-area:Footer;font-size:1.1rem;max-width:65vw}@media only screen and (max-width: 518px){.Footer{max-width:59vw}}.Masthead{display:grid;grid-area:Masthead;grid-template-columns:1fr;grid-template-rows:1fr 1.2fr;grid-gap:1px 1px;grid-template-areas:"MastheadNav" "MastheadMain";max-width:65vw}@media only screen and (max-width: 518px){.Masthead{max-width:59vw}}.MastheadMain{grid-area:MastheadMain}.MastheadNav{grid-area:MastheadNav}.Scenes{display:flex;width:325vw;transform:translateX(-130vw)}.Scenes .Content{width:65vw;z-index:0;transform:translateZ(0);transition:transform 600ms ease-in-out, opacity 600ms ease-in-out;opacity:1}.Scenes .Content.over{background:#fff}@media only screen and (max-width: 518px){.Scenes .Content{width:59vw}}@media only screen and (max-width: 518px){.Scenes{width:295vw;transform:translateX(-118vw)}}a[id="snapshot"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(1) a,a[id="network"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(2) a,a[id="pay"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(3) a,a[id="settings"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(1) a,a[id="contact"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(2) a{color:var(--main-color);font-weight:600}a[id="snapshot"]:target ~ .Main .Scenes div.Content{transform:translateX(0)}a[id="snapshot"]:target ~ .Main .Scenes div.Content:not(:nth-child(3)){opacity:0}a[id="network"]:target ~ .Main .Scenes div.Content{transform:translateX(-65vw)}@media only screen and (max-width: 518px){a[id="network"]:target ~ .Main .Scenes div.Content{transform:translateX(-59vw)}}a[id="network"]:target ~ .Main .Scenes div.Content:not(:nth-child(4)){opacity:0}a[id="pay"]:target ~ .Main .Scenes div.Content:not(:nth-child(5)){opacity:0}a[id="pay"]:target ~ .Main .Scenes section.Content{transform:translateX(-130vw)}@media only screen and (max-width: 518px){a[id="pay"]:target ~ .Main .Scenes section.Content{transform:translateX(-118vw)}}a[id="settings"]:target ~ .Main .Scenes div.Content{transform:translateX(65vw)}@media only screen and (max-width: 518px){a[id="settings"]:target ~ .Main .Scenes div.Content{transform:translateX(59vw)}}a[id="settings"]:target ~ .Main .Scenes div.Content:not(:nth-child(2)){opacity:0}a[id="contact"]:target ~ .Main .Scenes div.Content{transform:translateX(130vw)}@media only screen and (max-width: 518px){a[id="contact"]:target ~ .Main .Scenes div.Content{transform:translateX(118vw)}}a[id="contact"]:target ~ .Main .Scenes div.Content:not(:nth-child(1)){opacity:0}.icon-user{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTkgMTEuMDQxdi0wLjgyNWMxLjEwMi0wLjYyMSAyLTIuMTY4IDItMy43MTYgMC0yLjQ4NSAwLTQuNS0zLTQuNXMtMyAyLjAxNS0zIDQuNWMwIDEuNTQ4IDAuODk4IDMuMDk1IDIgMy43MTZ2MC44MjVjLTMuMzkyIDAuMjc3LTYgMS45NDQtNiAzLjk1OWgxNGMwLTIuMDE1LTIuNjA4LTMuNjgyLTYtMy45NTl6Ij48L3BhdGg+PC9zdmc+);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter-ex);vertical-align:text-top;opacity:0.2;border:1px solid #000;border-radius:50%;padding:3px;background-repeat:no-repeat;background-position:center}.hidden-anchor{display:none} From 820f6fae29b0d551119ed7db6bc6d41f77ce581d Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Thu, 25 Oct 2018 01:12:59 -0400 Subject: [PATCH 05/13] wip: collapsible --- examples/millennial_bank/css/_default.scss | 125 ++++++++++++++++++ .../millennial_bank/css/_millennial-bank.scss | 2 +- examples/millennial_bank/index.html | 17 ++- src/_collapsible.scss | 0 src/_module.scss | 3 +- 5 files changed, 144 insertions(+), 3 deletions(-) create mode 100644 src/_collapsible.scss diff --git a/examples/millennial_bank/css/_default.scss b/examples/millennial_bank/css/_default.scss index f2e6abc..2cdb806 100644 --- a/examples/millennial_bank/css/_default.scss +++ b/examples/millennial_bank/css/_default.scss @@ -51,4 +51,129 @@ hr { margin-bottom:20px; border:0; border-top:1px solid #eee; +} + +// https://alligator.io/css/collapsible/ +.wrap-collapsible{ + + $config: ( + borderRadius: 6px, + + toggle: ( + class: 'lbl-toggle', + backgroundColor: white + ), + + content: ( + class: 'collpasible-content', + innerClass: 'content-inner', + transition-duration: 250ms + ), + + overlay: ( + color: rgba(0,0,0,0.05), + transitionDuration: 500ms + ), + + indicator: ( + position: 'after', + color: currenColor + ) + + ); + + position: absolute; + z-index: 1; + right: 0; + input[type='checkbox'] { + display: none; + } + + .lbl-toggle { + display: block; + padding: 1rem; + cursor: pointer; + border-radius: 6px; + transition: all 0.25s ease-out; + background-color:white; + + // &:before { + // content: ' '; + // display: inline-block; + + // border-top: 5px solid transparent; + // border-bottom: 5px solid transparent; + // border-left: 5px solid currentColor; + + // vertical-align: middle; + // margin-right: .7rem; + // transform: translateY(-2px); + + // transition: transform .2s ease-out; + // } + + &:after { + content: ' '; + display: inline-block; + + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid currentColor; + + vertical-align: middle; + margin-left: .7rem; + transform: translateY(-2px); + + transition: transform .2s ease-out; + } + } + + + + .collapsible-content { + max-height: 0px; + overflow: hidden; + + transition: max-height .25s ease-in-out; + .content-inner { + background: white; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + padding: .5rem 1rem; + transition: all 0.25s ease-out; + } + } + + + .toggle:checked + .lbl-toggle + .collapsible-content { + max-height: 350px; + } + + .toggle:checked + .lbl-toggle::before { + transform: rotate(90deg) translateX(0); + } + .toggle:checked + .lbl-toggle::after { + transform: rotate(-90deg) translateX(0); + } + + .toggle:checked+.lbl-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom-color: whitesmoke; + } + .overlay-toggle{ + position: fixed; + top: 0; + width: 100%; + height: 100vh; + left: 0; + z-index: -1; + background-color: rgba(0,0,0,0); + transition: background-color 500ms ease-in-out; + pointer-events: none; + } + .toggle:checked ~ .overlay-toggle{ + background-color: rgba(0,0,0,0.05); + pointer-events: all; + } } \ No newline at end of file diff --git a/examples/millennial_bank/css/_millennial-bank.scss b/examples/millennial_bank/css/_millennial-bank.scss index 6e58ac2..b6a54e7 100644 --- a/examples/millennial_bank/css/_millennial-bank.scss +++ b/examples/millennial_bank/css/_millennial-bank.scss @@ -163,7 +163,7 @@ $breakpoint-mobile:518px; .MastheadMain { grid-area: MastheadMain; } - .MastheadNav { grid-area: MastheadNav; } + .MastheadNav { grid-area: MastheadNav; position: relative; } .Scenes{ display:flex; diff --git a/examples/millennial_bank/index.html b/examples/millennial_bank/index.html index 4fb8c99..1fe74e5 100644 --- a/examples/millennial_bank/index.html +++ b/examples/millennial_bank/index.html @@ -49,7 +49,22 @@

my mesh

Account Snapshot

-->
-
Dawid Pawelec
+ +
+ + +
+
+ +
+
+ +
diff --git a/src/_collapsible.scss b/src/_collapsible.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/_module.scss b/src/_module.scss index 920d5bd..2910ffa 100644 --- a/src/_module.scss +++ b/src/_module.scss @@ -5,4 +5,5 @@ @import 'text.scss'; @import 'buttons.scss'; @import 'nav.scss'; -@import 'inputs.scss'; \ No newline at end of file +@import 'inputs.scss'; +@import 'collapsible.scss'; \ No newline at end of file From c7d53e225bd28a90acff523596a7fac2af584bcc Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Thu, 25 Oct 2018 01:14:22 -0400 Subject: [PATCH 06/13] deploy css --- dist/css/millennial-bank.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/css/millennial-bank.min.css b/dist/css/millennial-bank.min.css index ebf0de4..d1d312c 100644 --- a/dist/css/millennial-bank.min.css +++ b/dist/css/millennial-bank.min.css @@ -1 +1 @@ -.list-nav,.list-nav li{list-style:none;margin:0}:root{--main-color: #00B5FC;--main-color-darker: #00A0DF;--link-color:#00B5FC;--link-hover-color:rgba(0,0,0, 0.87);--border-color:whitesmoke;--border-color-darker:rgba(0,0,0, 0.25);--body-text:#666;--body-text-emphasized:#000;--std-gutter:0.6rem;--std-gutter-ex:0.9735rem;--hero-gutter:2rem;--hero-gutter-ex:3rem;--border-radius:4px;--border-radius-sm:2px;--border-radius-default:0;--main-font:'Source Sans Pro', sans-serif}html{font-size:62.5%;height:100%}body{font-size:1.4rem;min-height:100%;font-family:var(--main-font);font-weight:300;color:var(--body-text)}a{text-decoration:none;color:var(--link-color)}a:hover{color:var(--link-hover-color)}h1,h2,h3{color:var(--body-text-emphasized)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb{background:rgba(208,208,208,0.8)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(208,208,208,0.5)}.disabled{opacity:0.5;pointer-events:none}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.logo{font-weight:600;white-space:nowrap}.logo a{color:var(--main-color)}.logo a:hover{color:var(--main-color)}.account-balance{font-size:3.6rem;font-weight:100;color:var(--body-text-emphasized)}.balance-description{font-size:1.1rem}.dropdown-profile{display:flex;align-items:center;justify-content:flex-end;font-size:1.6rem}.masthead-title{font-size:3.6rem;font-weight:100;display:flex;align-items:center}.list-nav{padding:0}.list-nav ul{padding-left:0}.list-nav li{margin:var(--std-gutter) 0}.card-container{display:flex;align-items:center;flex-wrap:wrap}.card-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);margin-left:0}.card-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.card-container .container-end{padding:30px}.transactions-header{background-color:var(--border-color);padding:.3rem;border-bottom:1px solid #8080802e;font-weight:400;text-transform:uppercase}.transactions-container{opacity:0.8;transition:opacity 500ms ease-in-out}.transactions-container:hover{opacity:1}.transactions-container .transaction-title{font-size:1.8rem}.transactions-container .transaction-meta-date{font-size:1.3rem}.transactions-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);display:flex;align-items:center;margin-left:0}.transactions-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.transactions-container .card-start{flex:auto 1 1}.transactions-container .card-end{flex:auto 0 1;border-left:1px solid var(--border-color);text-align:right;padding:var(--std-gutter-ex);font-size:1.8rem}.grid-container{display:grid;height:100%;grid-template-columns:0.35fr 1.85fr;grid-template-rows:1fr;grid-gap:20px 20px;grid-template-areas:"Aside Main";padding-left:15px;padding-right:15px;margin-left:auto;margin-right:5px;width:90%;padding:var(--hero-gutter);min-height:calc(100vh - 40px)}@media only screen and (max-width: 518px){.grid-container{margin-right:auto;width:100%;box-sizing:border-box}}.Aside{display:grid;grid-area:Aside;grid-template-columns:1fr;grid-template-rows:0.2fr 2.2fr 0.2fr;grid-gap:1px 1px;grid-template-areas:"AsideMasthead" "AsideContent" "AsideFooter"}.AsideFooter{grid-area:AsideFooter}.AsideContent{grid-area:AsideContent}.AsideMasthead{grid-area:AsideMasthead;text-align:center}.Main{display:grid;grid-area:Main;grid-template-columns:1fr;grid-template-rows:0.18fr 3fr 0.1fr;grid-gap:10px 10px;grid-template-areas:"Masthead" "Content" "Footer";overflow-x:hidden}.Content{grid-area:Content}.Footer{grid-area:Footer;font-size:1.1rem;max-width:65vw}@media only screen and (max-width: 518px){.Footer{max-width:59vw}}.Masthead{display:grid;grid-area:Masthead;grid-template-columns:1fr;grid-template-rows:1fr 1.2fr;grid-gap:1px 1px;grid-template-areas:"MastheadNav" "MastheadMain";max-width:65vw}@media only screen and (max-width: 518px){.Masthead{max-width:59vw}}.MastheadMain{grid-area:MastheadMain}.MastheadNav{grid-area:MastheadNav}.Scenes{display:flex;width:325vw;transform:translateX(-130vw)}.Scenes .Content{width:65vw;z-index:0;transform:translateZ(0);transition:transform 600ms ease-in-out, opacity 600ms ease-in-out;opacity:1}.Scenes .Content.over{background:#fff}@media only screen and (max-width: 518px){.Scenes .Content{width:59vw}}@media only screen and (max-width: 518px){.Scenes{width:295vw;transform:translateX(-118vw)}}a[id="snapshot"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(1) a,a[id="network"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(2) a,a[id="pay"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(3) a,a[id="settings"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(1) a,a[id="contact"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(2) a{color:var(--main-color);font-weight:600}a[id="snapshot"]:target ~ .Main .Scenes div.Content{transform:translateX(0)}a[id="snapshot"]:target ~ .Main .Scenes div.Content:not(:nth-child(3)){opacity:0}a[id="network"]:target ~ .Main .Scenes div.Content{transform:translateX(-65vw)}@media only screen and (max-width: 518px){a[id="network"]:target ~ .Main .Scenes div.Content{transform:translateX(-59vw)}}a[id="network"]:target ~ .Main .Scenes div.Content:not(:nth-child(4)){opacity:0}a[id="pay"]:target ~ .Main .Scenes div.Content:not(:nth-child(5)){opacity:0}a[id="pay"]:target ~ .Main .Scenes section.Content{transform:translateX(-130vw)}@media only screen and (max-width: 518px){a[id="pay"]:target ~ .Main .Scenes section.Content{transform:translateX(-118vw)}}a[id="settings"]:target ~ .Main .Scenes div.Content{transform:translateX(65vw)}@media only screen and (max-width: 518px){a[id="settings"]:target ~ .Main .Scenes div.Content{transform:translateX(59vw)}}a[id="settings"]:target ~ .Main .Scenes div.Content:not(:nth-child(2)){opacity:0}a[id="contact"]:target ~ .Main .Scenes div.Content{transform:translateX(130vw)}@media only screen and (max-width: 518px){a[id="contact"]:target ~ .Main .Scenes div.Content{transform:translateX(118vw)}}a[id="contact"]:target ~ .Main .Scenes div.Content:not(:nth-child(1)){opacity:0}.icon-user{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTkgMTEuMDQxdi0wLjgyNWMxLjEwMi0wLjYyMSAyLTIuMTY4IDItMy43MTYgMC0yLjQ4NSAwLTQuNS0zLTQuNXMtMyAyLjAxNS0zIDQuNWMwIDEuNTQ4IDAuODk4IDMuMDk1IDIgMy43MTZ2MC44MjVjLTMuMzkyIDAuMjc3LTYgMS45NDQtNiAzLjk1OWgxNGMwLTIuMDE1LTIuNjA4LTMuNjgyLTYtMy45NTl6Ij48L3BhdGg+PC9zdmc+);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter-ex);vertical-align:text-top;opacity:0.2;border:1px solid #000;border-radius:50%;padding:3px;background-repeat:no-repeat;background-position:center}.hidden-anchor{display:none} +.list-nav,.list-nav li{list-style:none;margin:0}:root{--main-color: #00B5FC;--main-color-darker: #00A0DF;--link-color:#00B5FC;--link-hover-color:rgba(0,0,0, 0.87);--border-color:whitesmoke;--border-color-darker:rgba(0,0,0, 0.25);--body-text:#666;--body-text-emphasized:#000;--std-gutter:0.6rem;--std-gutter-ex:0.9735rem;--hero-gutter:2rem;--hero-gutter-ex:3rem;--border-radius:4px;--border-radius-sm:2px;--border-radius-default:0;--main-font:'Source Sans Pro', sans-serif}html{font-size:62.5%;height:100%}body{font-size:1.4rem;min-height:100%;font-family:var(--main-font);font-weight:300;color:var(--body-text)}a{text-decoration:none;color:var(--link-color)}a:hover{color:var(--link-hover-color)}h1,h2,h3{color:var(--body-text-emphasized)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb{background:rgba(208,208,208,0.8)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(208,208,208,0.5)}.disabled{opacity:0.5;pointer-events:none}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.wrap-collapsible{position:absolute;z-index:1;right:0}.wrap-collapsible input[type='checkbox']{display:none}.wrap-collapsible .lbl-toggle{display:block;padding:1rem;cursor:pointer;border-radius:6px;transition:all 0.25s ease-out;background-color:white}.wrap-collapsible .lbl-toggle:after{content:' ';display:inline-block;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid currentColor;vertical-align:middle;margin-left:.7rem;transform:translateY(-2px);transition:transform .2s ease-out}.wrap-collapsible .collapsible-content{max-height:0px;overflow:hidden;transition:max-height .25s ease-in-out}.wrap-collapsible .collapsible-content .content-inner{background:white;border-bottom-left-radius:6px;border-bottom-right-radius:6px;padding:.5rem 1rem;transition:all 0.25s ease-out}.wrap-collapsible .toggle:checked+.lbl-toggle+.collapsible-content{max-height:350px}.wrap-collapsible .toggle:checked+.lbl-toggle::before{transform:rotate(90deg) translateX(0)}.wrap-collapsible .toggle:checked+.lbl-toggle::after{transform:rotate(-90deg) translateX(0)}.wrap-collapsible .toggle:checked+.lbl-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:whitesmoke}.wrap-collapsible .overlay-toggle{position:fixed;top:0;width:100%;height:100vh;left:0;z-index:-1;background-color:rgba(0,0,0,0);transition:background-color 500ms ease-in-out;pointer-events:none}.wrap-collapsible .toggle:checked ~ .overlay-toggle{background-color:rgba(0,0,0,0.05);pointer-events:all}.logo{font-weight:600;white-space:nowrap}.logo a{color:var(--main-color)}.logo a:hover{color:var(--main-color)}.account-balance{font-size:3.6rem;font-weight:100;color:var(--body-text-emphasized)}.balance-description{font-size:1.1rem}.dropdown-profile{display:flex;align-items:center;justify-content:flex-end;font-size:1.6rem}.masthead-title{font-size:3.6rem;font-weight:100;display:flex;align-items:center}.list-nav{padding:0}.list-nav ul{padding-left:0}.list-nav li{margin:var(--std-gutter) 0}.card-container{display:flex;align-items:center;flex-wrap:wrap}.card-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);margin-left:0}.card-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.card-container .container-end{padding:30px}.transactions-header{background-color:var(--border-color);padding:.3rem;border-bottom:1px solid #8080802e;font-weight:400;text-transform:uppercase}.transactions-container{opacity:0.8;transition:opacity 500ms ease-in-out}.transactions-container:hover{opacity:1}.transactions-container .transaction-title{font-size:1.8rem}.transactions-container .transaction-meta-date{font-size:1.3rem}.transactions-container .card{border:1px solid var(--border-color);margin:var(--std-gutter-ex);padding:var(--std-gutter-ex);display:flex;align-items:center;margin-left:0}.transactions-container .card.warn-level-2{background-color:rgba(255,165,0,0.1)}.transactions-container .card-start{flex:auto 1 1}.transactions-container .card-end{flex:auto 0 1;border-left:1px solid var(--border-color);text-align:right;padding:var(--std-gutter-ex);font-size:1.8rem}.grid-container{display:grid;height:100%;grid-template-columns:0.35fr 1.85fr;grid-template-rows:1fr;grid-gap:20px 20px;grid-template-areas:"Aside Main";padding-left:15px;padding-right:15px;margin-left:auto;margin-right:5px;width:90%;padding:var(--hero-gutter);min-height:calc(100vh - 40px)}@media only screen and (max-width: 518px){.grid-container{margin-right:auto;width:100%;box-sizing:border-box}}.Aside{display:grid;grid-area:Aside;grid-template-columns:1fr;grid-template-rows:0.2fr 2.2fr 0.2fr;grid-gap:1px 1px;grid-template-areas:"AsideMasthead" "AsideContent" "AsideFooter"}.AsideFooter{grid-area:AsideFooter}.AsideContent{grid-area:AsideContent}.AsideMasthead{grid-area:AsideMasthead;text-align:center}.Main{display:grid;grid-area:Main;grid-template-columns:1fr;grid-template-rows:0.18fr 3fr 0.1fr;grid-gap:10px 10px;grid-template-areas:"Masthead" "Content" "Footer";overflow-x:hidden}.Content{grid-area:Content}.Footer{grid-area:Footer;font-size:1.1rem;max-width:65vw}@media only screen and (max-width: 518px){.Footer{max-width:59vw}}.Masthead{display:grid;grid-area:Masthead;grid-template-columns:1fr;grid-template-rows:1fr 1.2fr;grid-gap:1px 1px;grid-template-areas:"MastheadNav" "MastheadMain";max-width:65vw}@media only screen and (max-width: 518px){.Masthead{max-width:59vw}}.MastheadMain{grid-area:MastheadMain}.MastheadNav{grid-area:MastheadNav;position:relative}.Scenes{display:flex;width:325vw;transform:translateX(-130vw)}.Scenes .Content{width:65vw;z-index:0;transform:translateZ(0);transition:transform 600ms ease-in-out, opacity 600ms ease-in-out;opacity:1}.Scenes .Content.over{background:#fff}@media only screen and (max-width: 518px){.Scenes .Content{width:59vw}}@media only screen and (max-width: 518px){.Scenes{width:295vw;transform:translateX(-118vw)}}a[id="snapshot"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(1) a,a[id="network"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(2) a,a[id="pay"]:target ~ .Aside .AsideContent .list-nav.general li:nth-child(3) a,a[id="settings"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(1) a,a[id="contact"]:target ~ .Aside .AsideContent .list-nav.help li:nth-child(2) a{color:var(--main-color);font-weight:600}a[id="snapshot"]:target ~ .Main .Scenes div.Content{transform:translateX(0)}a[id="snapshot"]:target ~ .Main .Scenes div.Content:not(:nth-child(3)){opacity:0}a[id="network"]:target ~ .Main .Scenes div.Content{transform:translateX(-65vw)}@media only screen and (max-width: 518px){a[id="network"]:target ~ .Main .Scenes div.Content{transform:translateX(-59vw)}}a[id="network"]:target ~ .Main .Scenes div.Content:not(:nth-child(4)){opacity:0}a[id="pay"]:target ~ .Main .Scenes div.Content:not(:nth-child(5)){opacity:0}a[id="pay"]:target ~ .Main .Scenes section.Content{transform:translateX(-130vw)}@media only screen and (max-width: 518px){a[id="pay"]:target ~ .Main .Scenes section.Content{transform:translateX(-118vw)}}a[id="settings"]:target ~ .Main .Scenes div.Content{transform:translateX(65vw)}@media only screen and (max-width: 518px){a[id="settings"]:target ~ .Main .Scenes div.Content{transform:translateX(59vw)}}a[id="settings"]:target ~ .Main .Scenes div.Content:not(:nth-child(2)){opacity:0}a[id="contact"]:target ~ .Main .Scenes div.Content{transform:translateX(130vw)}@media only screen and (max-width: 518px){a[id="contact"]:target ~ .Main .Scenes div.Content{transform:translateX(118vw)}}a[id="contact"]:target ~ .Main .Scenes div.Content:not(:nth-child(1)){opacity:0}.icon-user{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTkgMTEuMDQxdi0wLjgyNWMxLjEwMi0wLjYyMSAyLTIuMTY4IDItMy43MTYgMC0yLjQ4NSAwLTQuNS0zLTQuNXMtMyAyLjAxNS0zIDQuNWMwIDEuNTQ4IDAuODk4IDMuMDk1IDIgMy43MTZ2MC44MjVjLTMuMzkyIDAuMjc3LTYgMS45NDQtNiAzLjk1OWgxNGMwLTIuMDE1LTIuNjA4LTMuNjgyLTYtMy45NTl6Ij48L3BhdGg+PC9zdmc+);width:16px;height:16px;display:inline-block;margin-right:var(--std-gutter-ex);vertical-align:text-top;opacity:0.2;border:1px solid #000;border-radius:50%;padding:3px;background-repeat:no-repeat;background-position:center}.hidden-anchor{display:none} From 5a2bccc64e985209565a692ab01781a309ba4ddc Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Thu, 25 Oct 2018 22:27:53 -0400 Subject: [PATCH 07/13] Add Web App Manifest to "millennial bank" example --- examples/millennial_bank/icon.png | Bin 0 -> 1794 bytes examples/millennial_bank/index.html | 3 ++- examples/millennial_bank/manifest.webmanifest | 14 ++++++++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 examples/millennial_bank/icon.png create mode 100644 examples/millennial_bank/manifest.webmanifest diff --git a/examples/millennial_bank/icon.png b/examples/millennial_bank/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4aaa109cefa7faa95708f261f7ffb82d0c158bef GIT binary patch literal 1794 zcmZuyYg7_w8s?&i7c|S&12B3`IbP*WU3@v?1^Bwk<;6U6WWYLcX`$6Jl1 zc&Tu#hEAR|u?ay={<7n?J=G(F9>^|30RMaS|Vp9{b6C54&k_$?@Euh^hNz;Tcj4*1Am z;TJG?Oq+=c$p`cP>=Y5q1~%%htT#+F70`UA&Rhj%hwaMgo@P1+#(sSe2=v;=KVYCb z52y#!@51f@(E|YlsK{7k{C|jE#l3&d>++`NUR*k6PgabQ6lb2y&#w6tNnSVP^$hnX z`CC6Nt8P{0*=k6Nj=aNqUpQOKO*=Y5C+J6O*$Zl@Gb0p>8V@tN${S1vKcbzTydeJS;puI%yI~3zueMCB z1EC$Pv|`CoIbs(m^CjsfA9f*RZ*R?KbnyPD7=>J9~;g4i}aCX34`B{dk63bnT5c+4}-V$Dse4_nr zx%7eZ-AHr9{cR@E{yA;keZrE*y6#r-Yx&@~kc#~;jmnA>yS>CO5^D@$TA}a;PJpqe zaaE$qB0mE(R&cj{w>% zmqP0Sq`$n%Yc%v7?%=iXt-n8e%1CzBO?qeEj2@-5oIe_WB=Aa~83QYTtN9R=7zm>g z!3ZTg${8s@s3;J$Nd7zd9d52QOS4v?<@!u97c`#b}t64_&I#~pb#skI3$XoFsr0W_m(r|xPO>nc59~N zv92bVPie%m!pd^EI&sG`{0|p08?AwcEyOLGas1DXF1A*r_L*rDDP+R0U~+s8yzX*# zBWXx_Fg(BIa(eG0Eq>Z8vw9*6hxB=x;oC>br^cu}!&h%_SR#}i`z1Qu5eZNvzN#oWzEd4`zefZsFOMfS@sQ67RO>tK@HVG z9%W6;@85H@D(JA7K(WS6Q}?Z@Z&}($HQZma%j_ltqx(a00@HSP#Hh*Lckx$jXMvIw zygo1ZVPq8Wqr32972ELm{}L!*0@DI5ucl*{1Iy#Jbk+T zXbGm~Ne}WoZ=owaB^~v1X=|U0fQRN)1??$An>V^G+Uv?Nm5qz^=d{TOlUah5@f%1B z`&&bKo|nwf&CU!zB{-^KQ;346hFGZEg+?Op^}2k|@$wq+oJV$W+FMg`awpuCSR$VS zN+wt_)w48ZDaKAyEG9(4@DCe2jI?b+TakCbu#+GCp@;a#q^p*avapkbVW?+?vL#ig zfi8gPo|^U&c@OvjqSkcTqGJ0?Fwp_G60!_80cy%s3(4oo73>cnv~WIX*}NlM_1igw zQrDDKI^nudfP-l^i1&VqOJwRc1(CmOZ`5wJL3AUTE@c;MBa4`E*GjTg=kakFyFm0m w(%@qj{5vK-hQxmepqG;a|G)$KwiN~NZ1~~a9ee{-A8LTGBN4$Zft1330aQpq82|tP literal 0 HcmV?d00001 diff --git a/examples/millennial_bank/index.html b/examples/millennial_bank/index.html index 1fe74e5..3641145 100644 --- a/examples/millennial_bank/index.html +++ b/examples/millennial_bank/index.html @@ -6,11 +6,12 @@ - Oakwood Mesh | my mesh + my mesh | Oakwood Mesh + diff --git a/examples/millennial_bank/manifest.webmanifest b/examples/millennial_bank/manifest.webmanifest new file mode 100644 index 0000000..f8e1dba --- /dev/null +++ b/examples/millennial_bank/manifest.webmanifest @@ -0,0 +1,14 @@ +{ + "name": "my mesh | Oakwood Mesh", + "short_name": "my mesh", + "start_url": "#snapshot", + "display": "standalone", + "background_color": "#fff", + "theme_color": "#00B5FC", + "description": "An account management portal for the Oakwood Mesh internet network.", + "icons": [{ + "src": "icon.png", + "sizes": "180x180", + "type": "image/png" + }] + } \ No newline at end of file From 4841be04e42bd5ff45d427e3003ba72e23bf59ff Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Thu, 25 Oct 2018 22:34:08 -0400 Subject: [PATCH 08/13] Change start_url in web manifest --- examples/millennial_bank/manifest.webmanifest | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/millennial_bank/manifest.webmanifest b/examples/millennial_bank/manifest.webmanifest index f8e1dba..c60d9af 100644 --- a/examples/millennial_bank/manifest.webmanifest +++ b/examples/millennial_bank/manifest.webmanifest @@ -1,7 +1,7 @@ { "name": "my mesh | Oakwood Mesh", "short_name": "my mesh", - "start_url": "#snapshot", + "start_url": "/#snapshot", "display": "standalone", "background_color": "#fff", "theme_color": "#00B5FC", From eea5b40b99f073c73b2ce945d1e59321a0b7ae5a Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Thu, 25 Oct 2018 22:37:27 -0400 Subject: [PATCH 09/13] better start_url --- examples/millennial_bank/manifest.webmanifest | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/millennial_bank/manifest.webmanifest b/examples/millennial_bank/manifest.webmanifest index c60d9af..50d4b9d 100644 --- a/examples/millennial_bank/manifest.webmanifest +++ b/examples/millennial_bank/manifest.webmanifest @@ -1,7 +1,7 @@ { "name": "my mesh | Oakwood Mesh", "short_name": "my mesh", - "start_url": "/#snapshot", + "start_url": "/tls-css-framework/examples/millennial_bank/#snapshot", "display": "standalone", "background_color": "#fff", "theme_color": "#00B5FC", From 5f6ddca0125ae4b4ddf10571911d281996fd5ea0 Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Thu, 25 Oct 2018 22:42:58 -0400 Subject: [PATCH 10/13] third try --- examples/millennial_bank/manifest.webmanifest | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/millennial_bank/manifest.webmanifest b/examples/millennial_bank/manifest.webmanifest index 50d4b9d..466dd5f 100644 --- a/examples/millennial_bank/manifest.webmanifest +++ b/examples/millennial_bank/manifest.webmanifest @@ -1,7 +1,7 @@ { "name": "my mesh | Oakwood Mesh", "short_name": "my mesh", - "start_url": "/tls-css-framework/examples/millennial_bank/#snapshot", + "start_url": "./#snapshot", "display": "standalone", "background_color": "#fff", "theme_color": "#00B5FC", From 03f03eae13e991629371c8222e05caf14c60f901 Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Thu, 25 Oct 2018 23:48:47 -0400 Subject: [PATCH 11/13] Add 512 icon to manifest --- examples/index.html | 2 +- examples/millennial_bank/icon-512.png | Bin 0 -> 5435 bytes examples/millennial_bank/icon.png | Bin 1794 -> 1911 bytes examples/millennial_bank/index.html | 3 ++- examples/millennial_bank/manifest.webmanifest | 21 ++++++++++++------ 5 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 examples/millennial_bank/icon-512.png diff --git a/examples/index.html b/examples/index.html index 3f7ffb9..54b960b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -10,7 +10,7 @@ - + diff --git a/examples/millennial_bank/icon-512.png b/examples/millennial_bank/icon-512.png new file mode 100644 index 0000000000000000000000000000000000000000..c2931bc0ff5985aeb463d020c7ac9729c93c3fa8 GIT binary patch literal 5435 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 diff --git a/examples/millennial_bank/index.html b/examples/millennial_bank/index.html index 3641145..1e79c88 100644 --- a/examples/millennial_bank/index.html +++ b/examples/millennial_bank/index.html @@ -5,7 +5,8 @@ - + + my mesh | Oakwood Mesh diff --git a/examples/millennial_bank/manifest.webmanifest b/examples/millennial_bank/manifest.webmanifest index 466dd5f..0452107 100644 --- a/examples/millennial_bank/manifest.webmanifest +++ b/examples/millennial_bank/manifest.webmanifest @@ -5,10 +5,17 @@ "display": "standalone", "background_color": "#fff", "theme_color": "#00B5FC", - "description": "An account management portal for the Oakwood Mesh internet network.", - "icons": [{ - "src": "icon.png", - "sizes": "180x180", - "type": "image/png" - }] - } \ No newline at end of file + "description": "Account management portal for the Oakwood Mesh internet network", + "icons": [ + { + "src": "icon.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icon-512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} \ No newline at end of file From 3599b92f3fced40c91289e747227181acdcc9999 Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Fri, 26 Oct 2018 00:57:41 -0400 Subject: [PATCH 12/13] Add Service Worker --- examples/millennial_bank/index.html | 8 ++++++++ examples/millennial_bank/sw.js | 21 +++++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 examples/millennial_bank/sw.js diff --git a/examples/millennial_bank/index.html b/examples/millennial_bank/index.html index 1e79c88..eae38da 100644 --- a/examples/millennial_bank/index.html +++ b/examples/millennial_bank/index.html @@ -145,6 +145,14 @@

Account Snapshot

+ + \ No newline at end of file diff --git a/examples/millennial_bank/sw.js b/examples/millennial_bank/sw.js new file mode 100644 index 0000000..e2c26cd --- /dev/null +++ b/examples/millennial_bank/sw.js @@ -0,0 +1,21 @@ +self.addEventListener('install', function (event) { + 'use strict'; + event.waitUntil( + caches.open('myMesh').then(function (cache) { + return cache.addAll([ + '/examples/millennial_bank/#snapshot', + '/examples/millennial_bank/index.html', + '/dist/css/millennial-bank.min.css' + ]); + }) + ); +}); + +self.addEventListener('fetch', function (event) { + 'use strict'; + event.respondWith( + caches.match(event.request).then(function (response) { + return response || fetch(event.request); + }) + ); +}); \ No newline at end of file From 8db1d0714e51dfcfa662535b04ff44f38609ad98 Mon Sep 17 00:00:00 2001 From: Dawid Pawelec Date: Fri, 26 Oct 2018 01:07:14 -0400 Subject: [PATCH 13/13] Make cache paths relative to sw.js --- examples/millennial_bank/sw.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/millennial_bank/sw.js b/examples/millennial_bank/sw.js index e2c26cd..3aa4568 100644 --- a/examples/millennial_bank/sw.js +++ b/examples/millennial_bank/sw.js @@ -3,9 +3,9 @@ self.addEventListener('install', function (event) { event.waitUntil( caches.open('myMesh').then(function (cache) { return cache.addAll([ - '/examples/millennial_bank/#snapshot', - '/examples/millennial_bank/index.html', - '/dist/css/millennial-bank.min.css' + '../../examples/millennial_bank/#snapshot', + '../../examples/millennial_bank/index.html', + '../../dist/css/millennial-bank.min.css' ]); }) );