You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
sidebar-form/example/example.css

2 lines
7.5 KiB

@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(IBMPlexMono.eot);src:url(IBMPlexMono.eot?#iefix) format("embedded-opentype"),url(IBMPlexMono.woff2) format("woff2"),url(IBMPlexMono.woff) format("woff"),url(IBMPlexMono.ttf) format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:700;src:url(IBMPlexMono-Bold.eot);src:url(IBMPlexMono-Bold.eot?#iefix) format("embedded-opentype"),url(IBMPlexMono-Bold.woff2) format("woff2"),url(IBMPlexMono-Bold.woff) format("woff"),url(IBMPlexMono-Bold.ttf) format("truetype")}:root{--grid-columns:12;--grid-grid-spacing:15px;--grid-xs:576px;--grid-sm:768px;--grid-md:992px;--grid-lg:1200px;--grid-xlg:1600px;--grid-xxs-max:575px;--grid-xs-max:767px;--grid-sm-max:991px;--grid-md-max:1199px;--grid-lg-max:1599px;--body:#f9f9f9;--text:#363636;--text-contrast:#fff;--primary:#3e3e3e;--primary-contrast:#3e3e3e;--active:#717171;--active-contrast:#fff;--link:#363636;--link-hover:#d95959;--danger:#d95959;--danger-contrast:#ecacac;--info:#0090d4;--info-constrast:#3bc0ff;--success:#64ac64;--success-contrast:#a6d0a6;--warning:#f0ad4e;--warning-contrast:#f8d9ac;--background:#3e3e3e;--background-contrast:#fff;--background-alpha:rgba(0,0,0,.7);--border:#3e3e3e;--border-contrast:#fff;--font-family:IBM Plex Mono,sans-serif}html{-webkit-text-size-adjust:100%;font-size:100%;line-height:1.15}body,html{height:100%;margin:0}html{box-sizing:border-box}body{background-color:var(--body);color:var(--text);direction:ltr;font-family:var(--font-family);font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);text-decoration:none;transition:color .5s}a:hover{color:var(--link-hover)}a:focus{outline:none}*,:after,:before{box-sizing:inherit}button,textarea{margin:0}button{text-transform:none}[type=button],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}.h1,.h4,h1,h4{font-family:IBM Plex Mono,sans-serif;font-weight:700;line-height:1.2;margin:0 0 1rem}.h1,h1{font-size:2.5rem}.h4,h4{font-size:1.5rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.75rem}.h4,h4{font-size:1.75rem}}.button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px;color:var(--text);display:inline-flex;font-family:var(--font-family);font-size:1rem;margin:0 0 1rem;padding:.5rem 1.3rem;position:relative;text-decoration:none;transition:background-color .1s;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem;padding:.3rem 1.1rem}.button:hover{background-color:var(--active);color:#fff;cursor:pointer;text-decoration:none}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{background-color:var(--background-contrast);border:1px solid var(--border);color:var(--border);cursor:not-allowed}.button--transparent{background:transparent;border:none;border-radius:0;margin:0;padding:0}.button--transparent:active,.button--transparent:focus{outline:none}.field-group{margin:0 0 1rem}.field-label{font-family:var(--font-family);font-size:1rem}.field-label .icon{vertical-align:text-bottom}.field-label:hover{cursor:pointer}.field-text{border:1px solid #a4a4a4;border-radius:2px;font-family:var(--font-family);font-size:.95rem;margin:.7rem 0 0;width:100%}.field-text:active,.field-text:focus{border-color:var(--border);outline:0}.field-text{padding:.8em 1.1em}textarea.field-text{height:180px}.icon{fill:var(--text);font-size:1.4rem;height:1em;max-height:100%;max-width:100%;overflow:hidden;vertical-align:middle;width:1em}.sidebar__inner{background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px}.sidebar__body{padding:.6rem .8rem}@media only screen and (min-width:992px){.sidebar__body{padding:.7rem 1rem .9rem}}.bar{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:flex;min-height:2.8em}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__end{justify-content:end}.bar__end,.bar__main,.bar__start{align-items:center;align-self:center;display:flex;margin-left:.75em}.bar__end:last-child,.bar__main:last-child,.bar__start:last-child{margin-right:.75em}.loading{align-items:center;display:flex;height:60px;margin:0 auto;width:47px}.loading span{-webkit-animation-delay:.15s;animation-delay:.15s;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:loading-animation;animation-name:loading-animation;background-color:var(--background);border-bottom:1px solid var(--background);border-top:1px solid var(--background);display:block;height:80px;width:15px}.loading span:first-child{-webkit-animation-delay:0s;animation-delay:0s;margin-right:1px}.loading span:last-child{-webkit-animation-delay:.3s;animation-delay:.3s;margin-left:1px}@-webkit-keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}@keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}.sidebar{max-width:95%;transition:visibility 0s linear .5s;visibility:hidden}.sidebar,.sidebar:before{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.sidebar:before{background-color:transparent;content:"";transition:background-color .5s}.sidebar__inner{height:100%;position:relative;transform:translateX(-100%);transition:transform .2s;z-index:10}.sidebar__footer{background:var(--background);bottom:0;display:flex;justify-content:space-between;left:0;padding:1rem;position:fixed;width:100%}.sidebar--open{transition:visibility 0s linear 0s;visibility:visible}.sidebar--open .sidebar__inner{transform:translateX(0)}.sidebar--open:before{background:var(--background-alpha)}@media only screen and (min-width:992px){.sidebar{max-width:33%}}.justify-end{justify-content:flex-end}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px;width:100%}.container .grid{margin-left:-15px;margin-right:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{display:block;display:flex;flex-wrap:wrap;list-style-type:none;margin:0 auto;padding:0;position:relative}.col-12,.grid,.grid:after,.grid:before{box-sizing:border-box}.col-12{padding:15px;position:relative;vertical-align:top}.col-12:after,.col-12:before{box-sizing:border-box}.col-12 .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%}.m-top-4{margin-top:1.125rem}.m-top-5{margin-top:2rem}.m-bottom-0{margin-bottom:0}.m-bottom-4{margin-bottom:1.125rem}.m-left-3{margin-left:.5rem}@media only screen and (min-width:768px){.m-left-sm-3{margin-left:.5rem}}.p-left-3{padding-left:.5rem}.color-active{color:var(--active)}.fill-text,.fill-text svg{fill:var(--text)}.fill-active,.fill-active svg{fill:var(--active)}.fill-danger,.fill-danger svg{fill:var(--danger)}.fill-success,.fill-success svg{fill:var(--success)}.fill-text-hover:hover,.fill-text-hover:hover svg{fill:var(--text)}.border-color-active{border-color:var(--active)}.background-color-active{background-color:var(--active)}