reactoms/dist/style.css

A React Components Library made with TypeScript, Sass, Vite & Atomic Design : Card, Collapse, Icon, Image, Link, List for Atoms & Button, Footer, Gallery, Navbar, Slider, Title for Molecules

.card{margin:0;border:solid 2px var(--white);border-radius:10px}.card:hover,.card:focus{transform:scale(1.02);transition:all .5s}.card>*:first-child{border-radius:10px 10px 0 0}.card figcaption{display:flex;flex-flow:column;place-content:space-evenly;box-sizing:border-box;margin-top:-5px;border-radius:0 0 10px 10px;padding:5px 10px;height:120px;background-color:var(--gray);color:var(--white)}.card figcaption>*{margin:0}.card:hover figcaption,.card:focus figcaption{color:var(--secondary)}.collapse>figure{margin:20px}.collapse[open] summary,.collapse summary:hover,.collapse summary:focus{background-color:var(--white);color:var(--gray)}.collapse summary{margin:auto;border-radius:10px;padding:10px;width:60vw;list-style:none;background-color:var(--secondary);color:var(--black);cursor:pointer}.collapse summary :first-child{margin:0}@media (min-width: 768px){.collapse summary{border-radius:20px;width:40vw}}@media (min-width: 1366px){.collapse summary{border-radius:50px;width:20vw}}.image{max-width:100%;height:auto;object-fit:contain}.link{display:flex;place-items:center;gap:10px;font-family:var(--monospace);text-decoration:none;color:var(--black)}.list{display:flex;flex-flow:wrap;gap:10px;place-content:center;place-items:center;margin:0;padding:0;list-style:none;text-align:center}@media (min-width: 768px){.list{gap:15px}}@media (min-width: 1366px){.list{gap:20px}}.button:hover,.button:focus{color:var(--gray);transform:scale(.9);transition:all .5s}.button b{display:none}@media (min-width: 768px){.button b{display:block;text-transform:uppercase}}@media (min-width: 1366px){.button b{text-transform:capitalize}}.footer{padding:20px 0;background-color:var(--gray)}.footer li{display:flex;place-content:center;border:solid 2px var(--silver);border-radius:50%;width:40px;height:40px;font-size:1.5rem;background-color:var(--white)}.footer li i{color:var(--black)}@media (min-width: 768px){.footer li{width:50px;height:50px;font-size:2rem}}@media (min-width: 1366px){.footer li{width:60px;height:60px;font-size:2.5rem}}.title{display:flex;flex-flow:column;gap:5px;margin:0 0 20px;font-family:var(--serif);text-align:center}.title>*{margin:0}.title>*+p{margin:auto;max-width:300px;color:var(--silver)}.title h1{font-size:1.92rem}.title h1+p{font-size:1.344rem}.title h2{font-size:1.68rem}.title h2+p{font-size:1.176rem}.title h3{font-size:1.44rem}.title h3+p{font-size:1.008rem}.title h4{font-size:1.2rem}.title h4+p{font-size:.84rem}@media (min-width: 768px){.title{gap:6.5px;margin:0 0 32px}.title>*+p{max-width:390px}}@media (min-width: 1366px){.title{gap:7.5px;margin:0 0 40px}.title>*+p{max-width:480px}}@media (min-width: 768px){.title h1{font-size:2.496rem}.title h1+p{font-size:1.7472rem}.title h2{font-size:2.184rem}.title h2+p{font-size:1.5288rem}.title h3{font-size:1.872rem}.title h3+p{font-size:1.3104rem}.title h4{font-size:1.56rem}.title h4+p{font-size:1.092rem}}@media (min-width: 1366px){.title h1{font-size:3.072rem}.title h1+p{font-size:2.1504rem}.title h2{font-size:2.688rem}.title h2+p{font-size:1.8816rem}.title h3{font-size:2.304rem}.title h3+p{font-size:1.6128rem}.title h4{font-size:1.92rem}.title h4+p{font-size:1.344rem}}@media (min-width: 768px){.collapse{max-width:1000px}.collapse figure>.list>li{width:calc((100% - 15px)/2)}}@media (min-width: 1366px){.collapse{max-width:2000px}.collapse figure>.list>li{width:calc((100% - 60px)/4)}}.navbar{display:flex;place-content:space-around;position:fixed;z-index:1;top:0;padding:5px 0;width:100%;font-size:.8rem;background-color:var(--primary);color:var(--black)}.navbar ul{flex-flow:nowrap;gap:5vw}@media (min-width: 768px){.navbar{padding:10px 0;font-size:1rem}.navbar ul{gap:2vw}}@media (min-width: 1366px){.navbar{place-content:space-evenly;padding:15px 0;font-size:1.2rem}}:root{--sans-serif: sans-serif;--serif: serif;--monospace: monospace;--primary: hsl(240, 100%, 80%);--secondary: hsl( 0, 100%, 80%);--white: hsl( 0, 0%, 99%);--silver: hsl( 0, 0%, 80%);--gray: hsl( 0, 0%, 20%);--black: hsl( 0, 0%, 1%)}.slider{position:relative;margin:0;padding:0 20px 32px;text-align:center}.slider nav i{position:absolute;cursor:pointer}.slider nav i:hover,.slider nav i:focus{color:var(--primary)}.slider nav [class*=left],.slider nav [class*=right]{top:calc(50% - 40px)}.slider nav [class*=left]{left:0}.slider nav [class*=right]{right:0}.slider nav [class*=play],.slider nav [class*=pause]{left:calc(50% - 10px);bottom:0}.slider nav i{font-size:2rem}@media (min-width: 768px){.slider nav [class*=play],.slider nav [class*=pause]{left:calc(50% - 15px);bottom:-21px}.slider nav i{font-size:3rem}}@media (min-width: 1366px){.slider nav [class*=left],.slider nav [class*=right]{top:calc(50% - 50px)}.slider nav [class*=play],.slider nav [class*=pause]{left:calc(50% - 20px);bottom:-24px}.slider nav i{font-size:4rem}}