diff --git a/dist/css/dk-badge-all.css b/dist/css/dk-badge-all.css index 4e98877..f8f2716 100644 --- a/dist/css/dk-badge-all.css +++ b/dist/css/dk-badge-all.css @@ -1 +1 @@ -#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;font-size:.875rem;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge_title{margin:1rem .625rem .3125rem}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25rem 0 0;font-size:1rem;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5rem .2rem}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2rem;display:block;font-size:.75rem}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{padding-bottom:1.5rem;margin-bottom:1rem;display:inline-block;max-width:10.625rem;border-radius:4px;border-top:4px solid var(--dkb-color-secondary)}@media(min-width: 23rem){#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{bottom:1rem;right:1rem;position:fixed;z-index:100}}#dk-badge-wrapper .is-compact .dk-badge_button,#dk-badge-wrapper .is-full .dk-badge_button{background-color:var(--dkb-color-primary);color:var(--dkb-color-contrast);position:absolute;bottom:calc(-.75rem/2 - 1.3125rem);left:50%;transform:translateX(-50%);border-radius:50%;padding:.75rem;width:2.625rem;height:2.625rem}#dk-badge-wrapper .is-compact .dk-badge_button svg .v,#dk-badge-wrapper .is-full .dk-badge_button svg .v{transform:rotate(90deg) translate(0, 4px)}#dk-badge-wrapper .is-compact .dk-badge_button svg .c,#dk-badge-wrapper .is-full .dk-badge_button svg .c{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=true] svg .v,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=true] svg .v{transform:rotate(0deg)}#dk-badge-wrapper .is-compact .dk-badge_hr,#dk-badge-wrapper .is-full .dk-badge_hr{margin:.625rem 0;border:none;border-top:1px solid #cdccd9}#dk-badge-wrapper .is-compact{padding-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:focus-visible::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-compact .dk-badge_content[data-expanded=true]{padding-bottom:1.5rem}@media(max-width: 50rem){#dk-badge-wrapper .is-full{padding-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:focus-visible::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-full .dk-badge_content[data-expanded=true]{padding-bottom:1.5rem}}#dk-badge-wrapper .is-footer{padding:0 .5rem .5rem}#dk-badge-wrapper .is-footer .dk-badge_title{display:inline-flex;align-items:center;margin-right:0}#dk-badge-wrapper .is-footer .dk-badge_title>span{margin:0 .25rem}#dk-badge-wrapper .is-footer .dk-badge_button{display:inline-flex;vertical-align:middle;margin:0 0 .15rem .15rem;width:.9375rem;height:.9375rem}#dk-badge-wrapper .is-footer .dk-badge_button::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-footer .dk-badge_button svg .v,#dk-badge-wrapper .is-footer .dk-badge_button svg .h{display:none}#dk-badge-wrapper .is-footer .dk-badge_button[aria-expanded=true] svg{transform:rotate(-180deg)}#dk-badge-wrapper .is-footer .dk-badge_content{position:relative;z-index:1}#dk-badge-wrapper .is-footer .dk-badge_hr{display:none}#dk-badge-wrapper .is-footer .dk-badge_data{display:inline-flex}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data{margin:.75rem .5rem}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data::before{content:"•";color:var(--dkb-color-primary);margin:0 1rem 0 0}#dk-badge-wrapper .is-footer .dk-badge_data:last-child{display:block} +#dk-badge-wrapper{font-size:1rem !important}#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;line-height:1.5;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge p{font-size:.875em}#dk-badge-wrapper .dk-badge_title{margin:1em .625em .3125em}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25em 0 0;font-size:1.125em;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5em .2em}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit;text-decoration:underline}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2em;display:block;font-size:.875em}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg{vertical-align:unset}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{padding-bottom:1.5em;margin-bottom:1em;display:inline-block;max-width:10.625em;border-radius:4px;border-top:4px solid var(--dkb-color-secondary)}@media(min-width: 23em){#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{bottom:1em;right:1em;position:fixed;z-index:100}}#dk-badge-wrapper .is-compact .dk-badge_button,#dk-badge-wrapper .is-full .dk-badge_button{font-size:inherit;background-color:var(--dkb-color-primary);color:var(--dkb-color-contrast);position:absolute;bottom:calc(-.75em/2 - 1em);left:50%;transform:translateX(-50%);border-radius:50%;padding:.75em;width:2.625em;height:2.625em}#dk-badge-wrapper .is-compact .dk-badge_button svg .v,#dk-badge-wrapper .is-full .dk-badge_button svg .v{transform:rotate(90deg) translate(0, 4px)}#dk-badge-wrapper .is-compact .dk-badge_button svg .c,#dk-badge-wrapper .is-full .dk-badge_button svg .c{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=true] svg .v,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=true] svg .v{transform:rotate(0deg)}#dk-badge-wrapper .is-compact .dk-badge_hr,#dk-badge-wrapper .is-full .dk-badge_hr{margin:.625em 0;border:none;border-top:1px solid #cdccd9}#dk-badge-wrapper .is-compact{padding-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:hover,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:focus,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:active{outline:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:hover::before,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:focus::before,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:active::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-compact .dk-badge_content[data-expanded=true]{padding-bottom:1.5em}@media(max-width: 50em){#dk-badge-wrapper .is-full{padding-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:hover,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:focus,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:active{outline:none}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:hover::before,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:focus::before,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:active::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-full .dk-badge_content[data-expanded=true]{padding-bottom:1.5em}}#dk-badge-wrapper .is-footer{padding:0 .5em .5em}#dk-badge-wrapper .is-footer .dk-badge_title{display:inline-flex;align-items:center;margin-right:0}#dk-badge-wrapper .is-footer .dk-badge_title>span{margin:0 .25em}#dk-badge-wrapper .is-footer .dk-badge_button{display:inline-flex;vertical-align:middle;margin:0 0 .15em .15em;width:.9375em;height:.9375em}#dk-badge-wrapper .is-footer .dk-badge_button::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-footer .dk-badge_button svg .v,#dk-badge-wrapper .is-footer .dk-badge_button svg .h{display:none}#dk-badge-wrapper .is-footer .dk-badge_button[aria-expanded=true] svg{transform:rotate(-180deg)}#dk-badge-wrapper .is-footer .dk-badge_content{position:relative;z-index:1}#dk-badge-wrapper .is-footer .dk-badge_hr{display:none}#dk-badge-wrapper .is-footer .dk-badge_data{display:inline-flex}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data{margin:.75em .5em}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data::before{content:"•";color:var(--dkb-color-primary);margin:0 1em 0 0}#dk-badge-wrapper .is-footer .dk-badge_data:last-child{display:block} diff --git a/dist/css/dk-badge-compact.css b/dist/css/dk-badge-compact.css index aa1c838..71e27ad 100644 --- a/dist/css/dk-badge-compact.css +++ b/dist/css/dk-badge-compact.css @@ -1 +1 @@ -#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;font-size:.875rem;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge_title{margin:1rem .625rem .3125rem}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25rem 0 0;font-size:1rem;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5rem .2rem}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2rem;display:block;font-size:.75rem}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{padding-bottom:1.5rem;margin-bottom:1rem;display:inline-block;max-width:10.625rem;border-radius:4px;border-top:4px solid var(--dkb-color-secondary)}@media(min-width: 23rem){#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{bottom:1rem;right:1rem;position:fixed;z-index:100}}#dk-badge-wrapper .is-compact .dk-badge_button,#dk-badge-wrapper .is-full .dk-badge_button{background-color:var(--dkb-color-primary);color:var(--dkb-color-contrast);position:absolute;bottom:calc(-.75rem/2 - 1.3125rem);left:50%;transform:translateX(-50%);border-radius:50%;padding:.75rem;width:2.625rem;height:2.625rem}#dk-badge-wrapper .is-compact .dk-badge_button svg .v,#dk-badge-wrapper .is-full .dk-badge_button svg .v{transform:rotate(90deg) translate(0, 4px)}#dk-badge-wrapper .is-compact .dk-badge_button svg .c,#dk-badge-wrapper .is-full .dk-badge_button svg .c{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=true] svg .v,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=true] svg .v{transform:rotate(0deg)}#dk-badge-wrapper .is-compact .dk-badge_hr,#dk-badge-wrapper .is-full .dk-badge_hr{margin:.625rem 0;border:none;border-top:1px solid #cdccd9}#dk-badge-wrapper .is-compact{padding-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:focus-visible::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-compact .dk-badge_content[data-expanded=true]{padding-bottom:1.5rem} +#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;line-height:1.5;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge p{font-size:.875em}#dk-badge-wrapper .dk-badge_title{margin:1em .625em .3125em}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25em 0 0;font-size:1.125em;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5em .2em}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit;text-decoration:underline}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2em;display:block;font-size:.875em}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg{vertical-align:unset}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{padding-bottom:1.5em;margin-bottom:1em;display:inline-block;max-width:10.625em;border-radius:4px;border-top:4px solid var(--dkb-color-secondary)}@media(min-width: 23em){#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{bottom:1em;right:1em;position:fixed;z-index:100}}#dk-badge-wrapper .is-compact .dk-badge_button,#dk-badge-wrapper .is-full .dk-badge_button{font-size:inherit;background-color:var(--dkb-color-primary);color:var(--dkb-color-contrast);position:absolute;bottom:calc(-.75em/2 - 1em);left:50%;transform:translateX(-50%);border-radius:50%;padding:.75em;width:2.625em;height:2.625em}#dk-badge-wrapper .is-compact .dk-badge_button svg .v,#dk-badge-wrapper .is-full .dk-badge_button svg .v{transform:rotate(90deg) translate(0, 4px)}#dk-badge-wrapper .is-compact .dk-badge_button svg .c,#dk-badge-wrapper .is-full .dk-badge_button svg .c{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=true] svg .v,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=true] svg .v{transform:rotate(0deg)}#dk-badge-wrapper .is-compact .dk-badge_hr,#dk-badge-wrapper .is-full .dk-badge_hr{margin:.625em 0;border:none;border-top:1px solid #cdccd9}#dk-badge-wrapper .is-compact{padding-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-compact .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:hover,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:focus,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:active{outline:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:hover::before,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:focus::before,#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=false]:active::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-compact .dk-badge_content[data-expanded=true]{padding-bottom:1.5em} diff --git a/dist/css/dk-badge-footer.css b/dist/css/dk-badge-footer.css index 54b3d0e..59d0ab1 100644 --- a/dist/css/dk-badge-footer.css +++ b/dist/css/dk-badge-footer.css @@ -1 +1 @@ -#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;font-size:.875rem;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge_title{margin:1rem .625rem .3125rem}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25rem 0 0;font-size:1rem;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5rem .2rem}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2rem;display:block;font-size:.75rem}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-footer{padding:0 .5rem .5rem}#dk-badge-wrapper .is-footer .dk-badge_title{display:inline-flex;align-items:center;margin-right:0}#dk-badge-wrapper .is-footer .dk-badge_title>span{margin:0 .25rem}#dk-badge-wrapper .is-footer .dk-badge_button{display:inline-flex;vertical-align:middle;margin:0 0 .15rem .15rem;width:.9375rem;height:.9375rem}#dk-badge-wrapper .is-footer .dk-badge_button::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-footer .dk-badge_button svg .v,#dk-badge-wrapper .is-footer .dk-badge_button svg .h{display:none}#dk-badge-wrapper .is-footer .dk-badge_button[aria-expanded=true] svg{transform:rotate(-180deg)}#dk-badge-wrapper .is-footer .dk-badge_content{position:relative;z-index:1}#dk-badge-wrapper .is-footer .dk-badge_hr{display:none}#dk-badge-wrapper .is-footer .dk-badge_data{display:inline-flex}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data{margin:.75rem .5rem}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data::before{content:"•";color:var(--dkb-color-primary);margin:0 1rem 0 0}#dk-badge-wrapper .is-footer .dk-badge_data:last-child{display:block} +#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;line-height:1.5;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge p{font-size:.875em}#dk-badge-wrapper .dk-badge_title{margin:1em .625em .3125em}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25em 0 0;font-size:1.125em;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5em .2em}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit;text-decoration:underline}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2em;display:block;font-size:.875em}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg{vertical-align:unset}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-footer{padding:0 .5em .5em}#dk-badge-wrapper .is-footer .dk-badge_title{display:inline-flex;align-items:center;margin-right:0}#dk-badge-wrapper .is-footer .dk-badge_title>span{margin:0 .25em}#dk-badge-wrapper .is-footer .dk-badge_button{display:inline-flex;vertical-align:middle;margin:0 0 .15em .15em;width:.9375em;height:.9375em}#dk-badge-wrapper .is-footer .dk-badge_button::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-footer .dk-badge_button svg .v,#dk-badge-wrapper .is-footer .dk-badge_button svg .h{display:none}#dk-badge-wrapper .is-footer .dk-badge_button[aria-expanded=true] svg{transform:rotate(-180deg)}#dk-badge-wrapper .is-footer .dk-badge_content{position:relative;z-index:1}#dk-badge-wrapper .is-footer .dk-badge_hr{display:none}#dk-badge-wrapper .is-footer .dk-badge_data{display:inline-flex}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data{margin:.75em .5em}#dk-badge-wrapper .is-footer .dk-badge_data+.dk-badge_data::before{content:"•";color:var(--dkb-color-primary);margin:0 1em 0 0}#dk-badge-wrapper .is-footer .dk-badge_data:last-child{display:block} diff --git a/dist/css/dk-badge-full.css b/dist/css/dk-badge-full.css index af30e89..67d236f 100644 --- a/dist/css/dk-badge-full.css +++ b/dist/css/dk-badge-full.css @@ -1 +1 @@ -#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;font-size:.875rem;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge_title{margin:1rem .625rem .3125rem}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25rem 0 0;font-size:1rem;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5rem .2rem}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2rem;display:block;font-size:.75rem}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{padding-bottom:1.5rem;margin-bottom:1rem;display:inline-block;max-width:10.625rem;border-radius:4px;border-top:4px solid var(--dkb-color-secondary)}@media(min-width: 23rem){#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{bottom:1rem;right:1rem;position:fixed;z-index:100}}#dk-badge-wrapper .is-compact .dk-badge_button,#dk-badge-wrapper .is-full .dk-badge_button{background-color:var(--dkb-color-primary);color:var(--dkb-color-contrast);position:absolute;bottom:calc(-.75rem/2 - 1.3125rem);left:50%;transform:translateX(-50%);border-radius:50%;padding:.75rem;width:2.625rem;height:2.625rem}#dk-badge-wrapper .is-compact .dk-badge_button svg .v,#dk-badge-wrapper .is-full .dk-badge_button svg .v{transform:rotate(90deg) translate(0, 4px)}#dk-badge-wrapper .is-compact .dk-badge_button svg .c,#dk-badge-wrapper .is-full .dk-badge_button svg .c{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=true] svg .v,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=true] svg .v{transform:rotate(0deg)}#dk-badge-wrapper .is-compact .dk-badge_hr,#dk-badge-wrapper .is-full .dk-badge_hr{margin:.625rem 0;border:none;border-top:1px solid #cdccd9}@media(max-width: 50rem){#dk-badge-wrapper .is-full{padding-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:focus-visible::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-full .dk-badge_content[data-expanded=true]{padding-bottom:1.5rem}} +#dk-badge-wrapper{--dkb-font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "verdana", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--dkb-color-primary: #2D2AD3;--dkb-color-secondary: #00BC62;--dkb-color-text: #585284;--dkb-color-text-light: var(--dkb-color-text);--dkb-color-text-strong: #070041;--dkb-color-contrast: #fff}#dk-badge-wrapper .dk-badge{font-family:var(--dkb-font-family) !important;line-height:1.5;position:relative;background-color:var(--dkb-color-contrast);color:var(--dkb-color-text);font-weight:500;margin:0;text-align:center;box-shadow:0px 8px 16px 0px rgba(7,0,65,.08),0px 2px 6px 0px rgba(7,0,65,.08)}#dk-badge-wrapper .dk-badge p{font-size:.875em}#dk-badge-wrapper .dk-badge_title{margin:1em .625em .3125em}#dk-badge-wrapper .dk-badge_title span:nth-child(3){display:none}#dk-badge-wrapper .dk-badge_co2{display:block;margin:.25em 0 0;font-size:1.125em;font-weight:bold;color:var(--dkb-color-primary)}#dk-badge-wrapper .dk-badge_data{margin:.5em .2em}#dk-badge-wrapper .dk-badge_data strong{font-weight:bold;color:var(--dkb-color-text-strong)}#dk-badge-wrapper .dk-badge_data a{color:inherit;text-decoration:underline}#dk-badge-wrapper .dk-badge_data .is-small{margin-top:.2em;display:block;font-size:.875em}#dk-badge-wrapper .dk-badge_data:last-child{color:var(--dkb-color-text-light)}#dk-badge-wrapper .dk-badge_button{background-color:transparent;color:var(--dkb-color-text);border:none;padding:0;cursor:pointer}#dk-badge-wrapper .dk-badge_button svg{vertical-align:unset}#dk-badge-wrapper .dk-badge_button svg .v,#dk-badge-wrapper .dk-badge_button svg.h,#dk-badge-wrapper .dk-badge_button svg{transform-origin:center;transition:transform .2s ease-in-out}#dk-badge-wrapper .dk-badge_button:hover,#dk-badge-wrapper .dk-badge_button:focus,#dk-badge-wrapper .dk-badge_button:active{outline:2px solid var(--dkb-color-primary);outline-offset:2px}#dk-badge-wrapper [data-dk-badge-content]{display:none}#dk-badge-wrapper [data-dk-badge-content][data-expanded=true]{display:block}#dk-badge-wrapper .sr-only{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{padding-bottom:1.5em;margin-bottom:1em;display:inline-block;max-width:10.625em;border-radius:4px;border-top:4px solid var(--dkb-color-secondary)}@media(min-width: 23em){#dk-badge-wrapper .is-compact,#dk-badge-wrapper .is-full{bottom:1em;right:1em;position:fixed;z-index:100}}#dk-badge-wrapper .is-compact .dk-badge_button,#dk-badge-wrapper .is-full .dk-badge_button{font-size:inherit;background-color:var(--dkb-color-primary);color:var(--dkb-color-contrast);position:absolute;bottom:calc(-.75em/2 - 1em);left:50%;transform:translateX(-50%);border-radius:50%;padding:.75em;width:2.625em;height:2.625em}#dk-badge-wrapper .is-compact .dk-badge_button svg .v,#dk-badge-wrapper .is-full .dk-badge_button svg .v{transform:rotate(90deg) translate(0, 4px)}#dk-badge-wrapper .is-compact .dk-badge_button svg .c,#dk-badge-wrapper .is-full .dk-badge_button svg .c{display:none}#dk-badge-wrapper .is-compact .dk-badge_button[aria-expanded=true] svg .v,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=true] svg .v{transform:rotate(0deg)}#dk-badge-wrapper .is-compact .dk-badge_hr,#dk-badge-wrapper .is-full .dk-badge_hr{margin:.625em 0;border:none;border-top:1px solid #cdccd9}@media(max-width: 50em){#dk-badge-wrapper .is-full{padding-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title{margin-bottom:0}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(1){display:none}#dk-badge-wrapper .is-full .dk-badge_title span:nth-child(3){display:block}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]{position:static;transform:none;height:0;width:0;padding:0}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:hover,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:focus,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:active{outline:none}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false] svg{display:none}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:hover::before,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:focus::before,#dk-badge-wrapper .is-full .dk-badge_button[aria-expanded=false]:active::before{outline:2px solid var(--dkb-color-primary);outline-offset:-2px}#dk-badge-wrapper .is-full .dk-badge_content[data-expanded=true]{padding-bottom:1.5em}} diff --git a/dist/js/dk-badge.js b/dist/js/dk-badge.js index b00d1a2..90e82b3 100644 --- a/dist/js/dk-badge.js +++ b/dist/js/dk-badge.js @@ -133,7 +133,7 @@ class DKBadge {

