picocss/scss/components/_progress.scss.map

{"version":3,"sources":["_progress.scss"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,mBAAmB;AACnB,yEAAyE;AACzE,+EAA+E;AAC/E,sBAAsB;;AAEtB,+CAA+C;AAC/C,oEAAoE;AACpE;EACE,qBAAqB,EAAE,GAAG;EAC1B,wBAAwB,EAAE,GAAG;AAC/B;;AAEA,MAAM;AACN,sBAAsB;;AAEtB;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;;EAErB,QAAQ;EACR,qBAAqB;EACrB,gBAAgB;EAChB,WAAW;EACX,cAAc;EACd,yCAAyC;EACzC,gBAAgB;;EAEhB,iCAAiC;EACjC,SAAS;EACT,mCAAmC;EACnC,kDAAkD;;EAElD,mDAAmD;EACnD,4BAA4B;;EAE5B;IACE,mCAAmC;IACnC,gBAAgB;EAClB;EACA;IACE,uCAAuC;EACzC;EACA;IACE,uCAAuC;EACzC;;EAEA,qBAAqB;EACrB;IACE;MACE;;;;;;sCAMgC;MAChC,qDAAqD;;MAErD;QACE,6BAA6B;MAC/B;MACA;QACE,6BAA6B;MAC/B;IACF;EACF;AACF;;AAEA;EACE;IACE;MACE,4BAA4B;IAC9B;EACF;AACF;;AAEA;EACE;IACE,2BAA2B;EAC7B;EACA;IACE,4BAA4B;EAC9B;AACF","file":"_progress.scss","sourcesContent":["/**\n * Progress\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// 1. Add the correct display in Edge 18- and IE\n// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox\nprogress {\n  display: inline-block; // 1\n  vertical-align: baseline; // 2\n}\n\n// Pico\n// ––––––––––––––––––––\n\nprogress {\n  // Reset the default appearance\n  -webkit-appearance: none;\n  -moz-appearance: none;\n\n  // Styles\n  display: inline-block;\n  appearance: none;\n  width: 100%;\n  height: 0.5rem;\n  margin-bottom: calc(var(--spacing) * 0.5);\n  overflow: hidden;\n\n  // Remove Firefox and Opera border\n  border: 0;\n  border-radius: var(--border-radius);\n  background-color: var(--progress-background-color);\n\n  // IE10 uses `color` to set the bar background-color\n  color: var(--progress-color);\n\n  &::-webkit-progress-bar {\n    border-radius: var(--border-radius);\n    background: none;\n  }\n  &[value]::-webkit-progress-value {\n    background-color: var(--progress-color);\n  }\n  &::-moz-progress-bar {\n    background-color: var(--progress-color);\n  }\n\n  // Indeterminate state\n  @media (prefers-reduced-motion: no-preference) {\n    &:indeterminate {\n      background: var(--progress-background-color)\n        linear-gradient(\n          to right,\n          var(--progress-color) 30%,\n          var(--progress-background-color) 30%\n        )\n        top left / 150% 150% no-repeat;\n      animation: progress-indeterminate  1s linear infinite;\n\n      &[value]::-webkit-progress-value {\n        background-color: transparent;\n      }\n      &::-moz-progress-bar {\n        background-color: transparent;\n      }\n    }\n  }\n}\n\n[dir=\"rtl\"] {\n  @media (prefers-reduced-motion: no-preference) {\n    progress:indeterminate {\n      animation-direction: reverse;\n    }\n  }\n}\n\n@keyframes progress-indeterminate {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n"]}