From 3b665fc31e135b4bd789e87bb9abe9060081bf35 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 13 May 2020 17:31:25 -0400 Subject: [PATCH] update button spacing and update spacing variables --- dist/button.css | 2 +- dist/button.css.map | 2 +- dist/index.css | 2 +- dist/index.css.map | 2 +- sass/button.scss | 6 +----- sass/init/_variables.scss | 13 ++++++------- 6 files changed, 11 insertions(+), 16 deletions(-) diff --git a/dist/button.css b/dist/button.css index 4390a1a..c989225 100644 --- a/dist/button.css +++ b/dist/button.css @@ -1 +1 @@ -.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link{border-radius:var(--border-radius)}.button--primary,.button--secondary,.button--alt{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-m);line-height:1.2;font-weight:var(--font-weight-bold)}.button--alt{padding:var(--spacing-s) var(--spacing-s)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary:hover{color:var(--color-button-primary-hover-text);background-color:var(--color-button-primary-bg-hover)}.button--secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt:hover{background-color:var(--color-button-alt-bg-hover)}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;transition:background-color .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.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--link{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover{text-decoration:underline;color:var(--color-link-hover)}/*# sourceMappingURL=button.css.map */ +.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link{border-radius:var(--border-radius)}.button--primary,.button--secondary,.button--alt{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-s);line-height:1.2;font-weight:var(--font-weight-bold)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary:hover{color:var(--color-button-primary-hover-text);background-color:var(--color-button-primary-bg-hover)}.button--secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt:hover{background-color:var(--color-button-alt-bg-hover)}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;transition:background-color .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.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--link{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover{text-decoration:underline;color:var(--color-link-hover)}/*# sourceMappingURL=button.css.map */ diff --git a/dist/button.css.map b/dist/button.css.map index d417995..9887251 100644 --- a/dist/button.css.map +++ b/dist/button.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/button.scss"],"names":[],"mappings":"AAAA,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+DAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,aACE,0CAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,cACE,wBACA,qBACA,qBACA,oCAEA,oBACE,0BACA","file":"button.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/button.scss"],"names":[],"mappings":"AAAA,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+DAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,cACE,wBACA,qBACA,qBACA,oCAEA,oBACE,0BACA","file":"button.css"} \ No newline at end of file diff --git a/dist/index.css b/dist/index.css index ae0d967..af45559 100644 --- a/dist/index.css +++ b/dist/index.css @@ -1 +1 @@ -:root{--color-primary: #257761;--color-primary-alt: #e4f4ef;--color-primary-alt-2: #4b8576;--color-secondary: #295284;--color-secondary-alt: #d9eaff;--color-tertiary: #552470;--color-tertiary-alt: #f7e8ff;--color-danger: #9b2023;--color-danger-alt: #fccdce;--color-warning: #fff58c;--color-cost: #ffd580;--color-focus: #93cff2;--color-border: #ddd;--color-black: #111;--color-white: #fdfdfd;--color-white-alt: #fafafa;--color-gray-1: #eff1f4;--color-gray-2: #d8dde1;--color-gray-3: #ced4da;--color-gray-4: #abb1b7;--color-gray-5: #666a6d;--color-text: var(--color-black);--color-text-subtitle: var(--color-gray-5);--color-text-inverse: #fdfdfd;--color-button-primary-bg: var(--color-primary);--color-button-primary-text: var(--color-primary-alt);--color-button-primary-bg-hover: var(--color-primary-alt-2);--color-button-primary-hover-text: var(--color-primary-alt);--color-button-secondary-bg: var(--color-secondary-alt);--color-button-secondary-text: var(--color-secondary);--color-button-secondary-bg-hover: #b9d0e9;--color-button-alt-bg: var(--color-gray-1);--color-button-alt-text: var(--color-text);--color-button-alt-bg-hover: var(--color-gray-2);--color-link: var(--color-primary);--color-link-hover: var(--color-black);--color-input-color: #111111;--color-input-label: var(--color-gray-5);--color-input-placeholder: #212529;--color-input-bg: #f2f2f2;--color-input-bg-copyable: #434b53;--color-input-border: var(--color-border);--color-input-border-active: var(--color-secondary);--color-input-toggle: var(--color-secondary);--color-input-toggle-bg: var(--color-gray-1);--color-input-toggle-bg-hover: var(--color-secondary-alt);--color-table-highlight: var(--color-white-alt);--color-tag: var(--color-gray-5);--color-tag-bg: #f9fafb;--color-tag-hover: var(--color-white);--color-tag-bg-hover: var(--color-primary-alt-2)}:root{--border-radius: 5px;--height-input: 2.5rem;--height-button: 2.5rem;--height-checkbox: 24px;--height-radio: 24px;--height-badge: 24px;--spacing-xxs: 0.2rem;--spacing-xs: 0.4rem;--spacing-s: 0.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%;--font-mono: "Fira Code";--font-sans: Inter;--font-serif: Georgia;--font-weight-base: 400;--font-weight-light: 300;--font-weight-bold: 700;--font-base: 14px;--font-body: 1rem;--font-xsmall: 0.7344rem;--font-small: 0.8571rem;--font-large: 1.3rem;--font-title: 1.71rem;--font-heading: 2.94rem}html{box-sizing:border-box;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;border-radius:0;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;font-size:1em}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}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{text-decoration:none}button{background-color:transparent;line-height:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}hr{width:100%;height:1px;background-color:var(--color-gray-1)}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.2}input::-webkit-search-cancel-button{-webkit-appearance:none}select{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 var(--color-gray-5) !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:var(--lbry-black) !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,.badge--alert,.badge--free,.badge--cost,.badge--tag-mature,.badge--tag{height:var(--height-badge);border-radius:var(--border-radius);font-size:var(--font-small);padding:var(--spacing-xs) var(--spacing-xs);white-space:nowrap;user-select:none;cursor:pointer;align-items:center}.badge--tag{background-color:var(--color-tag-bg);color:var(--color-tag)}.badge--tag:hover{background-color:var(--color-tag-bg-hover);color:var(--color-tag-hover)}.badge--tag-mature{background-color:var(--color-tertiary-alt);color:var(--color-tertiary)}.badge--cost{background-color:var(--color-cost);color:var(--color-black);line-height:1}.badge--free{background-color:var(--color-secondary-alt);color:var(--color-secondary)}.badge--alert{background-color:var(--color-danger-alt);color:var(--color-danger)}.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link{border-radius:var(--border-radius)}.button--primary,.button--secondary,.button--alt{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-m);line-height:1.2;font-weight:var(--font-weight-bold)}.button--alt{padding:var(--spacing-s) var(--spacing-s)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary:hover{color:var(--color-button-primary-hover-text);background-color:var(--color-button-primary-bg-hover)}.button--secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt:hover{background-color:var(--color-button-alt-bg-hover)}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;transition:background-color .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.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--link{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover{text-decoration:underline;color:var(--color-link-hover)}input,textarea,select{height:var(--height-input);border-radius:var(--border-radius);border:1px solid;color:var(--color-input);border-color:var(--color-input-border);background-color:var(--color-input-bg);padding-right:var(--spacing-s);padding-left:var(--spacing-s)}input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px var(--color-focus)}input::placeholder,textarea::placeholder,select::placeholder{color:var(--color-input-placeholder);opacity:.4}input:disabled,textarea:disabled,select:disabled{opacity:.4}input:disabled+label,textarea:disabled+label,select:disabled+label{opacity:.4}input[type=range],textarea[type=range],select[type=range]{height:auto;height:.5rem;background-color:var(--color-secondary)}checkbox-element,radio-element,select{cursor:pointer}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-group,.fieldset-group{display:flex;flex-direction:row;justify-content:space-between}fieldset-group.fieldset-group--smushed fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed fieldset-section+.fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+.fieldset-section{margin-top:0}fieldset-section+fieldset-section,.fieldset-section+fieldset-section,fieldset-section+.fieldset-section,.fieldset-section+.fieldset-section,fieldset-section+form,.fieldset-section+form,fieldset-section+.checkbox,.fieldset-section+.checkbox,fieldset-section+.radio,.fieldset-section+.radio,form+fieldset-section,form+.fieldset-section,form+form,form+.checkbox,form+.radio,.checkbox+fieldset-section,.checkbox+.fieldset-section,.checkbox+form,.checkbox+.checkbox,.checkbox+.radio,.radio+fieldset-section,.radio+.fieldset-section,.radio+form,.radio+.checkbox,.radio+.radio{margin-top:var(--spacing-s)}fieldset-section:last-child,.fieldset-section:last-child,form:last-child,.checkbox:last-child,.radio:last-child{margin-bottom:0}fieldset-section input,.fieldset-section input,fieldset-section select,.fieldset-section select,form input,form select,.checkbox input,.checkbox select,.radio input,.radio select{width:100%}fieldset-section,.fieldset-section,.checkbox,.radio{display:flex;flex-direction:column}label{font-size:var(--font-small);color:var(--color-input-label);display:inline-block;margin-bottom:var(--spacing-xxs)}input-submit,.input-submit{display:flex}input-submit>*:first-child,.input-submit>*:first-child,input-submit>*:nth-child(2),.input-submit>*:nth-child(2){margin:0}input-submit>*:first-child,.input-submit>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}input-submit>*:nth-child(2),.input-submit>*:nth-child(2){border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-border)}.checkbox,.radio{position:relative}.checkbox input[type=checkbox],.checkbox input[type=radio],.radio input[type=checkbox],.radio input[type=radio]{height:var(--height-checkbox);width:var(--height-checkbox);position:absolute;border:none;left:0;padding:0;background-color:transparent}.checkbox input[type=checkbox]:disabled+label,.checkbox input[type=radio]:disabled+label,.radio input[type=checkbox]:disabled+label,.radio input[type=radio]:disabled+label{cursor:default;pointer-events:none}.checkbox label,.radio label{position:relative;display:inline-block;margin:0;font-size:var(--font-base);padding-left:calc(var(--height-checkbox) + var(--spacing-s));min-height:var(--height-checkbox)}.checkbox label::before,.radio label::before{background-color:var(--color-input-toggle-bg)}.checkbox label:hover::before,.radio label:hover::before{background-color:var(--color-input-toggle-bg-hover)}.checkbox label::before,.checkbox label::after,.radio label::before,.radio label::after{position:absolute;content:""}.checkbox input[type=checkbox]+label::after,.checkbox input[type=radio]+label::after,.radio input[type=checkbox]+label::after,.radio input[type=radio]+label::after{content:none}.checkbox input[type=checkbox]:checked+label::after,.checkbox input[type=radio]:checked+label::after,.radio input[type=checkbox]:checked+label::after,.radio input[type=radio]:checked+label::after{content:""}.checkbox input[type=checkbox]:focus+label::before,.checkbox input[type=radio]:focus+label::before,.radio input[type=checkbox]:focus+label::before,.radio input[type=radio]:focus+label::before{box-shadow:0 0 0 3px var(--color-focus)}.checkbox label::before{height:var(--height-checkbox);width:var(--height-checkbox);border:1px solid var(--color-input-border);border-radius:var(--border-radius);left:0px;top:-1px}.checkbox label::after{height:6px;width:12px;border-left:2px solid;border-bottom:2px solid;border-color:var(--color-input-toggle);transform:rotate(-45deg);left:6px;top:6px}.radio input[type=radio]{border-radius:50%}.radio label::before{height:var(--height-radio);width:var(--height-radio);border:1px solid var(--color-input-border);border-radius:calc(var(--height-radio) * 0.5);left:0px;top:-1px}.radio label::after{height:12px;width:12px;border-radius:50%;background-color:var(--color-secondary);left:6px;top:5px}.range__label{display:flex;justify-content:space-between;width:100%}.range__label>*{width:33%;text-align:center}.range__label>*:first-of-type{text-align:left}.range__label>*:last-of-type{text-align:right}.table{width:100%;position:relative}.table th,.table td{overflow:hidden}.table th:first-of-type,.table td:first-of-type{padding-left:var(--spacing-l)}.table th:last-of-type,.table td:last-of-type{padding-right:var(--spacing-l)}.table thead{cursor:default;position:relative}.table thead th{border-bottom:1px solid var(--color-border)}.table tr:not(:last-of-type) td{border-bottom:1px solid var(--color-border)}.table tr:nth-child(2n){background-color:var(--color-table-highlight)}.table th,.table td{padding:.5rem 1rem}th{text-align:left}.table--fixed{table-layout:fixed}.table--condensed td,.table--condensed th{padding:.5rem}.table--condensed td:first-of-type,.table--condensed th:first-of-type{padding-left:0}.table--condensed td:last-of-type,.table--condensed th:last-of-type{padding-right:0}.table--condensed tr:nth-child(2n){background-color:transparent}.table__item-label{font-size:var(--font-multiplier-small);font-weight:300;color:var(--color-text-subtitle)}.table__item--align-right{text-align:right}drawer-navigation{width:100%;height:5rem;display:inline-flex;flex:1;font-size:inherit;justify-content:center;position:relative;z-index:10}drawer-navigation-helper{width:0;height:0;top:3rem;left:-5rem;border-right:8rem solid transparent;border-bottom:5rem solid transparent;border-left:8rem solid transparent;position:absolute}drawer-section{padding-right:1rem;padding-left:1rem}drawer-section:not(:hover):not(.active) drawer-title::after{background-color:transparent}drawer-section:not(:hover):not(.active) drawer-navigation-helper,drawer-section:not(:hover):not(.active) drawer-wrap{display:none}drawer-section:hover,drawer-section.active{z-index:3}drawer-section:hover drawer-title::after,drawer-section.active drawer-title::after{background-color:var(--color-primary)}drawer-title{height:100%;align-items:center;cursor:default;display:flex;line-height:3;position:relative;z-index:1}drawer-title::after{width:100%;height:1px;bottom:-1px;left:0;content:"";position:absolute;z-index:1}drawer-wrap{width:100%;top:5rem;left:0;background-color:var(--color-white);border-top:1px solid var(--color-gray-1);padding-top:2rem;padding-bottom:2rem;position:absolute}drawer-wrap::after{width:100vw;height:calc(100vh - 5rem);top:5rem;left:0;background-color:var(--color-black);content:"";opacity:.3;pointer-events:none;position:absolute;z-index:-1}drawer-children{display:flex;flex-wrap:wrap;position:relative}drawer-child{padding:var(--spacing-s);border:2px solid;transition:all .2s}drawer-child:not(:hover){border-color:transparent}drawer-child:hover{border-color:var(--color-gray-1);padding-left:var(--spacing-m)}drawer-child:hover>a{color:var(--lbry-primary)}drawer-child:not([full-width]){width:50%}drawer-child[full-width]{width:100%}drawer-child span{display:flex;padding-top:.25rem;padding-bottom:.25rem}body{cursor:default;font-weight:var(--font-weight-base);font-size:var(--font-base);line-height:1.5;font-weight:400;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}hr{height:1px;background-color:var(--color-gray-2)}/*# sourceMappingURL=index.css.map */ +:root{--color-primary: #257761;--color-primary-alt: #e4f4ef;--color-primary-alt-2: #4b8576;--color-secondary: #295284;--color-secondary-alt: #d9eaff;--color-tertiary: #552470;--color-tertiary-alt: #f7e8ff;--color-danger: #9b2023;--color-danger-alt: #fccdce;--color-warning: #fff58c;--color-cost: #ffd580;--color-focus: #93cff2;--color-border: #ddd;--color-black: #111;--color-white: #fdfdfd;--color-white-alt: #fafafa;--color-gray-1: #eff1f4;--color-gray-2: #d8dde1;--color-gray-3: #ced4da;--color-gray-4: #abb1b7;--color-gray-5: #666a6d;--color-text: var(--color-black);--color-text-subtitle: var(--color-gray-5);--color-text-inverse: #fdfdfd;--color-button-primary-bg: var(--color-primary);--color-button-primary-text: var(--color-primary-alt);--color-button-primary-bg-hover: var(--color-primary-alt-2);--color-button-primary-hover-text: var(--color-primary-alt);--color-button-secondary-bg: var(--color-secondary-alt);--color-button-secondary-text: var(--color-secondary);--color-button-secondary-bg-hover: #b9d0e9;--color-button-alt-bg: var(--color-gray-1);--color-button-alt-text: var(--color-text);--color-button-alt-bg-hover: var(--color-gray-2);--color-link: var(--color-primary);--color-link-hover: var(--color-black);--color-input-color: #111111;--color-input-label: var(--color-gray-5);--color-input-placeholder: #212529;--color-input-bg: #f2f2f2;--color-input-bg-copyable: #434b53;--color-input-border: var(--color-border);--color-input-border-active: var(--color-secondary);--color-input-toggle: var(--color-secondary);--color-input-toggle-bg: var(--color-gray-1);--color-input-toggle-bg-hover: var(--color-secondary-alt);--color-table-highlight: var(--color-white-alt);--color-tag: var(--color-gray-5);--color-tag-bg: #f9fafb;--color-tag-hover: var(--color-white);--color-tag-bg-hover: var(--color-primary-alt-2)}:root{--border-radius: 5px;--height-input: 2.5rem;--height-button: 2.5rem;--height-checkbox: 24px;--height-radio: 24px;--height-badge: 24px;--spacing-xxs: calc(2rem / 5);--spacing-xs: calc(2rem / 4);--spacing-s: calc(2rem / 3);--spacing-m: calc(2rem / 2);--spacing-l: 2rem;--spacing-xl: 3rem;--aspect-ratio-bluray: 41.6666666667%;--aspect-ratio-panavision: 36.3636363636%;--aspect-ratio-sd: 75%;--aspect-ratio-standard: 56.25%;--font-mono: "Fira Code";--font-sans: Inter;--font-serif: Georgia;--font-weight-base: 400;--font-weight-light: 300;--font-weight-bold: 700;--font-base: 14px;--font-body: 1rem;--font-xsmall: 0.7344rem;--font-small: 0.8571rem;--font-large: 1.3rem;--font-title: 1.71rem;--font-heading: 2.94rem}html{box-sizing:border-box;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;border-radius:0;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;font-size:1em}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}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{text-decoration:none}button{background-color:transparent;line-height:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}hr{width:100%;height:1px;background-color:var(--color-gray-1)}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.2}input::-webkit-search-cancel-button{-webkit-appearance:none}select{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 var(--color-gray-5) !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:var(--lbry-black) !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,.badge--alert,.badge--free,.badge--cost,.badge--tag-mature,.badge--tag{height:var(--height-badge);border-radius:var(--border-radius);font-size:var(--font-small);padding:var(--spacing-xs) var(--spacing-xs);white-space:nowrap;user-select:none;cursor:pointer;align-items:center}.badge--tag{background-color:var(--color-tag-bg);color:var(--color-tag)}.badge--tag:hover{background-color:var(--color-tag-bg-hover);color:var(--color-tag-hover)}.badge--tag-mature{background-color:var(--color-tertiary-alt);color:var(--color-tertiary)}.badge--cost{background-color:var(--color-cost);color:var(--color-black);line-height:1}.badge--free{background-color:var(--color-secondary-alt);color:var(--color-secondary)}.badge--alert{background-color:var(--color-danger-alt);color:var(--color-danger)}.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link{border-radius:var(--border-radius)}.button--primary,.button--secondary,.button--alt{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-s);line-height:1.2;font-weight:var(--font-weight-bold)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary:hover{color:var(--color-button-primary-hover-text);background-color:var(--color-button-primary-bg-hover)}.button--secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt:hover{background-color:var(--color-button-alt-bg-hover)}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;transition:background-color .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.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--link{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover{text-decoration:underline;color:var(--color-link-hover)}input,textarea,select{height:var(--height-input);border-radius:var(--border-radius);border:1px solid;color:var(--color-input);border-color:var(--color-input-border);background-color:var(--color-input-bg);padding-right:var(--spacing-s);padding-left:var(--spacing-s)}input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px var(--color-focus)}input::placeholder,textarea::placeholder,select::placeholder{color:var(--color-input-placeholder);opacity:.4}input:disabled,textarea:disabled,select:disabled{opacity:.4}input:disabled+label,textarea:disabled+label,select:disabled+label{opacity:.4}input[type=range],textarea[type=range],select[type=range]{height:auto;height:.5rem;background-color:var(--color-secondary)}checkbox-element,radio-element,select{cursor:pointer}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-group,.fieldset-group{display:flex;flex-direction:row;justify-content:space-between}fieldset-group.fieldset-group--smushed fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed fieldset-section+.fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+.fieldset-section{margin-top:0}fieldset-section+fieldset-section,.fieldset-section+fieldset-section,fieldset-section+.fieldset-section,.fieldset-section+.fieldset-section,fieldset-section+form,.fieldset-section+form,fieldset-section+.checkbox,.fieldset-section+.checkbox,fieldset-section+.radio,.fieldset-section+.radio,form+fieldset-section,form+.fieldset-section,form+form,form+.checkbox,form+.radio,.checkbox+fieldset-section,.checkbox+.fieldset-section,.checkbox+form,.checkbox+.checkbox,.checkbox+.radio,.radio+fieldset-section,.radio+.fieldset-section,.radio+form,.radio+.checkbox,.radio+.radio{margin-top:var(--spacing-s)}fieldset-section:last-child,.fieldset-section:last-child,form:last-child,.checkbox:last-child,.radio:last-child{margin-bottom:0}fieldset-section input,.fieldset-section input,fieldset-section select,.fieldset-section select,form input,form select,.checkbox input,.checkbox select,.radio input,.radio select{width:100%}fieldset-section,.fieldset-section,.checkbox,.radio{display:flex;flex-direction:column}label{font-size:var(--font-small);color:var(--color-input-label);display:inline-block;margin-bottom:var(--spacing-xxs)}input-submit,.input-submit{display:flex}input-submit>*:first-child,.input-submit>*:first-child,input-submit>*:nth-child(2),.input-submit>*:nth-child(2){margin:0}input-submit>*:first-child,.input-submit>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}input-submit>*:nth-child(2),.input-submit>*:nth-child(2){border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-border)}.checkbox,.radio{position:relative}.checkbox input[type=checkbox],.checkbox input[type=radio],.radio input[type=checkbox],.radio input[type=radio]{height:var(--height-checkbox);width:var(--height-checkbox);position:absolute;border:none;left:0;padding:0;background-color:transparent}.checkbox input[type=checkbox]:disabled+label,.checkbox input[type=radio]:disabled+label,.radio input[type=checkbox]:disabled+label,.radio input[type=radio]:disabled+label{cursor:default;pointer-events:none}.checkbox label,.radio label{position:relative;display:inline-block;margin:0;font-size:var(--font-base);padding-left:calc(var(--height-checkbox) + var(--spacing-s));min-height:var(--height-checkbox)}.checkbox label::before,.radio label::before{background-color:var(--color-input-toggle-bg)}.checkbox label:hover::before,.radio label:hover::before{background-color:var(--color-input-toggle-bg-hover)}.checkbox label::before,.checkbox label::after,.radio label::before,.radio label::after{position:absolute;content:""}.checkbox input[type=checkbox]+label::after,.checkbox input[type=radio]+label::after,.radio input[type=checkbox]+label::after,.radio input[type=radio]+label::after{content:none}.checkbox input[type=checkbox]:checked+label::after,.checkbox input[type=radio]:checked+label::after,.radio input[type=checkbox]:checked+label::after,.radio input[type=radio]:checked+label::after{content:""}.checkbox input[type=checkbox]:focus+label::before,.checkbox input[type=radio]:focus+label::before,.radio input[type=checkbox]:focus+label::before,.radio input[type=radio]:focus+label::before{box-shadow:0 0 0 3px var(--color-focus)}.checkbox label::before{height:var(--height-checkbox);width:var(--height-checkbox);border:1px solid var(--color-input-border);border-radius:var(--border-radius);left:0px;top:-1px}.checkbox label::after{height:6px;width:12px;border-left:2px solid;border-bottom:2px solid;border-color:var(--color-input-toggle);transform:rotate(-45deg);left:6px;top:6px}.radio input[type=radio]{border-radius:50%}.radio label::before{height:var(--height-radio);width:var(--height-radio);border:1px solid var(--color-input-border);border-radius:calc(var(--height-radio) * 0.5);left:0px;top:-1px}.radio label::after{height:12px;width:12px;border-radius:50%;background-color:var(--color-secondary);left:6px;top:5px}.range__label{display:flex;justify-content:space-between;width:100%}.range__label>*{width:33%;text-align:center}.range__label>*:first-of-type{text-align:left}.range__label>*:last-of-type{text-align:right}.table{width:100%;position:relative}.table th,.table td{overflow:hidden}.table th:first-of-type,.table td:first-of-type{padding-left:var(--spacing-l)}.table th:last-of-type,.table td:last-of-type{padding-right:var(--spacing-l)}.table thead{cursor:default;position:relative}.table thead th{border-bottom:1px solid var(--color-border)}.table tr:not(:last-of-type) td{border-bottom:1px solid var(--color-border)}.table tr:nth-child(2n){background-color:var(--color-table-highlight)}.table th,.table td{padding:.5rem 1rem}th{text-align:left}.table--fixed{table-layout:fixed}.table--condensed td,.table--condensed th{padding:.5rem}.table--condensed td:first-of-type,.table--condensed th:first-of-type{padding-left:0}.table--condensed td:last-of-type,.table--condensed th:last-of-type{padding-right:0}.table--condensed tr:nth-child(2n){background-color:transparent}.table__item-label{font-size:var(--font-multiplier-small);font-weight:300;color:var(--color-text-subtitle)}.table__item--align-right{text-align:right}drawer-navigation{width:100%;height:5rem;display:inline-flex;flex:1;font-size:inherit;justify-content:center;position:relative;z-index:10}drawer-navigation-helper{width:0;height:0;top:3rem;left:-5rem;border-right:8rem solid transparent;border-bottom:5rem solid transparent;border-left:8rem solid transparent;position:absolute}drawer-section{padding-right:1rem;padding-left:1rem}drawer-section:not(:hover):not(.active) drawer-title::after{background-color:transparent}drawer-section:not(:hover):not(.active) drawer-navigation-helper,drawer-section:not(:hover):not(.active) drawer-wrap{display:none}drawer-section:hover,drawer-section.active{z-index:3}drawer-section:hover drawer-title::after,drawer-section.active drawer-title::after{background-color:var(--color-primary)}drawer-title{height:100%;align-items:center;cursor:default;display:flex;line-height:3;position:relative;z-index:1}drawer-title::after{width:100%;height:1px;bottom:-1px;left:0;content:"";position:absolute;z-index:1}drawer-wrap{width:100%;top:5rem;left:0;background-color:var(--color-white);border-top:1px solid var(--color-gray-1);padding-top:2rem;padding-bottom:2rem;position:absolute}drawer-wrap::after{width:100vw;height:calc(100vh - 5rem);top:5rem;left:0;background-color:var(--color-black);content:"";opacity:.3;pointer-events:none;position:absolute;z-index:-1}drawer-children{display:flex;flex-wrap:wrap;position:relative}drawer-child{padding:var(--spacing-s);border:2px solid;transition:all .2s}drawer-child:not(:hover){border-color:transparent}drawer-child:hover{border-color:var(--color-gray-1);padding-left:var(--spacing-m)}drawer-child:hover>a{color:var(--lbry-primary)}drawer-child:not([full-width]){width:50%}drawer-child[full-width]{width:100%}drawer-child span{display:flex;padding-top:.25rem;padding-bottom:.25rem}body{cursor:default;font-weight:var(--font-weight-base);font-size:var(--font-base);line-height:1.5;font-weight:400;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}hr{height:1px;background-color:var(--color-gray-2)}/*# sourceMappingURL=index.css.map */ diff --git a/dist/index.css.map b/dist/index.css.map index f3a62a0..54d8386 100644 --- a/dist/index.css.map +++ b/dist/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/init/_color.scss","../sass/init/_variables.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge.scss","../sass/button.scss","../sass/form.scss","../sass/init/_mixins.scss","../sass/table.scss","../sass/navigation/_index.scss","../sass/index.scss"],"names":[],"mappings":"AAAA,MAEE,yBACA,6BACA,+BACA,2BACA,+BACA,0BACA,8BACA,wBACA,4BACA,yBACA,sBACA,uBACA,qBAEA,oBACA,uBACA,2BACA,wBACA,wBACA,wBACA,wBACA,wBAGA,iCACA,2CACA,8BAKA,gDACA,sDACA,4DACA,4DACA,wDACA,sDACA,2CACA,2CACA,2CACA,iDACA,mCACA,uCAGA,6BACA,yCACA,mCACA,0BACA,mCACA,0CACA,oDACA,6CACA,6CACA,0DAGA,gDAGA,iCACA,wBACA,sCACA,iDCjEF,MACE,qBACA,uBACA,wBACA,wBACA,qBACA,qBAGA,sBACA,qBACA,oBACA,oBACA,oBACA,qBACA,sBAGA,sCACA,0CACA,uBACA,gCAGA,yBACA,mBACA,sBACA,wBACA,yBACA,wBACA,kBACA,kBACA,yBACA,wBACA,qBACA,sBACA,wBCpCF,KACE,sBACA,kCAEA,kCACA,mCAGF,qBAGE,SACA,UAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,gBACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBACA,cAGF,MAEE,2BAEA,YACE,2BAIJ,MACE,iBAGF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,WACA,eACA,YACA,gBACA,sBAGF,EACE,qBAGF,OACE,6BACA,oBAEA,sBACE,eAGF,gBACE,WAIJ,GACE,WACA,WACA,qCAGF,MACE,6BACA,cAEA,mBACE,cACA,WAGF,oCACE,wBAIJ,OACE,aAGF,SACE,WACA,8BACA,yBAEA,iBAEA,yBACE,gBAIJ,aAGE,eAEE,gDACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,mCACA,uBACA,4BAKE,iBAEE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCC/ON,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,8EACE,2BACA,mCACA,4BACA,4CACA,mBACA,iBACA,eACA,mBAGF,YAEE,qCACA,uBAEA,kBACE,2CACA,6BAIJ,mBAEE,2CACA,4BAGF,aAEE,mCACA,yBACA,cAGF,aAEE,4CACA,6BAGF,cAEE,yCACA,0BC5CF,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+DAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,aACE,0CAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,cACE,wBACA,qBACA,qBACA,oCAEA,oBACE,0BACA,8BC3FJ,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAGF,iDACE,WAEA,mEACE,WAIJ,0DACE,YACA,aACA,wCAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aASJ,0jBAIE,4BAGF,gHACE,gBAGF,mLAEE,WAIJ,oDAGE,aACA,sBAGF,MACE,4BACA,+BACA,qBACA,iCAGF,2BACE,aAEA,gHAEE,SAGF,uDACE,0BACA,6BACA,kBAGF,yDACE,yBACA,4BACA,qCAIJ,iBAEE,kBAEA,gHAEE,8BACA,6BACA,kBACA,YACA,OACA,UACA,6BAEA,4KACE,eACA,oBAIJ,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAEA,6CACE,8CAIA,yDACE,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCqBA,wCDbA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QAIJ,cACE,aACA,8BACA,WAEA,gBACE,UACA,kBAEA,8BACE,gBAEF,6BACE,iBEvPN,OACE,WACA,kBAEA,oBAEE,gBAEA,gDACE,8BAGF,8CACE,+BAIJ,aACE,eACA,kBAEA,gBACE,4CAMA,gCACE,4CAIJ,wBACE,8CAIJ,oBAEE,mBAIJ,GACE,gBAOF,cACE,mBAIA,0CAEE,cAEA,sEACE,eAGF,oEACE,gBAKF,mCACE,6BAKN,mBACE,uCACA,gBACA,iCAGF,0BACE,iBCpFF,kBACE,WACA,YAEA,oBACA,OACA,kBACA,uBACA,kBACA,WAGF,yBAEE,QACA,SACA,SACA,WAEA,oCACA,qCACA,mCACA,kBAGF,eACE,mBACA,kBAGE,4DACE,6BAGF,qHAEE,aAIJ,2CAEE,UAEA,mFACE,sCAKN,aACE,YACA,mBACA,eACA,aACA,cACA,kBACA,UAEA,oBACE,WACA,WACA,YACA,OAEA,WACA,kBACA,UAIJ,YACE,WACA,SACA,OAEA,oCACA,yCACA,iBACA,oBACA,kBAEA,mBACE,YACA,0BACA,SACA,OAEA,oCACA,WACA,WACA,oBACA,kBACA,WAIJ,gBACE,aACA,eACA,kBAGF,aACE,yBACA,iBACA,mBAEA,yBACE,yBAGF,mBACE,iCACA,8BAEA,qBACE,0BAIJ,+BACE,UAGF,yBACE,WAGF,kBACE,aACA,mBACA,sBCrHJ,KACE,eACA,oCACA,2BACA,gBACA,gBACA,uJAKF,GACE,WACA","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/init/_color.scss","../sass/init/_variables.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge.scss","../sass/button.scss","../sass/form.scss","../sass/init/_mixins.scss","../sass/table.scss","../sass/navigation/_index.scss","../sass/index.scss"],"names":[],"mappings":"AAAA,MAEE,yBACA,6BACA,+BACA,2BACA,+BACA,0BACA,8BACA,wBACA,4BACA,yBACA,sBACA,uBACA,qBAEA,oBACA,uBACA,2BACA,wBACA,wBACA,wBACA,wBACA,wBAGA,iCACA,2CACA,8BAKA,gDACA,sDACA,4DACA,4DACA,wDACA,sDACA,2CACA,2CACA,2CACA,iDACA,mCACA,uCAGA,6BACA,yCACA,mCACA,0BACA,mCACA,0CACA,oDACA,6CACA,6CACA,0DAGA,gDAGA,iCACA,wBACA,sCACA,iDCjEF,MACE,qBACA,uBACA,wBACA,wBACA,qBACA,qBAGA,8BACA,6BACA,4BACA,4BACA,kBACA,mBAGA,sCACA,0CACA,uBACA,gCAGA,yBACA,mBACA,sBACA,wBACA,yBACA,wBACA,kBACA,kBACA,yBACA,wBACA,qBACA,sBACA,wBCnCF,KACE,sBACA,kCAEA,kCACA,mCAGF,qBAGE,SACA,UAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,gBACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBACA,cAGF,MAEE,2BAEA,YACE,2BAIJ,MACE,iBAGF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,WACA,eACA,YACA,gBACA,sBAGF,EACE,qBAGF,OACE,6BACA,oBAEA,sBACE,eAGF,gBACE,WAIJ,GACE,WACA,WACA,qCAGF,MACE,6BACA,cAEA,mBACE,cACA,WAGF,oCACE,wBAIJ,OACE,aAGF,SACE,WACA,8BACA,yBAEA,iBAEA,yBACE,gBAIJ,aAGE,eAEE,gDACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,mCACA,uBACA,4BAKE,iBAEE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCC/ON,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,8EACE,2BACA,mCACA,4BACA,4CACA,mBACA,iBACA,eACA,mBAGF,YAEE,qCACA,uBAEA,kBACE,2CACA,6BAIJ,mBAEE,2CACA,4BAGF,aAEE,mCACA,yBACA,cAGF,aAEE,4CACA,6BAGF,cAEE,yCACA,0BC5CF,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+DAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,cACE,wBACA,qBACA,qBACA,oCAEA,oBACE,0BACA,8BCvFJ,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAGF,iDACE,WAEA,mEACE,WAIJ,0DACE,YACA,aACA,wCAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aASJ,0jBAIE,4BAGF,gHACE,gBAGF,mLAEE,WAIJ,oDAGE,aACA,sBAGF,MACE,4BACA,+BACA,qBACA,iCAGF,2BACE,aAEA,gHAEE,SAGF,uDACE,0BACA,6BACA,kBAGF,yDACE,yBACA,4BACA,qCAIJ,iBAEE,kBAEA,gHAEE,8BACA,6BACA,kBACA,YACA,OACA,UACA,6BAEA,4KACE,eACA,oBAIJ,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAEA,6CACE,8CAIA,yDACE,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCqBA,wCDbA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QAIJ,cACE,aACA,8BACA,WAEA,gBACE,UACA,kBAEA,8BACE,gBAEF,6BACE,iBEvPN,OACE,WACA,kBAEA,oBAEE,gBAEA,gDACE,8BAGF,8CACE,+BAIJ,aACE,eACA,kBAEA,gBACE,4CAMA,gCACE,4CAIJ,wBACE,8CAIJ,oBAEE,mBAIJ,GACE,gBAOF,cACE,mBAIA,0CAEE,cAEA,sEACE,eAGF,oEACE,gBAKF,mCACE,6BAKN,mBACE,uCACA,gBACA,iCAGF,0BACE,iBCpFF,kBACE,WACA,YAEA,oBACA,OACA,kBACA,uBACA,kBACA,WAGF,yBAEE,QACA,SACA,SACA,WAEA,oCACA,qCACA,mCACA,kBAGF,eACE,mBACA,kBAGE,4DACE,6BAGF,qHAEE,aAIJ,2CAEE,UAEA,mFACE,sCAKN,aACE,YACA,mBACA,eACA,aACA,cACA,kBACA,UAEA,oBACE,WACA,WACA,YACA,OAEA,WACA,kBACA,UAIJ,YACE,WACA,SACA,OAEA,oCACA,yCACA,iBACA,oBACA,kBAEA,mBACE,YACA,0BACA,SACA,OAEA,oCACA,WACA,WACA,oBACA,kBACA,WAIJ,gBACE,aACA,eACA,kBAGF,aACE,yBACA,iBACA,mBAEA,yBACE,yBAGF,mBACE,iCACA,8BAEA,qBACE,0BAIJ,+BACE,UAGF,yBACE,WAGF,kBACE,aACA,mBACA,sBCrHJ,KACE,eACA,oCACA,2BACA,gBACA,gBACA,uJAKF,GACE,WACA","file":"index.css"} \ No newline at end of file diff --git a/sass/button.scss b/sass/button.scss index b421217..d1f4b2e 100644 --- a/sass/button.scss +++ b/sass/button.scss @@ -22,15 +22,11 @@ .button--alt { height: var(--height-button); border-radius: var(--border-radius); - padding: var(--spacing-s) var(--spacing-m); + padding: var(--spacing-s) var(--spacing-s); line-height: 1.2; font-weight: var(--font-weight-bold); } -.button--alt { - padding: var(--spacing-s) var(--spacing-s); -} - .button--primary { background-color: var(--color-button-primary-bg); color: var(--color-button-primary-text); diff --git a/sass/init/_variables.scss b/sass/init/_variables.scss index 6cdabb5..9abf2fe 100644 --- a/sass/init/_variables.scss +++ b/sass/init/_variables.scss @@ -7,13 +7,12 @@ --height-badge: 24px; // Spacing - --spacing-xxs: 0.2rem; - --spacing-xs: 0.4rem; - --spacing-s: 0.8rem; - --spacing-m: 1.6rem; - --spacing-l: 2.4rem; - --spacing-xl: 3.2rem; - --spacing-xxl: 6.4rem; + --spacing-xxs: calc(2rem / 5); + --spacing-xs: calc(2rem / 4); + --spacing-s: calc(2rem / 3); + --spacing-m: calc(2rem / 2); + --spacing-l: 2rem; + --spacing-xl: 3rem; // Aspect ratio --aspect-ratio-bluray: 41.6666666667%; // 12:5