sample-piral 0.13.8 → 0.14.0-beta.3156

package/app/styles.1280bebc.css

@@ -1,675 +0,0 @@
-html, body, #app, .app-container {
-  width: 100%;
-  min-height: 100%;
-  background: white;
-}
-
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  font-family: "Roboto", sans-serif;
-}
-
-a {
-  text-decoration: none;
-  color: #56aa1c;
-}
-a:hover {
-  color: #407e15;
-}
-
-.pi-modal {
-  display: none;
-  position: fixed;
-  z-index: 3;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background: rgba(0, 0, 0, 0.4);
-  animation: fade-in 0.4s;
-}
-.pi-modal .pi-modal-dialog {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  max-width: 90%;
-  max-height: 90%;
-  margin: auto;
-  background: #fefefe;
-  animation: fade-in 0.4s;
-}
-
-body.pi-modal-open {
-  height: 100vh;
-  overflow-y: hidden;
-  padding-right: 15px;
-  position: fixed;
-}
-body.pi-modal-open .pi-modal {
-  display: block;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.language-picker {
-  position: relative;
-  margin: 4px 8px 0 0;
-}
-.language-picker .current {
-  cursor: pointer;
-}
-.language-picker ul {
-  display: none;
-  background: #f5f5f6;
-  border: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 3px 0 3px 3px;
-  background-clip: padding-box;
-  margin-bottom: 5px;
-  position: absolute;
-  top: 100%;
-  right: 0;
-}
-.language-picker ul li {
-  cursor: pointer;
-  border-bottom: 1px solid #ebebeb;
-  padding: 10px 20px;
-  margin: 0;
-  outline: 0;
-  color: #7d8086;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.language-picker ul li span {
-  padding-left: 8px;
-}
-.language-picker ul li:hover {
-  background: rgba(235, 235, 235, 0.9);
-  color: #737881;
-}
-.language-picker ul.open {
-  display: block;
-}
-
-.language-icon {
-  height: 16px;
-  width: 16px;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.app-container {
-  flex: 1;
-  position: relative;
-}
-
-.pi-notifications {
-  position: fixed;
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-  right: 2em;
-  bottom: 2em;
-}
-.pi-notifications .pi-item {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  text-align: left;
-  padding: 0.8em;
-  background-color: white;
-  max-width: 500px;
-  position: relative;
-  box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.2);
-}
-.pi-notifications .pi-item + .pi-notifications .pi-item {
-  margin-top: 1em;
-}
-.pi-notifications .pi-item.success:before {
-  background-color: #2BDE3F;
-}
-.pi-notifications .pi-item.error:before {
-  background-color: #e7431a;
-}
-.pi-notifications .pi-item.info:before {
-  background-color: #1D72F3;
-}
-.pi-notifications .pi-item.warning:before {
-  background-color: #FFC007;
-}
-.pi-notifications .pi-item:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-}
-.pi-notifications .pi-item .pi-details {
-  flex: 1;
-}
-.pi-notifications .pi-item .pi-details .pi-title {
-  color: #3e3e3e;
-  font-weight: 700;
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-.pi-notifications .pi-item .pi-details .pi-description {
-  font-size: 14px;
-  margin-top: 0;
-  margin-bottom: 0;
-  color: #878787;
-}
-.pi-notifications .pi-item .pi-close {
-  width: 14px;
-  cursor: pointer;
-  height: 14px;
-  fill: #878787;
-  margin-left: 1.2em;
-  background: url("/close.bb892b1b.svg") no-repeat center center;
-}
-@media screen and (max-width: 650px) {
-  .pi-notifications {
-    right: 0;
-    left: 0;
-    bottom: 0;
-  }
-  .pi-notifications .pi-item {
-    max-width: 100%;
-    width: 100%;
-  }
-}
-
-.app-container, #app {
-  display: flex;
-  flex-direction: column;
-}
-
-.app-content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0 2em;
-}
-
-.app-title {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.app-header {
-  display: flex;
-  flex-direction: row;
-  padding: 0 2em;
-  margin-bottom: 1em;
-  align-items: center;
-  justify-content: space-between;
-  background: #abcdef;
-  position: relative;
-  z-index: 2;
-}
-.app-header h1 {
-  white-space: nowrap;
-  font-size: 2rem;
-}
-@media screen and (max-width: 650px) {
-  .app-header {
-    padding: 0 1em;
-  }
-  .app-header h1 {
-    display: none;
-  }
-}
-
-.pi-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-}
-
-.app-footer {
-  font-size: 0.8em;
-  padding: 1em 0;
-  background: #d6e7f7;
-  display: flex;
-  flex-direction: row;
-}
-.app-footer .pi-menu {
-  margin: 0 auto;
-  max-width: 1000px;
-  column-width: 300px;
-  display: block;
-}
-.app-footer .pi-menu .pi-item {
-  display: block;
-  padding: 1em 2em;
-}
-
-.app-menu {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  padding: 0;
-  margin: 0;
-  width: 300px;
-  max-width: 100%;
-  background: #ebf3fb;
-  transform: translateX(-100%);
-  transition: all 0.1s ease;
-  padding-top: 85px;
-  z-index: 1;
-}
-.app-menu.is-open {
-  transform: none;
-  box-shadow: 30px 0px 30px -30px rgba(0, 0, 0, 0.2);
-}
-.app-menu .app-menu-content {
-  overflow-y: auto;
-  height: 100%;
-}
-.app-menu .pi-menu {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-}
-.app-menu .pi-menu > .pi-item {
-  flex: 1;
-  margin: 1px 0;
-}
-.app-menu .pi-menu > .pi-item > a {
-  display: block;
-  border-left: 5px solid #abcdef;
-  padding: 1em;
-}
-.app-menu .pi-menu > .pi-item > a:hover {
-  border-left-color: #559adf;
-}
-
-.pi-spinner {
-  position: relative;
-  width: 50px;
-  height: 50px;
-  font-size: 0;
-}
-.pi-spinner:before, .pi-spinner:after {
-  content: "";
-  display: block;
-  position: absolute;
-  border-width: 4px;
-  border-style: solid;
-  border-radius: 50%;
-}
-@keyframes rotate-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes anti-rotate-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-.pi-spinner:before {
-  width: 42px;
-  height: 42px;
-  border-bottom-color: #56aa1c;
-  border-right-color: #56aa1c;
-  border-top-color: rgba(86, 170, 28, 0);
-  border-left-color: rgba(86, 170, 28, 0);
-  top: 0;
-  left: 0;
-  animation: rotate-animation 1s linear 0s infinite;
-}
-.pi-spinner:after {
-  width: 29.4px;
-  height: 29.4px;
-  border-bottom-color: #56aa1c;
-  border-right-color: #56aa1c;
-  border-top-color: rgba(86, 170, 28, 0);
-  border-left-color: rgba(86, 170, 28, 0);
-  top: 6.3px;
-  left: 6.3px;
-  animation: anti-rotate-animation 0.85s linear 0s infinite;
-}
-
-.pi-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.pi-dashboard {
-  flex: 1;
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 70px);
-  grid-template-rows: repeat(auto-fit, 70px);
-  grid-gap: 10px;
-  overflow: visible;
-}
-.pi-dashboard .pi-tile {
-  display: flex;
-  position: relative;
-}
-.pi-dashboard .pi-tile.small {
-  grid-column: span 1;
-  grid-row: span 1;
-  width: 70px;
-  height: 70px;
-}
-.pi-dashboard .pi-tile.medium {
-  grid-column: span 2;
-  grid-row: span 2;
-  width: 150px;
-  height: 150px;
-}
-.pi-dashboard .pi-tile.wide {
-  grid-column: span 4;
-  grid-row: span 2;
-  width: 310px;
-  height: 150px;
-}
-.pi-dashboard .pi-tile.large {
-  grid-column: span 4;
-  grid-row: span 4;
-  width: 310px;
-  height: 310px;
-}
-.pi-dashboard .pi-tile:hover {
-  outline: rgba(29, 29, 29, 0.1) solid 4px;
-}
-
-.pi-search {
-  position: relative;
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-.pi-search input[type=search] {
-  font-size: 1em;
-  border: 1px solid transparent;
-  background-color: #f1f1f1;
-  padding: 10px;
-  font-size: 16px;
-  max-width: 80%;
-  width: 250px;
-  box-sizing: border-box;
-  transition: width ease 0.1s;
-}
-@media screen and (max-width: 450px) {
-  .pi-search input[type=search] {
-    width: 100px;
-  }
-}
-.pi-search:focus-within input[type=search] {
-  width: 90%;
-  max-width: 90%;
-}
-.pi-search:focus-within input[type=search] + .pi-details:not(:empty) {
-  display: block;
-  opacity: 1;
-}
-.pi-search .pi-details {
-  display: none;
-  opacity: 0;
-  position: absolute;
-  z-index: 2;
-  top: 100%;
-  width: 90%;
-  box-sizing: border-box;
-  background: #f0f0f0;
-  padding: 1px;
-  transition: all 0.1s 0.1s ease;
-}
-.pi-search .pi-item {
-  display: block;
-  padding: 10px;
-  cursor: pointer;
-  background-color: white;
-  border-bottom: 1px solid #d4d4d4;
-}
-.pi-search .pi-item:hover {
-  background-color: #e9e9e9;
-}
-.pi-search .pi-center {
-  padding: 30px;
-  background-color: white;
-}
-
-.form-row {
-  margin: 1em;
-}
-.form-row label {
-  display: block;
-  margin-bottom: 0.2em;
-}
-.form-row input {
-  padding: 0.3rem;
-  font-size: 1rem;
-}
-.form-row button {
-  padding: 0.5em 1em;
-  border: 1px solid black;
-  font-weight: bold;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.form-row button:disabled {
-  border: 1px solid #ccc;
-  color: #ccc;
-  cursor: default;
-}
-
-.pi-error > img {
-  width: 600px;
-  max-width: 100%;
-  margin: 1em 0;
-}
-.pi-error .pi-title {
-  color: #56aa1c;
-  display: block;
-  font-size: 1.5em;
-}
-.pi-error .pi-description {
-  display: block;
-  margin: 0.5em 0;
-}
-.pi-error .pi-details {
-  display: block;
-  margin: 0.5em 0;
-  color: #3e3e3e;
-  font-size: 0.8em;
-}
-
-.app-user {
-  position: relative;
-}
-.app-user .app-user-avatar {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.app-user .app-user-avatar img {
-  position: relative;
-  overflow: hidden;
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
-  border-radius: 50% !important;
-  vertical-align: middle;
-  border-style: none;
-  box-sizing: border-box;
-  line-height: 1;
-  margin-right: 0.5em;
-}
-.app-user .app-user-avatar::after {
-  display: inline-block;
-  box-sizing: border-box;
-  height: 8px;
-  width: 8px;
-  border-style: solid;
-  border-color: black;
-  border-width: 0px 2px 2px 0px;
-  position: relative;
-  transform: rotate(45deg);
-  transition: opacity 150ms ease-in-out;
-  content: "";
-}
-.app-user .app-user-details {
-  display: none;
-  list-style: none;
-  position: absolute;
-  background: white;
-  padding: 0;
-  right: 0;
-  border: 1px solid #ececec;
-  border-radius: 3px;
-  top: 40px;
-  cursor: default;
-}
-.app-user .app-user-details li {
-  display: block;
-  padding: 10px;
-  max-width: 300px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: right;
-}
-.app-user .app-user-details li > a {
-  display: block;
-}
-.app-user .app-user-details li.sep {
-  border-bottom: 1px solid #ccc;
-  padding: 0;
-}
-.app-user .app-user-details li .user-name {
-  font-weight: bold;
-  color: #666;
-  display: block;
-  font-size: 0.6em;
-}
-.app-user .app-user-details:before, .app-user .app-user-details:after {
-  content: "";
-  display: block;
-  position: absolute;
-  bottom: 100%;
-  width: 0;
-  height: 0;
-}
-.app-user .app-user-details:before {
-  right: 27px;
-  border: 6px solid transparent;
-  border-bottom-color: #ececec;
-}
-.app-user .app-user-details:after {
-  right: 28px;
-  border: 5px solid transparent;
-  border-bottom-color: #fff;
-}
-.app-user.is-open img {
-  opacity: 0.8;
-}
-.app-user.is-open .app-user-details {
-  display: block;
-}
-.app-user.is-open::after {
-  opacity: 0.2;
-}
-
-.hamburger {
-  padding: 15px 0;
-  display: inline-block;
-  cursor: pointer;
-  transition-property: opacity, filter;
-  transition-duration: 0.15s;
-  transition-timing-function: linear;
-  font: inherit;
-  color: inherit;
-  text-transform: none;
-  background-color: transparent;
-  border: 0;
-  margin: 0;
-  overflow: visible;
-  transform: scale(0.6);
-}
-.hamburger:hover {
-  opacity: 0.7;
-}
-.hamburger.is-active:hover {
-  opacity: 0.7;
-}
-.hamburger.is-active .hamburger-inner,
-.hamburger.is-active .hamburger-inner::before,
-.hamburger.is-active .hamburger-inner::after {
-  background-color: #000;
-}
-
-.hamburger-box {
-  width: 40px;
-  height: 24px;
-  display: inline-block;
-  position: relative;
-}
-
-.hamburger-inner {
-  display: block;
-  top: 50%;
-  margin-top: -2px;
-}
-.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
-  width: 40px;
-  height: 4px;
-  background-color: #000;
-  border-radius: 4px;
-  position: absolute;
-  transition-property: transform;
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
-}
-.hamburger-inner::before, .hamburger-inner::after {
-  content: "";
-  display: block;
-}
-.hamburger-inner::before {
-  top: -10px;
-}
-.hamburger-inner::after {
-  bottom: -10px;
-}
-
-.hamburger--arrow.is-active .hamburger-inner::before {
-  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
-}
-.hamburger--arrow.is-active .hamburger-inner::after {
-  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
-}
-
-/*# sourceMappingURL=/styles.1280bebc.css.map */

package/app/styles.1280bebc.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["styles/_layout.scss","styles/index.scss","styles/_burger.scss"],"names":[],"mappings":"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","file":"styles.1280bebc.css","sourceRoot":"../../../../src/samples/sample-piral/src","sourcesContent":["html, body, #app, .app-container {\n  width: 100%;\n  min-height: 100%;\n  background: $bg-color;\n}\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  font-family: 'Roboto', sans-serif;\n}\n\na {\n  text-decoration: none;\n  color: $basic-dark-color;\n\n  &:hover {\n    color: darken($color: $basic-dark-color, $amount: 10%)\n  }\n}\n\n.pi-modal {\n  display: none;\n  position: fixed;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: rgba(0, 0, 0, 0.4);\n  animation: fade-in 0.4s;\n\n  .pi-modal-dialog {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    max-width: 90%;\n    max-height: 90%;\n    margin: auto;\n    background: #fefefe;\n    animation: fade-in 0.4s;\n  }\n}\n\nbody.pi-modal-open {\n  height: 100vh;\n  overflow-y: hidden;\n  padding-right: 15px;\n  position: fixed;\n\n  .pi-modal {\n    display: block;\n  }\n}\n\n.text-right {\n  text-align: right;\n}\n\n.language-picker {\n  position: relative;\n  margin: 4px 8px 0 0;\n\n  .current {\n    cursor: pointer;\n  }\n\n  ul {\n    display: none;\n    background: #f5f5f6;\n    border: none;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    border-radius: 3px 0 3px 3px;\n    background-clip: padding-box;\n    margin-bottom: 5px;\n    position: absolute;\n    top: 100%;\n    right: 0;\n\n    li {\n      cursor: pointer;\n      border-bottom: 1px solid #ebebeb;\n      padding: 10px 20px;\n      margin: 0;\n      outline: 0;\n      color: #7d8086;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n\n      span {\n        padding-left: 8px;\n      }\n\n      &:hover {\n        background: rgba(235, 235, 235, 0.9);\n        color: #737881;\n      }\n    }\n\n    &.open {\n      display: block;\n    }\n  }\n}\n\n.language-icon {\n  height: 16px;\n  width: 16px;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.app-container {\n  flex: 1;\n  position: relative;\n}\n\n.pi-notifications {\n  position: fixed;\n  display: flex;\n  align-items: flex-end;\n  flex-direction: column;\n  right: 2em;\n  bottom: 2em;\n\n  .pi-item {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    text-align: left;\n    padding: 0.8em;\n    background-color: $bg-color;\n    max-width: 500px;\n    position: relative;\n    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);\n\n    &+& {\n      margin-top: 1em;\n    }\n\n    &.success:before {\n      background-color: #2BDE3F;\n    }\n\n    &.error:before {\n      background-color: #e7431a;\n    }\n\n    &.info:before {\n      background-color: #1D72F3;\n    }\n\n    &.warning:before {\n      background-color: #FFC007;\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n    }\n\n    .pi-details {\n      flex: 1;\n\n      .pi-title {\n        color: #3e3e3e;\n        font-weight: 700;\n        margin-top: 0;\n        margin-bottom: 8px;\n      }\n\n      .pi-description {\n        font-size: 14px;\n        margin-top: 0;\n        margin-bottom: 0;\n        color: #878787;\n      }\n    }\n\n    .pi-close {\n      width: 14px;\n      cursor: pointer;\n      height: 14px;\n      fill: #878787;\n      margin-left: 1.2em;\n      background: url('../images/close.svg') no-repeat center center;\n    }\n  }\n\n  @media screen and (max-width: $breakpoint-tablet) {\n    right: 0;\n    left: 0;\n    bottom: 0;\n\n    .pi-item {\n      max-width: 100%;\n      width: 100%;\n    }\n  }\n}\n\n.app-container, #app {\n  display: flex;\n  flex-direction: column;\n}\n\n.app-content {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0 2em;\n}\n\n.app-title {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n\n.app-header {\n  display: flex;\n  flex-direction: row;\n  padding: 0 2em;\n  margin-bottom: 1em;\n  align-items: center;\n  justify-content: space-between;\n  background: $header-color;\n  position: relative;\n  z-index: 2;\n\n  h1 {\n    white-space: nowrap;\n    font-size: 2rem;\n  }\n\n  @media screen and (max-width: $breakpoint-tablet) {\n    padding: 0 1em;\n\n    h1 {\n      display: none;\n    }\n  }\n}\n\n.pi-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n}\n\n.app-footer {\n  font-size: 0.8em;\n  padding: 1em 0;\n  background: $footer-color;\n  display: flex;\n  flex-direction: row;\n\n  .pi-menu {\n    margin: 0 auto;\n    max-width: 1000px;\n    column-width: 300px;\n    display: block;\n\n    .pi-item {\n      display: block;\n      padding: 1em 2em;\n    }\n  }\n}\n\n.app-menu {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  padding: 0;\n  margin: 0;\n  width: 300px;\n  max-width: 100%;\n  background: lighten($header-color, 15%);\n  transform: translateX(-100%);\n  transition: all 0.1s ease;\n  padding-top: 85px;\n  z-index: 1;\n\n  &.is-open {\n    transform: none;\n    box-shadow: $menu-shadow-size 0px $menu-shadow-size (-$menu-shadow-size) rgba(0, 0, 0, 0.2);\n  }\n\n  .app-menu-content {\n    overflow-y: auto;\n    height: 100%;\n  }\n\n  .pi-menu {\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n\n    > .pi-item {\n      flex: 1;\n      margin: 1px 0;\n\n      > a {\n        display: block;\n        border-left: 5px solid $header-color;\n        padding: 1em;\n\n        &:hover {\n          border-left-color: $menu-color;\n        }\n      }\n    }\n  }\n}\n\n.pi-spinner {\n  position: relative;\n  width: $basic-spinner-dimensions;\n  height: $basic-spinner-dimensions;\n  font-size: 0;\n\n  &:before,\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    border-width: 4px;\n    border-style: solid;\n    border-radius: 50%;\n  }\n\n  @keyframes rotate-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes anti-rotate-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(-360deg);\n    }\n  }\n\n  &:before {\n    width: $main-spinner-dimensions;\n    height: $main-spinner-dimensions;\n    border-bottom-color: $basic-dark-color;\n    border-right-color: $basic-dark-color;\n    border-top-color: rgba($basic-dark-color, 0);\n    border-left-color: rgba($basic-dark-color, 0);\n    top: 0;\n    left: 0;\n    animation: rotate-animation 1s linear 0s infinite;\n  }\n\n  &:after {\n    width: $small-spinner-dimensions;\n    height: $small-spinner-dimensions;\n    border-bottom-color: $basic-dark-color;\n    border-right-color: $basic-dark-color;\n    border-top-color: rgba($basic-dark-color, 0);\n    border-left-color: rgba($basic-dark-color, 0);\n    top: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;\n    left: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;\n    animation: anti-rotate-animation 0.85s linear 0s infinite;\n  }\n}\n\n$tile-height: 70px;\n$tile-width: 70px;\n$tile-gap: 10px;\n\n.pi-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.pi-dashboard {\n  flex: 1;\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, $tile-width);\n  grid-template-rows: repeat(auto-fit, $tile-height);\n  grid-gap: $tile-gap;\n  overflow: visible;\n\n  .pi-tile {\n    display: flex;\n    position: relative;\n\n    &.small {\n      grid-column: span 1;\n      grid-row: span 1;\n      width: $tile-width;\n      height: $tile-height;\n    }\n\n    &.medium {\n      grid-column: span 2;\n      grid-row: span 2;\n      width: 2 * $tile-width + 1 * $tile-gap;\n      height: 2 * $tile-height + 1 * $tile-gap;\n    }\n\n    &.wide {\n      grid-column: span 4;\n      grid-row: span 2;\n      width: 4 * $tile-width + 3 * $tile-gap;\n      height: 2 * $tile-height + 1 * $tile-gap;\n    }\n\n    &.large {\n      grid-column: span 4;\n      grid-row: span 4;\n      width: 4 * $tile-width + 3 * $tile-gap;\n      height: 4 * $tile-height + 3 * $tile-gap;\n    }\n\n    &:hover {\n      outline: rgba(29, 29, 29, 0.1) solid 4px;\n    }\n  }\n}\n\n.pi-search {\n  position: relative;\n  flex: 1;\n  display: flex;\n  justify-content: center;\n\n  input[type=search] {\n    font-size: 1em;\n    border: 1px solid transparent;\n    background-color: #f1f1f1;\n    padding: 10px;\n    font-size: 16px;\n    max-width: 80%;\n    width: 250px;\n    box-sizing: border-box;\n    transition: width ease 0.1s;\n\n    @media screen and (max-width: $breakpoint-mobile) {\n      width: 100px;\n    }\n  }\n\n  &:focus-within input[type=search] {\n    width: 90%;\n    max-width: 90%;\n\n    & + .pi-details:not(:empty) {\n      display: block;\n      opacity: 1;\n    }\n  }\n\n  .pi-details {\n    display: none;\n    opacity: 0;\n    position: absolute;\n    z-index: 2;\n    top: 100%;\n    width: 90%;\n    box-sizing: border-box;\n    background: #f0f0f0;\n    padding: 1px;\n    transition: all 0.1s 0.1s ease;\n  }\n\n  .pi-item {\n    display: block;\n    padding: 10px;\n    cursor: pointer;\n    background-color: white;\n    border-bottom: 1px solid #d4d4d4;\n  }\n\n  .pi-item:hover {\n    background-color: #e9e9e9;\n  }\n\n  .pi-center {\n    padding: 30px;\n    background-color: white;\n  }\n}\n\n.form-row {\n  margin: 1em;\n\n  label {\n    display: block;\n    margin-bottom: 0.2em;\n  }\n\n  input {\n    padding: 0.3rem;\n    font-size: 1rem;\n  }\n\n  button {\n    padding: 0.5em 1em;\n    border: 1px solid black;\n    font-weight: bold;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  button:disabled {\n    border: 1px solid #ccc;\n    color: #ccc;\n    cursor: default;\n  }\n}\n\n.pi-error {\n  > img {\n    width: 600px;\n    max-width: 100%;\n    margin: 1em 0;\n  }\n\n  .pi-title {\n    color: $basic-dark-color;\n    display: block;\n    font-size: 1.5em;\n  }\n\n  .pi-description {\n    display: block;\n    margin: 0.5em 0;\n  }\n\n  .pi-details {\n    display: block;\n    margin: 0.5em 0;\n    color: #3e3e3e;\n    font-size: 0.8em;\n  }\n}\n\n.app-user {\n  position: relative;\n\n  .app-user-avatar {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    cursor: pointer;\n\n    img {\n      position: relative;\n      overflow: hidden;\n      width: 32px;\n      min-width: 32px;\n      height: 32px;\n      border-radius: 50% !important;\n      vertical-align: middle;\n      border-style: none;\n      box-sizing: border-box;\n      line-height: 1;\n      margin-right: 0.5em;\n    }\n\n    &::after {\n      display: inline-block;\n      box-sizing: border-box;\n      height: 8px;\n      width: 8px;\n      border-style: solid;\n      border-color: black;\n      border-width: 0px 2px 2px 0px;\n      position: relative;\n      transform: rotate(45deg);\n      transition: opacity 150ms ease-in-out;\n      content: '';\n    }\n  }\n\n  .app-user-details {\n    display: none;\n    list-style: none;\n    position: absolute;\n    background: white;\n    padding: 0;\n    right: 0;\n    border: 1px solid #ececec;\n    border-radius: 3px;\n    top: 40px;\n    cursor: default;\n\n    li {\n      display: block;\n      padding: 10px;\n      max-width: 300px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      text-align: right;\n\n      & > a {\n        display: block;\n      }\n\n      &.sep {\n        border-bottom: 1px solid #ccc;\n        padding: 0;\n      }\n\n      .user-name {\n        font-weight: bold;\n        color: #666;\n        display: block;\n        font-size: 0.6em;\n      }\n    }\n\n    &:before, &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      bottom: 100%;\n      width: 0;\n      height: 0;\n    }\n\n    &:before {\n      right: 27px;\n      border: 6px solid transparent;\n      border-bottom-color: #ececec;\n    }\n\n    &:after {\n      right: 28px;\n      border: 5px solid transparent;\n      border-bottom-color: #fff;\n    }\n  }\n\n  &.is-open {\n    img {\n      opacity: 0.8;\n    }\n\n    .app-user-details {\n      display: block;\n    }\n\n    &::after {\n      opacity: 0.2;\n    }\n  }\n}\n","$bg-color: white;\n$basic-dark-color: #56aa1c;\n$header-color: #abcdef;\n$footer-color: lighten($header-color, 10%);\n$menu-color: darken($header-color, 20%);\n$border-width: 4px;\n$basic-spinner-dimensions: 50px;\n$main-spinner-dimensions: $basic-spinner-dimensions - $border-width * 2;\n$small-spinner-dimensions: $main-spinner-dimensions * 0.7;\n$menu-shadow-size: 30px;\n\n$hamburger-padding: 15px 0 !default;\n$hamburger-layer-width: 40px !default;\n$hamburger-layer-height: 4px !default;\n$hamburger-layer-spacing: 6px !default;\n$hamburger-layer-color: #000 !default;\n$hamburger-layer-border-radius: 4px !default;\n$hamburger-hover-opacity: 0.7 !default;\n$hamburger-active-layer-color: $hamburger-layer-color !default;\n$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;\n$hamburger-hover-use-filter: false !default;\n$hamburger-hover-filter: opacity(50%) !default;\n$hamburger-active-hover-filter: $hamburger-hover-filter !default;\n\n$breakpoint-mobile: 450px;\n$breakpoint-tablet: 650px;\n\n@import './layout';\n@import './burger';\n",".hamburger {\n  padding: $hamburger-padding;\n  display: inline-block;\n  cursor: pointer;\n\n  transition-property: opacity, filter;\n  transition-duration: 0.15s;\n  transition-timing-function: linear;\n\n  // Normalize (<button>)\n  font: inherit;\n  color: inherit;\n  text-transform: none;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  overflow: visible;\n  transform: scale(0.6);\n\n  &:hover {\n    @if $hamburger-hover-use-filter == true {\n      filter: $hamburger-hover-filter;\n    }\n    @else {\n      opacity: $hamburger-hover-opacity;\n    }\n  }\n\n  &.is-active {\n    &:hover {\n      @if $hamburger-hover-use-filter == true {\n        filter: $hamburger-active-hover-filter;\n      }\n      @else {\n        opacity: $hamburger-active-hover-opacity;\n      }\n    }\n\n    .hamburger-inner,\n    .hamburger-inner::before,\n    .hamburger-inner::after {\n      background-color: $hamburger-active-layer-color;\n    }\n  }\n}\n\n.hamburger-box {\n  width: $hamburger-layer-width;\n  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;\n  display: inline-block;\n  position: relative;\n}\n\n.hamburger-inner {\n  display: block;\n  top: 50%;\n  margin-top: $hamburger-layer-height / -2;\n\n  &,\n  &::before,\n  &::after {\n    width: $hamburger-layer-width;\n    height: $hamburger-layer-height;\n    background-color: $hamburger-layer-color;\n    border-radius: $hamburger-layer-border-radius;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;\n  }\n\n  &::after {\n    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;\n  }\n}\n\n.hamburger--arrow.is-active {\n  .hamburger-inner {\n    &::before {\n      transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1);\n    }\n\n    &::after {\n      transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1);\n    }\n  }\n}\n"]}