diff --git a/dist/shoelace.css b/dist/shoelace.css index 77a681f0e..d7ec8bbfa 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -20,7 +20,7 @@ /*! Forms */fieldset{border:1px solid #ddd;border-radius:.25rem;padding:1rem 1.5rem;margin-bottom:1rem}fieldset legend{font-weight:700;padding:0 .25rem}label{display:inline-block;margin-bottom:.25rem}label+label{margin-left:1rem}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;font-family:inherit;font-size:1rem;font-weight:inherit;color:#111;border:1px solid #ddd;border-radius:.25rem;-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(0,0,0,.05);background-color:#fff;height:2rem;line-height:2rem;vertical-align:middle;display:block;padding-left:.5rem;padding-right:.5rem;margin:0;-webkit-transition:border-color .1s,background-color .1s,color .1s;transition:border-color .1s,background-color .1s,color .1s;white-space:nowrap;-moz-appearance:none;-webkit-appearance:none}input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{outline:none;border-color:#0074d9}input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[disabled]{opacity:.5;cursor:not-allowed}input[type=color][readonly],input[type=date][readonly],input[type=datetime-local][readonly],input[type=email][readonly],input[type=month][readonly],input[type=number][readonly],input[type=password][readonly],input[type=search][readonly],input[type=tel][readonly],input[type=text][readonly],input[type=time][readonly],input[type=url][readonly],input[type=week][readonly],select[readonly],textarea[readonly]{background-color:#f2f2f2}input[type=color][type=color],input[type=date][type=color],input[type=datetime-local][type=color],input[type=email][type=color],input[type=month][type=color],input[type=number][type=color],input[type=password][type=color],input[type=search][type=color],input[type=tel][type=color],input[type=text][type=color],input[type=time][type=color],input[type=url][type=color],input[type=week][type=color],select[type=color],textarea[type=color]{padding:.5rem}input[type=color][type=color]::-webkit-color-swatch-wrapper,input[type=date][type=color]::-webkit-color-swatch-wrapper,input[type=datetime-local][type=color]::-webkit-color-swatch-wrapper,input[type=email][type=color]::-webkit-color-swatch-wrapper,input[type=month][type=color]::-webkit-color-swatch-wrapper,input[type=number][type=color]::-webkit-color-swatch-wrapper,input[type=password][type=color]::-webkit-color-swatch-wrapper,input[type=search][type=color]::-webkit-color-swatch-wrapper,input[type=tel][type=color]::-webkit-color-swatch-wrapper,input[type=text][type=color]::-webkit-color-swatch-wrapper,input[type=time][type=color]::-webkit-color-swatch-wrapper,input[type=url][type=color]::-webkit-color-swatch-wrapper,input[type=week][type=color]::-webkit-color-swatch-wrapper,select[type=color]::-webkit-color-swatch-wrapper,textarea[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color][type=color]::-webkit-color-swatch,input[type=date][type=color]::-webkit-color-swatch,input[type=datetime-local][type=color]::-webkit-color-swatch,input[type=email][type=color]::-webkit-color-swatch,input[type=month][type=color]::-webkit-color-swatch,input[type=number][type=color]::-webkit-color-swatch,input[type=password][type=color]::-webkit-color-swatch,input[type=search][type=color]::-webkit-color-swatch,input[type=tel][type=color]::-webkit-color-swatch,input[type=text][type=color]::-webkit-color-swatch,input[type=time][type=color]::-webkit-color-swatch,input[type=url][type=color]::-webkit-color-swatch,input[type=week][type=color]::-webkit-color-swatch,select[type=color]::-webkit-color-swatch,textarea[type=color]::-webkit-color-swatch{border:none;border-radius:.25rem}input[type=color][type=checkbox],input[type=color][type=radio],input[type=date][type=checkbox],input[type=date][type=radio],input[type=datetime-local][type=checkbox],input[type=datetime-local][type=radio],input[type=email][type=checkbox],input[type=email][type=radio],input[type=month][type=checkbox],input[type=month][type=radio],input[type=number][type=checkbox],input[type=number][type=radio],input[type=password][type=checkbox],input[type=password][type=radio],input[type=search][type=checkbox],input[type=search][type=radio],input[type=tel][type=checkbox],input[type=tel][type=radio],input[type=text][type=checkbox],input[type=text][type=radio],input[type=time][type=checkbox],input[type=time][type=radio],input[type=url][type=checkbox],input[type=url][type=radio],input[type=week][type=checkbox],input[type=week][type=radio],select[type=checkbox],select[type=radio],textarea[type=checkbox],textarea[type=radio]{padding:0}input[type=color].input-xs,input[type=date].input-xs,input[type=datetime-local].input-xs,input[type=email].input-xs,input[type=month].input-xs,input[type=number].input-xs,input[type=password].input-xs,input[type=search].input-xs,input[type=tel].input-xs,input[type=text].input-xs,input[type=time].input-xs,input[type=url].input-xs,input[type=week].input-xs,select.input-xs,textarea.input-xs{font-size:.7rem;height:1rem;line-height:1rem}input[type=color].input-sm,input[type=date].input-sm,input[type=datetime-local].input-sm,input[type=email].input-sm,input[type=month].input-sm,input[type=number].input-sm,input[type=password].input-sm,input[type=search].input-sm,input[type=tel].input-sm,input[type=text].input-sm,input[type=time].input-sm,input[type=url].input-sm,input[type=week].input-sm,select.input-sm,textarea.input-sm{font-size:.8rem;height:1.5rem;line-height:1.5rem}input[type=color].input-lg,input[type=date].input-lg,input[type=datetime-local].input-lg,input[type=email].input-lg,input[type=month].input-lg,input[type=number].input-lg,input[type=password].input-lg,input[type=search].input-lg,input[type=tel].input-lg,input[type=text].input-lg,input[type=time].input-lg,input[type=url].input-lg,input[type=week].input-lg,select.input-lg,textarea.input-lg{font-size:1.25rem;height:2.5rem;line-height:2.5rem}input[type=color].input-xl,input[type=date].input-xl,input[type=datetime-local].input-xl,input[type=email].input-xl,input[type=month].input-xl,input[type=number].input-xl,input[type=password].input-xl,input[type=search].input-xl,input[type=tel].input-xl,input[type=text].input-xl,input[type=time].input-xl,input[type=url].input-xl,input[type=week].input-xl,select.input-xl,textarea.input-xl{font-size:1.5rem;height:3rem;line-height:3rem}select{position:relative;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='41' height='26' viewBox='0 0 41 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 5.382l19.983 19.983L40.14 5.208 34.932 0 19.869 15.062 4.84.032z' fill-rule='evenodd'/%3E%3C/svg%3E");background-position:right .4rem center;background-repeat:no-repeat;background-size:.75rem;padding-top:0;padding-bottom:0;padding-right:1.5rem}textarea,textarea.input-lg,textarea.input-sm,textarea.input-xl,textarea.input-xs{height:auto;resize:vertical;line-height:1.5;white-space:normal}input[type=range]{-webkit-appearance:none;width:100%;height:2rem;line-height:2rem;vertical-align:middle}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:.5rem;cursor:pointer;background:#f2f2f2;border-radius:.25rem;border:none;-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(0,0,0,.05)}input[type=range]::-webkit-slider-thumb{border:none;width:1.25rem;height:1.25rem;border-radius:50%;background:#0074d9;cursor:pointer;-webkit-appearance:none;margin-top:-.375rem}input[type=range]:focus::-webkit-slider-runnable-track{background:#f2f2f2}input[type=range]:focus::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 3px rgba(0,116,217,.5);box-shadow:0 0 0 3px rgba(0,116,217,.5)}input[type=range]::-moz-range-track{width:100%;height:.5rem;cursor:pointer;background:#f2f2f2;border-radius:.25rem;border:none;box-shadow:inset 0 1px 0 rgba(0,0,0,.05)}input[type=range]::-moz-range-thumb{border:none;height:1.25rem;width:1.25rem;border-radius:50%;background:#0074d9;cursor:pointer}input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 3px rgba(0,116,217,.5)}input[type=range]::-ms-track{width:100%;height:.5rem;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#f2f2f2;border:none;border-radius:.25rem}input[type=range]::-ms-thumb{border:none;height:1.25rem;width:1.25rem;border-radius:50%;background:#0074d9;cursor:pointer;margin-top:-.25rem}input[type=range]:focus::-ms-thumb{box-shadow:0 0 0 3px rgba(0,116,217,.5)}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#f2f2f2}.input-group,.input-single{margin-bottom:1rem}.input-group{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.input-group>.button,.input-group>.dropdown .button,.input-group>.dropdown button,.input-group>button,.input-group>input{border-radius:0}.input-group>.button:first-child,.input-group>.dropdown:first-child .button,.input-group>.dropdown:first-child button,.input-group>button:first-child,.input-group>input:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.input-group>.button:last-child,.input-group>.dropdown:last-child .button,.input-group>.dropdown:last-child button,.input-group>button:last-child,.input-group>input:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.input-group>input+input{border-left-width:0}.input-group>input+input:focus{border-left-width:1px;margin-left:-1px}.input-group :focus{-webkit-transform:translateZ(0);transform:translateZ(0)}.input-addon{font-size:1rem;color:#aaa;height:2rem;line-height:2rem;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#f8f8f8;padding:0 .5rem;white-space:nowrap}.input-addon:first-child{border-left:1px solid #ddd;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.input-addon:last-child{border-right:1px solid #ddd;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.input-addon.input-addon-xs{font-size:.7rem;height:1rem;line-height:1rem}.input-addon.input-addon-sm{font-size:.8rem;height:1.5rem;line-height:1.5rem}.input-addon.input-addon-lg{font-size:1.25rem;height:2.5rem;line-height:2.5rem}.input-addon.input-addon-xl{font-size:1.5rem;height:3rem;line-height:3rem}.input-invalid label{color:#ff4136!important}.input-invalid input,.input-invalid select{color:#ff4136!important;border-color:#ff4136!important}.input-valid label{color:#2ecc40!important}.input-valid input,.input-valid select{color:#2ecc40!important;border-color:#2ecc40!important} -/*! Loaders */.loader{width:3rem;height:3rem;border-radius:50%;border:.25rem solid #cce7ff;border-top-color:#0074d9;border-left-color:#0074d9;display:inline-block;-webkit-animation:loader .75s linear infinite;animation:loader .75s linear infinite;margin:0 .5em;vertical-align:middle}.loader.loader-xs{width:1rem;height:1rem;border-width:.125rem}.loader.loader-sm{width:2rem;height:2rem;border-width:.16667rem}.loader.loader-lg{width:4rem;height:4rem;border-width:.375rem}.loader.loader-xl{width:5rem;height:5rem;border-width:.5rem}.loader.loader-secondary{border-color:#e6e6e6;border-top-color:#aaa;border-left-color:#aaa}.loader.loader-success{border-color:#d5f6d9;border-top-color:#2ecc40;border-left-color:#2ecc40}.loader.loader-info{border-color:#d6f5f5;border-top-color:#39cccc;border-left-color:#39cccc}.loader.loader-warning{border-color:#ffe4cc;border-top-color:#ff851b;border-left-color:#ff851b}.loader.loader-danger{border-color:#ffcfcc;border-top-color:#ff4136;border-left-color:#ff4136}.loader.loader-light{border-color:#e6e6e6;border-top-color:#fff;border-left-color:#fff}.loader.loader-dark{border-color:#e6e6e6;border-top-color:#111;border-left-color:#111}.loader-bg{position:relative}.loader-bg:after{content:"";position:absolute;top:calc(50% - 1.5rem);left:calc(50% - 1.5rem);width:3rem;height:3rem;border-radius:50%;border:.25rem solid #cce7ff;border-top-color:#0074d9;border-left-color:#0074d9;-webkit-animation:loader .75s linear infinite;animation:loader .75s linear infinite}.loader-bg.loader-bg-xs:after{top:calc(50% - .5rem);left:calc(50% - .5rem);width:1rem;height:1rem;border-width:.125rem}.loader-bg.loader-bg-sm:after{top:calc(50% - 1rem);left:calc(50% - 1rem);width:2rem;height:2rem;border-width:.16667rem}.loader-bg.loader-bg-lg:after{top:calc(50% - 2rem);left:calc(50% - 2rem);width:4rem;height:4rem;border-width:.375rem}.loader-bg.loader-bg-xl:after{top:calc(50% - 2.5rem);left:calc(50% - 2.5rem);width:5rem;height:5rem;border-width:.5rem}.loader-bg.loader-bg-secondary:after{border-color:#e6e6e6;border-top-color:#aaa;border-left-color:#aaa}.loader-bg.loader-bg-success:after{border-color:#d5f6d9;border-top-color:#2ecc40;border-left-color:#2ecc40}.loader-bg.loader-bg-info:after{border-color:#d6f5f5;border-top-color:#39cccc;border-left-color:#39cccc}.loader-bg.loader-bg-warning:after{border-color:#ffe4cc;border-top-color:#ff851b;border-left-color:#ff851b}.loader-bg.loader-bg-danger:after{border-color:#ffcfcc;border-top-color:#ff4136;border-left-color:#ff4136}.loader-bg.loader-bg-light:after{border-color:#e6e6e6;border-top-color:#fff;border-left-color:#fff}.loader-bg.loader-bg-dark:after{border-color:#e6e6e6;border-top-color:#111;border-left-color:#111}@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} +/*! Loaders */.loader{width:2rem;height:2rem;border-radius:50%;border:.25rem solid #cce7ff;border-top-color:#0074d9;border-left-color:#0074d9;display:inline-block;-webkit-animation:loader .75s linear infinite;animation:loader .75s linear infinite;margin:0 .5em;vertical-align:middle}.loader.loader-xs{width:1rem;height:1rem;border-width:.125rem}.loader.loader-sm{width:1.5rem;height:1.5rem;border-width:.16667rem}.loader.loader-lg{width:2.5rem;height:2.5rem;border-width:.375rem}.loader.loader-xl{width:3rem;height:3rem;border-width:.5rem}.loader.loader-secondary{border-color:#e6e6e6;border-top-color:#aaa;border-left-color:#aaa}.loader.loader-success{border-color:#d5f6d9;border-top-color:#2ecc40;border-left-color:#2ecc40}.loader.loader-info{border-color:#d6f5f5;border-top-color:#39cccc;border-left-color:#39cccc}.loader.loader-warning{border-color:#ffe4cc;border-top-color:#ff851b;border-left-color:#ff851b}.loader.loader-danger{border-color:#ffcfcc;border-top-color:#ff4136;border-left-color:#ff4136}.loader.loader-light{border-color:#e6e6e6;border-top-color:#fff;border-left-color:#fff}.loader.loader-dark{border-color:#e6e6e6;border-top-color:#111;border-left-color:#111}.loader-bg{position:relative}.loader-bg:after{content:"";position:absolute;top:calc(50% - 1rem);left:calc(50% - 1rem);width:2rem;height:2rem;border-radius:50%;border:.25rem solid #cce7ff;border-top-color:#0074d9;border-left-color:#0074d9;-webkit-animation:loader .75s linear infinite;animation:loader .75s linear infinite}.loader-bg.loader-bg-xs:after{top:calc(50% - .5rem);left:calc(50% - .5rem);width:1rem;height:1rem;border-width:.125rem}.loader-bg.loader-bg-sm:after{top:calc(50% - .75rem);left:calc(50% - .75rem);width:1.5rem;height:1.5rem;border-width:.16667rem}.loader-bg.loader-bg-lg:after{top:calc(50% - 1.25rem);left:calc(50% - 1.25rem);width:2.5rem;height:2.5rem;border-width:.375rem}.loader-bg.loader-bg-xl:after{top:calc(50% - 1.5rem);left:calc(50% - 1.5rem);width:3rem;height:3rem;border-width:.5rem}.loader-bg.loader-bg-secondary:after{border-color:#e6e6e6;border-top-color:#aaa;border-left-color:#aaa}.loader-bg.loader-bg-success:after{border-color:#d5f6d9;border-top-color:#2ecc40;border-left-color:#2ecc40}.loader-bg.loader-bg-info:after{border-color:#d6f5f5;border-top-color:#39cccc;border-left-color:#39cccc}.loader-bg.loader-bg-warning:after{border-color:#ffe4cc;border-top-color:#ff851b;border-left-color:#ff851b}.loader-bg.loader-bg-danger:after{border-color:#ffcfcc;border-top-color:#ff4136;border-left-color:#ff4136}.loader-bg.loader-bg-light:after{border-color:#e6e6e6;border-top-color:#fff;border-left-color:#fff}.loader-bg.loader-bg-dark:after{border-color:#e6e6e6;border-top-color:#111;border-left-color:#111}@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} /*! Progress Bars */.progress{position:relative;width:100%;height:2rem;line-height:2rem;font-size:1rem;background-color:#f2f2f2;border-radius:.25rem;display:block;overflow:hidden;margin-bottom:1rem;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.progress .progress-bar{position:absolute;top:0;left:0;width:0;height:100%;text-align:center;color:#fff;background-color:#0074d9;-webkit-transition:width .2s;transition:width .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.progress.progress-indeterminate .progress-bar{width:75%!important;-webkit-animation:progress-indeterminate ease-in-out 3s infinite;animation:progress-indeterminate ease-in-out 3s infinite}.progress.progress-xs{font-size:.7rem;height:1rem;line-height:1rem}.progress.progress-sm{font-size:.8rem;height:1.5rem;line-height:1.5rem}.progress.progress-lg{font-size:1.25rem;height:2.5rem;line-height:2.5rem}.progress.progress-xl{font-size:1.5rem;height:3rem;line-height:3rem}.progress.progress-secondary .progress-bar{background-color:#aaa}.progress.progress-success .progress-bar{background-color:#2ecc40}.progress.progress-info .progress-bar{background-color:#39cccc}.progress.progress-warning .progress-bar{background-color:#ff851b}.progress.progress-danger .progress-bar{background-color:#ff4136}.progress.progress-light{background-color:#111}.progress.progress-light .progress-bar{color:#111;background-color:#fff}.progress.progress-dark{background-color:#fff}.progress.progress-dark .progress-bar{color:#fff;background-color:#111}@-webkit-keyframes progress-indeterminate{0%{left:-65%}50%{left:90%}to{left:-65%}}@keyframes progress-indeterminate{0%{left:-65%}50%{left:90%}to{left:-65%}} diff --git a/source/css/loaders.css b/source/css/loaders.css index a5bdb48ad..8a7fb47b0 100644 --- a/source/css/loaders.css +++ b/source/css/loaders.css @@ -5,11 +5,11 @@ --loader-thickness-sm: calc(var(--loader-thickness) / 1.5); --loader-thickness-lg: calc(var(--loader-thickness) * 1.5); --loader-thickness-xl: calc(var(--loader-thickness) * 2); - --loader-size-xs: 1rem; - --loader-size-sm: 2rem; - --loader-size: 3rem; - --loader-size-lg: 4rem; - --loader-size-xl: 5rem; + --loader-size-xs: var(--input-height-xs); + --loader-size-sm: var(--input-height-sm); + --loader-size: var(--input-height); + --loader-size-lg: var(--input-height-lg); + --loader-size-xl: var(--input-height-xl); --loader-speed: 750ms; --loader-margin-x: .5em; --loader-margin-y: 0;