diff --git a/build/dist/blip-toolkit.css b/build/dist/blip-toolkit.css index 0e58d7e..372d01c 100644 --- a/build/dist/blip-toolkit.css +++ b/build/dist/blip-toolkit.css @@ -1 +1 @@ -@font-face{font-family:Nunito;font-style:normal;font-weight:400;src:local("Nunito Regular"),local("Nunito-Regular"),url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIOuaBXso.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:400;src:local("Nunito Regular"),local("Nunito-Regular"),url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIO-aBXso.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:400;src:local("Nunito Regular"),local("Nunito-Regular"),url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofINeaB.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Nunito;font-style:normal;font-weight:600;src:local("Nunito SemiBold"),local("Nunito-SemiBold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofA6sKUbuvISTs.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:600;src:local("Nunito SemiBold"),local("Nunito-SemiBold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofA6sKUb-vISTs.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:600;src:local("Nunito SemiBold"),local("Nunito-SemiBold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofA6sKUYevI.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Nunito;font-style:normal;font-weight:700;src:local("Nunito Bold"),local("Nunito-Bold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofAjsOUbuvISTs.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:700;src:local("Nunito Bold"),local("Nunito-Bold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofAjsOUb-vISTs.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:700;src:local("Nunito Bold"),local("Nunito-Bold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofAjsOUYevI.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}.bp-bg-bot{background-color:#2cc3d5}.bp-bg-blip-light{background-color:#0cc8cc}.bp-bg-blip-dark{background-color:#15afb2}.bp-bg-warning{background-color:#f76556}.bp-bg-delete{background-color:#fb7a6d}.bp-bg-delete-darken{background-color:b-darken(#fb7a6d)}.bp-bg-true{background-color:#4dcb7b}.bp-bg-true-darken{background-color:b-darken(#4dcb7b)}.bp-bg-city{background-color:#52636c}.bp-bg-city-darken{background-color:b-darken(#52636c)}.bp-bg-city-lighten{background-color:b-lighten(#52636c)}.bp-bg-rooftop{background-color:#738192}.bp-bg-desk{background-color:#607b99}.bp-bg-cloud{background-color:#8ca0b3}.bp-bg-silver{background-color:#94a3ab}.bp-bg-time{background-color:#a8bfc4}.bp-bg-breeze{background-color:#c9dfe4}.bp-bg-sky{background-color:#daf2f4}.bp-bg-offwhite{background-color:#eaeeee}.bp-bg-white{background-color:#fff}.bp-bg-black{background-color:#000}.bp-bg-gradient{background-color:linear-gradient(180deg,#f9fbfc,#ecf1f3)}.bp-bc-bot{border-color:#2cc3d5}.bp-bc-blip-light{border-color:#0cc8cc}.bp-bc-blip-dark{border-color:#15afb2}.bp-bc-warning{border-color:#f76556}.bp-bc-delete{border-color:#fb7a6d}.bp-bc-delete-dark{border-color:#fa4d3b}.bp-bc-true{border-color:#4dcb7b}.bp-bc-true-dark{border-color:#34b162}.bp-bc-city{border-color:#52636c}.bp-bc-city-dark{border-color:#3c484f}.bp-bc-city-light{border-color:#687e89}.bp-bc-rooftop{border-color:#738192}.bp-bc-desk{border-color:#607b99}.bp-bc-cloud{border-color:#8ca0b3}.bp-bc-silver{border-color:#94a3ab}.bp-bc-time{border-color:#a8bfc4}.bp-bc-breeze{border-color:#c9dfe4}.bp-bc-sky{border-color:#daf2f4}.bp-bc-offwhite{border-color:#eaeeee}.bp-bc-white{border-color:#fff}.bp-bc-black{border-color:#000}.bp-c-bot{color:#2cc3d5}.bp-c-blip-light{color:#0cc8cc}.bp-c-blip-dark{color:#15afb2}.bp-c-warning{color:#f76556}.bp-c-delete{color:#fb7a6d}.bp-c-delete-dark{color:#fa4d3b}.bp-c-true{color:#4dcb7b}.bp-c-true-dark{color:#34b162}.bp-c-city{color:#52636c}.bp-c-city-dark{color:#3c484f}.bp-c-city-light{color:#687e89}.bp-c-rooftop{color:#738192}.bp-c-desk{color:#607b99}.bp-c-cloud{color:#8ca0b3}.bp-c-silver{color:#94a3ab}.bp-c-time{color:#a8bfc4}.bp-c-breeze{color:#c9dfe4}.bp-c-sky{color:#daf2f4}.bp-c-offwhite{color:#eaeeee}.bp-c-white{color:#fff}.bp-c-black{color:#000}.bp-ff-nunito{font-family:Nunito,Helvetica,sans-serif}.bp-fs-1{font-size:3rem}.bp-fs-2{font-size:2rem}.bp-fs-3{font-size:1.5rem}.bp-fs-4{font-size:1.25rem}.bp-fs-5{font-size:1rem}.bp-fs-6{font-size:.875rem}.bp-fs-7{font-size:.75rem}.bp-fs-8{font-size:.625rem}.bp-fw-regular{font-weight:400}.bp-fw-bold{font-weight:600}.bp-fw-extra-bold{font-weight:700}.bp-btn{display:inline-block;color:#fff;background-color:#c9dfe4;-webkit-appearance:button;-moz-appearance:button;cursor:pointer;min-width:10rem;height:2.625rem;line-height:2.375rem;margin:0;padding:0 1.25rem;border:none;border-radius:3px;overflow:hidden;vertical-align:middle;text-align:center;white-space:nowrap;font-family:Nunito,Helvetica,sans-serif;font-size:.875rem;text-decoration:none;font-weight:600;outline:none}.bp-btn:hover{background-color:#a7cbd3}.bp-btn>*{vertical-align:middle}.bp-btn:active,.bp-btn:focus,.bp-btn:hover,.bp-btn:visited{outline:none;text-decoration:none}.bp-btn:disabled{cursor:default;background-color:#c9dfe4;color:#fff;border:none}.bp-btn.bp-btn--flat,.bp-btn.bp-btn--flat:disabled{border:2px solid;background-color:transparent}.bp-btn.bp-btn--flat.bp-btn--flat{color:#000;background-color:transparent;border-color:#c9dfe4}.bp-btn.bp-btn--flat.bp-btn--flat:hover{background-color:transparent;border-color:#a7cbd3;color:#000}.bp-btn.bp-btn--c-black,.bp-btn.bp-btn--c-black:hover{color:#000}.bp-btn.bp-btn--c-white{color:#fff}.bp-btn.bp-btn--c-white:hover{color:#e6e6e6}.bp-btn.bp-btn--bot{color:#fff;background-color:#2cc3d5}.bp-btn.bp-btn--bot:hover{background-color:#229dac}.bp-btn.bp-btn--bot.bp-btn--flat{color:#2cc3d5;background-color:transparent;border-color:#2cc3d5}.bp-btn.bp-btn--bot.bp-btn--flat:hover{background-color:transparent;border-color:#229dac;color:#229dac}.bp-btn.bp-btn--blip-light{color:#fff;background-color:#0cc8cc}.bp-btn.bp-btn--blip-light:hover{background-color:#09999c}.bp-btn.bp-btn--blip-light.bp-btn--flat{color:#0cc8cc;background-color:transparent;border-color:#0cc8cc}.bp-btn.bp-btn--blip-light.bp-btn--flat:hover{background-color:transparent;border-color:#09999c;color:#09999c}.bp-btn.bp-btn--blip-dark{color:#fff;background-color:#15afb2}.bp-btn.bp-btn--blip-dark:hover{background-color:#108284}.bp-btn.bp-btn--blip-dark.bp-btn--flat{color:#15afb2;background-color:transparent;border-color:#15afb2}.bp-btn.bp-btn--blip-dark.bp-btn--flat:hover{background-color:transparent;border-color:#108284;color:#108284}.bp-btn.bp-btn--true{color:#fff;background-color:#4dcb7b}.bp-btn.bp-btn--true:hover{background-color:#34b162}.bp-btn.bp-btn--true.bp-btn--flat{color:#4dcb7b;background-color:transparent;border-color:#4dcb7b}.bp-btn.bp-btn--true.bp-btn--flat:hover{background-color:transparent;border-color:#34b162;color:#34b162}.bp-btn.bp-btn--delete{color:#fff;background-color:#fb7a6d}.bp-btn.bp-btn--delete:hover{background-color:#fa4d3b}.bp-btn.bp-btn--delete.bp-btn--flat{color:#fb7a6d;background-color:transparent;border-color:#fb7a6d}.bp-btn.bp-btn--delete.bp-btn--flat:hover{background-color:transparent;border-color:#fa4d3b;color:#fa4d3b}.bp-btn.bp-btn--warning{color:#fff;background-color:#f76556}.bp-btn.bp-btn--warning:hover{background-color:#f53925}.bp-btn.bp-btn--warning.bp-btn--flat{color:#f76556;background-color:transparent;border-color:#f76556}.bp-btn.bp-btn--warning.bp-btn--flat:hover{background-color:transparent;border-color:#f53925;color:#f53925}.bp-dropdown{position:absolute;display:inline-block;z-index:100;min-width:3.125rem;min-height:1.125rem;margin-top:.3125rem;padding:.625rem 0;top:130%;background:#fff;border-radius:2px;transition:.4s;box-shadow:0 1px 6px 0 rgba(0,60,128,.14);-o-box-shadow:0 1px 6px 0 rgba(0,60,128,.14);-webkit-box-shadow:0 1px 6px 0 rgba(0,60,128,.14);-moz-box-shadow:0 1px 6px 0 rgba(0,60,128,.14)}.bp-dropdown::-webkit-scrollbar{width:.375rem;height:.375rem}.bp-dropdown::-webkit-scrollbar-track{background:none}.bp-dropdown::-webkit-scrollbar-thumb{background-color:#c9dfe4}.bp-dropdown:before{position:absolute;content:" ";width:.9375rem;height:.9375rem;top:-8px;background:#fff;transform:rotate(45deg);box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1);-o-box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1);-webkit-box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1);-moz-box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1)}.bp-dropdown.bp-dropdown--right{right:-10px}.bp-dropdown.bp-dropdown--right:before{right:10px}.bp-dropdown.bp-dropdown--left{left:-10px}.bp-dropdown.bp-dropdown--left:before{left:10px}.bp-dropdown.bp-dropdown--show{opacity:1;visibility:visible}.bp-dropdown.bp-dropdown--hide{opacity:0;visibility:hidden}.bp-input,.bp-input[disabled],.bp-input[readonly],.bp-input[type=email],.bp-input[type=email][disabled],.bp-input[type=email][readonly],.bp-input[type=number],.bp-input[type=number][disabled],.bp-input[type=number][readonly],.bp-input[type=password],.bp-input[type=password][disabled],.bp-input[type=password][readonly],.bp-input[type=search],.bp-input[type=search][disabled],.bp-input[type=search][readonly],.bp-input[type=tel],.bp-input[type=tel][disabled],.bp-input[type=tel][readonly],.bp-input[type=text],.bp-input[type=text][disabled],.bp-input[type=text][readonly],.bp-input[type=url],.bp-input[type=url][disabled],.bp-input[type=url][readonly]{border:none;font-size:.875rem;background:transparent;width:90%;height:auto;padding:0}.bp-input::-webkit-input-placeholder,.bp-input[disabled]::-webkit-input-placeholder,.bp-input[readonly]::-webkit-input-placeholder,.bp-input[type=email]::-webkit-input-placeholder,.bp-input[type=email][disabled]::-webkit-input-placeholder,.bp-input[type=email][readonly]::-webkit-input-placeholder,.bp-input[type=number]::-webkit-input-placeholder,.bp-input[type=number][disabled]::-webkit-input-placeholder,.bp-input[type=number][readonly]::-webkit-input-placeholder,.bp-input[type=password]::-webkit-input-placeholder,.bp-input[type=password][disabled]::-webkit-input-placeholder,.bp-input[type=password][readonly]::-webkit-input-placeholder,.bp-input[type=search]::-webkit-input-placeholder,.bp-input[type=search][disabled]::-webkit-input-placeholder,.bp-input[type=search][readonly]::-webkit-input-placeholder,.bp-input[type=tel]::-webkit-input-placeholder,.bp-input[type=tel][disabled]::-webkit-input-placeholder,.bp-input[type=tel][readonly]::-webkit-input-placeholder,.bp-input[type=text]::-webkit-input-placeholder,.bp-input[type=text][disabled]::-webkit-input-placeholder,.bp-input[type=text][readonly]::-webkit-input-placeholder,.bp-input[type=url]::-webkit-input-placeholder,.bp-input[type=url][disabled]::-webkit-input-placeholder,.bp-input[type=url][readonly]::-webkit-input-placeholder{color:#8ca0b3}.bp-input::-moz-placeholder,.bp-input[disabled]::-moz-placeholder,.bp-input[readonly]::-moz-placeholder,.bp-input[type=email]::-moz-placeholder,.bp-input[type=email][disabled]::-moz-placeholder,.bp-input[type=email][readonly]::-moz-placeholder,.bp-input[type=number]::-moz-placeholder,.bp-input[type=number][disabled]::-moz-placeholder,.bp-input[type=number][readonly]::-moz-placeholder,.bp-input[type=password]::-moz-placeholder,.bp-input[type=password][disabled]::-moz-placeholder,.bp-input[type=password][readonly]::-moz-placeholder,.bp-input[type=search]::-moz-placeholder,.bp-input[type=search][disabled]::-moz-placeholder,.bp-input[type=search][readonly]::-moz-placeholder,.bp-input[type=tel]::-moz-placeholder,.bp-input[type=tel][disabled]::-moz-placeholder,.bp-input[type=tel][readonly]::-moz-placeholder,.bp-input[type=text]::-moz-placeholder,.bp-input[type=text][disabled]::-moz-placeholder,.bp-input[type=text][readonly]::-moz-placeholder,.bp-input[type=url]::-moz-placeholder,.bp-input[type=url][disabled]::-moz-placeholder,.bp-input[type=url][readonly]::-moz-placeholder{color:#8ca0b3}.bp-input:-ms-input-placeholder,.bp-input[disabled]:-ms-input-placeholder,.bp-input[readonly]:-ms-input-placeholder,.bp-input[type=email]:-ms-input-placeholder,.bp-input[type=email][disabled]:-ms-input-placeholder,.bp-input[type=email][readonly]:-ms-input-placeholder,.bp-input[type=number]:-ms-input-placeholder,.bp-input[type=number][disabled]:-ms-input-placeholder,.bp-input[type=number][readonly]:-ms-input-placeholder,.bp-input[type=password]:-ms-input-placeholder,.bp-input[type=password][disabled]:-ms-input-placeholder,.bp-input[type=password][readonly]:-ms-input-placeholder,.bp-input[type=search]:-ms-input-placeholder,.bp-input[type=search][disabled]:-ms-input-placeholder,.bp-input[type=search][readonly]:-ms-input-placeholder,.bp-input[type=tel]:-ms-input-placeholder,.bp-input[type=tel][disabled]:-ms-input-placeholder,.bp-input[type=tel][readonly]:-ms-input-placeholder,.bp-input[type=text]:-ms-input-placeholder,.bp-input[type=text][disabled]:-ms-input-placeholder,.bp-input[type=text][readonly]:-ms-input-placeholder,.bp-input[type=url]:-ms-input-placeholder,.bp-input[type=url][disabled]:-ms-input-placeholder,.bp-input[type=url][readonly]:-ms-input-placeholder{color:#8ca0b3}.bp-input:-moz-placeholder,.bp-input[disabled]:-moz-placeholder,.bp-input[readonly]:-moz-placeholder,.bp-input[type=email]:-moz-placeholder,.bp-input[type=email][disabled]:-moz-placeholder,.bp-input[type=email][readonly]:-moz-placeholder,.bp-input[type=number]:-moz-placeholder,.bp-input[type=number][disabled]:-moz-placeholder,.bp-input[type=number][readonly]:-moz-placeholder,.bp-input[type=password]:-moz-placeholder,.bp-input[type=password][disabled]:-moz-placeholder,.bp-input[type=password][readonly]:-moz-placeholder,.bp-input[type=search]:-moz-placeholder,.bp-input[type=search][disabled]:-moz-placeholder,.bp-input[type=search][readonly]:-moz-placeholder,.bp-input[type=tel]:-moz-placeholder,.bp-input[type=tel][disabled]:-moz-placeholder,.bp-input[type=tel][readonly]:-moz-placeholder,.bp-input[type=text]:-moz-placeholder,.bp-input[type=text][disabled]:-moz-placeholder,.bp-input[type=text][readonly]:-moz-placeholder,.bp-input[type=url]:-moz-placeholder,.bp-input[type=url][disabled]:-moz-placeholder,.bp-input[type=url][readonly]:-moz-placeholder{color:#8ca0b3}.bp-input:focus,.bp-input[disabled]:focus,.bp-input[readonly]:focus,.bp-input[type=email]:focus,.bp-input[type=email][disabled]:focus,.bp-input[type=email][readonly]:focus,.bp-input[type=number]:focus,.bp-input[type=number][disabled]:focus,.bp-input[type=number][readonly]:focus,.bp-input[type=password]:focus,.bp-input[type=password][disabled]:focus,.bp-input[type=password][readonly]:focus,.bp-input[type=search]:focus,.bp-input[type=search][disabled]:focus,.bp-input[type=search][readonly]:focus,.bp-input[type=tel]:focus,.bp-input[type=tel][disabled]:focus,.bp-input[type=tel][readonly]:focus,.bp-input[type=text]:focus,.bp-input[type=text][disabled]:focus,.bp-input[type=text][readonly]:focus,.bp-input[type=url]:focus,.bp-input[type=url][disabled]:focus,.bp-input[type=url][readonly]:focus{border:none;outline:none}.bp-input[type=number]::-webkit-inner-spin-button,.bp-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bp-input[type=number]{-moz-appearance:textfield}.bp-input-wrapper{min-width:19.75rem;height:2.9375rem;border:.0625rem solid #c9dfe4;border-radius:.25rem;padding:.1875rem .3125rem}.bp-input-wrapper--disabled{background-color:#eaeeee;border-color:#c9dfe4}.bp-input-wrapper--focus{box-shadow:0 .125rem .75rem 0 rgba(0,0,0,.1);border-color:#0cc8cc;transition:box-shadow .5s ease-in}.bp-input-wrapper--invalid{border-color:#fb7a6d}.bp-input-wrapper--valid{border-color:#4dcb7b}.bp-input-check--hidden{visibility:hidden}.bp-input-check--true{visibility:visible;font-size:1.1875rem;line-height:.3125rem;float:right}.bp-label{margin:0;font-size:.75rem;font-weight:600} +@font-face{font-family:Nunito;font-style:normal;font-weight:400;src:local("Nunito Regular"),local("Nunito-Regular"),url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIOuaBXso.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:400;src:local("Nunito Regular"),local("Nunito-Regular"),url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIO-aBXso.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:400;src:local("Nunito Regular"),local("Nunito-Regular"),url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofINeaB.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Nunito;font-style:normal;font-weight:600;src:local("Nunito SemiBold"),local("Nunito-SemiBold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofA6sKUbuvISTs.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:600;src:local("Nunito SemiBold"),local("Nunito-SemiBold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofA6sKUb-vISTs.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:600;src:local("Nunito SemiBold"),local("Nunito-SemiBold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofA6sKUYevI.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Nunito;font-style:normal;font-weight:700;src:local("Nunito Bold"),local("Nunito-Bold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofAjsOUbuvISTs.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:700;src:local("Nunito Bold"),local("Nunito-Bold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofAjsOUb-vISTs.woff2) format("woff2");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:700;src:local("Nunito Bold"),local("Nunito-Bold"),url(https://fonts.gstatic.com/s/nunito/v9/XRXW3I6Li01BKofAjsOUYevI.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}.bp-bg-bot{background-color:#2cc3d5}.bp-bg-blip-light{background-color:#0cc8cc}.bp-bg-blip-dark{background-color:#15afb2}.bp-bg-warning{background-color:#f76556}.bp-bg-delete{background-color:#fb7a6d}.bp-bg-delete-darken{background-color:b-darken(#fb7a6d)}.bp-bg-true{background-color:#4dcb7b}.bp-bg-true-darken{background-color:b-darken(#4dcb7b)}.bp-bg-city{background-color:#52636c}.bp-bg-city-darken{background-color:b-darken(#52636c)}.bp-bg-city-lighten{background-color:b-lighten(#52636c)}.bp-bg-rooftop{background-color:#738192}.bp-bg-desk{background-color:#607b99}.bp-bg-cloud{background-color:#8ca0b3}.bp-bg-silver{background-color:#94a3ab}.bp-bg-time{background-color:#a8bfc4}.bp-bg-breeze{background-color:#c9dfe4}.bp-bg-sky{background-color:#daf2f4}.bp-bg-offwhite{background-color:#eaeeee}.bp-bg-white{background-color:#fff}.bp-bg-black{background-color:#000}.bp-bg-gradient{background-color:linear-gradient(180deg,#f9fbfc,#ecf1f3)}.bp-bc-bot{border-color:#2cc3d5}.bp-bc-blip-light{border-color:#0cc8cc}.bp-bc-blip-dark{border-color:#15afb2}.bp-bc-warning{border-color:#f76556}.bp-bc-delete{border-color:#fb7a6d}.bp-bc-delete-dark{border-color:#fa4d3b}.bp-bc-true{border-color:#4dcb7b}.bp-bc-true-dark{border-color:#34b162}.bp-bc-city{border-color:#52636c}.bp-bc-city-dark{border-color:#3c484f}.bp-bc-city-light{border-color:#687e89}.bp-bc-rooftop{border-color:#738192}.bp-bc-desk{border-color:#607b99}.bp-bc-cloud{border-color:#8ca0b3}.bp-bc-silver{border-color:#94a3ab}.bp-bc-time{border-color:#a8bfc4}.bp-bc-breeze{border-color:#c9dfe4}.bp-bc-sky{border-color:#daf2f4}.bp-bc-offwhite{border-color:#eaeeee}.bp-bc-white{border-color:#fff}.bp-bc-black{border-color:#000}.bp-c-bot{color:#2cc3d5}.bp-c-blip-light{color:#0cc8cc}.bp-c-blip-dark{color:#15afb2}.bp-c-warning{color:#f76556}.bp-c-delete{color:#fb7a6d}.bp-c-delete-dark{color:#fa4d3b}.bp-c-true{color:#4dcb7b}.bp-c-true-dark{color:#34b162}.bp-c-city{color:#52636c}.bp-c-city-dark{color:#3c484f}.bp-c-city-light{color:#687e89}.bp-c-rooftop{color:#738192}.bp-c-desk{color:#607b99}.bp-c-cloud{color:#8ca0b3}.bp-c-silver{color:#94a3ab}.bp-c-time{color:#a8bfc4}.bp-c-breeze{color:#c9dfe4}.bp-c-sky{color:#daf2f4}.bp-c-offwhite{color:#eaeeee}.bp-c-white{color:#fff}.bp-c-black{color:#000}.bp-ff-nunito{font-family:Nunito,Helvetica,sans-serif}.bp-fs-1{font-size:3rem}.bp-fs-2{font-size:2rem}.bp-fs-3{font-size:1.5rem}.bp-fs-4{font-size:1.25rem}.bp-fs-5{font-size:1rem}.bp-fs-6{font-size:.875rem}.bp-fs-7{font-size:.75rem}.bp-fs-8{font-size:.625rem}.bp-fw-regular{font-weight:400}.bp-fw-bold{font-weight:600}.bp-fw-extra-bold{font-weight:700}.bp-btn{display:inline-block;color:#fff;background-color:#c9dfe4;-webkit-appearance:button;-moz-appearance:button;cursor:pointer;min-width:10rem;height:2.625rem;line-height:2.375rem;margin:0;padding:0 1.25rem;border:none;border-radius:3px;overflow:hidden;vertical-align:middle;text-align:center;white-space:nowrap;font-family:Nunito,Helvetica,sans-serif;font-size:.875rem;text-decoration:none;font-weight:600;outline:none}.bp-btn:hover{background-color:#a7cbd3}.bp-btn>*{vertical-align:middle}.bp-btn:active,.bp-btn:focus,.bp-btn:hover,.bp-btn:visited{outline:none;text-decoration:none}.bp-btn:disabled{cursor:default;background-color:#c9dfe4;color:#fff;border:none}.bp-btn.bp-btn--flat,.bp-btn.bp-btn--flat:disabled{border:2px solid;background-color:transparent}.bp-btn.bp-btn--flat.bp-btn--flat{color:#000;background-color:transparent;border-color:#c9dfe4}.bp-btn.bp-btn--flat.bp-btn--flat:hover{background-color:transparent;border-color:#a7cbd3;color:#000}.bp-btn.bp-btn--c-black,.bp-btn.bp-btn--c-black:hover{color:#000}.bp-btn.bp-btn--c-white{color:#fff}.bp-btn.bp-btn--c-white:hover{color:#e6e6e6}.bp-btn.bp-btn--bot{color:#fff;background-color:#2cc3d5}.bp-btn.bp-btn--bot:hover{background-color:#229dac}.bp-btn.bp-btn--bot.bp-btn--flat{color:#2cc3d5;background-color:transparent;border-color:#2cc3d5}.bp-btn.bp-btn--bot.bp-btn--flat:hover{background-color:transparent;border-color:#229dac;color:#229dac}.bp-btn.bp-btn--blip-light{color:#fff;background-color:#0cc8cc}.bp-btn.bp-btn--blip-light:hover{background-color:#09999c}.bp-btn.bp-btn--blip-light.bp-btn--flat{color:#0cc8cc;background-color:transparent;border-color:#0cc8cc}.bp-btn.bp-btn--blip-light.bp-btn--flat:hover{background-color:transparent;border-color:#09999c;color:#09999c}.bp-btn.bp-btn--blip-dark{color:#fff;background-color:#15afb2}.bp-btn.bp-btn--blip-dark:hover{background-color:#108284}.bp-btn.bp-btn--blip-dark.bp-btn--flat{color:#15afb2;background-color:transparent;border-color:#15afb2}.bp-btn.bp-btn--blip-dark.bp-btn--flat:hover{background-color:transparent;border-color:#108284;color:#108284}.bp-btn.bp-btn--true{color:#fff;background-color:#4dcb7b}.bp-btn.bp-btn--true:hover{background-color:#34b162}.bp-btn.bp-btn--true.bp-btn--flat{color:#4dcb7b;background-color:transparent;border-color:#4dcb7b}.bp-btn.bp-btn--true.bp-btn--flat:hover{background-color:transparent;border-color:#34b162;color:#34b162}.bp-btn.bp-btn--delete{color:#fff;background-color:#fb7a6d}.bp-btn.bp-btn--delete:hover{background-color:#fa4d3b}.bp-btn.bp-btn--delete.bp-btn--flat{color:#fb7a6d;background-color:transparent;border-color:#fb7a6d}.bp-btn.bp-btn--delete.bp-btn--flat:hover{background-color:transparent;border-color:#fa4d3b;color:#fa4d3b}.bp-btn.bp-btn--warning{color:#fff;background-color:#f76556}.bp-btn.bp-btn--warning:hover{background-color:#f53925}.bp-btn.bp-btn--warning.bp-btn--flat{color:#f76556;background-color:transparent;border-color:#f76556}.bp-btn.bp-btn--warning.bp-btn--flat:hover{background-color:transparent;border-color:#f53925;color:#f53925}.bp-dropdown{position:absolute;display:inline-block;z-index:100;min-width:3.125rem;min-height:1.125rem;margin-top:.3125rem;padding:.625rem 0;top:130%;background:#fff;border-radius:2px;transition:.4s;box-shadow:0 1px 6px 0 rgba(0,60,128,.14);-o-box-shadow:0 1px 6px 0 rgba(0,60,128,.14);-webkit-box-shadow:0 1px 6px 0 rgba(0,60,128,.14);-moz-box-shadow:0 1px 6px 0 rgba(0,60,128,.14)}.bp-dropdown::-webkit-scrollbar{width:.375rem;height:.375rem}.bp-dropdown::-webkit-scrollbar-track{background:none}.bp-dropdown::-webkit-scrollbar-thumb{background-color:#c9dfe4}.bp-dropdown:before{position:absolute;content:" ";width:.9375rem;height:.9375rem;top:-8px;background:#fff;transform:rotate(45deg);box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1);-o-box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1);-webkit-box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1);-moz-box-shadow:-3px -3px 10px 0 rgba(0,60,128,.1)}.bp-dropdown.bp-dropdown--right{right:-10px}.bp-dropdown.bp-dropdown--right:before{right:10px}.bp-dropdown.bp-dropdown--left{left:-10px}.bp-dropdown.bp-dropdown--left:before{left:10px}.bp-dropdown.bp-dropdown--show{opacity:1;visibility:visible}.bp-dropdown.bp-dropdown--hide{opacity:0;visibility:hidden}.bp-input,.bp-input[disabled],.bp-input[readonly],.bp-input[type=email],.bp-input[type=email][disabled],.bp-input[type=email][readonly],.bp-input[type=number],.bp-input[type=number][disabled],.bp-input[type=number][readonly],.bp-input[type=password],.bp-input[type=password][disabled],.bp-input[type=password][readonly],.bp-input[type=search],.bp-input[type=search][disabled],.bp-input[type=search][readonly],.bp-input[type=tel],.bp-input[type=tel][disabled],.bp-input[type=tel][readonly],.bp-input[type=text],.bp-input[type=text][disabled],.bp-input[type=text][readonly],.bp-input[type=url],.bp-input[type=url][disabled],.bp-input[type=url][readonly]{border:none;font-size:.875rem;background:transparent;width:90%;height:auto;padding:0}.bp-input::-webkit-input-placeholder,.bp-input[disabled]::-webkit-input-placeholder,.bp-input[readonly]::-webkit-input-placeholder,.bp-input[type=email]::-webkit-input-placeholder,.bp-input[type=email][disabled]::-webkit-input-placeholder,.bp-input[type=email][readonly]::-webkit-input-placeholder,.bp-input[type=number]::-webkit-input-placeholder,.bp-input[type=number][disabled]::-webkit-input-placeholder,.bp-input[type=number][readonly]::-webkit-input-placeholder,.bp-input[type=password]::-webkit-input-placeholder,.bp-input[type=password][disabled]::-webkit-input-placeholder,.bp-input[type=password][readonly]::-webkit-input-placeholder,.bp-input[type=search]::-webkit-input-placeholder,.bp-input[type=search][disabled]::-webkit-input-placeholder,.bp-input[type=search][readonly]::-webkit-input-placeholder,.bp-input[type=tel]::-webkit-input-placeholder,.bp-input[type=tel][disabled]::-webkit-input-placeholder,.bp-input[type=tel][readonly]::-webkit-input-placeholder,.bp-input[type=text]::-webkit-input-placeholder,.bp-input[type=text][disabled]::-webkit-input-placeholder,.bp-input[type=text][readonly]::-webkit-input-placeholder,.bp-input[type=url]::-webkit-input-placeholder,.bp-input[type=url][disabled]::-webkit-input-placeholder,.bp-input[type=url][readonly]::-webkit-input-placeholder{color:#8ca0b3}.bp-input::-moz-placeholder,.bp-input[disabled]::-moz-placeholder,.bp-input[readonly]::-moz-placeholder,.bp-input[type=email]::-moz-placeholder,.bp-input[type=email][disabled]::-moz-placeholder,.bp-input[type=email][readonly]::-moz-placeholder,.bp-input[type=number]::-moz-placeholder,.bp-input[type=number][disabled]::-moz-placeholder,.bp-input[type=number][readonly]::-moz-placeholder,.bp-input[type=password]::-moz-placeholder,.bp-input[type=password][disabled]::-moz-placeholder,.bp-input[type=password][readonly]::-moz-placeholder,.bp-input[type=search]::-moz-placeholder,.bp-input[type=search][disabled]::-moz-placeholder,.bp-input[type=search][readonly]::-moz-placeholder,.bp-input[type=tel]::-moz-placeholder,.bp-input[type=tel][disabled]::-moz-placeholder,.bp-input[type=tel][readonly]::-moz-placeholder,.bp-input[type=text]::-moz-placeholder,.bp-input[type=text][disabled]::-moz-placeholder,.bp-input[type=text][readonly]::-moz-placeholder,.bp-input[type=url]::-moz-placeholder,.bp-input[type=url][disabled]::-moz-placeholder,.bp-input[type=url][readonly]::-moz-placeholder{color:#8ca0b3}.bp-input:-ms-input-placeholder,.bp-input[disabled]:-ms-input-placeholder,.bp-input[readonly]:-ms-input-placeholder,.bp-input[type=email]:-ms-input-placeholder,.bp-input[type=email][disabled]:-ms-input-placeholder,.bp-input[type=email][readonly]:-ms-input-placeholder,.bp-input[type=number]:-ms-input-placeholder,.bp-input[type=number][disabled]:-ms-input-placeholder,.bp-input[type=number][readonly]:-ms-input-placeholder,.bp-input[type=password]:-ms-input-placeholder,.bp-input[type=password][disabled]:-ms-input-placeholder,.bp-input[type=password][readonly]:-ms-input-placeholder,.bp-input[type=search]:-ms-input-placeholder,.bp-input[type=search][disabled]:-ms-input-placeholder,.bp-input[type=search][readonly]:-ms-input-placeholder,.bp-input[type=tel]:-ms-input-placeholder,.bp-input[type=tel][disabled]:-ms-input-placeholder,.bp-input[type=tel][readonly]:-ms-input-placeholder,.bp-input[type=text]:-ms-input-placeholder,.bp-input[type=text][disabled]:-ms-input-placeholder,.bp-input[type=text][readonly]:-ms-input-placeholder,.bp-input[type=url]:-ms-input-placeholder,.bp-input[type=url][disabled]:-ms-input-placeholder,.bp-input[type=url][readonly]:-ms-input-placeholder{color:#8ca0b3}.bp-input:-moz-placeholder,.bp-input[disabled]:-moz-placeholder,.bp-input[readonly]:-moz-placeholder,.bp-input[type=email]:-moz-placeholder,.bp-input[type=email][disabled]:-moz-placeholder,.bp-input[type=email][readonly]:-moz-placeholder,.bp-input[type=number]:-moz-placeholder,.bp-input[type=number][disabled]:-moz-placeholder,.bp-input[type=number][readonly]:-moz-placeholder,.bp-input[type=password]:-moz-placeholder,.bp-input[type=password][disabled]:-moz-placeholder,.bp-input[type=password][readonly]:-moz-placeholder,.bp-input[type=search]:-moz-placeholder,.bp-input[type=search][disabled]:-moz-placeholder,.bp-input[type=search][readonly]:-moz-placeholder,.bp-input[type=tel]:-moz-placeholder,.bp-input[type=tel][disabled]:-moz-placeholder,.bp-input[type=tel][readonly]:-moz-placeholder,.bp-input[type=text]:-moz-placeholder,.bp-input[type=text][disabled]:-moz-placeholder,.bp-input[type=text][readonly]:-moz-placeholder,.bp-input[type=url]:-moz-placeholder,.bp-input[type=url][disabled]:-moz-placeholder,.bp-input[type=url][readonly]:-moz-placeholder{color:#8ca0b3}.bp-input:focus,.bp-input[disabled]:focus,.bp-input[readonly]:focus,.bp-input[type=email]:focus,.bp-input[type=email][disabled]:focus,.bp-input[type=email][readonly]:focus,.bp-input[type=number]:focus,.bp-input[type=number][disabled]:focus,.bp-input[type=number][readonly]:focus,.bp-input[type=password]:focus,.bp-input[type=password][disabled]:focus,.bp-input[type=password][readonly]:focus,.bp-input[type=search]:focus,.bp-input[type=search][disabled]:focus,.bp-input[type=search][readonly]:focus,.bp-input[type=tel]:focus,.bp-input[type=tel][disabled]:focus,.bp-input[type=tel][readonly]:focus,.bp-input[type=text]:focus,.bp-input[type=text][disabled]:focus,.bp-input[type=text][readonly]:focus,.bp-input[type=url]:focus,.bp-input[type=url][disabled]:focus,.bp-input[type=url][readonly]:focus{border:none;outline:none}.bp-input[type=number]::-webkit-inner-spin-button,.bp-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bp-input[type=number]{-moz-appearance:textfield}.bp-input--check--wrapper{display:block;padding-bottom:.3125rem}.bp-input[type=checkbox],.bp-input[type=radio]{display:none}.bp-input--checkbox,.bp-input--radio{display:inline-block;background-color:#fff;border:.0625rem solid #a8bfc4;text-align:center;transition:all .5s;margin-right:.625rem}.bp-input--checkbox:hover,.bp-input--radio:hover{border-color:#0cc8cc}.bp-input--checkbox{border-radius:.125rem;font-size:.875rem;font-weight:600;color:#fff;width:1.5rem;height:1.5rem}.bp-input--radio{width:.75rem;height:.75rem;border-radius:1.25rem;padding:.3125rem;background-clip:content-box}.bp-input[type=checkbox]:checked+.bp-input--checkbox,.bp-input[type=radio]:checked+.bp-input--radio{background-color:#0cc8cc;border-color:#0cc8cc}.bp-input[type=checkbox]:checked+.bp-input--checkbox:after{content:"\2713";transform:rotate(45deg);animation:checkbox .6s ease}@-webkit-keyframes checkbox{0%{transform:scale(1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}to{transform:scale(1)}}@-moz-keyframes checkbox{0%{transform:scale(1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}to{transform:scale(1)}}@keyframes checkbox{0%{transform:scale(1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}to{transform:scale(1)}}.bp-input-wrapper{min-width:19.75rem;height:2.9375rem;border:.0625rem solid #c9dfe4;border-radius:.25rem;padding:.1875rem .3125rem}.bp-input-wrapper--disabled{background-color:#eaeeee;border-color:#c9dfe4}.bp-input-wrapper--focus{box-shadow:0 .125rem .75rem 0 rgba(0,0,0,.1);border-color:#0cc8cc;transition:box-shadow .5s ease-in}.bp-input-wrapper--invalid{border-color:#fb7a6d}.bp-input-wrapper--valid{border-color:#4dcb7b}.bp-input-check--hidden{visibility:hidden}.bp-input-check--true{visibility:visible;font-size:1.1875rem;line-height:.3125rem;float:right}.bp-label{margin:0;font-size:.75rem;font-weight:600} diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss index 49e7103..f077842 100644 --- a/src/scss/components/_input.scss +++ b/src/scss/components/_input.scss @@ -42,7 +42,8 @@ /** * Eliminating arrows from number input */ -.bp-input[type="number"]::-webkit-outer-spin-button, .bp-input[type="number"]::-webkit-inner-spin-button { +.bp-input[type="number"]::-webkit-outer-spin-button, +.bp-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @@ -59,15 +60,15 @@ padding-bottom: 0.5*$m; } -.bp-input[type="checkbox"], .bp-input[type="radio"] { +.bp-input[type="checkbox"], +.bp-input[type="radio"] { display: none; } -.bp-input--checkbox, .bp-input--radio { +.bp-input--checkbox, +.bp-input--radio, { display: inline-block; - background-color: $bp-color-white; border: 0.1*$m solid $bp-color-time; - text-align: center; transition: all 500ms; &:hover { @@ -77,9 +78,6 @@ .bp-input--checkbox { border-radius: 0.2*$m; - font-size: $bp-fs-6; - font-weight: $bp-fw-bold; - color: $bp-color-white; width: 2.4*$m; height: 2.4*$m; } @@ -92,11 +90,43 @@ background-clip: content-box; } -.bp-input[type="checkbox"]:checked + .bp-input--checkbox, .bp-input[type="radio"]:checked + .bp-input--radio { +.bp-input[type="checkbox"]:checked + .bp-input--checkbox, +.bp-input[type="radio"]:checked + .bp-input--radio { background-color: $bp-color-blip-light; border-color: $bp-color-blip-light; + + &:hover { + background-color: bp-darken($bp-color-blip-light); + border-color: bp-darken($bp-color-blip-light); + } +} + +.bp-input[type="checkbox"]:checked + .bp-input--checkbox { + animation: checkbox .6s ease; +} + +@include keyframes(checkbox) { + 0% { transform: scale(1, 1); } + 30% { transform: scale(1.25, 0.75); } + 40% { transform: scale(0.75, 1.25); } + 50% { transform: scale(1.15, 0.85); } + 65% { transform: scale(0.95, 1.05); } + 75% { transform: scale(1.05, 0.95); } + 100% { transform: scale(1, 1); } } +.bp-input--checkbox--disabled, +.bp-input--radio--disabled, +.bp-input[type="checkbox"]:checked + .bp-input--checkbox--disabled, +.bp-input[type="radio"]:checked + .bp-input--radio--disabled { + background-color: $bp-color-offwhite; + border-color: $bp-color-breeze; + + &:hover { + background-color: $bp-color-offwhite; + border-color: $bp-color-breeze; + } +} /** * Wrapper