From 4136ce784ae23db5e56daef9104031471f3dffa7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 23 Aug 2017 15:15:31 -0400 Subject: [PATCH] Add input-addon vars --- dist/shoelace.css | 6 +++--- source/css/forms.css | 7 +++++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/dist/shoelace.css b/dist/shoelace.css index c83df4faf..dba373f70 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -10,7 +10,7 @@ /*! Content */html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}body{background:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;font-weight:400;font-size:1rem;color:#111;line-height:1.5}a{text-decoration:none}a,a:hover{color:#0074d9}a:hover{text-decoration:underline}abbr[title]{text-decoration:none;border-bottom:2px dashed currentcolor}b,strong{font-weight:700}blockquote{font-size:1.25rem;border-left:.4rem solid #ddd;padding:.5rem .5rem .5rem 1rem;margin-bottom:1.5rem;margin-left:0}blockquote :last-child{margin-bottom:0}code{font-family:Menlo,Consolas,DejaVu Sans Mono,monospace;font-size:90%;color:#111;background-color:#f2f2f2;border-radius:.25rem;padding:.2rem .4rem}del{color:#ff4136}figure{margin-top:0;margin-bottom:1.5rem}h1,h2,h3,h4,h5,h6{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;font-weight:300;line-height:1.1;color:inherit;margin-top:0;margin-bottom:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}hr{border:none;border-top:1px solid #ddd;margin:2rem 0}img{height:auto;max-width:100%;vertical-align:middle}ins{color:#2ecc40}kbd{font-family:Menlo,Consolas,DejaVu Sans Mono,monospace;font-size:90%;color:#fff;background-color:#111;border-radius:.25rem}kbd,mark{padding:.2rem .4rem}mark{color:inherit;background-color:#ffdc00}p,pre{margin-top:0;margin-bottom:1.5rem}pre{max-height:none;overflow-y:auto;font-family:Menlo,Consolas,DejaVu Sans Mono,monospace;color:#111;background-color:#f2f2f2;border-radius:.25rem;padding:1rem}small{font-size:.875rem}dl{margin-bottom:1.5rem}dt{font-weight:700}dd{margin-left:0}dd,ol,ul{margin-bottom:1.5rem}ol,ul{line-height:1.5;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}::-webkit-input-placeholder{color:#aaa}:-ms-input-placeholder{color:#aaa}::placeholder{color:#aaa}::-moz-selection{background-color:#0074d9;color:#fff;text-shadow:none!important}::selection{background-color:#0074d9;color:#fff;text-shadow:none!important} -/*! Alerts */.alert{color:#004480;background-color:#bfdcf6;border:1px solid #b5d1ea;border-radius:.25rem;padding:1rem;margin-top:0;margin-bottom:1.5rem}.alert:empty{display:none}.alert a{color:currentcolor;font-weight:700}.alert :last-child{margin-bottom:0}.alert.alert-secondary{color:#404040;background-color:#eaeaea;border-color:#dedede}.alert.alert-info{color:#1a6565;background-color:#cef2f2;border-color:#c4e6e6}.alert.alert-success{color:#186821;background-color:#cbf2cf;border-color:#c1e6c5}.alert.alert-warning{color:#803c00;background-color:#ffe1c6;border-color:#f2d6bc}.alert.alert-danger{color:#800600;background-color:#ffd0cd;border-color:#f2c6c3}.alert.alert-light{color:gray;background-color:#fff;border-color:#f2f2f2}.alert.alert-dark{color:#404040;background-color:#c4c4c4;border-color:#bababa} +/*! Alerts */.alert{color:#004480;background-color:#bfdcf6;border:1px solid #b5d1ea;border-radius:.25rem;padding:1rem;margin-top:0;margin-bottom:1.5rem}.alert:empty{display:none}.alert a{color:currentcolor;font-weight:700}.alert>:last-child{margin-bottom:0}.alert.alert-secondary{color:#404040;background-color:#eaeaea;border-color:#dedede}.alert.alert-info{color:#1a6565;background-color:#cef2f2;border-color:#c4e6e6}.alert.alert-success{color:#186821;background-color:#cbf2cf;border-color:#c1e6c5}.alert.alert-warning{color:#803c00;background-color:#ffe1c6;border-color:#f2d6bc}.alert.alert-danger{color:#800600;background-color:#ffd0cd;border-color:#f2c6c3}.alert.alert-light{color:gray;background-color:#fff;border-color:#f2f2f2}.alert.alert-dark{color:#404040;background-color:#c4c4c4;border-color:#bababa} /*! Badges */.badge{font-size:.8em;color:#fff;background-color:#0074d9;border-radius:1em;padding:.2em .6em;vertical-align:baseline;display:inline-block;-webkit-transition:all .1s;transition:all .1s}.badge:empty{display:none}.badge.badge-secondary{color:#fff;background-color:#aaa}.badge.badge-success{color:#fff;background-color:#2ecc40}.badge.badge-info{color:#fff;background-color:#39cccc}.badge.badge-warning{color:#fff;background-color:#ff851b}.badge.badge-danger{color:#fff;background-color:#ff4136}.badge.badge-light{color:#111;background-color:#fff}.badge.badge-dark{color:#fff;background-color:#111}a.badge:hover{color:#fff;background-color:#0068c3;text-decoration:none}a.badge:focus{outline:none;-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}a.badge.badge-secondary:hover{color:#fff;background-color:#999}a.badge.badge-secondary:focus{-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}a.badge.badge-success:hover{color:#fff;background-color:#29b83a}a.badge.badge-success:focus{-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}a.badge.badge-info:hover{color:#fff;background-color:#33b8b8}a.badge.badge-info:focus{-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}a.badge.badge-warning:hover{color:#fff;background-color:#e67818}a.badge.badge-warning:focus{-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}a.badge.badge-danger:hover{color:#fff;background-color:#e63b31}a.badge.badge-danger:focus{-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}a.badge.badge-light:hover{color:#111;background-color:#e6e6e6}a.badge.badge-light:focus{-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.5);box-shadow:0 0 0 2px hsla(0,0%,100%,.5)}a.badge.badge-dark:hover{color:#fff;background-color:#292929}a.badge.badge-dark:focus{-webkit-box-shadow:0 0 0 2px hsla(0,0%,7%,.5);box-shadow:0 0 0 2px hsla(0,0%,7%,.5)} @@ -18,7 +18,7 @@ /*! Dropdowns */.dropdown{position:relative;display:inline-block}.dropdown .dropdown-trigger:after{content:"▼";font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;font-size:.6em;vertical-align:middle;margin-left:.5em;display:inline-block;-webkit-transform:scaleY(.75);transform:scaleY(.75);margin-top:-.2em}.dropdown.dropdown-top .dropdown-trigger:after{-webkit-transform:scaleY(.75) rotate(180deg);transform:scaleY(.75) rotate(180deg)}.dropdown .dropdown-menu{position:absolute;top:calc(100% + 1px);left:0;z-index:100;min-width:10rem;max-width:25rem;max-height:none;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);box-shadow:0 1px 0 rgba(0,0,0,.05);display:none;padding:.25rem 0;overflow-y:auto;-webkit-transform:translateZ(0);transform:translateZ(0)}.dropdown .dropdown-menu a{position:relative;color:#111;text-decoration:none;padding:.25rem calc(1rem + .5em);display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown .dropdown-menu a:focus:not(.disabled){outline:none;color:#111;background-color:#f2f2f2}.dropdown .dropdown-menu a:hover:not(.disabled){color:#fff;background-color:#0074d9}.dropdown .dropdown-menu a.disabled{outline:none;cursor:not-allowed;opacity:.5}.dropdown .dropdown-menu a.checked:before{position:absolute;left:calc(.5rem - .1em);content:"✓";font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;font-weight:600}.dropdown .dropdown-menu hr{width:100%;border-top:1px solid #ddd;margin:.25rem 0}.dropdown.dropdown-top .dropdown-menu{top:auto;bottom:calc(100% + 1px)}.dropdown.dropdown-left .dropdown-menu{left:auto;right:0}.dropdown.dropdown.active .dropdown-menu{display:block} -/*! Forms */fieldset{border:1px solid #ddd;border-radius:.25rem;padding:1.5rem 2rem;margin-bottom:1.5rem}fieldset legend{font-weight:700;padding:0 .25rem}fieldset :last-child{margin-bottom:0}label{color:inherit;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 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);background-color:#fff;height:2.25rem;line-height:2.25rem;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:1.25rem;line-height:1.25rem}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.75rem;line-height:1.75rem}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.75rem;line-height:2.75rem}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:3.25rem;line-height:3.25rem}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:2.25rem;line-height:2.25rem;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 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px 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 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px 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 1px 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 2px 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 2px rgba(0,116,217,.5)}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#f2f2f2}.input-field,.input-group{margin-bottom:1.5rem}.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:2.25rem;line-height:2.25rem;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:1.25rem;line-height:1.25rem}.input-addon.input-addon-sm{font-size:.8rem;height:1.75rem;line-height:1.75rem}.input-addon.input-addon-lg{font-size:1.25rem;height:2.75rem;line-height:2.75rem}.input-addon.input-addon-xl{font-size:1.5rem;height:3.25rem;line-height:3.25rem}.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} +/*! Forms */fieldset{border:1px solid #ddd;border-radius:.25rem;padding:1.5rem 2rem;margin-bottom:1.5rem}fieldset legend{font-weight:700;padding:0 .25rem}fieldset>:last-child{margin-bottom:0}label{color:inherit;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 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);background-color:#fff;height:2.25rem;line-height:2.25rem;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:1.25rem;line-height:1.25rem}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.75rem;line-height:1.75rem}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.75rem;line-height:2.75rem}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:3.25rem;line-height:3.25rem}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:2.25rem;line-height:2.25rem;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 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px 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 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px 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 1px 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 2px 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 2px rgba(0,116,217,.5)}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#f2f2f2}.input-field,.input-group{margin-bottom:1.5rem}.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;height:2.25rem;line-height:2.25rem;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#f2f2f2;color:#aaa;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:1.25rem;line-height:1.25rem}.input-addon.input-addon-sm{font-size:.8rem;height:1.75rem;line-height:1.75rem}.input-addon.input-addon-lg{font-size:1.25rem;height:2.75rem;line-height:2.75rem}.input-addon.input-addon-xl{font-size:1.5rem;height:3.25rem;line-height:3.25rem}.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:2.25rem;height:2.25rem;border-radius:50%;border:.2rem 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:1.25rem;height:1.25rem;border-width:.1rem}.loader.loader-sm{width:1.75rem;height:1.75rem;border-width:.13333rem}.loader.loader-lg{width:2.75rem;height:2.75rem;border-width:.3rem}.loader.loader-xl{width:3.25rem;height:3.25rem;border-width:.4rem}.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.125rem);left:calc(50% - 1.125rem);width:2.25rem;height:2.25rem;border-radius:50%;border:.2rem 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% - .625rem);left:calc(50% - .625rem);width:1.25rem;height:1.25rem;border-width:.1rem}.loader-bg.loader-bg-sm:after{top:calc(50% - .875rem);left:calc(50% - .875rem);width:1.75rem;height:1.75rem;border-width:.13333rem}.loader-bg.loader-bg-lg:after{top:calc(50% - 1.375rem);left:calc(50% - 1.375rem);width:2.75rem;height:2.75rem;border-width:.3rem}.loader-bg.loader-bg-xl:after{top:calc(50% - 1.625rem);left:calc(50% - 1.625rem);width:3.25rem;height:3.25rem;border-width:.4rem}.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)}} @@ -26,7 +26,7 @@ /*! Switches */.switch{font-size:1rem;position:relative}.switch input{position:absolute;height:1px;width:1px;background:none;border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;padding:0}.switch input+label{position:relative;min-width:3.375rem;border-radius:1.6875rem;height:1.6875rem;line-height:1.6875rem;display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;text-indent:3.875rem}.switch input+label:after,.switch input+label:before{content:"";position:absolute;top:0;left:0;width:3.375rem;bottom:0;display:block}.switch input+label:before{right:0;background-color:#ddd;border-radius:1.6875rem;-webkit-transition:all .1s;transition:all .1s}.switch input+label:after{top:2px;left:2px;width:calc(1.6875rem - 4px);height:calc(1.6875rem - 4px);border-radius:50%;background-color:#fff;-webkit-transition:margin .1s;transition:margin .1s}.switch input:checked+label:before{background-color:#0074d9}.switch input:checked+label:after{margin-left:1.6875rem}.switch input:focus+label:before{outline:none;-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}.switch input:disabled+label{opacity:.5;cursor:not-allowed}.switch+.switch{margin-left:1rem}.switch.switch-xs{font-size:.7rem}.switch.switch-xs input+label{min-width:1.875rem;height:.9375rem;line-height:.9375rem;text-indent:2.375rem}.switch.switch-xs input+label:after,.switch.switch-xs input+label:before{width:1.875rem}.switch.switch-xs input+label:after{width:calc(.9375rem - 4px);height:calc(.9375rem - 4px)}.switch.switch-xs input:checked+label:after{margin-left:.9375rem}.switch.switch-sm{font-size:.8rem}.switch.switch-sm input+label{min-width:2.625rem;height:1.3125rem;line-height:1.3125rem;text-indent:3.125rem}.switch.switch-sm input+label:after,.switch.switch-sm input+label:before{width:2.625rem}.switch.switch-sm input+label:after{width:calc(1.3125rem - 4px);height:calc(1.3125rem - 4px)}.switch.switch-sm input:checked+label:after{margin-left:1.3125rem}.switch.switch-lg{font-size:1.25rem}.switch.switch-lg input+label{min-width:4.125rem;height:2.0625rem;line-height:2.0625rem;text-indent:4.625rem}.switch.switch-lg input+label:after,.switch.switch-lg input+label:before{width:4.125rem}.switch.switch-lg input+label:after{width:calc(2.0625rem - 4px);height:calc(2.0625rem - 4px)}.switch.switch-lg input:checked+label:after{margin-left:2.0625rem}.switch.switch-xl{font-size:1.5rem}.switch.switch-xl input+label{min-width:4.875rem;height:2.4375rem;line-height:2.4375rem;text-indent:5.375rem}.switch.switch-xl input+label:after,.switch.switch-xl input+label:before{width:4.875rem}.switch.switch-xl input+label:after{width:calc(2.4375rem - 4px);height:calc(2.4375rem - 4px)}.switch.switch-xl input:checked+label:after{margin-left:2.4375rem}.switch.switch-secondary input{background-color:#ddd}.switch.switch-secondary input+label:after{background-color:#fff}.switch.switch-secondary input+label:before{background-color:#ddd}.switch.switch-secondary input:checked+label:before{background-color:#aaa}.switch.switch-secondary input:focus+label:before{-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}.switch.switch-success input{background-color:#ddd}.switch.switch-success input+label:after{background-color:#fff}.switch.switch-success input+label:before{background-color:#ddd}.switch.switch-success input:checked+label:before{background-color:#2ecc40}.switch.switch-success input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}.switch.switch-info input{background-color:#ddd}.switch.switch-info input+label:after{background-color:#fff}.switch.switch-info input+label:before{background-color:#ddd}.switch.switch-info input:checked+label:before{background-color:#39cccc}.switch.switch-info input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}.switch.switch-warning input{background-color:#ddd}.switch.switch-warning input+label:after{background-color:#fff}.switch.switch-warning input+label:before{background-color:#ddd}.switch.switch-warning input:checked+label:before{background-color:#ff851b}.switch.switch-warning input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}.switch.switch-danger input{background-color:#ddd}.switch.switch-danger input+label:after{background-color:#fff}.switch.switch-danger input+label:before{background-color:#ddd}.switch.switch-danger input:checked+label:before{background-color:#ff4136}.switch.switch-danger input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}.switch.switch-light input{background-color:#e6e6e6}.switch.switch-light input+label:after{background-color:#fff}.switch.switch-light input+label:before{background-color:#e6e6e6}.switch.switch-light input:checked+label:before{background-color:#bfbfbf}.switch.switch-light input:focus+label:before{-webkit-box-shadow:0 0 0 2px hsla(0,0%,75%,.5);box-shadow:0 0 0 2px hsla(0,0%,75%,.5)}.switch.switch-dark input{background-color:#4d4d4d}.switch.switch-dark input+label:after{background-color:#fff}.switch.switch-dark input+label:before{background-color:#4d4d4d}.switch.switch-dark input:checked+label:before{background-color:#292929}.switch.switch-dark input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(41,41,41,.5);box-shadow:0 0 0 2px rgba(41,41,41,.5)} -/*! Tabs */.tabs{width:100%}.tabs,.tabs .tabs-nav{margin-bottom:1.5rem}.tabs .tabs-nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tabs .tabs-nav a{border-radius:.25rem;padding:.5rem 1rem;display:inline-block;-webkit-transition:box-shadow .1s;transition:box-shadow .1s}.tabs .tabs-nav a,.tabs .tabs-nav a:hover{color:#0074d9;text-decoration:none;background-color:#fff}.tabs .tabs-nav a:focus{outline:none}.tabs .tabs-nav a:focus:not(.disabled){-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5);-webkit-transform:translateZ(0);transform:translateZ(0)}.tabs .tabs-nav a.active{color:#fff;background-color:#0074d9;cursor:default}.tabs .tabs-nav a.disabled{color:#aaa;background-color:#fff;cursor:not-allowed}.tabs .tabs-pane{border:1px solid #ddd;border-radius:.25rem;padding:1rem}.tabs .tabs-pane:not(.active){display:none}.tabs .tabs-pane :last-child{margin-bottom:0} +/*! Tabs */.tabs{width:100%}.tabs,.tabs .tabs-nav{margin-bottom:1.5rem}.tabs .tabs-nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tabs .tabs-nav a{border-radius:.25rem;padding:.5rem 1rem;display:inline-block;-webkit-transition:box-shadow .1s;transition:box-shadow .1s}.tabs .tabs-nav a,.tabs .tabs-nav a:hover{color:#0074d9;text-decoration:none;background-color:#fff}.tabs .tabs-nav a:focus{outline:none}.tabs .tabs-nav a:focus:not(.disabled){-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5);-webkit-transform:translateZ(0);transform:translateZ(0)}.tabs .tabs-nav a.active{color:#fff;background-color:#0074d9;cursor:default}.tabs .tabs-nav a.disabled{color:#aaa;background-color:#fff;cursor:not-allowed}.tabs .tabs-pane{border:1px solid #ddd;border-radius:.25rem;padding:1rem}.tabs .tabs-pane:not(.active){display:none}.tabs .tabs-pane>:last-child{margin-bottom:0} /*! Tables */table{width:100%;background-color:#fff;border-collapse:collapse;margin-bottom:1.5rem}table caption{caption-side:bottom;font-size:.875rem;color:#aaa;text-align:center;padding-top:.5rem}table th{text-align:left;background-color:transparent;border-bottom:2px solid #ddd;padding:.5rem .75rem}table td{border-bottom:1px solid #ddd;padding:.5rem .75rem}table.table-bordered,table.table-bordered td{border:1px solid #ddd}table.table-hoverable tbody tr:hover td{color:#fff;background-color:#0074d9}table.table-striped tr:nth-child(odd) td{background-color:#f2f2f2} diff --git a/source/css/forms.css b/source/css/forms.css index 460d6d01a..dce497a5d 100644 --- a/source/css/forms.css +++ b/source/css/forms.css @@ -23,6 +23,9 @@ --input-focus-width: 2px; --input-speed: var(--component-speed); + --input-addon-bg-color: var(--component-bg-color); + --input-addon-color: var(--state-secondary); + --input-range-track-height: .5rem; --input-range-track-color: var(--component-bg-color); --input-range-track-box-shadow: var(--component-box-shadow-inner); @@ -355,12 +358,12 @@ input[type="range"] { /* Input addons */ .input-addon { font-size: var(--input-font-size); - color: var(--state-secondary); height: var(--input-height); line-height: var(--input-height); border-top: solid var(--input-border-width) var(--input-border-color); border-bottom: solid var(--input-border-width) var(--input-border-color); - background: #f8f8f8; + background: var(--input-addon-bg-color); + color: var(--input-addon-color); padding: 0 .5rem; white-space: nowrap;