avo 0.4.9 → 0.5.0.beta4

data/app/frontend/css/application.css

@@ -0,0 +1,73 @@
+@import './../../../node_modules/simplemde/dist/simplemde.min.css';
+@import './../../../node_modules/toastr/build/toastr.css';
+@import './../../../node_modules/tippy.js/dist/tippy.css';
+@import './../../../node_modules/tippy.js/themes/light.css';
+@import './../../../node_modules/trix/dist/trix.css';
+@import './../../../node_modules/flatpickr/dist/flatpickr.css';
+
+@import './tailwindcss/base.css';
+@import './tailwindcss/components.css';
+
+@import './fonts.css';
+@import './typography.css';
+@import './tooltips.css';
+@import './alerts.css';
+@import './loader.css';
+@import './pagination.css';
+
+@import './components/status.css';
+@import './components/code.css';
+
+@import './tailwindcss/utilities.css';
+
+html,
+body {
+  @apply antialiased relative h-full;
+}
+
+.will-change-transform {
+  will-change: transform;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  will-change: opacity;
+  will-change: transform;
+
+  @apply transition transform duration-150;
+}
+
+.fade-enter-active {
+  @apply relative ease-out delay-150;
+}
+
+.fade-leave-active {
+  @apply relative ease-in;
+}
+
+.fade-enter {
+  @apply delay-150 opacity-0 -translate-y-1;
+}
+
+.fade-enter-to {
+  @apply  delay-150 opacity-100 translate-y-0;
+}
+
+.fade-leave {
+  @apply opacity-100 translate-y-0;
+}
+
+.fade-leave-to {
+  @apply opacity-0 translate-y-1;
+}
+
+.application-sidebar {
+  .active:hover,
+  .active {
+    @apply bg-gray-200;
+  }
+}
+
+.turbo-progress-bar {
+  @apply bg-green-500;
+}

data/app/frontend/css/components/code.css

@@ -0,0 +1,27 @@
+@import 'codemirror/lib/codemirror.css';
+
+/* themes */
+@import 'codemirror/theme/dracula.css';
+@import 'codemirror/theme/eclipse.css';
+@import 'codemirror/theme/material-darker.css';
+
+
+/* programming_languages */
+@import 'codemirror/mode/css/css'
+@import 'codemirror/mode/dockerfile/dockerfile'
+@import 'codemirror/mode/htmlmixed/htmlmixed'
+@import 'codemirror/mode/javascript/javascript'
+@import 'codemirror/mode/markdown/markdown'
+@import 'codemirror/mode/nginx/nginx'
+@import 'codemirror/mode/php/php'
+@import 'codemirror/mode/ruby/ruby'
+@import 'codemirror/mode/sass/sass'
+@import 'codemirror/mode/shell/shell'
+@import 'codemirror/mode/sql/sql'
+@import 'codemirror/mode/vue/vue'
+@import 'codemirror/mode/xml/xml'
+
+.CodeMirror {
+  height: var(--height) !important;
+  min-height: auto;
+}

data/app/frontend/css/components/status.css

@@ -0,0 +1,30 @@
+.spinner {
+  position: relative;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  top: 3px;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}

data/app/frontend/css/fonts.css

@@ -0,0 +1,26 @@
+/* nunito-regular - latin */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./../fonts/nunito-v16-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local(''),
+       url('./../fonts/nunito-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./../fonts/nunito-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./../fonts/nunito-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('./../fonts/nunito-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./../fonts/nunito-v16-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
+}
+/* nunito-700 - latin */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./../fonts/nunito-v16-latin-700.eot'); /* IE9 Compat Modes */
+  src: local(''),
+       url('./../fonts/nunito-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./../fonts/nunito-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./../fonts/nunito-v16-latin-700.woff') format('woff'), /* Modern Browsers */
+       url('./../fonts/nunito-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./../fonts/nunito-v16-latin-700.svg#Nunito') format('svg'); /* Legacy iOS */
+}

data/app/frontend/css/loader.css

