simplegoals/playground/simplegoals.css.map

Motivate your users with pleasant and easy-to-use achievements.

{"version":3,"sources":["webpack://SimpleGoals/./src/index.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,kDAAkD;AAClD;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,yB","file":"simplegoals.css","sourcesContent":["[class^='simplegoals'], [class*=' simplegoals'],\n[class^='simplegoals'], [class*=' simplegoals']::before,\n[class^='simplegoals'], [class*=' simplegoals']::after {\n  /* Defaults */\n  padding: 0;\n  margin: 0;\n  text-decoration: none;\n  border-width: 0;\n  border-style: none;\n  outline: none;\n  line-height: 1.15;\n  -webkit-text-size-adjust: 100%;\n  box-sizing: border-box;\n  font-family: var(--simplegoals-font-family);\n  font-size: 1em;\n  font-weight: normal;\n}\n\n[class^='simplegoals']:focus, [class*=' simplegoals']:focus {\n  outline: none;\n  /* outline-style: solid;\n  outline-color: var(--simplegoals-color-primary); */\n}\n\n/* #region Achievement */\n\n.simplegoals-achievement {\n  display: flex;\n  align-items: center;\n  position: fixed;\n  height: 6em;\n  top: 1em;\n  left: 1em;\n  background: var(--simplegoals-color-background);\n  border-radius: 3em;\n  box-shadow: 0em 0em 2em 0em rgba(0,0,0,0.3);\n  overflow: hidden;\n  transition: all .7s linear;\n  max-width: 6em;\n  transform: translateX(-12em) rotate(-180deg);\n  opacity: 0;\n  z-index: 1789;\n  font-size: 16px;\n}\n\n.simplegoals-achievement--opened {\n  animation: simplegoals-achievement--open 2s ease-out both;\n  max-width: calc(640px - 2em);\n}\n\n@keyframes simplegoals-achievement--open {\n  0% {\n    transform: translateX(-12em) rotate(-180deg);\n    opacity: 0;\n    max-width: 6em;\n  }\n  45% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  55% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  100% {\n    transform: translateX(0) rotate(0deg);\n    max-width: calc(640px - 2em);\n    opacity: 1;\n  }\n}\n\n.simplegoals-achievement--closed {\n  animation: simplegoals-achievement--close 2s ease-out both;\n}\n\n@keyframes simplegoals-achievement--close {\n  0% {\n    transform: translateX(0) rotate(0deg);\n    max-width: calc(640px - 2em);\n    opacity: 1;\n  }\n  45% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  55% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  100% {\n    transform: translateX(-12em) rotate(-180deg);\n    opacity: 0;\n    max-width: 6em;\n  }\n}\n\n.simplegoals-achievement__icon {\n  display: flex;\n  width: 6em;\n  height: 6em;\n  justify-content: center;\n  align-items: center;\n  flex: 0 0 auto;\n  transform: translateY(0);\n  transition: all .5s;\n}\n\n.simplegoals-achievement__icon img {\n  max-height: 3.5em;\n  max-width: 3.5em;\n}\n\n.simplegoals-achievement__body {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1 0 auto;\n  max-width: calc(640px - 6em - 2em - 8em - 2.5em);\n}\n\n.simplegoals-achievement__notification {\n  margin: 0;\n  padding: .1em;\n  font-size: 1em;\n  color: var(--simplegoals-color-subtitle);\n}\n\n.simplegoals-achievement__name {\n  margin: 0;\n  padding: .1em;\n  font-size: 1.2em;\n  font-weight: bold;\n  color: var(--simplegoals-color-title);\n}\n\n.simplegoals-achievement__button {\n  background-color: var(--simplegoals-color-primary);\n  display: flex;\n  font-size: 1em;\n  color: var(--simplegoals-color-opposite);\n  padding: 1em;\n  margin-left: 1em;\n  margin-right: 1.5em;\n  border-radius: 3em;\n  text-decoration: none;\n  cursor: pointer;\n  border: none;\n  flex: 1 0 auto;\n  max-width: 8em;\n  text-align: center;\n  justify-content: center;\n}\n\n.simplegoals-achievement__button:hover {\n  background-color: var(--simplegoals-color-primary-hover);\n}\n\n.simplegoals-achievement__close-button {\n  position: absolute;\n  background: none;\n  height: 2em;\n  width: 2em;\n  left: 2em;\n  top: 2em;\n  transform: translateY(-10em);\n  transition: all .5s;\n  cursor: pointer;\n  font-size: 1em;\n}\n\n.simplegoals-achievement__close-button svg {\n  height: 2em;\n  width: 2em;\n  stroke: #E53E3E;\n  transition: all .5s;\n  transform: rotate(0);\n}\n\n.simplegoals-achievement__close-button svg:hover {\n  transform: rotate(-90deg);\n}\n\n@media (min-width: 640px) and (hover: none) {\n  .simplegoals-achievement--clicked .simplegoals-achievement__icon {\n    transform: translateY(10em);\n  }\n\n  .simplegoals-achievement--clicked .simplegoals-achievement__close-button {\n    transform: translateY(0);\n  }\n}\n\n@media (min-width: 640px) and (hover: hover) {\n  .simplegoals-achievement:hover .simplegoals-achievement__icon {\n    transform: translateY(10em);\n  }\n\n  .simplegoals-achievement:hover .simplegoals-achievement__close-button {\n    transform: translateY(0);\n  }\n}\n\n@media (max-width: 639px) {\n  .simplegoals-achievement--opened {\n    animation: simplegoals-achievement--open-mobile 2s ease-out both;\n    max-width: calc(100vw - 2em);\n  }\n\n  .simplegoals-achievement--closed {\n    animation: simplegoals-achievement--close-mobile 2s ease-out both;\n  }\n\n  .simplegoals-achievement__body {\n    max-width: calc(100vw - 8em);\n    padding-right: 2em;\n    transition: all .5s;\n  }\n\n  .simplegoals-achievement__button {\n    position: absolute;\n    right: 0;\n    left: 4em;\n    max-width: none;\n    transform: translateY(-10em);\n    transition: all .5s;\n  }\n\n  .simplegoals-achievement--closed .simplegoals-achievement__button{\n    opacity: 0 !important;\n  }\n}\n\n@media (max-width: 639px) and (hover: none) {\n  .simplegoals-achievement--clicked .simplegoals-achievement__body {\n    transform: translateY(10em);\n  }\n\n  .simplegoals-achievement--clicked .simplegoals-achievement__button {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  .simplegoals-achievement--clicked .simplegoals-achievement__icon {\n    transform: translateY(10em);\n  }\n\n  .simplegoals-achievement--clicked .simplegoals-achievement__close-button {\n    transform: translateY(0);\n  }\n}\n\n@media (max-width: 639px) and (hover: hover) {\n  .simplegoals-achievement:hover .simplegoals-achievement__body {\n    transform: translateY(10em);\n  }\n\n  .simplegoals-achievement:hover .simplegoals-achievement__button {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  .simplegoals-achievement:hover .simplegoals-achievement__icon {\n    transform: translateY(10em);\n  }\n\n  .simplegoals-achievement:hover .simplegoals-achievement__close-button {\n    transform: translateY(0);\n  }\n}\n\n@keyframes simplegoals-achievement--open-mobile {\n  0% {\n    transform: translateX(-12em) rotate(-180deg);\n    opacity: 0;\n    max-width: 6em;\n  }\n  45% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  55% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  100% {\n    transform: translateX(0) rotate(0deg);\n    max-width: calc(100vw - 2em);\n    opacity: 1;\n  }\n}\n\n@keyframes simplegoals-achievement--close-mobile {\n  0% {\n    transform: translateX(0) rotate(0deg);\n    max-width: calc(100vw - 2em);\n    opacity: 1;\n  }\n  45% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  55% {\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n    max-width: 6em;\n  }\n  100% {\n    transform: translateX(-12em) rotate(-180deg);\n    opacity: 0;\n    max-width: 6em;\n    display: none;\n  }\n}\n\n/* #endregion Achievement */\n\n/* #region Overview */\n\n.simplegoals-overview {\n  display: block;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(0,0,0,.5);\n  font-size: 16px;\n  overflow: auto;\n  z-index: 1788;\n  opacity: 0;\n  transition: opacity .7s;\n  transform: translateY(100vh);\n}\n\n.simplegoals-overview--opened {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.simplegoals-overview__wrapper {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  padding: 10vh 1em;\n  transition: all .7s;\n  transform: translateY(100vh);\n}\n.simplegoals-overview--opened > .simplegoals-overview__wrapper {\n  transform: translateY(0);\n}\n\n.simplegoals-overview__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 2em;\n  border-radius: 3em;\n  width: 640px;\n  background-color: var(--simplegoals-color-background);\n}\n\n@media (max-width: 639px) {\n  .simplegoals-overview__body {\n    width: auto;\n  }\n}\n\n.simplegoals-overview__title {\n  font-size: 2em;\n  font-weight: bolder;\n  margin: .5em;\n  color: var(--simplegoals-color-title);\n}\n\n.simplegoals-overview__subtitle {\n  color: var(--simplegoals-color-subtitle);\n}\n\n.simplegoals-overview__goals {\n  margin: 1.5em 0;\n}\n\n.simplegoals-overview-goal {\n  display: flex;\n  align-items: center;\n}\n\n.simplegoals-overview-goal__icon {\n  display: flex;\n  margin-right: 1em;\n  height: 6em;\n  justify-content: center;\n  align-items: center;\n  flex: 0 0 auto;\n  transform: translateY(0);\n  transition: all .5s;\n}\n\n.simplegoals-overview-goal__icon img {\n  max-height: 3.5em;\n  max-width: 3.5em;\n}\n\n.simplegoals-overview-goal--locked .simplegoals-overview-goal__icon img {\n  filter: grayscale(100%);\n}\n\n.simplegoals-overview-goal__body {\n  padding: .5em 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.simplegoals-overview-goal__name {\n  padding: .1em;\n  font-size: 1.2em;\n  font-weight: bolder;\n  color: var(--simplegoals-color-title);\n}\n\n.simplegoals-overview-goal__description {\n  padding: .1em;\n  font-size: 1em;\n  color: var(--simplegoals-color-subtitle);\n}\n\n.simplegoals-overview__close-button {\n  background-color: var(--simplegoals-color-primary);\n  font-size: 1em;\n  color: var(--simplegoals-color-opposite);\n  padding: 1em;\n  margin-left: auto;\n  margin-right: auto;\n  margin-bottom: 1em;\n  border-radius: 3em;\n  min-width: 8em;\n  cursor: pointer;\n  text-align: center;\n}\n\n.simplegoals-overview__close-button:hover {\n  background-color: var(--simplegoals-color-primary-hover);\n}\n\n.simplegoals-overview__attribution {\n  font-size: .9em;\n  color: var(--simplegoals-color-subtitle);\n}\n\n.simplegoals-overview__attribution-link {\n  color: var(--simplegoals-color-primary);\n}\n\n.simplegoals-overview__attribution-link:hover, .simplegoals-overview__attribution-link:active {\n  color: var(--simplegoals-color-primary-hover);\n}\n\n/* #endregion Overview */"],"sourceRoot":""}