diff --git a/README.md b/README.md index 9f2baee..841a722 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,12 @@ If you are using `@lbry/components`, you can safely remove [@lbry/color](https:/ +### Demo + +Check out `index.html` in the `dist` folder. + + + ### Usage Your main Sass file: diff --git a/dist/index.css b/dist/index.css index cb42fac..eb5ff63 100644 --- a/dist/index.css +++ b/dist/index.css @@ -1 +1 @@ -:root{--spacing-xxs:.2rem;--spacing-xs:.4rem;--spacing-s:.8rem;--spacing-m:1.6rem;--spacing-l:2.4rem;--spacing-xl:3.2rem;--spacing-xxl:6.4rem;--aspect-ratio-bluray:41.6666666667%;--aspect-ratio-panavision:36.3636363636%;--aspect-ratio-sd:75%;--aspect-ratio-standard:56.25%;--lbry-black:#212529;--lbry-white:#fff;--lbry-gray-1:#e2e5e9;--lbry-gray-2:#d8dde1;--lbry-gray-3:#ced4da;--lbry-gray-4:#abb1b7;--lbry-gray-5:#898e93;--lbry-teal-1:#88e8cb;--lbry-teal-2:#60e1ba;--lbry-teal-3:#38d9a9;--lbry-teal-4:#33b58f;--lbry-teal-5:#2f9176;--lbry-cyan-1:#89dfe9;--lbry-cyan-2:#62d4e2;--lbry-cyan-3:#3bc9db;--lbry-cyan-4:#36a8b7;--lbry-cyan-5:#318794;--lbry-blue-1:#85c2f6;--lbry-blue-2:#5caef3;--lbry-blue-3:#339af0;--lbry-blue-4:#2f83c8;--lbry-blue-5:#2c6ba0;--lbry-indigo-1:#acbcfd;--lbry-indigo-2:#90a5fd;--lbry-indigo-3:#748ffc;--lbry-indigo-4:#637ad2;--lbry-indigo-5:#5365a8;--lbry-violet-1:#c1acfc;--lbry-violet-2:#ac91fb;--lbry-violet-3:#9775fa;--lbry-violet-4:#7f65d0;--lbry-violet-5:#6855a6;--lbry-grape-1:#e9adf7;--lbry-grape-2:#e192f5;--lbry-grape-3:#da77f2;--lbry-grape-4:#b567ca;--lbry-grape-5:#9056a2;--lbry-pink-1:#fab5cd;--lbry-pink-2:#f99cbd;--lbry-pink-3:#f783ac;--lbry-pink-4:#cc7092;--lbry-pink-5:#a15d78;--lbry-red-1:#ec8383;--lbry-red-2:#e65a5a;--lbry-red-3:#e03131;--lbry-red-4:#ba2f2f;--lbry-red-5:#942c2e;--lbry-orange-1:#ffbe80;--lbry-orange-2:#ffa855;--lbry-orange-3:#ff922b;--lbry-orange-4:#d37c2b;--lbry-orange-5:#a6662a;--lbry-yellow-1:#ffeca3;--lbry-yellow-2:#ffe685;--lbry-yellow-3:#ffe066;--lbry-yellow-4:#d3bb5a;--lbry-yellow-5:#a6954e;--lbry-lime-1:#cbee93;--lbry-lime-2:#bae96f;--lbry-lime-3:#a9e34b;--lbry-lime-4:#8ebd44;--lbry-lime-5:#73973d;--lbry-green-1:#97e2a3;--lbry-green-2:#74d985;--lbry-green-3:#51cf66;--lbry-green-4:#47ad5a;--lbry-green-5:#3e8b4e;--font-mono:"Fira Code";--font-sans:Inter;--font-serif:Georgia}html{box-sizing:border-box;font-size:12px;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*,*::before,*::after{margin:0;padding:0;border:none;box-sizing:inherit;outline:0}[disabled]{pointer-events:none;resize:none}[readonly]{cursor:not-allowed}[for],[role=button],[type=button],[type=checkbox],[type=file],[type=radio],[type=select],[type=submit]{cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default}h1,h2,h3,h4,h5,h6{font-weight:normal}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}ul{list-style-type:none}table{border-spacing:0}dd{width:80%;float:left}dl{width:100%;overflow-x:scroll;overflow-y:hidden}dt{width:20%;float:left}img{width:auto;max-width:100%;height:auto;max-height:100%;vertical-align:middle}a{color:inherit;text-decoration:none}button{background-color:transparent;color:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}hr{width:100%;height:1px;background-color:#e2e5e9}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.3}input:not(:disabled){color:inherit}input::-webkit-search-cancel-button{-webkit-appearance:none}textarea{width:100%;padding:var(--spacing-xs);border:1px solid}textarea:not([disabled]){resize:vertical}@media print{pre,blockquote{border:1px solid #999 !important;page-break-inside:avoid !important}tr,img{page-break-inside:avoid !important}img{max-width:100% !important}@page{margin:.5cm !important}p,h2,h3{orphans:3 !important;widows:3 !important}h2,h3{page-break-after:avoid !important}thead{display:table-header-group !important}*{background-color:transparent !important;background-image:none !important;color:#000 !important;filter:none !important;text-shadow:none !important}p a[href]::after{content:" (" attr(href) ")" !important}p a[href^="javascript:"]::after,p a[href^="#"]::after{content:"" !important}p abbr[title]::after{content:" (" attr(title) ")" !important}p a,p abbr{text-decoration:underline !important;word-wrap:break-word !important}}@keyframes loading-animation{0%{background-position:-500px 0}100%{background-position:500px 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.7}100%{opacity:1}}.badge{font-weight:600;vertical-align:top;white-space:nowrap}.badge:not(.badge--large){border-radius:.2rem;display:inline-block;font-size:.8rem;letter-spacing:.05rem;line-height:2;padding-right:var(--spacing-xs);padding-left:var(--spacing-xs)}.badge--cost:not(.badge--large){background-color:#ffe685}[data-mode=dark] .badge--cost:not(.badge--large){background-color:#ffe066;color:#212529}.badge--free{background-color:#5caef3}[data-mode=dark] .badge--free{background-color:#339af0;color:#212529}.badge--large{font-size:5rem;line-height:1}.badge--nsfw{background-color:#e192f5}[data-mode=dark] .badge--nsfw{background-color:#da77f2;color:#212529}.badge--primary{background-color:#2f9176;color:#fff}.button{fill:currentColor;position:relative}.button--alt:hover{text-decoration:underline}.button--constrict{max-width:20vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button--disabled{opacity:.3;pointer-events:none}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;color:#fff;transition:background-color .2s}.button--icon:not(:hover){background-color:rgba(33,37,41,.7)}.button--icon:hover{background-color:#51cf66}.button--icon.button--play{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");background-position:calc(50% + 0.1rem) center}.button--icon.button--view{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");background-position:center calc(50% + 0.1rem)}.button--inverse{padding:var(--spacing-xs) var(--spacing-s);border:1px solid #e2e5e9;border-radius:1rem;color:inherit;transition:background-color .2s}[data-mode=dark] .button--inverse{border-color:rgba(255,255,255,.1)}.button--inverse:not(:hover){background-color:transparent}.button--inverse:hover{background-color:#e2e5e9}[data-mode=dark] .button--inverse:hover{background-color:rgba(255,255,255,.1)}.button--link{transition:color .2s}.button--link:not(.button--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs) var(--spacing-s);align-self:center;border-radius:1rem;color:#fff;transition:background-color .2s}.button--primary:not(:hover){background-color:#2f9176}.button--primary:hover{background-color:#38d9a9}[data-mode=dark] .button--primary:hover{background-color:#33b58f}.button--uppercase{text-transform:uppercase}form,.form{margin-bottom:1rem}fieldset,.fieldset{border-top:1px solid #e2e5e9;margin-bottom:1.5rem;position:relative}fieldset button:not([type=button]):not([type=radio]):not([type=submit]),.fieldset button:not([type=button]):not([type=radio]):not([type=submit]),fieldset input:not([type=button]):not([type=radio]):not([type=submit]),.fieldset input:not([type=button]):not([type=radio]):not([type=submit]){padding-right:1rem;padding-left:1rem;transition:border .2s}fieldset button:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),.fieldset button:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),fieldset input:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),.fieldset input:not([type=button]):not([type=radio]):not([type=submit]):not(:focus){border-top-color:#212529;border-right-color:transparent;border-bottom-color:#212529;border-left-color:#212529}fieldset button:not([type=button]):not([type=radio]):not([type=submit]):focus,.fieldset button:not([type=button]):not([type=radio]):not([type=submit]):focus,fieldset input:not([type=button]):not([type=radio]):not([type=submit]):focus,.fieldset input:not([type=button]):not([type=radio]):not([type=submit]):focus{border-top-color:#2f9176;border-right-color:transparent;border-bottom-color:#2f9176;border-left-color:#2f9176}fieldset button[type=button],.fieldset button[type=button],fieldset button[type=submit],.fieldset button[type=submit],fieldset input[type=button],.fieldset input[type=button],fieldset input[type=submit],.fieldset input[type=submit]{color:#fff;padding-right:1.5rem;padding-left:1.5rem;transition:all .2s}fieldset button[type=button]:not(:hover),.fieldset button[type=button]:not(:hover),fieldset button[type=submit]:not(:hover),.fieldset button[type=submit]:not(:hover),fieldset input[type=button]:not(:hover),.fieldset input[type=button]:not(:hover),fieldset input[type=submit]:not(:hover),.fieldset input[type=submit]:not(:hover){background-color:#212529;border-color:#212529}fieldset button[type=button]:hover,.fieldset button[type=button]:hover,fieldset button[type=submit]:hover,.fieldset button[type=submit]:hover,fieldset input[type=button]:hover,.fieldset input[type=button]:hover,fieldset input[type=submit]:hover,.fieldset input[type=submit]:hover{background-color:#38d9a9;border-color:#2f9176}legend{padding:.25rem .5rem;border:1px solid #e2e5e9;margin-bottom:1rem;pointer-events:none}check,.check{width:1.5rem;height:1.5rem;top:0;left:0;border:2px solid;border-radius:50%;display:block;position:relative;transition:border .2s;z-index:5}check::before,.check::before{width:100%;height:100%;top:0;left:0;border-radius:50%;content:"";display:block;position:absolute;transform:scale(0.6);transition:background-color .2s}radio,.radio-group{min-height:2rem;align-items:center;display:inline-flex;flex-direction:row-reverse;margin-right:1rem;margin-bottom:1rem;position:relative}radio:hover label,.radio-group:hover label{color:#33b58f}radio:hover check,.radio-group:hover check,radio:hover .check,.radio-group:hover .check{border-color:#33b58f}radio label,.radio-group label{padding-left:.5rem;transition:color .2s}radio input[type=radio],.radio-group input[type=radio]{width:0;height:0;visibility:hidden}radio input[type=radio]:not(:checked)+label+check::before,.radio-group input[type=radio]:not(:checked)+label+check::before,radio input[type=radio]:not(:checked)+label+.check::before,.radio-group input[type=radio]:not(:checked)+label+.check::before{background-color:transparent}radio input[type=radio]:checked+label,.radio-group input[type=radio]:checked+label{color:#33b58f}radio input[type=radio]:checked+label+check::before,.radio-group input[type=radio]:checked+label+check::before,radio input[type=radio]:checked+label+.check::before,.radio-group input[type=radio]:checked+label+.check::before{background-color:#33b58f}.media-grid{display:grid}.media-grid .media{width:100%;cursor:pointer;vertical-align:top}.media{position:relative}.media--large{display:flex}.media--large .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--large .media__thumb{width:40rem;margin-bottom:var(--spacing-s)}.media--placeholder>*{animation-duration:4s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:loading-animation;animation-timing-function:linear;background-color:transparent;background-image:linear-gradient(to right, #ced4da 10%, transparent 80%, #ced4da 100%);background-repeat:repeat;background-size:500px}[data-mode=dark] .media--placeholder>*{background-image:linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, transparent 80%, rgba(255, 255, 255, 0.1) 100%)}.media--placeholder .media__channel,.media--placeholder .media__date,.media--placeholder .media__title{min-height:1rem}.media--placeholder .media__channel{width:70%}.media--placeholder .media__date{width:30%}.media--placeholder .media__title{width:100%}.media--small{display:flex;justify-content:space-between}.media--small:not(:last-of-type){margin-bottom:var(--spacing-s)}.media--small .media__info{width:50%;padding-left:var(--spacing-s)}.media--small .media__properties{bottom:-1.5rem;left:calc(-100% - 1.5rem);position:absolute}.media--small .media__thumb{width:50%}.media--small .media__title{height:3rem;line-height:1.33}.media--wide{display:flex}.media--wide:not(:last-of-type){margin-bottom:var(--spacing-m)}.media--wide .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--wide .media__properties{bottom:-5.5rem;left:-20rem;position:absolute}.media--wide .media__text{padding-top:var(--spacing-s)}.media--wide .media__thumb{width:20rem}.media--wide .media__title{font-size:1.5rem}.media__actions{display:flex;padding-top:var(--spacing-m);padding-bottom:var(--spacing-m)}.media__info{word-wrap:break-word}[data-mode=dark] .media__info{border-color:rgba(137,142,147,.2)}.media__message{padding:var(--spacing-s);white-space:normal}.media__properties{vertical-align:top}.media__properties>*:not(:last-child){margin-right:var(--spacing-xs)}.media__properties:not(:empty){display:inline-block}.media__subtitle{position:relative}[data-mode=dark] .media__text{color:#fff}.media__thumb::before,.media__thumb::after{content:""}.media__thumb::before{float:left;padding-top:var(--aspect-ratio-standard)}.media__thumb::after{clear:both;display:block}.media__title{font-weight:600;white-space:normal}table{width:100%;background-color:#fff;position:relative}table thead{cursor:default;position:relative}table thead tr{position:relative;z-index:1}table tbody{line-height:1.55}table tr:not(:last-of-type) td{border-bottom:1px solid #e2e5e9}table th,table td{padding:.5rem 1rem}table th{border-bottom:2px solid #212529;letter-spacing:.1rem;text-align:left;text-transform:uppercase}table a{font-weight:bolder}/*# sourceMappingURL=index.css.map */ +:root{--spacing-xxs:.2rem;--spacing-xs:.4rem;--spacing-s:.8rem;--spacing-m:1.6rem;--spacing-l:2.4rem;--spacing-xl:3.2rem;--spacing-xxl:6.4rem;--aspect-ratio-bluray:41.6666666667%;--aspect-ratio-panavision:36.3636363636%;--aspect-ratio-sd:75%;--aspect-ratio-standard:56.25%;--lbry-black:#212529;--lbry-white:#fff;--lbry-gray-1:#e2e5e9;--lbry-gray-2:#d8dde1;--lbry-gray-3:#ced4da;--lbry-gray-4:#abb1b7;--lbry-gray-5:#898e93;--lbry-teal-1:#88e8cb;--lbry-teal-2:#60e1ba;--lbry-teal-3:#38d9a9;--lbry-teal-4:#33b58f;--lbry-teal-5:#2f9176;--lbry-cyan-1:#89dfe9;--lbry-cyan-2:#62d4e2;--lbry-cyan-3:#3bc9db;--lbry-cyan-4:#36a8b7;--lbry-cyan-5:#318794;--lbry-blue-1:#85c2f6;--lbry-blue-2:#5caef3;--lbry-blue-3:#339af0;--lbry-blue-4:#2f83c8;--lbry-blue-5:#2c6ba0;--lbry-indigo-1:#acbcfd;--lbry-indigo-2:#90a5fd;--lbry-indigo-3:#748ffc;--lbry-indigo-4:#637ad2;--lbry-indigo-5:#5365a8;--lbry-violet-1:#c1acfc;--lbry-violet-2:#ac91fb;--lbry-violet-3:#9775fa;--lbry-violet-4:#7f65d0;--lbry-violet-5:#6855a6;--lbry-grape-1:#e9adf7;--lbry-grape-2:#e192f5;--lbry-grape-3:#da77f2;--lbry-grape-4:#b567ca;--lbry-grape-5:#9056a2;--lbry-pink-1:#fab5cd;--lbry-pink-2:#f99cbd;--lbry-pink-3:#f783ac;--lbry-pink-4:#cc7092;--lbry-pink-5:#a15d78;--lbry-red-1:#ec8383;--lbry-red-2:#e65a5a;--lbry-red-3:#e03131;--lbry-red-4:#ba2f2f;--lbry-red-5:#942c2e;--lbry-orange-1:#ffbe80;--lbry-orange-2:#ffa855;--lbry-orange-3:#ff922b;--lbry-orange-4:#d37c2b;--lbry-orange-5:#a6662a;--lbry-yellow-1:#ffeca3;--lbry-yellow-2:#ffe685;--lbry-yellow-3:#ffe066;--lbry-yellow-4:#d3bb5a;--lbry-yellow-5:#a6954e;--lbry-lime-1:#cbee93;--lbry-lime-2:#bae96f;--lbry-lime-3:#a9e34b;--lbry-lime-4:#8ebd44;--lbry-lime-5:#73973d;--lbry-green-1:#97e2a3;--lbry-green-2:#74d985;--lbry-green-3:#51cf66;--lbry-green-4:#47ad5a;--lbry-green-5:#3e8b4e;--font-mono:"Fira Code";--font-sans:Inter;--font-serif:Georgia}html{box-sizing:border-box;font-size:12px;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*,*::before,*::after{margin:0;padding:0;border:none;box-sizing:inherit;outline:0}[disabled]{pointer-events:none;resize:none}[readonly]{cursor:not-allowed}[for],[role=button],[type=button],[type=checkbox],[type=file],[type=radio],[type=select],[type=submit]{cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default}h1,h2,h3,h4,h5,h6{font-weight:normal}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}ul{list-style-type:none}table{border-spacing:0}dd{width:80%;float:left}dl{width:100%;overflow-x:scroll;overflow-y:hidden}dt{width:20%;float:left}img{width:auto;max-width:100%;height:auto;max-height:100%;vertical-align:middle}a{color:inherit;text-decoration:none}button{background-color:transparent;color:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}hr{width:100%;height:1px;background-color:#e2e5e9}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.2}input:not(:disabled){color:inherit}input::-webkit-search-cancel-button{-webkit-appearance:none}select{border-radius:0;outline:none}textarea{width:100%;min-height:var(--spacing-xxl);padding:var(--spacing-s);border:1px solid}textarea:not([disabled]){resize:vertical}@media print{pre,blockquote{border:1px solid #898e93 !important;page-break-inside:avoid !important}tr,img{page-break-inside:avoid !important}img{max-width:100% !important}@page{margin:.5cm !important}p,h2,h3{orphans:3 !important;widows:3 !important}h2,h3{page-break-after:avoid !important}thead{display:table-header-group !important}*{background-color:transparent !important;background-image:none !important;color:#212529 !important;filter:none !important;text-shadow:none !important}p a[href]::after{content:" (" attr(href) ")" !important}p a[href^="javascript:"]::after,p a[href^="#"]::after{content:"" !important}p abbr[title]::after{content:" (" attr(title) ")" !important}p a,p abbr{text-decoration:underline !important;word-wrap:break-word !important}}@keyframes loading-animation{0%{background-position:-500px 0}100%{background-position:500px 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.7}100%{opacity:1}}.badge{font-weight:600;vertical-align:top;white-space:nowrap}.badge:not(.badge--large){border-radius:.2rem;display:inline-block;font-size:.8rem;letter-spacing:.05rem;line-height:2;padding-right:var(--spacing-xs);padding-left:var(--spacing-xs)}.badge--cost:not(.badge--large){background-color:#ffe685}[data-mode=dark] .badge--cost:not(.badge--large){background-color:#ffe066;color:#212529}.badge--free{background-color:#5caef3}[data-mode=dark] .badge--free{background-color:#339af0;color:#212529}.badge--large{font-size:5rem;line-height:1}.badge--nsfw{background-color:#e192f5}[data-mode=dark] .badge--nsfw{background-color:#da77f2;color:#212529}.badge--primary{background-color:#2f9176;color:#fff}.button{fill:currentColor;position:relative}.button--alt:hover{text-decoration:underline}.button--constrict{max-width:20vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button--disabled{opacity:.3;pointer-events:none}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;color:#fff;transition:background-color .2s}.button--icon:not(:hover){background-color:rgba(33,37,41,.7)}.button--icon:hover{background-color:#51cf66}.button--icon.button--play{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");background-position:calc(50% + 0.1rem) center}.button--icon.button--view{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");background-position:center calc(50% + 0.1rem)}.button--inverse{padding:var(--spacing-xs) var(--spacing-s);border:1px solid #e2e5e9;border-radius:1rem;color:inherit;transition:background-color .2s}[data-mode=dark] .button--inverse{border-color:rgba(255,255,255,.1)}.button--inverse:not(:hover){background-color:transparent}.button--inverse:hover{background-color:#e2e5e9}[data-mode=dark] .button--inverse:hover{background-color:rgba(255,255,255,.1)}.button--link{transition:color .2s}.button--link:not(.button--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs) var(--spacing-s);align-self:center;border-radius:1rem;color:#fff;transition:background-color .2s}.button--primary:not(:hover){background-color:#2f9176}.button--primary:hover{background-color:#38d9a9}[data-mode=dark] .button--primary:hover{background-color:#33b58f}.button--uppercase{text-transform:uppercase}form,.form{margin-bottom:var(--spacing-s)}form button,.form button,form input,.form input,form select,.form select{height:var(--spacing-l);border:1px solid}form [type=email],.form [type=email],form [type=text],.form [type=text]{padding-right:var(--spacing-s);padding-left:var(--spacing-s);transition:border .2s}form [type=button],.form [type=button],form [type=submit],.form [type=submit]{color:#fff;padding-right:var(--spacing-m);padding-left:var(--spacing-m);transition:all .2s}form [type=button]:not(:hover),.form [type=button]:not(:hover),form [type=submit]:not(:hover),.form [type=submit]:not(:hover){background-color:#212529;border-color:#212529}form [type=button]:hover,.form [type=button]:hover,form [type=submit]:hover,.form [type=submit]:hover{background-color:#38d9a9;border-color:#2f9176}form select,.form select{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");background-position:99% center;background-repeat:no-repeat;background-size:1rem;padding-right:var(--spacing-l);padding-left:var(--spacing-s)}fieldset,.fieldset{border-top:1px solid #e2e5e9;margin-bottom:var(--spacing-m);position:relative}fieldset-group,.fieldset-group{display:flex;flex-direction:row;justify-content:space-between}fieldset-section,.fieldset-section{display:flex;flex-direction:column;margin-bottom:var(--spacing-m)}fieldset-section.full-width,.full-width.fieldset-section{width:100%}fieldset-group fieldset-section,fieldset-group .fieldset-section,.fieldset-group fieldset-section,.fieldset-group .fieldset-section{width:49%}fieldset-section label,.fieldset-section label{color:#abb1b7;display:inline-block;font-size:smaller;margin-bottom:var(--spacing-xxs);text-transform:uppercase}fieldset-section [type=email]:not(:focus),.fieldset-section [type=email]:not(:focus),fieldset-section [type=text]:not(:focus),.fieldset-section [type=text]:not(:focus),fieldset-section select:not(:focus),.fieldset-section select:not(:focus),fieldset-section textarea:not(:focus),.fieldset-section textarea:not(:focus){border-color:#212529}fieldset-section [type=email]:focus,.fieldset-section [type=email]:focus,fieldset-section [type=text]:focus,.fieldset-section [type=text]:focus,fieldset-section select:focus,.fieldset-section select:focus,fieldset-section textarea:focus,.fieldset-section textarea:focus{border-color:#2f9176}fieldset-section input,.fieldset-section input,fieldset-section select,.fieldset-section select{width:100%}legend{padding:var(--spacing-xs) var(--spacing-s);border:1px solid #e2e5e9;margin-bottom:var(--spacing-s);pointer-events:none}input-submit,.input-submit{display:flex}input-submit [type=email],.input-submit [type=email],input-submit [type=text],.input-submit [type=text]{flex:1}input-submit [type=email]:not(:focus),.input-submit [type=email]:not(:focus),input-submit [type=text]:not(:focus),.input-submit [type=text]:not(:focus){border-top-color:#212529;border-right-color:transparent;border-bottom-color:#212529;border-left-color:#212529}input-submit [type=email]:focus,.input-submit [type=email]:focus,input-submit [type=text]:focus,.input-submit [type=text]:focus{border-top-color:#2f9176;border-right-color:transparent;border-bottom-color:#2f9176;border-left-color:#2f9176}checkbox-element,.checkbox-element{min-height:2rem;align-items:center;display:inline-flex;flex-direction:row-reverse;margin-right:var(--spacing-s);margin-bottom:var(--spacing-s);position:relative}checkbox-element:hover label,.checkbox-element:hover label{color:#33b58f}checkbox-element label,.checkbox-element label{padding-left:var(--spacing-xs);transition:color .2s}checkbox-element:hover checkbox-toggle,.checkbox-element:hover checkbox-toggle,.checkbox-element:hover .checkbox-toggle,checkbox-element:hover .checkbox-toggle{border-color:#33b58f}checkbox-element input[type=checkbox],.checkbox-element input[type=checkbox]{width:0;height:0;visibility:hidden}checkbox-element input[type=checkbox]:not(:checked)+label+checkbox-toggle::before,.checkbox-element input[type=checkbox]:not(:checked)+label+checkbox-toggle::before,.checkbox-element input[type=checkbox]:not(:checked)+label+.checkbox-toggle::before,checkbox-element input[type=checkbox]:not(:checked)+label+.checkbox-toggle::before{opacity:0;visibility:hidden}checkbox-element input[type=checkbox]:checked+label,.checkbox-element input[type=checkbox]:checked+label{color:#33b58f}checkbox-toggle,.checkbox-toggle{width:var(--spacing-m);height:var(--spacing-m);top:0;left:0;border:2px solid;display:block;position:relative;transition:border .2s;z-index:5}checkbox-toggle::before,.checkbox-toggle::before{width:100%;height:100%;top:0;left:0;content:"";display:block;position:absolute}checkbox-toggle::before,.checkbox-toggle::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A");background-position:center left;background-repeat:no-repeat;background-size:130%;transition:all .2s}radio-element,.radio-element{min-height:2rem;align-items:center;display:inline-flex;flex-direction:row-reverse;margin-right:var(--spacing-s);margin-bottom:var(--spacing-s);position:relative}radio-element:hover label,.radio-element:hover label{color:#33b58f}radio-element label,.radio-element label{padding-left:var(--spacing-xs);transition:color .2s}radio-element:hover radio-toggle,.radio-element:hover radio-toggle,.radio-element:hover .radio-toggle,radio-element:hover .radio-toggle{border-color:#33b58f}radio-element input[type=radio],.radio-element input[type=radio]{width:0;height:0;visibility:hidden}radio-element input[type=radio]:not(:checked)+label+radio-toggle::before,.radio-element input[type=radio]:not(:checked)+label+radio-toggle::before,.radio-element input[type=radio]:not(:checked)+label+.radio-toggle::before,radio-element input[type=radio]:not(:checked)+label+.radio-toggle::before{background-color:transparent}radio-element input[type=radio]:checked+label,.radio-element input[type=radio]:checked+label{color:#33b58f}radio-element input[type=radio]:checked+label+radio-toggle::before,.radio-element input[type=radio]:checked+label+radio-toggle::before,.radio-element input[type=radio]:checked+label+.radio-toggle::before,radio-element input[type=radio]:checked+label+.radio-toggle::before{background-color:#33b58f}radio-toggle,.radio-toggle{width:var(--spacing-m);height:var(--spacing-m);top:0;left:0;border:2px solid;display:block;position:relative;transition:border .2s;z-index:5;border-radius:50%}radio-toggle::before,.radio-toggle::before{width:100%;height:100%;top:0;left:0;content:"";display:block;position:absolute}radio-toggle::before,.radio-toggle::before{border-radius:50%;transform:scale(0.6);transition:background-color .2s}.media-grid{display:grid}.media-grid .media{width:100%;cursor:pointer;vertical-align:top}.media{position:relative}.media--large{display:flex}.media--large .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--large .media__thumb{width:40rem;margin-bottom:var(--spacing-s)}.media--placeholder>*{animation-duration:4s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:loading-animation;animation-timing-function:linear;background-color:transparent;background-image:linear-gradient(to right, #ced4da 10%, transparent 80%, #ced4da 100%);background-repeat:repeat;background-size:500px}[data-mode=dark] .media--placeholder>*{background-image:linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, transparent 80%, rgba(255, 255, 255, 0.1) 100%)}.media--placeholder .media__channel,.media--placeholder .media__date,.media--placeholder .media__title{min-height:1rem}.media--placeholder .media__channel{width:70%}.media--placeholder .media__date{width:30%}.media--placeholder .media__title{width:100%}.media--small{display:flex;justify-content:space-between}.media--small:not(:last-of-type){margin-bottom:var(--spacing-s)}.media--small .media__info{width:50%;padding-left:var(--spacing-s)}.media--small .media__properties{bottom:-1.5rem;left:calc(-100% - 1.5rem);position:absolute}.media--small .media__thumb{width:50%}.media--small .media__title{height:3rem;line-height:1.33}.media--wide{display:flex}.media--wide:not(:last-of-type){margin-bottom:var(--spacing-m)}.media--wide .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--wide .media__properties{bottom:-5.5rem;left:-20rem;position:absolute}.media--wide .media__text{padding-top:var(--spacing-s)}.media--wide .media__thumb{width:20rem}.media--wide .media__title{font-size:1.5rem}.media__actions{display:flex;padding-top:var(--spacing-m);padding-bottom:var(--spacing-m)}.media__info{word-wrap:break-word}[data-mode=dark] .media__info{border-color:rgba(137,142,147,.2)}.media__message{padding:var(--spacing-s);white-space:normal}.media__properties{vertical-align:top}.media__properties>*:not(:last-child){margin-right:var(--spacing-xs)}.media__properties:not(:empty){display:inline-block}.media__subtitle{position:relative}[data-mode=dark] .media__text{color:#fff}.media__thumb::before,.media__thumb::after{content:""}.media__thumb::before{float:left;padding-top:var(--aspect-ratio-standard)}.media__thumb::after{clear:both;display:block}.media__title{font-weight:600;white-space:normal}table{width:100%;background-color:#fff;position:relative}table thead{cursor:default;position:relative}table thead tr{position:relative;z-index:1}table tbody{line-height:1.55}table tr:not(:last-of-type) td{border-bottom:1px solid #e2e5e9}table th,table td{padding:.5rem 1rem}table th{border-bottom:2px solid #212529;letter-spacing:.1rem;text-align:left;text-transform:uppercase}table a{font-weight:bolder}/*# sourceMappingURL=index.css.map */ diff --git a/dist/index.css.map b/dist/index.css.map index 0926330..607dbd1 100644 --- a/dist/index.css.map +++ b/dist/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,aCjIU,QDiIV,aCnIU,KDmIV,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDpC8B,YCoC9B,uCErIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,G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","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,aCjIU,QDiIV,aCnIU,KDmIV,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDpC8B,YCoC9B,uCEvIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,G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","file":"index.css"} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 5301de1..aabb522 100644 --- a/dist/index.html +++ b/dist/index.html @@ -93,20 +93,52 @@ +
+ Become a Gym Leader + + + + + + + + + + + + + + + + + +
+
Click some buttons - + - - + + - + - - + + + + + + + +
diff --git a/package.json b/package.json index 9fab125..7f04b45 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "@lbry/color": "^1.1.0", "husky": "^1.3.1", "npm-run-all": "^4.1.5", - "sass": "^1.16.1", + "sass": "^1.17.0", "sass-lint": "^1.12.1", - "updates": "^6.2.1" + "updates": "^7.0.0" }, "files": [ "dist/style.css", diff --git a/sass/form/_index.scss b/sass/form/_index.scss index 56de661..28e0e8d 100644 --- a/sass/form/_index.scss +++ b/sass/form/_index.scss @@ -1,108 +1,184 @@ form { // setting the font size here sizes everything within - margin-bottom: 1rem; + margin-bottom: var(--spacing-s); + + button, + input, + select { + height: var(--spacing-l); + border: 1px solid; + } + + [type="email"], + [type="text"] { + padding-right: var(--spacing-s); + padding-left: var(--spacing-s); + transition: border 0.2s; + } + + [type="button"], + [type="submit"] { + color: $lbry-white; + padding-right: var(--spacing-m); + padding-left: var(--spacing-m); + transition: all 0.2s; + + &:not(:hover) { + background-color: $lbry-black; + border-color: $lbry-black; + } + + &:hover { + background-color: $lbry-teal-3; + border-color: $lbry-teal-5; + } + } + + select { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); + background-position: 99% center; + background-repeat: no-repeat; + background-size: 1rem; + padding-right: var(--spacing-l); + padding-left: var(--spacing-s); + } } fieldset { border-top: 1px solid $lbry-gray-1; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-m); position: relative; +} - button, - input { - &:not([type="button"]):not([type="radio"]):not([type="submit"]) { - padding-right: 1rem; - padding-left: 1rem; - transition: border 0.2s; +fieldset-group { + display: flex; + flex-direction: row; + justify-content: space-between; +} - &:not(:focus) { - border-top-color: $lbry-black; - border-right-color: transparent; - border-bottom-color: $lbry-black; - border-left-color: $lbry-black; - } +fieldset-section { + display: flex; + flex-direction: column; + margin-bottom: var(--spacing-m); - &:focus { - border-top-color: $lbry-teal-5; - border-right-color: transparent; - border-bottom-color: $lbry-teal-5; - border-left-color: $lbry-teal-5; - } + &.full-width { + width: 100%; + } + + fieldset-group &, + .fieldset-group & { + width: 49%; + } + + label { + color: $lbry-gray-4; + display: inline-block; + font-size: smaller; + margin-bottom: var(--spacing-xxs); + text-transform: uppercase; + } + + [type="email"], + [type="text"], + select, + textarea { + &:not(:focus) { + border-color: $lbry-black; } - &[type="button"], - &[type="submit"] { - color: $lbry-white; - padding-right: 1.5rem; - padding-left: 1.5rem; - transition: all 0.2s; - - &:not(:hover) { - background-color: $lbry-black; - border-color: $lbry-black; - } - - &:hover { - background-color: $lbry-teal-3; - border-color: $lbry-teal-5; - } + &:focus { + border-color: $lbry-teal-5; } } + + input, + select { + width: 100%; + } } legend { - padding: 0.25rem 0.5rem; + padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values border: 1px solid $lbry-gray-1; - margin-bottom: 1rem; + margin-bottom: var(--spacing-s); pointer-events: none; } -check { - width: 1.5rem; height: 1.5rem; - top: 0; left: 0; +input-submit { + display: flex; - border: 2px solid; - border-radius: 50%; - display: block; - position: relative; - transition: border 0.2s; - z-index: 5; + [type="email"], + [type="text"] { + flex: 1; - &::before { - width: 100%; height: 100%; - top: 0; left: 0; + &:not(:focus) { + border-top-color: $lbry-black; + border-right-color: transparent; + border-bottom-color: $lbry-black; + border-left-color: $lbry-black; + } - border-radius: 50%; - content: ""; - display: block; - position: absolute; - transform: scale(0.6); - transition: background-color 0.2s; + &:focus { + border-top-color: $lbry-teal-5; + border-right-color: transparent; + border-bottom-color: $lbry-teal-5; + border-left-color: $lbry-teal-5; + } } } -radio { - min-height: 2rem; - align-items: center; - display: inline-flex; - flex-direction: row-reverse; - margin-right: 1rem; - margin-bottom: 1rem; - position: relative; +checkbox-element { + @include tick; &:hover { - label { - color: $lbry-teal-4; - } - - check { + checkbox-toggle, + .checkbox-toggle { border-color: $lbry-teal-4; } } - label { - padding-left: 0.5rem; - transition: color 0.2s; + input { + &[type="checkbox"] { + width: 0; height: 0; + visibility: hidden; + + &:not(:checked) { + + label + checkbox-toggle::before, + + label + .checkbox-toggle::before { + opacity: 0; + visibility: hidden; + } + } + + &:checked { + + label { + color: $lbry-teal-4; + } + } + } + } +} + +checkbox-toggle { + @include tick-toggle; + + &::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A"); + background-position: center left; + background-repeat: no-repeat; + background-size: 130%; + transition: all 0.2s; + } +} + +radio-element { + @include tick; + + &:hover { + radio-toggle, + .radio-toggle { + border-color: $lbry-teal-4; + } } input { @@ -111,7 +187,8 @@ radio { visibility: hidden; &:not(:checked) { - + label + check::before { + + label + radio-toggle::before, + + label + .radio-toggle::before { background-color: transparent; } } @@ -121,7 +198,8 @@ radio { color: $lbry-teal-4; } - + label + check::before { + + label + radio-toggle::before, + + label + .radio-toggle::before { background-color: $lbry-teal-4; } } @@ -129,20 +207,53 @@ radio { } } +radio-toggle { + @include tick-toggle; + border-radius: 50%; + + &::before { + border-radius: 50%; + transform: scale(0.6); + transition: background-color 0.2s; + } +} -.check { - @extend check; + +// Custom elements are apparently difficult to use in React, so use classes + +.checkbox-element { + @extend checkbox-element; +} + +.checkbox-toggle { + @extend checkbox-toggle; } .fieldset { @extend fieldset; } +.fieldset-group { + @extend fieldset-group; +} + +.fieldset-section { + @extend fieldset-section; +} + .form { @extend form; } -.radio-group { - @extend radio; +.input-submit { + @extend input-submit; +} + +.radio-element { + @extend radio-element; +} + +.radio-toggle { + @extend radio-toggle; } diff --git a/sass/init/_mixins.scss b/sass/init/_mixins.scss index 5fe7783..0d1e647 100644 --- a/sass/init/_mixins.scss +++ b/sass/init/_mixins.scss @@ -168,6 +168,47 @@ } } +@mixin tick { + min-height: 2rem; + align-items: center; + display: inline-flex; + flex-direction: row-reverse; + margin-right: var(--spacing-s); + margin-bottom: var(--spacing-s); + position: relative; + + &:hover { + label { + color: $lbry-teal-4; + } + } + + label { + padding-left: var(--spacing-xs); + transition: color 0.2s; + } +} + +@mixin tick-toggle { + width: var(--spacing-m); height: var(--spacing-m); + top: 0; left: 0; + + border: 2px solid; + display: block; + position: relative; + transition: border 0.2s; + z-index: 5; + + &::before { + width: 100%; height: 100%; + top: 0; left: 0; + + content: ""; + display: block; + position: absolute; + } +} + @mixin underline($text-color: $lbry-black, $whitespace-color: $lbry-white) { @include selection($text-color, $whitespace-color); diff --git a/sass/init/_reset.scss b/sass/init/_reset.scss index d35527e..13d4f73 100644 --- a/sass/init/_reset.scss +++ b/sass/init/_reset.scss @@ -1,5 +1,3 @@ -// sass-lint:disable no-important - html { box-sizing: border-box; font-size: 12px; @@ -92,10 +90,7 @@ ul { } table { - // border-collapse: collapse; border-spacing: 0; - - // -webkit-appearance: none; } dd { @@ -149,7 +144,7 @@ input { &::placeholder { color: inherit; - opacity: 0.3; + opacity: 0.2; } &:not(:disabled) { @@ -161,9 +156,15 @@ input { } } +select { + border-radius: 0; + outline: none; +} + textarea { width: 100%; - padding: var(--spacing-xs); + min-height: var(--spacing-xxl); + padding: var(--spacing-s); // border-color should be added in apps for blur/focus border: 1px solid; @@ -175,10 +176,11 @@ textarea { @media print { + // sass-lint:disable-block no-important // Intelligent print styles pre, blockquote { - border: 1px solid #999 !important; + border: 1px solid $lbry-gray-5 !important; page-break-inside: avoid !important; } @@ -215,7 +217,7 @@ textarea { * { background-color: transparent !important; background-image: none !important; - color: #000 !important; + color: $lbry-black !important; filter: none !important; text-shadow: none !important; }