${this.labels.time} : ${this.labels.unknown}

${this.labels.device} : ${this.labels.unknown}

-

Powered by DK ${this.labels.privacy}

+

Powered by DK ${this.labels.privacy}

`; this.node.innerHTML = template; diff --git a/dist/js/dk-badge.min.js b/dist/js/dk-badge.min.js index 79198e3..42ab3bc 100644 --- a/dist/js/dk-badge.min.js +++ b/dist/js/dk-badge.min.js @@ -1 +1 @@ -class DKBadge{constructor(t={}){let{style:e,renderUI:i,pue:s,audienceLocationProportion:o,serverLocationProportion:n}=Object.assign({style:"full",renderUI:true,pue:1.69,audienceLocationProportion:{france:.45,europe:0,international:.55},serverLocationProportion:{france:.5,international:.5}},t);this.node=document.querySelector("[data-dk-badge]");this.style=e;this.pue=s;this.audienceLocationProportion=o;this.serverLocationProportion=n;this.renderUI=i;this.labels={intro:"This website has a carbon footprint of",emitted:"emitted",details:"Details",weight:"Weight",time:"Time",device:"Device",unknown:"unknown",CO2unit:"g CO2e",weightUnit:"Ko",timeUnit:"sec.",privacy:"no data is collected",...t.labels};this.weight=0;this.timeSpent=0;this.deviceType="desktop";this.ges=0;this.updateIntervalId=null;this.lastCalculatedTimestamp=null;this.events={calculated:new CustomEvent("dkBadge:calculated",{detail:this}),updated:new CustomEvent("dkBadge:updated",{detail:this})};this.factors={server_lifecycle:.023,server_bandwidth:125e3,france_server_efficiency:6.69e-8,international_server_efficiency:7.1e-9,france_electricity_carbon_intensity:.052,world_electricity_carbon_intensity:.357,europe_electricity_carbon_intensity:.42,network_lifecycle_impact:4.78e-9,wifi_consumption:413e-14,g4_consumption:111e-13,server_country_network_ratio:.55,viewing_country_network_ratio:.45,mobile_build_emissions:32.8,desktop_build_emissions:156,tablet_build_emissions:63.2,mobile_end_of_life_emissions:.71,desktop_end_of_life_emissions:2.1,tablet_end_of_life_emissions:.7,mobile_daily_usage:2.7,mobile_year_usage:365,mobile_lifetime:2.5,desktop_lifetime:5,desktop_daily_usage:2.02,desktop_year_usage:253,tablet_lifetime:3,tablet_daily_usage:1.5,tablet_year_usage:365,mobile_power:4.5,desktop_power:29.4,tablet_power:29.4}}render(){if(!this.renderUI)return;if(!this.node)return;this.node.id="dk-badge-wrapper";const t=`\n\t\t\t
\n\t\t\t\t

