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/dist/css/example.min.css b/dist/css/example.min.css new file mode 100644 index 0000000..40612cc --- /dev/null +++ b/dist/css/example.min.css @@ -0,0 +1 @@ +.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 new file mode 100644 index 0000000..d1d312c --- /dev/null +++ b/dist/css/millennial-bank.min.css @@ -0,0 +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}.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} 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/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/icon-512.png b/examples/millennial_bank/icon-512.png new file mode 100644 index 0000000..c2931bc Binary files /dev/null and b/examples/millennial_bank/icon-512.png differ diff --git a/examples/millennial_bank/icon.png b/examples/millennial_bank/icon.png new file mode 100644 index 0000000..80492c2 Binary files /dev/null and b/examples/millennial_bank/icon.png differ diff --git a/examples/millennial_bank/index.html b/examples/millennial_bank/index.html index 4fb8c99..eae38da 100644 --- a/examples/millennial_bank/index.html +++ b/examples/millennial_bank/index.html @@ -5,12 +5,14 @@ - - Oakwood Mesh | my mesh + + + my mesh | Oakwood Mesh + @@ -49,7 +51,22 @@

my mesh

Account Snapshot

-->
-
Dawid Pawelec
+ +
+ + +
+
+ +
+
+ +
@@ -128,6 +145,14 @@

Account Snapshot

+ + \ No newline at end of file diff --git a/examples/millennial_bank/manifest.webmanifest b/examples/millennial_bank/manifest.webmanifest new file mode 100644 index 0000000..0452107 --- /dev/null +++ b/examples/millennial_bank/manifest.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "my mesh | Oakwood Mesh", + "short_name": "my mesh", + "start_url": "./#snapshot", + "display": "standalone", + "background_color": "#fff", + "theme_color": "#00B5FC", + "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 diff --git a/examples/millennial_bank/sw.js b/examples/millennial_bank/sw.js new file mode 100644 index 0000000..3aa4568 --- /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 diff --git a/icon.png b/icon.png new file mode 100644 index 0000000..4aaa109 Binary files /dev/null and b/icon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..098616a --- /dev/null +++ b/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 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