@trintel/zooy 1.0.1-beta.0

package/src/sass/panels.scss

@@ -0,0 +1,642 @@
+//--------------------------------------------------------------------------------------
+.zoo__main-menu-inner-wrapper {
+  margin: 1rem;
+  display: flex;
+  flex-flow: column wrap;
+  align-items: flex-start;
+}
+
+.zoo__list-wrap {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 960px;
+  position: relative;
+  margin: 20px auto 0;
+  padding: 0 20px;
+
+  &.three_wide {
+    max-width: 1030px;
+  }
+
+  &.four_wide {
+    max-width: 1330px;
+  }
+
+  &.full_wide {
+    max-width: 100%;
+  }
+
+  &.force_full_wide {
+    max-width: 100%;
+    min-width: 100%;
+  }
+}
+
+.zoo__list-control {
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+  max-width: calc(100% - 40px);
+  min-width: calc(8.33333% - 40px);
+  word-wrap: break-word;
+  margin: 0 20px;
+  padding-bottom: 3rem;
+  //overflow: scroll; // This causes a white box on the overflow scrollbar
+}
+
+.zoo__modal-base {
+  background-color: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+
+  &.top_locked {
+    align-items: flex-start;
+  }
+
+  .zoo__panel_a {
+    height: initial;
+    width: initial;
+    max-width: 80vw;
+    min-width: 50vw;
+    border-radius: 10px;
+    background: rgba(255,255,255,0.7);
+    backdrop-filter: blur(10px);
+  }
+}
+
+.zoo__suppress-width--30 {
+  max-width: 30rem !important;
+}
+
+.zoo__force-width--80pers {
+  width: 80% !important;
+}
+
+.zoo__min-height--12vh {
+  min-height: 12vh;
+}
+
+.zoo__max-hw--90vh90vw {
+  max-height: 90vh;
+  max-width: 90vw;
+}
+
+.zoo__max_height--95vh {
+  max-height: 95vh;
+}
+
+.zoo__max_height--90vh {
+  max-height: 90vh;
+}
+
+.zoo__max_height--85vh {
+  max-height: 85vh;
+}
+
+.zoo__max_height--80vh {
+  max-height: 80vh;
+}
+
+.zoo__suggest_width_90vw {
+  flex-basis: 90vw;;
+}
+
+.zoo__suggest_width_1000 {
+  flex-basis: 1000px;
+}
+
+.zoo__suggest_width_950 {
+  flex-basis: 950px;
+}
+
+.zoo__suggest_width_900 {
+  flex-basis: 900px;
+}
+
+.zoo__suggest_width_850 {
+  flex-basis: 850px;
+}
+
+.zoo__suggest_width_800 {
+  flex-basis: 800px;
+}
+
+.zoo__suggest_width_750 {
+  flex-basis: 750px;
+}
+
+.zoo__suggest_width_700 {
+  flex-basis: 700px;
+}
+
+.zoo__suggest_width_650 {
+  flex-basis: 650px;
+}
+
+.zoo__suggest_width_600 {
+  flex-basis: 600px;
+}
+
+.zoo__suggest_width_550 {
+  flex-basis: 550px;
+}
+
+.zoo__suggest_width_500 {
+  flex-basis: 500px;
+  min-width: initial !important;
+}
+
+.zoo__suggest_width_450 {
+  flex-basis: 450px;
+  min-width: initial !important;
+}
+
+.zoo__suggest_width_400 {
+  flex-basis: 400px;
+  min-width: initial !important;
+}
+
+.zoo__suggest_width_350 {
+  flex-basis: 350px;
+  min-width: initial !important;
+}
+
+.zoo__suggest_width_300 {
+  flex-basis: 300px;
+  min-width: initial !important;
+}
+
+.zoo__suggest_width_200 {
+  flex-basis: 200px;
+  min-width: initial !important;
+}
+
+.zoo__suppress-elevation {
+  box-shadow: none !important;
+}
+
+.zoo__border-radius--10 {
+  border-radius: 10px;
+}
+
+.zoo__border-radius--15 {
+  border-radius: 15px;
+}
+
+.zoo__border-radius--20 {
+  border-radius: 20px;
+}
+
+.app-fab--fixed.app-fab--fixed {
+  position: fixed;
+  bottom: 4rem;
+  right: 3rem;
+  z-index: 2;
+}
+
+.app-fab--absolute.app-fab--absolute {
+  position: absolute;
+  bottom: 4rem;
+  right: 3rem;
+}
+
+@media(min-width: 1024px) {
+  .app-fab--absolute.app-fab--absolute {
+    bottom: 3rem;
+    right: 2rem;
+  }
+}
+
+//--[  Flex ]--
+
+.zoo__flex-container {
+  display: flex;
+  flex-flow: column nowrap;
+  .flex-flow__row_wrap {
+    flex-flow: row wrap;
+  }
+  .flex-flow__row_nowrap {
+    flex-flow: row nowrap;
+  }
+  .flex-flow__column_wrap {
+    flex-flow: column wrap;
+  }
+  .flex-direction__row {
+    flex-direction: row;
+  }
+  .flex-direction__column {
+    flex-direction: column;
+  }
+  .wrap {
+    flex-wrap: wrap;
+  }
+  .nowrap {
+    flex-wrap: nowrap;
+  }
+  .align-items__center {
+    align-items: center;
+  }
+  .justify-content__center {
+    justify-content: center;
+  }
+  .justify-content__space-between {
+    justify-content: space-between;
+  }
+  .align-content__flex-start {
+    align-content: flex-start;
+  }
+  .align-content__flex-end {
+    align-content: flex-end;
+  }
+  .padding_0_24 {
+    padding: 0 24px;
+  }
+
+  & > .dashboard_grid_element {
+    background-color: #e1e2e1;
+    flex-grow: 1;
+    flex-shrink: 1;
+    margin: 3px;
+  }
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.display__none {
+  display: none !important;
+}
+
+.margin-bottom__24 {
+  margin-bottom: 24px;
+}
+
+.zoo__flex-item {
+  flex: 1;
+  order: 1;
+  flex-basis: auto;
+}
+
+.pan-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.zoo_async_html > .pan-wrapper {
+  position: relative;
+}
+
+.zoo__panel_a {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.zoo__toolbar {
+  background-color: #953b39;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0px -1px 0px rgba(0,0,0,0.05) inset;
+  flex-shrink: 0;
+}
+
+.zoo__tool_group {
+  display: flex;
+  align-items: center;
+}
+
+.zoo__tool_group_left {
+  background-color: pink;
+  margin-right: 20px;
+}
+
+.zoo__tool_head_group {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-grow: 2;
+  background-color: chocolate;
+}
+
+.zoo__tool_group_right {
+  background-color: coral;
+}
+
+
+/* Large */
+.zoo__tabbar {
+  background-color: orange;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+  box-shadow: 0px -1px 0px rgba(0,0,0,0.05) inset;
+}
+
+/* Medium screens */
+@media all and (max-width: 800px) {
+  .zoo__tabbar {
+    /* When on medium sized screens, we center it by evenly distributing empty space around items */
+    justify-content: space-around;
+  }
+  .zoo__toolbar {
+    flex-direction: column;
+  }
+  .zoo__toolbar > .zoo__tool_group {
+    min-width: 100%;
+  }
+  .zoo__tool_head_group {
+    order:1;
+    justify-content: space-around;
+    flex-direction: column;
+  }
+  .zoo__tool_group_left {
+    order: 2;
+    justify-content: space-around;
+  }
+  .zoo__tool_group_right {
+    order: 3;
+    justify-content: space-around;
+  }
+}
+
+/* Small screens */
+@media all and (max-width: 500px) {
+  .zoo__tabbar {
+    /* On small screens, we are no longer using row direction but column */
+    flex-direction: column;
+  }
+  .zoo__actionbar > .zoo__tool_group {
+    flex-direction: column;
+  }
+}
+
+.zoo__content {
+  position: relative;
+  flex: 999999 !important;
+
+  .zoo__panel_a {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+  }
+}
+
+.zoo__actionbar {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: center;
+  background-color: mediumpurple;
+  flex-shrink: 0;
+}
+
+
+//--[  Button Positions ]--
+.zoo__actionbar > .zoo__tool_group > .mdc-menu-surface--anchor,
+.zoo__actionbar > .zoo__tool_group > .mdc-button {
+  margin: 24px;
+}
+
+.zoo__actionbar > .zoo__action_group_left > .mdc-button {
+  margin-right: 0;
+}
+
+.zoo__actionbar > .zoo__action_group_right {
+  flex-flow: row-reverse wrap-reverse;
+}
+
+.zoo__actionbar > .zoo__action_group_right > .mdc-button {
+  margin-left: 0;
+}
+
+.zoo__tabbar > .mdc-button {
+  margin: 5px;
+}
+
+.zoo__tabbar.zoo__tabbar_padded > .mdc-button {
+  margin: 18px 5px;
+}
+
+//.zoo__toolbar .mdc-button {
+//  margin-left: 5px;
+//  padding: 0;
+//  width: 48px;
+//  height: 48px;
+//  line-height: 48px;
+//}
+
+.scrolly_content {
+  position: absolute;
+  height: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+  &.relative_position {
+    position: relative;
+  }
+}
+
+.zoo__content.center_center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.zoo__content.center_end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.zoo__content.center_start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.zoo__content.stretch_start {
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.zoo__modifier__flex-direction-row {
+    flex-direction: row;
+}
+
+.zoo__modifier__flex-wrap_nowrap {
+    flex-wrap: nowrap;
+}
+
+.zoo__modifier__align-center {
+    align-items: center;
+}
+
+@media(min-width: 1024px) {
+  #bottom_right-absolute-fab {
+    bottom: 3rem;
+    right: 5rem;
+  }
+}
+
+/* Panels inside panel content ---------------------------------------------- */
+
+.zoo__content.zoo__floaty_content > .pan-wrapper {
+  position: relative;
+  left: initial;
+  right: initial;
+  top: initial;
+  bottom: initial;
+}
+
+.zoo__content.zoo__floaty_content {
+  align-items: baseline;
+  justify-content: flex-start;
+  overflow: auto;
+  flex-flow: row wrap;
+}
+
+.zoo__content.zoo__floaty_content.center_center {
+  align-items: center;
+  justify-content: center;
+}
+
+.zoo__content.zoo__floaty_content.baseline_center {
+  align-items: baseline;
+  justify-content: center;
+}
+
+.zoo__content.zoo__floaty_content.center_center > .pan-wrapper,
+.zoo__content.zoo__floaty_content.baseline_center > .pan-wrapper {
+  margin: 30px 0 0 0;
+}
+
+.zoo__floaty_content.table_manages_scroll {
+  overflow: hidden;
+}
+
+.no_flex_resize {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+//--[ Animations ]--
+.slide-in-top {
+  -webkit-animation: slide-in-top .2s cubic-bezier(.25, .46, .45, .94) both;
+  animation: slide-in-top .5s cubic-bezier(.25, .46, .45, .94) both
+}
+
+@-webkit-keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+    transform: translateY(-1000px);
+    opacity: 0
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1
+  }
+}
+
+@keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+    transform: translateY(-1000px);
+    opacity: 0
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1
+  }
+}
+
+
+.slide-in-fwd-center {
+  -webkit-animation: slide-in-fwd-center .2s cubic-bezier(.25, .46, .45, .94) both;
+  animation: slide-in-fwd-center .2s cubic-bezier(.25, .46, .45, .94) both
+}
+
+@-webkit-keyframes slide-in-fwd-center {
+  0% {
+    -webkit-transform: translateZ(-1400px);
+    transform: translateZ(-1400px);
+    opacity: 0
+  }
+  100% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    opacity: 1
+  }
+}
+
+@keyframes slide-in-fwd-center {
+  0% {
+    -webkit-transform: translateZ(-1400px);
+    transform: translateZ(-1400px);
+    opacity: 0
+  }
+  100% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    opacity: 1
+  }
+}
+
+.kenburns-bottom {
+  -webkit-animation: kenburns-bottom 10s ease-out both;
+  animation: kenburns-bottom 10s ease-out both
+}
+
+@-webkit-keyframes kenburns-bottom {
+  0% {
+    -webkit-transform: scale(1) translateY(0);
+    transform: scale(1) translateY(0);
+    -webkit-transform-origin: 50% 84%;
+    transform-origin: 50% 84%;
+  }
+  100% {
+    -webkit-transform: scale(1.25) translateY(15px);
+    transform: scale(1.25) translateY(15px);
+    -webkit-transform-origin: bottom;
+    transform-origin: bottom;
+  }
+}
+
+@keyframes kenburns-bottom {
+  0% {
+    -webkit-transform: scale(1) translateY(0);
+    transform: scale(1) translateY(0);
+    -webkit-transform-origin: 50% 84%;
+    transform-origin: 50% 84%;
+  }
+  100% {
+    -webkit-transform: scale(1.25) translateY(15px);
+    transform: scale(1.25) translateY(15px);
+    -webkit-transform-origin: bottom;
+    transform-origin: bottom;
+  }
+}

package/src/sass/reset.scss

@@ -0,0 +1,43 @@
+html {
+  box-sizing: border-box;
+}
+
+//*, *:before, *:after {
+//  box-sizing: inherit;
+//}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(0, 0, 0, 0.05);
+}
+