New web ui

webui/src/styles/content.sass

@@ -0,0 +1,142 @@
+.content
+  background: transparent
+  margin: 40px 0
+
+  .subtitle
+    font-size: 15px
+    text-transform: uppercase
+    color: $black
+    font-weight: $weight-bold
+    text-transform: uppercase
+    margin: 10px 0 0 0
+
+  .list-title
+    color: $text-dark
+    weight: $weight-semibold
+    margin: 5px 0 0 0
+
+  .list-item
+    width: 100%
+    display: block
+    align-items: center
+    font-size: 12px
+    padding: 6px 10px
+    border-top: 1px solid $border-light
+
+    .columns
+
+      .column
+        display: flex
+        align-items: center
+
+  .icon
+    width: 22px
+    height: 22px
+    display: block
+    float: left
+    margin-right: 10px
+
+.content-item
+  background: $white
+  border: 1px solid $border-secondary
+  margin: 10px 0
+  border-radius: 4px
+  box-shadow: 1px 2px 5px rgba($border, 0.4)
+
+  h2
+    color: $text-dark
+    font-size: 14px
+    padding: 20px 20px 0 20px
+    font-weight: $weight-semibold
+
+  .content-item-data
+    padding: 10px 20px
+
+    .item-data
+      display: flex
+      align-items: center
+      justify-content: space-between
+      padding: 5px 10px
+
+      &.border-right
+        border-right: 1px solid #DFE3E9
+
+    .data-blue
+      color: $blue
+      font-size: 22px
+      font-weight: $weight-semibold
+
+    .data-grey
+      color: $grey
+      font-size: 12px
+      font-weight: $weight-light
+
+  .widget-item
+    min-height: 80px
+    padding: 20px
+
+    h1
+      color: $text-dark
+      font-size: 18px
+      font-weight: $weight-light
+
+    img
+      width: 40px
+      heught: 40px
+      display: block
+      float: left
+      margin-right: 10px
+
+    span
+      font-size: 13px
+      display: block
+
+      &.mtop12
+        margin-top: 12px
+
+.loading-text
+  height: 320px
+  display: flex
+  align-items: center
+  justify-content: center
+
+  .main-loader
+    width: 70px
+    display: block
+    margin: 15px auto
+
+.search-container
+  height: 50px
+  background: $white
+  border-radius: 4px
+  color: $black
+  margin: 10px 0
+  display: flex
+  align-items: center
+  position: relative
+  box-shadow: 1px 2px 5px rgba($border, 0.4)
+  border: 1px solid $border-secondary
+
+  .icon
+    position: absolute
+    left: 10px
+    top: 13px
+
+  input
+    font-size: 16px
+    color: $text
+    width: 100%
+    height: 48px
+    padding-left: 50px
+    border: none
+    outline: none
+    font-weight: $weight-light
+    border-radius: 4px
+
+.notification
+  background: $white
+  border-radius: 4px
+  color: $text
+  font-size: 16px
+  box-shadow: 1px 2px 5px rgba($border, 0.4)
+  border: 1px solid $border-secondary