@@ -0,0 +1,134 @@
+svg.tea {
+  --secondary: #33406f;
+}
+svg.tea #teabag {
+  transform-origin: top center;
+  transform: rotate(3deg);
+  animation: swing 2s infinite;
+}
+svg.tea #steamL {
+  stroke-dasharray: 13;
+  stroke-dashoffset: 13;
+  animation: steamLarge 2s infinite;
+}
+svg.tea #steamR {
+  stroke-dasharray: 9;
+  stroke-dashoffset: 9;
+  animation: steamSmall 2s infinite;
+}
+@-moz-keyframes swing {
+  50% {
+    transform: rotate(-3deg);
+  }
+}
+@-webkit-keyframes swing {
+  50% {
+    transform: rotate(-3deg);
+  }
+}
+@-o-keyframes swing {
+  50% {
+    transform: rotate(-3deg);
+  }
+}
+@keyframes swing {
+  50% {
+    transform: rotate(-3deg);
+  }
+}
+@-moz-keyframes steamLarge {
+  0% {
+    stroke-dashoffset: 13;
+    opacity: 0.6;
+  }
+  100% {
+    stroke-dashoffset: 39;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes steamLarge {
+  0% {
+    stroke-dashoffset: 13;
+    opacity: 0.6;
+  }
+  100% {
+    stroke-dashoffset: 39;
+    opacity: 0;
+  }
+}
+@-o-keyframes steamLarge {
+  0% {
+    stroke-dashoffset: 13;
+    opacity: 0.6;
+  }
+  100% {
+    stroke-dashoffset: 39;
+    opacity: 0;
+  }
+}
+@keyframes steamLarge {
+  0% {
+    stroke-dashoffset: 13;
+    opacity: 0.6;
+  }
+  100% {
+    stroke-dashoffset: 39;
+    opacity: 0;
+  }
+}
+@-moz-keyframes steamSmall {
+  10% {
+    stroke-dashoffset: 9;
+    opacity: 0.6;
+  }
+  80% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+  100% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes steamSmall {
+  10% {
+    stroke-dashoffset: 9;
+    opacity: 0.6;
+  }
+  80% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+  100% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+}
+@-o-keyframes steamSmall {
+  10% {
+    stroke-dashoffset: 9;
+    opacity: 0.6;
+  }
+  80% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+  100% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+}
+@keyframes steamSmall {
+  10% {
+    stroke-dashoffset: 9;
+    opacity: 0.6;
+  }
+  80% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+  100% {
+    stroke-dashoffset: 27;
+    opacity: 0;
+  }
+}

data/app/frontend/css/pagination.css

@@ -0,0 +1,67 @@
+.pagy-nav,
+.pagy-nav-js,
+.pagy-combo-nav-js {
+  @apply relative z-0 flex;
+}
+
+.pagy-nav.pagination,
+.pagy-nav-js.pagination,
+.pagy-combo-nav-js.pagination {
+  @apply space-x-2;
+}
+
+.pagy-nav .page a{
+  @apply block;
+}
+
+.pagy-nav .page a,
+.pagy-nav .page.active,
+.pagy-nav .page.prev.disabled,
+.pagy-nav .page.next.disabled,
+.pagy-nav-js .page a,
+.pagy-combo-nav-js .page a,
+.pagy-combo-nav-js .pagy-combo-input a {
+  @apply rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
+
+  &:focus{
+    @apply border-blue-300;
+  }
+
+  &:hover{
+    @apply bg-gray-300;
+  }
+
+  &:active{
+    @apply bg-gray-400 text-white;
+  }
+}
+
+.pagy-nav .page.prev.disabled,
+.pagy-nav-js .page.prev.disabled,
+.pagy-combo-nav-js .page.prev.disabled,
+.pagy-nav .page.next.disabled,
+.pagy-nav-js .page.next.disabled,
+.pagy-combo-nav-js .page.next.disabled {
+  @apply text-gray-400 cursor-default;
+
+  &:hover {
+    @apply text-gray-400 bg-gray-200;
+  }
+
+  &:active {
+    @apply text-gray-400 bg-gray-200;
+  }
+}
+
+.pagy-nav .page.active,
+.pagy-nav-js .page.active {
+  @apply text-white cursor-default bg-gray-400;
+
+  &:hover {
+    @apply text-white bg-gray-400;
+  }
+
+  &:active {
+    @apply bg-gray-400 text-white;
+  }
+}

data/app/frontend/css/tailwindcss/base.css

@@ -0,0 +1 @@
+@tailwind base;

data/app/frontend/css/tailwindcss/components.css

@@ -0,0 +1 @@
+@tailwind components;

data/app/frontend/css/tailwindcss/utilities.css

@@ -0,0 +1 @@
+@tailwind utilities;

data/app/frontend/css/tooltips.css

@@ -0,0 +1,105 @@
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+}
+
+.tooltip .tooltip-inner {
+  display: block;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
+  @apply bg-white text-gray-700 px-3 py-0 rounded text-xs;
+}
+
+.tooltip .tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: white;
+  z-index: 1;
+  /* filter: drop-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.1)) */
+}
+
+.tooltip[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.tooltip[x-placement^="top"] .tooltip-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.tooltip[x-placement^="bottom"] .tooltip-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.tooltip[x-placement^="right"] .tooltip-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.tooltip[x-placement^="left"] .tooltip-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip.popover .popover-inner {
+  background: #f9f9f9;
+  color: black;
+  padding: 24px;
+  border-radius: 5px;
+  box-shadow: 0 5px 30px rgba(black, .1);
+}
+
+.tooltip.popover .popover-arrow {
+  border-color: #f9f9f9;
+}
+
+.tooltip[aria-hidden='true'] {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .15s, visibility .15s;
+}
+
+.tooltip[aria-hidden='false'] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .15s;
+}