feat(web): tailwind css (#1147)

packages/web/src/stylesheets/_ui.scss

@@ -1,197 +1,6 @@
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `$screen-xs` as of v3.0.1
-$screen-xs: 480px !default;
-//** Deprecated `$screen-xs-min` as of v3.2.0
-$screen-xs-min: $screen-xs !default;
-
-// Small screen / tablet
-//** Deprecated `$screen-sm` as of v3.0.1
-$screen-sm: 768px !default;
-$screen-sm-min: $screen-sm !default;
-
-// Medium screen / desktop
-//** Deprecated `$screen-md` as of v3.0.1
-$screen-md: 992px !default;
-$screen-md-min: $screen-md !default;
-//** Deprecated `$screen-desktop` as of v3.0.1
-$screen-desktop: $screen-md-min !default;
-
-// Large screen / wide desktop
-//** Deprecated `$screen-lg` as of v3.0.1
-$screen-lg: 1200px !default;
-$screen-lg-min: $screen-lg !default;
-//** Deprecated `$screen-lg-desktop` as of v3.0.1
-$screen-lg-desktop: $screen-lg-min !default;
-
-// So media queries don't overlap when required, provide a maximum
-$screen-xs-max: ($screen-sm-min - 1) !default;
-$screen-sm-max: ($screen-md-min - 1) !default;
-$screen-md-max: ($screen-lg-min - 1) !default;
-
-@mixin MQ-Xsmall() {
-  @media (max-width: $screen-xs-max) {
-    @content;
-  }
-}
-
-@mixin MQ-Small() {
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    @content;
-  }
-}
-
-@mixin MQ-Medium() {
-  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
-    @content;
-  }
-}
-
-@mixin MQ-Large() {
-  @media (min-width: $screen-lg-min) {
-    @content;
-  }
-}
-
-.block {
-  display: block !important;
-}
-
-.inline {
-  display: inline-block;
-}
-
-.normal {
-  font-weight: normal !important;
-}
-
-.small-text {
-  font-size: 10px;
-}
-
-.medium-text {
-  font-size: 14px !important;
-}
-
-.faded {
-  opacity: 0.5;
-}
-
-.self-start {
-  align-self: flex-start;
-}
-
-.justify-self-start {
-  justify-self: flex-start;
-}
-
-.animate-slide-in-top {
-  animation: slide-in-top 0.1s ease-out;
-}
-
-@keyframes slide-in-top {
-  0% {
-    opacity: 0;
-    transform: translateY(-40%);
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(0%);
-  }
-}
-
-.border-0 {
-  border-width: 0px;
-}
-
-.rounded {
-  border-radius: var(--sn-stylekit-general-border-radius);
-}
-.rounded-md {
-  border-radius: 0.3046875rem;
-}
-
-.bg-transparent {
-  background-color: transparent;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.col-start-1 {
-  grid-column-start: 1;
-}
-.col-start-2 {
-  grid-column-start: 2;
-}
-.col-end-3 {
-  grid-column-end: 3;
-}
-
-.hover\:color-info:hover {
-  color: var(--sn-stylekit-info-color);
-}
-
-.hover\:brightness-130:hover {
-  filter: brightness(130%);
-}
-
-.cursor-pointer {
-  cursor: pointer;
-
-  input[type='checkbox'] {
-    cursor: pointer;
-  }
-}
-
-.cursor-default {
-  cursor: default;
-}
-
-.pointer-events-none {
-  pointer-events: none;
-}
-
 .font-editor {
   font-family: var(--sn-stylekit-editor-font-family);
 }
-.font-semibold {
-  font-weight: 600 !important;
-}
-.font-bold {
-  font-weight: 700 !important;
-}
-
-.grid-template-cols-1fr {
-  grid-template-columns: 1fr;
-}
-
-.relative {
-  position: relative;
-}
-
-.row-start-1 {
-  grid-row-start: 1;
-}
-
-.selectable {
-  user-select: text !important;
-  cursor: text;
-}
-
-.shadow-sm {
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.12);
-}
-
-.text-sm {
-  font-size: var(--sn-stylekit-font-size-h5);
-}
 
 .wrap {
   word-wrap: break-word;