welcome_css 0.35 → 0.36

data/app/assets/stylesheets/_welcome-ui-tables.scss

@@ -109,9 +109,10 @@ table .ui-table-row {
 
 /* Table Cells  */
 .ui-table thead {
-  background-color: #edeff4;
-  /*border: 1px solid #edeff4;*/
-  font-family: 'hk-grotesk-bold';
+  /*background-color: #edeff4;*/
+  background-color: $ui_white;
+  /*border-bottom: 1px solid #000;*/
+  font-family: 'nunitosans-bold';
 }
 .ui-table table {
   background-color: $ui_white;
@@ -122,10 +123,10 @@ table .ui-table-row {
 }
 .ui-table td {
   padding: 26px 20px;
-  font-family: 'hk-grotesk-regular';
+  font-family: 'nunitosans-regular';
 }
 .ui-table td a {
-  font-family: 'hk-grotesk-semibold';
+  font-family: 'nunitosans-bold';
 }
 .ui-table .ui-sort {
   color: $ui_back;
@@ -135,6 +136,13 @@ table .ui-table-row {
   background-size: 8px;
   background-position: left 10px top 6px;
 }
+.ui-table thead tr {
+  background-image: url('icons/icn-dot.svg');
+  background-repeat: repeat-x;
+  background-position: bottom 1px left;
+  background-size: 1px;
+}
+
 .ui-app-area .table thead th {
   border-bottom: transparent;
 }
@@ -147,10 +155,26 @@ table .ui-table-row {
 .ui-toptable .col-lg-6:first-child {
   align-self: flex-end;
 }
+.ui-toptable h4 {
+  font-size: 18px !important;
+}
+.ui-table table thead .sort,
+.ui-table .table thead .sort {
+  background-image: image-url('icons/icn-sort.svg');
+  background-repeat: no-repeat;
+  background-size: 8px;
+  background-position: left 14px top 22px;
+  padding-left: 28px;
+}
+.ui-table table thead .sort a,
+.ui-table .table thead .sort a {
+  color: #000
+}
 
 /* =========================== */
 
-.am-content.ui-app-area .block {
+.am-content.ui-app-area .block,
+.am-wrapper.main-app .block {
   display: block;
   float: left;
   position: relative;
@@ -163,6 +187,7 @@ table .ui-table-row {
 }
 .ui-app-area .dropdown .btn-group {
   display: block;
+  padding: 3px 6px 0px 6px;
 }
 .ui-app-area .dropdown .btn-group .btn {
   width: 100%;
@@ -211,9 +236,23 @@ table .ui-table-row {
   padding-left: 15px;
 }
 
+.ui-app-area .dropdown .btn-group a,
+.ui-app-area .dropdown .btn-group button {
+  border-radius: 6px !important;
+  margin-bottom: 3px;
+}
+
 /* =========================== */
 /* Table Area Titles */
 
+.land-app .view-header h1,
+.land-app .white-header h1 {
+  font-size: $header-title;
+}
+.land-app .view-header h2,
+.land-app .white-header h2 {
+  font-size: $header-title;
+}
 .land-app .view-header h3,
 .land-app .white-header h3 {
   font-size: $header-title;
@@ -532,7 +571,7 @@ table .ui-table-row {
   border: 1px solid #DDDDDD;
   padding: 10px;
 }
- 
+
 .ui-app-area form #search:focus {
   box-shadow: 0 0 5px $ui_blue;
   border: 1px solid $ui_blue;
@@ -555,13 +594,24 @@ table .ui-table-row {
 .am-left-sidebar.col-12.col-lg-2.p-0.menu-app {
   display: block;
   float: left;
-  position: relative;
+  position: absolute;
+}
+.am-left-sidebar:before {
+  box-shadow: 0 0 15px rgba(174,174,174,0.15);
+  border-right: 1px solid #D9D9D9;
+  background-color: #fff !important;
 }
 .am-content.col-12.col-lg-10.mx-auto.ui-app-area {
   display: block;
   float: right;
   position: relative;
 }
+.am-wrapper.main-app .ui-app-area .main-content {
+  display: block;
+  float: left;
+  position: relative;
+  width: 100%;
+}
 .table-striped tbody tr:nth-of-type(odd), .table-striped tbody tr {
   background-color:#fff;
 }
@@ -761,6 +811,10 @@ table .ui-table-row {
 .am-content.ui-app-area .table-widget {
   background-color: $ui_white;
 }
+.am-content.ui-app-area table.no-ui {
+  background-color: transparent;
+  box-shadow: none;
+}
 
 /* =========================== */
 
@@ -845,7 +899,7 @@ table .ui-table-row {
   border-bottom: 1px solid #d9d9d9;
   margin-left: 0px;
   margin-right: 0px;
-  padding: 20px 0 !important;
+  padding: 10px 0 20px 0 !important;
 }
 .main-app .ui-app-area .nav-tabs .nav-link {
   padding: 0.5rem 0;
@@ -1354,7 +1408,7 @@ table .ui-table-row {
   margin: -4px 0 0 -6px;
 }
 .search-area button img {
-  width: -moz-available; 
+  width: -moz-available;
   width: -webkit-fill-available;
   width: fill-available;
   max-width: 35px;
@@ -1411,7 +1465,7 @@ table .ui-table-row {
 .land-app .ui-app-area .full-block .full-block-content .w-50,
 .land-app .ui-app-area .full-block .full-block-content .w-75,
 .land-app .ui-app-area .full-block .full-block-content .w-80 {
- padding-right: 5px; 
+ padding-right: 5px;
 }
 .land-app .ui-app-area .full-block .full-block-content:last-child {
   margin-bottom: 0px;
@@ -1575,6 +1629,48 @@ table .ui-table-row {
 
 /* =========================== */
 
+.ui-app-area .table-item {
+  background-color: $ui_white;
+  padding: 20px 15px;
+
+  box-shadow: 0 0 6px 0 rgba(207,207,207,0.50);
+  border-radius: 4px;
+  margin-bottom: 30px;
+
+  width: 24%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+.ui-app-area .table-item td {
+  display: block;
+  float: left;
+  position: relative;
+  width: 100%;
+}
+.ui-app-area .table-item .sort {
+  z-index: 9999;
+}
+.ui-app-area .table-item .sort img {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.ui-app-area .table-item .sort img:hover {
+  cursor: pointer;
+}
+.ui-app-area .table-item .status {
+  font-size: 11px;
+  border-radius: 4px;
+  border: 1px solid #000;
+  display: block;
+  float: left;
+  position: relative;
+  padding: 2px 6px;
+}
+
+/* =========================== */
+
 .land-app .ui-app-area .dropzone {
   background-color: #fff;
 }
@@ -1705,6 +1801,10 @@ table .ui-table-row {
   left: 0 !important;
 }
 
+.am-content.ui-app-area .dropdown.dropleft:hover > .dropdown-menu {
+  right: 0px !important;
+}
+
 /* =========================== */
 /* Breadcrumbs - UI adaptations */
 
@@ -1922,7 +2022,8 @@ table .ui-table-row {
   -moz-box-shadow: 1px 1px 12px 0px rgba(141,141,141,0.25);
   margin-bottom: 4px;
   width: 32%;
-  margin-top: 30px;
+  margin-top: 0px;
+  margin-bottom: 30px;
   float: left;
 }
 .am-content.ui-app-area .model-widget:nth-child(odd) {
@@ -1942,6 +2043,12 @@ table .ui-table-row {
   width: 100%;
   margin-bottom: 12px;
 }
+.am-content.ui-app-area .model-widget .model-info .sort img,
+.am-content.ui-app-area .floor-widget .sort img {
+  position: absolute;
+  right: 2px;
+  top: 0;
+}
 .am-content.ui-app-area .model-widget .model-info:last-child {
   margin-bottom: 0px;
 }
@@ -1958,10 +2065,12 @@ table .ui-table-row {
   margin-left: 0;
   margin-right: 4px;
   top: 0;
-  border: 1px solid #979797;
   border-radius: $ui-radius;
-  padding: 1px 6px;
   font-size: 12px;
+  font-weight: bold;
+}
+.am-content.ui-app-area .model-widget .model-info .active-status h6 {
+  font-weight: 600;
 }
 .am-content.ui-app-area .model-widget .model-info .active-status .active {
   background-image: image-url('icons/icn-active.svg');
@@ -1970,6 +2079,16 @@ table .ui-table-row {
   background-position: top 5px left 0px;
   padding-left: 12px;
 }
+.am-content.ui-app-area .model-widget .model-info .active-status .status {
+  display: none;
+}
+.am-content.ui-app-area .model-widget .model-info .active-status .inactive {
+  background-image: image-url('icons/icn-inactive.svg');
+  background-repeat: no-repeat;
+  background-size: 8px;
+  background-position: top 5px left 0px;
+  padding-left: 12px;
+}
 .am-content.ui-app-area .model-widget .model-info .model-title {
   display: block;
   float: left;
@@ -1977,10 +2096,10 @@ table .ui-table-row {
 }
 .am-content.ui-app-area .model-widget .model-info .model-studio-status {
   display: block;
-  float: right;
+  float: left;
 }
 .am-content.ui-app-area .model-widget .model-info .model-studio-status .model-studio-active {
-  float: right;
+  float: left;
   font-size: 12px;
   border: 1px solid #979797;
   border-radius: $ui-radius;
@@ -1997,7 +2116,7 @@ table .ui-table-row {
   display: inline-block;
   width: 8px;
   height: 8px;
-  background-color: #ff0000;
+  background-color: #4A4A4A;
   border-radius: 50%;
 }
 .am-content.ui-app-area .model-widget .model-img img {
@@ -2017,7 +2136,8 @@ table .ui-table-row {
 
 /* =========================== */
 
-.am-content.ui-app-area .floor-widget {
+.am-content.ui-app-area .floor-widget,
+.am-content.ui-app-area .block-widget {
   display: block;
   float: left;
   position: relative;
@@ -2030,30 +2150,35 @@ table .ui-table-row {
   margin-bottom: 30px;
   width: 100%;
 }
-.am-content.ui-app-area .floor-widget .floor-container {
+.am-content.ui-app-area .floor-widget .floor-container,
+.am-content.ui-app-area .block-widget .blocks-container {
   display: block;
   float: left;
   position: relative;
   width: 100%;
 }
-.am-content.ui-app-area .floor-widget .floor-container h3 {
+.am-content.ui-app-area .floor-widget .floor-container h3,
+.am-content.ui-app-area .block-widget .blocks-container h3 {
   font-size: 24px;
   border-left: 4px solid #D9DBE5;
   padding-left: 15px;
 }
 .am-content.ui-app-area .floor-widget .floor-container .floor_title_add-edit,
-.am-content.ui-app-area .floor-widget .floor-container .floor_areas {
+.am-content.ui-app-area .floor-widget .floor-container .floor_areas,
+.am-content.ui-app-area .block-widget .blocks-container .blocks_areas {
   display: block;
   float: left;
   position: relative;
   width: 100%;
 }
-.am-content.ui-app-area .floor-widget .floor-container .floor_title_add-edit {
+.am-content.ui-app-area .floor-widget .floor-container .floor_title_add-edit,
+.am-content.ui-app-area .block-widget .blocks-container .block_title_add-edit {
   padding-bottom: 15px;
   border-bottom: 1px solid #D9D9D9;
   margin-bottom: 25px;
 }
-.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item {
+.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item,
+.am-content.ui-app-area .block-widget .blocks-container .blocks_areas .block_area-item {
   display: block;
   float: left;
   position: relative;
@@ -2061,7 +2186,8 @@ table .ui-table-row {
   width: 20%;
   padding: 0 5px;
 }
-.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item {
+.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item,
+.am-content.ui-app-area .block-widget .blocks-container .blocks_areas .block_area-item .area-item {
   display: block;
   float: left;
   position: relative;
@@ -2071,10 +2197,12 @@ table .ui-table-row {
   box-shadow: 0 0 6px 0 rgba(207,207,207,0.50);
   border-radius: $ui-radius;
 }
-.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item:hover {
+.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item:hover,
+.am-content.ui-app-area .block-widget .blocks-container .blocks_areas .block_area-item .area-item:hover {
   box-shadow: 0 0 14px 0 rgba(207,207,207,0.50);
 }
-.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item a {
+.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item a,
+.am-content.ui-app-area .block-widget .blocks-container .blocks_areas .block_area-item .area-item a {
   display: flex;
   width: 100%;
   height: 70px;
@@ -2083,7 +2211,8 @@ table .ui-table-row {
   color: #000;
   align-items: center;
 }
-.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item a:hover {
+.am-content.ui-app-area .floor-widget .floor-container .floor_areas .floor_area-item .area-item a:hover,
+.am-content.ui-app-area .block-widget .blocks-container .blocks_areas .block_area-item .area-item a:hover {
   text-decoration: none;
 }
 
@@ -2091,6 +2220,18 @@ table .ui-table-row {
     padding-right: 10px;
 }
 
+.am-content.ui-app-area .full-tabs {
+  margin-top: 30px;
+}
+.am-content.ui-app-area .full-tabs .nav-tabs {
+  border-bottom: 1px solid #D8DBE5 !important;
+}
+.am-content.ui-app-area .full-tabs .nav-tabs .nav-link {
+  padding-left: 22px;
+  padding-right: 22px;
+  color: #000;
+}
+
 /* =========================== */
 
 .am-content.ui-app-area .add-block {

data/app/assets/stylesheets/_welcome-ui.scss

@@ -1,28 +1,64 @@
 // Variables
 
 /* ====================================== */
-// Welcome UI Fonts
 
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #FAFAFA !important;
 }
 
+/* ====================================== */
+// Welcome UI - Fonts
+
+.s-text {
+  font-size: 14px;
+}
+$s-text: 14px;
+
+.m-text {
+  font-size: 18px;
+}
+$m-text: 18px;
+
+.l-text {
+  font-size: 22px;
+}
+$l-text: 22px;
+
+.text-bold {
+  font-weight: 600;
+}
+$text-bold: 600;
+
 $ui_font_small: 14px;
 $ui_font_normal: 16px;
 
+/* --------------- */
+
 h1, h2, h3, h4 {
-  font-family: 'gt-eesti-regular';
+  /*font-family: 'gt-eesti-regular';*/
+  font-family: 'gilroy-bold';
 }
 .ui-app-area {
-  font-family: 'hk_groteskmedium';
+  /*font-family: 'hk_groteskmedium';*/
+  font-family: 'nunitosans-regular';
 }
 .ui-app-area strong {
-  font-family: 'hk_groteskbold';
+  /*font-family: 'hk_groteskbold';*/
+  font-family: 'nunitosans-bold';
+}
+
+/* --------------- */
+
+.am-content.ui-app-area .page-head h2 {
+  font-family: 'gilroy-bold';
+  font-size: 26px;
+  line-height: 32px;
 }
 
 /* ====================================== */
-// Welcome UI Colors
+// Welcome UI - Colors
 
 $ui_back:          #000000 !important;
 $ui_white:         #ffffff !important;
@@ -58,29 +94,98 @@ $ui-radius: .25rem !important;
 // Welcome UI - Margin & Padding
 
 $sm-margintop: 10px;
+$s-mt: 5px;
+
 $sm-marginbottom: 10px;
+$s-mb: 5px;
 
 $md-margintop: 30px;
+$m-mt: 15px;
+
 $md-marginbottom: 30px;
+$m-mb: 15px;
 
 $lg-margintop: 60px;
+$l-mt: 30px;
+
 $lg-marginbottom: 60px;
+$l-mb: 30px;
+
+$sm-paddingtop: 5px;
+$s-pt: 5px;
 
 $md-paddingtop: 30px;
-$md-paddingbottom: 30px;
+$m-pt: 15px;
 
 $lg-paddingtop: 60px;
+$l-pt: 30px;
+
+$sm-paddingbottom: 10px;
+$s-pb: 5px;
+
+$md-paddingbottom: 30px;
+$m-pb: 15px;
+
 $lg-paddingbottom: 60px;
+$l-pb: 30px;
+
+$s-padding: 20px 15px;
+$m-padding: 30px 30px;
+$l-padding: 60px 60px;
 
 /* ====================================== */
+// Welcome UI - Buttons & Effects
+
+.pointer:hover {
+  cursor: pointer;
+}
+
+/* ====================================== */
+// Welcome UI - Hide & Show
+
+@media (max-width: 992px) {
+  .no-responsive {
+    display: none !important;
+  }
+}
+
+/* ====================================== */
+// Welcome UI - Shadows
 
 $ui-shadow: 1px -1px 13px 0px rgba(174,174,174,0.15);
+.shadow {
+  box-shadow: 1px -1px 13px 0px rgba(174,174,174,0.15);
+}
+
+$ui-light-shadow: 1px -1px 7px 0px rgba(174,174,174,0.05);
+.light-shadow {
+  box-shadow: 1px -1px 7px 0px rgba(174,174,174,0.05);
+}
+
 $ui-shadow-right: 0 0 15px rgba(174,174,174,0.15%);
+.right-shadow {
+  box-shadow: 0 0 15px rgba(174,174,174,0.15%);
+}
 
 /* ====================================== */
+// Welcome UI - Block text sizes
 
 $header-title: 22px;
 
+/* ====================================== */
+// Welcome UI - Blocks
+
+.simple-block {
+  display: block;
+  float: left;
+  position: relative;
+  background-color: $ui_white;
+  padding: $s-padding;
+}
+.rounded {
+  border-radius: $ui-radius;
+}
+
 /* ====================================== */
 
 $block-title: 16px;
@@ -98,13 +203,18 @@ $block-result-color: #000;
   margin-right: -15px;
   margin-left: -15px;
 }
-
 .ui-app-area h4 {
   font-size: 20px;
 }
 .land-app, .main-app {
   background-color: $ui_lightergray;
 }
+.main-app {
+  display: block;
+  float: left;
+  position: relative;
+  width: 100%;
+}
 .land-app .main-btns .ui-menu-dots {
   display: block;
   float: right;
@@ -118,25 +228,44 @@ $block-result-color: #000;
 .ui-app-area .no-margin {
   margin: 0;
 }
+.ui-app-area .no-padding {
+  padding: 0;
+}
 
 /* ====================================== */
 
 .am-wrapper.main-app .menu-app {
   width: 16%;
+  position: absolute;
+  top: 0;
 }
 .am-wrapper.main-app .navbar {
   background-color: $ui_white;
-  height: 58px;
+  height: 40px;
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.05%);
+  display: block;
+  float: right;
+  position: relative;
+  width: auto;
+  top: 6px;
+  right: 15px;
+  padding: 4px 0px 0px 0px;
+  margin-bottom: 4px;
 }
 .am-wrapper.main-app .ui-app-area {
   padding: 15px;
   width: 84%;
   float: right;
-  background-color: #fafafa !important;
+  position: absolute;
+  margin: 0;
+  display: block;
+  right: 0;
+  top: 42px;
+  /*background-color: #fafafa !important;*/
 }
 .am-wrapper.main-app .ui-app-area .page-head {
   padding: 20px;
+  margin-bottom: 30px;
 }
 .am-wrapper.main-app .ui-app-area .main-content {
   padding: 0;
@@ -281,7 +410,7 @@ $block-result-color: #000;
   position: relative;
   height: auto;
   width: 100%;
-  padding: 0 0 0 30px;
+  padding: 0 0 0 22px;
 }
 .am-left-sidebar .sidebar-elements > li > ul >
 .nav-items .am-scroller .content {
@@ -370,7 +499,10 @@ $block-result-color: #000;
 }
 @media (min-width: 769px) {
   input[type="radio"]#swipe, input[type="checkbox"]#swipe {
-    display: none; 
+    display: none;
+  }
+  .navbar .welcome-homes-logo {
+    display: none;
   }
 }
 @media (max-width: 768px) {
@@ -383,6 +515,17 @@ $block-result-color: #000;
   .am-wrapper.main-app .navbar {
     height: 50px;
     display: block;
+    width: 100%;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
+  .navbar .welcome-homes-logo {
+    display: block;
+    margin-top: 12px !important;
+  }
+  .navbar .logo-area {
+    border-bottom: none;
   }
   .am-top-header {
     position: fixed !important;
@@ -395,7 +538,7 @@ $block-result-color: #000;
   }
   .am-wrapper.main-app .ui-app-area {
     width: 100%;
-    margin-top: 50px;
+    margin-top: 20px;
     display: block;
   }
   .am-wrapper.main-app .menu-app {

data/app/assets/stylesheets/_welcome_bootstrap_variables.scss

@@ -1,5 +1,4 @@
 /* ====================================== */
-// Welcome UI - Widths
 // Width sizes for all differents tables and containers inside Welcome UI
 
 $sizes: () !default;

data/lib/welcome_css/version.rb

@@ -1,3 +1,3 @@
 module WelcomeCss
-  VERSION = "0.35"
+  VERSION = "0.36"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: welcome_css
 version: !ruby/object:Gem::Version
-  version: '0.35'
+  version: '0.36'
 platform: ruby
 authors:
 - Jose Camacho
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-02-02 00:00:00.000000000 Z
+date: 2022-02-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails