1 files changed, 191 insertions, 0 deletions
diff --git a/FrontEnd/src/views/common/common.sass b/FrontEnd/src/views/common/common.sass
new file mode 100644
index 00000000..cbf7292e
--- /dev/null
+++ b/FrontEnd/src/views/common/common.sass
@@ -0,0 +1,191 @@
+.image-cropper-container
+  position: relative
+  box-sizing: border-box
+  user-select: none
+
+.image-cropper-container img
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+
+.image-cropper-mask-container
+  position: absolute
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  overflow: hidden
+
+.image-cropper-mask
+  position: absolute
+  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)
+  touch-action: none
+
+.image-cropper-handler
+  position: absolute
+  width: 26px
+  height: 26px
+  border: black solid 2px
+  border-radius: 50%
+  background: white
+  touch-action: none
+
+.app-bar
+  display: flex
+  align-items: center
+  height: 56px
+
+  position: fixed
+  z-index: 1030
+  top: 0
+  left: 0
+  right: 0
+
+  background-color: var(--tl-primary-color)
+
+  transition: background-color 1s
+
+  a
+    color: var(--tl-text-on-primary-inactive-color)
+    text-decoration: none
+    margin: 0 1em
+
+    &:hover
+      color: var(--tl-text-on-primary-color)
+
+    &.active
+      color: var(--tl-text-on-primary-color)
+
+.app-bar-brand
+  display: flex
+  align-items: center
+
+.app-bar-brand-icon
+  height: 2em
+
+.app-bar-main-area
+  display: flex
+  flex-grow: 1
+
+.app-bar-link-area
+  display: flex
+  align-items: center
+  flex-shrink: 0
+
+.app-bar-user-area
+  display: flex
+  align-items: center
+  flex-shrink: 0
+  margin-left: auto
+
+.small-screen
+  .app-bar-main-area
+    position: absolute
+    top: 56px
+    left: 0
+    right: 0
+
+    transform-origin: top
+    transition: transform 0.6s, background-color 1s
+
+    background-color: var(--tl-primary-color)
+
+    flex-direction: column
+
+    &.app-bar-collapse
+      transform: scale(1,0)
+
+    a
+      text-align: left
+      padding: 0.5em 0.5em
+
+  .app-bar-link-area
+    flex-direction: column
+    align-items: stretch
+
+  .app-bar-user-area
+    flex-direction: column
+    align-items: stretch
+    margin-left: unset
+
+  .app-bar-avatar
+    align-self: flex-end
+
+.app-bar-toggler
+  margin-left: auto
+  font-size: 2em
+  margin-right: 1em
+  color: var(--tl-text-on-primary-color)
+  cursor: pointer
+  user-select: none
+
+.cru-skeleton
+  padding: 0 1em
+
+.cru-skeleton-line
+  height: 1em
+  background-color: #e6e6e6
+  margin: 0.7em 0
+  border-radius: 0.2em
+
+  &.last
+    width: 50%
+
+.cru-full-page
+  position: fixed
+  z-index: 1031
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  background-color: white
+  padding-top: 56px
+
+.cru-full-page-top-bar
+  height: 56px
+
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  z-index: 1
+
+  background-color: var(--tl-primary-color)
+
+  display: flex
+  align-items: center
+
+.cru-full-page-content-container
+  overflow: scroll
+
+.cru-menu
+  min-width: 200px
+
+.cru-menu-item
+  font-size: 1.2em
+  padding: 0.5em 1.5em
+  cursor: pointer
+
+  @each $color, $value in $theme-colors
+    &.color-#{$color}
+      color: $value
+
+      &:hover
+        color: white
+        background-color: $value
+
+.cru-menu-item-icon
+  margin-right: 1em
+
+.cru-menu-divider
+  border-top: 1px solid $gray-200
+
+.cru-tab-pages-action-area
+  display: flex
+  align-items: center
+
+.cru-search-input
+  display: flex
+  flex-wrap: wrap