\n\t\t\t\t\t${this.labels.intro}\n\t\t\t\t\t${this.labels.unknown}\n\t\t\t\t\t${this.labels.emitted}\n\t\t\t\t

\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

${this.labels.weight} : ${this.labels.unknown}

\n\t\t\t\t\t

${this.labels.time} : ${this.labels.unknown}

\n\t\t\t\t\t

${this.labels.device} : ${this.labels.unknown}

\n\t\t\t\t\t\n\t\t\t\t\t

Powered by DK ${this.labels.privacy}

\n\t\t\t\t
\n\t\t\t
`;this.node.innerHTML=t}getUserDevice(){const t=navigator.userAgent.toLowerCase();const e=/iphone|android/.test(t)?"Mobile":false;const i=/(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(t)?"Tablet":false;return e||i||"Desktop"}getStoredData(){let t=sessionStorage.getItem("dk-badge");if(t){t=JSON.parse(t);this.timeSpent=t.timeSpent;this.weight=t.weight}}storeData(){sessionStorage.setItem("dk-badge",JSON.stringify({timeSpent:this.timeSpent,weight:this.weight}))}calculate(t=this.weight,e=this.timeSpent,i=this.deviceType){const s=t/1e3;const o={wifi_proportion:.9,g4_proportion:.1,mobile_proportion:i==="Mobile"?1:0,desktop_proportion:i==="Desktop"?1:0,tablet_proportion:i==="Tablet"?1:0};const n={acv:s/this.factors.server_bandwidth*this.factors.server_lifecycle/1e3,usage:(this.serverLocationProportion.france*this.factors.france_server_efficiency*this.factors.france_electricity_carbon_intensity+this.serverLocationProportion.international*this.factors.international_server_efficiency*this.factors.world_electricity_carbon_intensity)*(this.pue*s)};const a=o.wifi_proportion*this.factors.wifi_consumption*8e3;const r=o.g4_proportion*this.factors.g4_consumption*8e3;const c=o.wifi_proportion+o.g4_proportion;const l=this.serverLocationProportion.france*this.factors.france_electricity_carbon_intensity;const d=this.serverLocationProportion.international*this.factors.world_electricity_carbon_intensity;const h=this.serverLocationProportion.france+this.serverLocationProportion.international;const p=this.audienceLocationProportion.france*this.factors.france_electricity_carbon_intensity;const _=this.audienceLocationProportion.europe*this.factors.europe_electricity_carbon_intensity;const u=this.audienceLocationProportion.international*this.factors.world_electricity_carbon_intensity;const b={acv:this.factors.network_lifecycle_impact*s,usage:s*((a+r)/c)*(this.factors.server_country_network_ratio*(l+d)/h+this.factors.viewing_country_network_ratio*(p+_+u))};const g=o.mobile_proportion+o.desktop_proportion+o.tablet_proportion;const f=this.factors.mobile_build_emissions+this.factors.mobile_end_of_life_emissions;const m=this.factors.mobile_daily_usage*this.factors.mobile_year_usage*this.factors.mobile_lifetime;const v=o.mobile_proportion*f/m;const k=o.mobile_proportion*this.factors.mobile_power;const y=this.factors.desktop_build_emissions+this.factors.desktop_end_of_life_emissions;const w=this.factors.desktop_daily_usage*this.factors.desktop_year_usage*this.factors.desktop_lifetime;const I=o.desktop_proportion*y/w;const L=o.desktop_proportion*this.factors.desktop_power;const P=this.factors.tablet_build_emissions+this.factors.tablet_end_of_life_emissions;const S=this.factors.tablet_daily_usage*this.factors.tablet_year_usage*this.factors.tablet_lifetime;const C=o.tablet_proportion*P/S;const E=o.tablet_proportion*this.factors.tablet_power;const T={acv:e*(v+I+C)/g/3600,usage:e/3600*((k+L+E)/g)*(p/1e3+_/1e3+u/1e3)};this.ges=(n.acv+n.usage+b.acv+b.usage+T.acv+T.usage)*1e3;this.lastCalculatedTimestamp=performance.now();document.dispatchEvent(this.events.calculated);return this.ges}updateElement(t,e){if(!this.renderUI)return;const i=this.node.querySelector(`[data-dk-badge-${t}]`);if(!i)return;i.innerHTML=e}update(){if(!this.renderUI)return;var t=[{key:"CO2",value:this.ges.toFixed(2)+" "+this.labels.CO2unit},{key:"time",value:this.timeSpent+" "+this.labels.timeUnit},{key:"device",value:this.deviceType},{key:"weight",value:(this.weight/1e3).toFixed(2)+" "+this.labels.weightUnit}];t.forEach((t=>{this.updateElement(t.key,t.value)}));document.dispatchEvent(this.events.updated)}getResources(t=performance.getEntries()){if(!t)return;if(t.length!==0){t.forEach(((t,e)=>{if("transferSize"in t){this.weight=this.weight+t.transferSize}}))}this.calculate()}performanceObserverCallback(t){this.getResources(t.getEntries())}updateInterval(){return setInterval((()=>{this.timeSpent+=1;this.storeData();if(performance.now()-this.lastCalculatedTimestamp>=5e3){this.getResources([])}else{this.updateElement("time",this.timeSpent+" "+this.labels.timeUnit)}}),1e3)}handleVisibilityChange(){if(document.hidden){clearInterval(this.updateIntervalId);this.updateIntervalId=null}else{this.updateIntervalId=this.updateIntervalId||this.updateInterval()}}disclosure(t,e="toggle"){let i=t.getAttribute("aria-expanded");i=i=="true"?true:false;const s=e==="toggle"?!i:false;const o=t.getAttribute("aria-controls");const n=document.getElementById(o);t.setAttribute("aria-expanded",s);n.setAttribute("data-expanded",s);if(s===true&&this.style==="footer"){window.scrollBy(0,n.getBoundingClientRect().height+16)}}disclosureInit(){const t=this.node.querySelector("[data-dk-badge-button]");if(!t)return;document.addEventListener("click",(e=>{if(e.target.closest("[data-dk-badge-button]")){this.disclosure(t)}else if(!e.target.closest("[data-dk-badge]")){this.disclosure(t,"close")}}));document.addEventListener("keydown",(e=>{const i=27;if(e.keyCode===i){this.disclosure(t,"close")}}));document.addEventListener("blur",(e=>{if(e.relatedTarget&&!e.relatedTarget.closest("[data-dk-badge]")){this.disclosure(t,"close")}}),true)}init(){this.render();const t=new PerformanceObserver((t=>{this.performanceObserverCallback.call(this,t)}));this.disclosureInit();this.handleVisibilityChange();document.addEventListener("visibilitychange",(t=>{this.handleVisibilityChange.call(this,t)}),false);document.addEventListener("dkBadge:calculated",(t=>{this.update.call(this,t)}));setTimeout((()=>{this.deviceType=this.getUserDevice();this.getStoredData();this.getResources();t.observe({entryTypes:["resource","navigation"]})}),500)}} \ No newline at end of file +class DKBadge{constructor(t={}){let{style:e,renderUI:i,pue:s,audienceLocationProportion:o,serverLocationProportion:n}=Object.assign({style:"full",renderUI:true,pue:1.69,audienceLocationProportion:{france:.45,europe:0,international:.55},serverLocationProportion:{france:.5,international:.5}},t);this.node=document.querySelector("[data-dk-badge]");this.style=e;this.pue=s;this.audienceLocationProportion=o;this.serverLocationProportion=n;this.renderUI=i;this.labels={intro:"This website has a carbon footprint of",emitted:"emitted",details:"Details",weight:"Weight",time:"Time",device:"Device",unknown:"unknown",CO2unit:"g CO2e",weightUnit:"Ko",timeUnit:"sec.",privacy:"no data is collected",...t.labels};this.weight=0;this.timeSpent=0;this.deviceType="desktop";this.ges=0;this.updateIntervalId=null;this.lastCalculatedTimestamp=null;this.events={calculated:new CustomEvent("dkBadge:calculated",{detail:this}),updated:new CustomEvent("dkBadge:updated",{detail:this})};this.factors={server_lifecycle:.023,server_bandwidth:125e3,france_server_efficiency:6.69e-8,international_server_efficiency:7.1e-9,france_electricity_carbon_intensity:.052,world_electricity_carbon_intensity:.357,europe_electricity_carbon_intensity:.42,network_lifecycle_impact:4.78e-9,wifi_consumption:413e-14,g4_consumption:111e-13,server_country_network_ratio:.55,viewing_country_network_ratio:.45,mobile_build_emissions:32.8,desktop_build_emissions:156,tablet_build_emissions:63.2,mobile_end_of_life_emissions:.71,desktop_end_of_life_emissions:2.1,tablet_end_of_life_emissions:.7,mobile_daily_usage:2.7,mobile_year_usage:365,mobile_lifetime:2.5,desktop_lifetime:5,desktop_daily_usage:2.02,desktop_year_usage:253,tablet_lifetime:3,tablet_daily_usage:1.5,tablet_year_usage:365,mobile_power:4.5,desktop_power:29.4,tablet_power:29.4}}render(){if(!this.renderUI)return;if(!this.node)return;this.node.id="dk-badge-wrapper";const t=`\n\t\t\t
\n\t\t\t\t

