FloatingLabels.css.map

{"version":3,"sources":["webpack:///./FloatingLabels.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAAhB;AAEA;EAEI;EAEA;EACA;EACA;AACJ;;AAEA;EAEI;EAEA;;GAAA;AACJ;AAEI;EAEI;EACA;EACA;EAEA;;;;;GAAA;EA6DA;;;;;GAAA;AApDR;AAFQ;EACI;EACA;AAIZ;AADQ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;IAAA;EAQA;;IAAA;EAWA;;IAAA;EAOA;;;;GAAA;AAXZ;AAZY;EACI;EACA;AAchB;AARY;EACI;AAUhB;AAPY;EACI;AAShB;AAHY;EACI;AAKhB;AAIY;EACI;EACA;EACA;EACA;EACA;AAFhB;AAYQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAVZ;AAaQ;EACI;EACA;EACA;EACA;AAXZ,C","file":"css/FloatingLabels.css","sourcesContent":["@charset \"UTF-8\";\n/** Floating Labels | V 1.5 */\nbody {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  flex-align: center;\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.floating-labels {\n  margin: 2rem 0;\n  /**\n  * Make the field a flex-container, reverse the order so label is on top.\n  */\n}\n.floating-labels .form-group {\n  display: flex;\n  flex-flow: column-reverse;\n  margin-bottom: 1rem;\n  /**\n  * Add a transition to the label and input.\n  * I'm not even sure that touch-action: manipulation works on\n  * inputs, but hey, it's new and cool and could remove the \n  * pesky delay.\n  */\n  /**\n  * Translate down and scale the label up to cover the placeholder,\n  * when following an input (with placeholder-shown support).\n  * Also make sure the label is only on one row, at max 2/3rds of the\n  * field—to make sure it scales properly and doesn't wrap.\n  */\n}\n.floating-labels .form-group label, .floating-labels .form-group input {\n  transition: all 0.2s;\n  touch-action: manipulation;\n}\n.floating-labels .form-group input {\n  font-size: 1.5rem;\n  border: 0;\n  border-bottom: 0.1rem solid #ccc;\n  -webkit-appearance: none;\n  padding: 1rem;\n  cursor: text;\n  /**\n  * Target focussed input\n  **/\n  /**\n  * Target un-focussed input placeholder, remove opacity until focussed\n  **/\n  /**\n  * Target an input that has text in it, remove placeholder opacity\n  **/\n  /**\n  * When the element is focused, remove the label transform.\n  * Also, do this when the placeholder is _not_ shown, i.e. when \n  * there's something in the input at all.\n  */\n}\n.floating-labels .form-group input:focus {\n  outline: 0;\n  border-bottom: 0.3rem solid blue;\n}\n.floating-labels .form-group input::-webkit-input-placeholder {\n  opacity: 0;\n}\n.floating-labels .form-group input:focus::-webkit-input-placeholder {\n  opacity: 1;\n}\n.floating-labels .form-group input:not(:empty)::-webkit-input-placeholder {\n  opacity: 0;\n}\n.floating-labels .form-group input:focus + label {\n  transform: translate(0, 0) scale(1);\n  cursor: pointer;\n  color: blue;\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n.floating-labels .form-group input + label {\n  cursor: text;\n  max-width: 66.666%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform-origin: left bottom;\n  transform: translate(0, 2.125rem) scale(1.5);\n}\n.floating-labels .form-group label {\n  text-transform: uppercase;\n  letter-spacing: 0.05rem;\n  color: inherit;\n  margin-left: 0.5rem;\n}"],"sourceRoot":""}