\n\t\t\t\t\t${this.labels.intro}\n\t\t\t\t\t${this.labels.unknown}\n\t\t\t\t\t${this.labels.emitted}\n\t\t\t\t

\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

${this.labels.weight} : ${this.labels.unknown}

\n\t\t\t\t\t

${this.labels.time} : ${this.labels.unknown}

\n\t\t\t\t\t

${this.labels.device} : ${this.labels.unknown}

\n\t\t\t\t\t\n\t\t\t\t\t

Powered by DK ${this.labels.privacy}

\n\t\t\t\t
\n\t\t\t
`;this.node.innerHTML=t}getUserDevice(){const t=navigator.userAgent.toLowerCase();const e=/iphone|android/.test(t)?"Mobile":false;const i=/(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(t)?"Tablet":false;return e||i||"Desktop"}getStoredData(){let t=sessionStorage.getItem("dk-badge");if(t){t=JSON.parse(t);this.timeSpent=t.timeSpent;this.weight=t.weight}}storeData(){sessionStorage.setItem("dk-badge",JSON.stringify({timeSpent:this.timeSpent,weight:this.weight}))}calculate(t=this.weight,e=this.timeSpent,i=this.deviceType){const s=t/1e3;const o={wifi_proportion:.9,g4_proportion:.1,mobile_proportion:i==="Mobile"?1:0,desktop_proportion:i==="Desktop"?1:0,tablet_proportion:i==="Tablet"?1:0};const n={acv:s/this.factors.server_bandwidth*this.factors.server_lifecycle/1e3,usage:(this.serverLocationProportion.france*this.factors.france_server_efficiency*this.factors.france_electricity_carbon_intensity+this.serverLocationProportion.international*this.factors.international_server_efficiency*this.factors.world_electricity_carbon_intensity)*(this.pue*s)};const a=o.wifi_proportion*this.factors.wifi_consumption*8e3;const r=o.g4_proportion*this.factors.g4_consumption*8e3;const c=o.wifi_proportion+o.g4_proportion;const l=this.serverLocationProportion.france*this.factors.france_electricity_carbon_intensity;const d=this.serverLocationProportion.international*this.factors.world_electricity_carbon_intensity;const h=this.serverLocationProportion.france+this.serverLocationProportion.international;const p=this.audienceLocationProportion.france*this.factors.france_electricity_carbon_intensity;const _=this.audienceLocationProportion.europe*this.factors.europe_electricity_carbon_intensity;const u=this.audienceLocationProportion.international*this.factors.world_electricity_carbon_intensity;const b={acv:this.factors.network_lifecycle_impact*s,usage:s*((a+r)/c)*(this.factors.server_country_network_ratio*(l+d)/h+this.factors.viewing_country_network_ratio*(p+_+u))};const g=o.mobile_proportion+o.desktop_proportion+o.tablet_proportion;const f=this.factors.mobile_build_emissions+this.factors.mobile_end_of_life_emissions;const m=this.factors.mobile_daily_usage*this.factors.mobile_year_usage*this.factors.mobile_lifetime;const v=o.mobile_proportion*f/m;const k=o.mobile_proportion*this.factors.mobile_power;const y=this.factors.desktop_build_emissions+this.factors.desktop_end_of_life_emissions;const w=this.factors.desktop_daily_usage*this.factors.desktop_year_usage*this.factors.desktop_lifetime;const I=o.desktop_proportion*y/w;const L=o.desktop_proportion*this.factors.desktop_power;const P=this.factors.tablet_build_emissions+this.factors.tablet_end_of_life_emissions;const S=this.factors.tablet_daily_usage*this.factors.tablet_year_usage*this.factors.tablet_lifetime;const C=o.tablet_proportion*P/S;const E=o.tablet_proportion*this.factors.tablet_power;const T={acv:e*(v+I+C)/g/3600,usage:e/3600*((k+L+E)/g)*(p/1e3+_/1e3+u/1e3)};this.ges=(n.acv+n.usage+b.acv+b.usage+T.acv+T.usage)*1e3;this.lastCalculatedTimestamp=performance.now();document.dispatchEvent(this.events.calculated);return this.ges}updateElement(t,e){if(!this.renderUI)return;const i=this.node.querySelector(`[data-dk-badge-${t}]`);if(!i)return;i.innerHTML=e}update(){if(!this.renderUI)return;var t=[{key:"CO2",value:this.ges.toFixed(2)+" "+this.labels.CO2unit},{key:"time",value:this.timeSpent+" "+this.labels.timeUnit},{key:"device",value:this.deviceType},{key:"weight",value:(this.weight/1e3).toFixed(2)+" "+this.labels.weightUnit}];t.forEach((t=>{this.updateElement(t.key,t.value)}));document.dispatchEvent(this.events.updated)}getResources(t=performance.getEntries()){if(!t)return;if(t.length!==0){t.forEach(((t,e)=>{if("transferSize"in t){this.weight=this.weight+t.transferSize}}))}this.calculate()}performanceObserverCallback(t){this.getResources(t.getEntries())}updateInterval(){return setInterval((()=>{this.timeSpent+=1;this.storeData();if(performance.now()-this.lastCalculatedTimestamp>=5e3){this.getResources([])}else{this.updateElement("time",this.timeSpent+" "+this.labels.timeUnit)}}),1e3)}handleVisibilityChange(){if(document.hidden){clearInterval(this.updateIntervalId);this.updateIntervalId=null}else{this.updateIntervalId=this.updateIntervalId||this.updateInterval()}}disclosure(t,e="toggle"){let i=t.getAttribute("aria-expanded");i=i=="true"?true:false;const s=e==="toggle"?!i:false;const o=t.getAttribute("aria-controls");const n=document.getElementById(o);t.setAttribute("aria-expanded",s);n.setAttribute("data-expanded",s);if(s===true&&this.style==="footer"){window.scrollBy(0,n.getBoundingClientRect().height+16)}}disclosureInit(){const t=this.node.querySelector("[data-dk-badge-button]");if(!t)return;document.addEventListener("click",(e=>{if(e.target.closest("[data-dk-badge-button]")){this.disclosure(t)}else if(!e.target.closest("[data-dk-badge]")){this.disclosure(t,"close")}}));document.addEventListener("keydown",(e=>{const i=27;if(e.keyCode===i){this.disclosure(t,"close")}}));document.addEventListener("blur",(e=>{if(e.relatedTarget&&!e.relatedTarget.closest("[data-dk-badge]")){this.disclosure(t,"close")}}),true)}init(){this.render();const t=new PerformanceObserver((t=>{this.performanceObserverCallback.call(this,t)}));this.disclosureInit();this.handleVisibilityChange();document.addEventListener("visibilitychange",(t=>{this.handleVisibilityChange.call(this,t)}),false);document.addEventListener("dkBadge:calculated",(t=>{this.update.call(this,t)}));setTimeout((()=>{this.deviceType=this.getUserDevice();this.getStoredData();this.getResources();t.observe({entryTypes:["resource","navigation"]})}),500)}} \ No newline at end of file diff --git a/package.json b/package.json index 40b397c..874ccff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@d-k/dk-badge", - "version": "0.1.2-beta", + "version": "0.1.3-beta", "repository": { "type": "git", "url": "https://github.com/dk-sustainability/dk-badge" @@ -24,7 +24,7 @@ "measure" ], "author": "DK", - "license": "MPL 2.0", + "license": "(Copyright DK OR MPL 2.0)", "devDependencies": { "postcss": "^8.2.4", "postcss-cli": "^8.3.1", diff --git a/readme.md b/readme.md index 08982f2..f8f45ea 100644 --- a/readme.md +++ b/readme.md @@ -158,6 +158,7 @@ Exemple pour une interface ayant un thème sombre : ``` html
${this.labels.time} : ${this.labels.unknown}

${this.labels.device} : ${this.labels.unknown}

-

Powered by DK ${this.labels.privacy}

+

Powered by DK ${this.labels.privacy}

`; this.node.innerHTML = template; diff --git a/src/scss/config/_mixins.scss b/src/scss/config/_mixins.scss index 13b6029..33c352a 100644 --- a/src/scss/config/_mixins.scss +++ b/src/scss/config/_mixins.scss @@ -1,9 +1,10 @@ @use 'sass:math'; -/// Convert pixels to rem units +/// Convert pixels to em units +/// We use em instead of rem because some website may have a different base font size (which is not a great idea, if you see this, checkout : https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5) /// @param {number} $sizeValue - unitless pixel value /// @example -/// rem(35) -@function rem($sizeValue: 16) { - @return (math.div($sizeValue, 16)) * 1rem; +/// em(35) +@function em($sizeValue: 16) { + @return (math.div($sizeValue, 16)) * 1em; } \ No newline at end of file diff --git a/src/scss/dk-badge-all.scss b/src/scss/dk-badge-all.scss index f5d2b21..4fa1440 100644 --- a/src/scss/dk-badge-all.scss +++ b/src/scss/dk-badge-all.scss @@ -1,6 +1,7 @@ @import "config/mixins"; #dk-badge-wrapper { + font-size: 1rem !important; @import "config/variables"; @import "parts/base"; diff --git a/src/scss/parts/_base.scss b/src/scss/parts/_base.scss index 5ab93df..a5e74b2 100644 --- a/src/scss/parts/_base.scss +++ b/src/scss/parts/_base.scss @@ -1,6 +1,6 @@ .dk-badge { font-family: var(--dkb-font-family) !important; - font-size: rem(14); + line-height: 1.5; position: relative; background-color: var(--dkb-color-contrast); color: var(--dkb-color-text); @@ -9,34 +9,41 @@ text-align: center; box-shadow: 0px 8px 16px 0px rgba(7, 0, 65, 0.08), 0px 2px 6px 0px rgba(7, 0, 65, 0.08); + p { + font-size: em(14); + } + &_title { - margin: 1rem rem(10) rem(5); + margin: 1em em(10) em(5); span:nth-child(3) {display: none;} } &_co2 { display: block; - margin: .25rem 0 0; - font-size: 1rem; + margin: .25em 0 0; + font-size: em(18); font-weight: bold; color: var(--dkb-color-primary); } &_data { - margin: .5rem 0.2rem; + margin: .5em 0.2em; strong { font-weight: bold; color: var(--dkb-color-text-strong); } - a {color: inherit;} + a { + color: inherit; + text-decoration: underline; + } .is-small { - margin-top: .2rem; + margin-top: .2em; display: block; - font-size: rem(12); + font-size: em(14); } &:last-child { @@ -51,6 +58,8 @@ padding: 0; cursor: pointer; + svg {vertical-align: unset;} + svg .v, svg.h, svg { diff --git a/src/scss/parts/_compact&full.scss b/src/scss/parts/_compact&full.scss index 7d0d28e..7d85135 100644 --- a/src/scss/parts/_compact&full.scss +++ b/src/scss/parts/_compact&full.scss @@ -1,32 +1,33 @@ .is-compact, .is-full { - padding-bottom: 1.5rem; - margin-bottom: 1rem; + padding-bottom: 1.5em; + margin-bottom: 1em; display: inline-block; - max-width: rem(170); + max-width: em(170); border-radius: 4px; border-top: 4px solid var(--dkb-color-secondary); // we avoid fixed positioning for small sreens - @media (min-width: 23rem) { - bottom: 1rem; - right: 1rem; + @media (min-width: 23em) { + bottom: 1em; + right: 1em; position: fixed; z-index: 100; } .dk-badge { &_button { + font-size: inherit; background-color: var(--dkb-color-primary); color: var(--dkb-color-contrast); position: absolute; - bottom: calc(-.75rem/2 - #{rem(21)}); + bottom: calc(-.75em/2 - 1em); left: 50%; transform: translateX(-50%); border-radius: 50%; - padding: .75rem; - width: rem(42); - height: rem(42); + padding: .75em; + width: em(42); + height: em(42); svg .v {transform: rotate(90deg) translate(0, 4px);} svg .c {display: none;} @@ -34,7 +35,7 @@ } &_hr { - margin: rem(10) 0; + margin: em(10) 0; border: none; border-top: 1px solid #CDCCD9; } diff --git a/src/scss/parts/_compact.scss b/src/scss/parts/_compact.scss index 60d7f1d..21110fd 100644 --- a/src/scss/parts/_compact.scss +++ b/src/scss/parts/_compact.scss @@ -7,12 +7,20 @@ span:nth-child(1) {display: none;} span:nth-child(3) {display: block;} } + &_button[aria-expanded="false"] { position: static; transform: none; height: 0; width: 0; padding: 0; + + &:hover, + &:focus, + &:active { + outline: none; + } + svg {display: none;} &::before { @@ -25,13 +33,17 @@ height: 100%; } - &:focus-visible::before { - outline: 2px solid var(--dkb-color-primary); - outline-offset: -2px; - } + &:hover, + &:focus, + &:active { + &::before { + outline: 2px solid var(--dkb-color-primary); + outline-offset: -2px; + } + } } &_content[data-expanded="true"] { - padding-bottom: 1.5rem; + padding-bottom: 1.5em; } } } \ No newline at end of file diff --git a/src/scss/parts/_footer.scss b/src/scss/parts/_footer.scss index c91cca3..fc3a30e 100644 --- a/src/scss/parts/_footer.scss +++ b/src/scss/parts/_footer.scss @@ -1,5 +1,5 @@ .is-footer { - padding: 0 .5rem .5rem; + padding: 0 .5em .5em; .dk-badge { &_title { display: inline-flex; @@ -7,15 +7,15 @@ margin-right: 0; > span { - margin: 0 .25rem; + margin: 0 .25em; } } &_button { display: inline-flex; vertical-align: middle; - margin: 0 0 .15rem .15rem; - width: rem(15); - height: rem(15); + margin: 0 0 .15em .15em; + width: em(15); + height: em(15); &::before { content:""; @@ -46,11 +46,11 @@ display: inline-flex; + .dk-badge_data { - margin: .75rem .5rem; + margin: .75em .5em; &::before { content: "•"; color: var(--dkb-color-primary); - margin: 0 1rem 0 0; + margin: 0 1em 0 0; } } diff --git a/src/scss/parts/_full.scss b/src/scss/parts/_full.scss index c95baa7..e456199 100644 --- a/src/scss/parts/_full.scss +++ b/src/scss/parts/_full.scss @@ -1,5 +1,5 @@ // small screens, same as compact -@media (max-width: 50rem) { +@media (max-width: 50em) { .is-full { padding-bottom: 0; .dk-badge { @@ -15,6 +15,13 @@ height: 0; width: 0; padding: 0; + + &:hover, + &:focus, + &:active { + outline: none; + } + svg {display: none;} &::before { @@ -27,14 +34,18 @@ height: 100%; } - &:focus-visible::before { - outline: 2px solid var(--dkb-color-primary); - outline-offset: -2px; - } + &:hover, + &:focus, + &:active { + &::before { + outline: 2px solid var(--dkb-color-primary); + outline-offset: -2px; + } + } } &_content[data-expanded="true"] { - padding-bottom: 1.5rem; + padding-bottom: 1.5em; } } }