mumuki-styles 2.0.1 → 3.0.2

data/app/assets/stylesheets/scss/_colors.scss

@@ -1,41 +1,75 @@
-$brand-info: #3498DB;
-$brand-primary: #0B465D;
-$brand-complementary: #FF5B81;
+@import "bootswatch/variables";
 
-$brand-danger: #d9534f;
-$brand-success: #5cb85c;
-$brand-warning: #F39C12;
-$brand-broken: #651621;
+// Standard Bootstrap colors
+$primary: #0B465D;
+$secondary: $gray-600;
+$success: #5cb85c;
+$info: #3498DB;
+$warning: #F39C12;
+$danger: #d9534f;
 
-$brand-info-light: lighten($brand-info, 35%);
-$brand-info-lighter: #f4f6fb;
+// Custom mumuki-styles colors
+$complementary: #ff5b81;
+$broken: #651621;
 
-$brand-danger-light: lighten($brand-danger, 35%);
-$brand-success-light: lighten($brand-success, 35%);
-$brand-warning-light: lighten($brand-warning, 35%);
+// Other Bootswatch variables to override
+$link-color: $info;
+$dropdown-link-hover-bg: $primary;
+$pagination-bg: $complementary;
+$pagination-hover-bg: darken($complementary, 15%);
+$pagination-disabled-bg: lighten($complementary, 15%);
+$pagination-active-bg: $pagination-hover-bg;
 
-$link-color: $brand-info;
+@import "vendor/bootstrap//bootstrap-utilities.scss";
 
-$code-color: $brand-info;
-$code-bg: $brand-info-lighter;
+// These colors are already defined for convenience, but must be also merged
+// with $theme-colors to auto-generate classes such as btn-{color}
+$custom-colors: (
+  "complementary": $complementary,
+  "broken": $broken
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
 
-$btn-success-bg: $brand-complementary;
+// Other Bootstrap variables to override
+$input-color: $primary;
+$input-focus-color: $primary;
+$form-select-color: $primary;
+$pagination-focus-bg: darken($complementary, 15%);
+$pagination-focus-color: $pagination-color;
+$pagination-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width lighten($complementary, 15%);
+$table-color: $primary;
+$table-striped-color: $primary;
 
-$navbar-inverse-bg: $brand-info;
-$navbar-inverse-link-hover-color: $brand-primary;
-$navbar-default-link-hover-color: $brand-info-light;
+// More custom colors
 
-$mu-color-info: $brand-info;
-$mu-color-primary: $brand-primary;
-$mu-color-complementary: $brand-complementary;
+$success-light: lighten($success, 35%);
+$info-light: lighten($info, 35%);
+$info-lighter: #f4f6fb;
+$warning-light: lighten($warning, 35%);
+$danger-light: lighten($danger, 35%);
 
-$mu-color-danger: $brand-danger;
-$mu-color-success: $brand-success;
-$mu-color-warning: $brand-warning;
-$mu-color-broken: $brand-broken;
+$code-color: $info;
+$code-bg: $info-lighter;
+
+$btn-success-bg: $complementary;
+
+$body-color: $primary;
+
+$navbar-inverse-bg: $info;
+$navbar-inverse-link-hover-color: $primary;
+$navbar-default-link-hover-color: $info-light;
+
+$mu-color-info: $info;
+$mu-color-primary: $primary;
+$mu-color-complementary: $complementary;
+
+$mu-color-danger: $danger;
+$mu-color-success: $success;
+$mu-color-warning: $warning;
+$mu-color-broken: $broken;
 
 $mu-color-disabled: #AAAAAA;
-$mu-color-info-light: lighten($brand-info, 35%);
+$mu-color-info-light: lighten($info, 35%);
 $mu-color-info-lighter: #f4f6fb;
 
 $mu-color-danger-light: lighten($mu-color-danger, 35%);
@@ -43,9 +77,9 @@ $mu-color-success-light: lighten($mu-color-success, 35%);
 $mu-color-warning-light: lighten($mu-color-warning, 35%);
 $mu-color-broken-light: lighten($mu-color-broken, 35%);
 
-$mu-color-link: $brand-info;
-$mu-color-code: $brand-info;
-$mu-color-code-bg: $brand-info-lighter;
+$mu-color-link: $info;
+$mu-color-code: $info;
+$mu-color-code-bg: $info-lighter;
 
 $mu-color-separator: #ecf0f1;
 $mu-color-content-editable: $mu-color-separator;

data/app/assets/stylesheets/scss/_fa5.scss

@@ -1,3 +1,5 @@
+$fa-font-path:        "../fonts" !default;
+
 .fa5-text {
   padding-left: 5px;
 }

data/app/assets/stylesheets/scss/_fonts.scss

@@ -1,4 +1,4 @@
-$font-size-base: 17px;
+$font-size-base: 1.0625rem;
 $line-height-base: 1.8;
 $mu-fonts: (ahahamojimoji, mu-font);
 $mu-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

data/app/assets/stylesheets/scss/_footer.scss

@@ -2,27 +2,34 @@ $breadcrumb-separator-gap: 8px;
 
 $avatar-size: 40px;
 
-footer {
+// html, body and footer styles needed to stick footer to bottom
+html {
+  height: 100%;
+}
 
-  position: absolute;
-  height: 110px;
-  width: 100%;
-  bottom: 0;
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 
-  .mu-footer {
-    border-top: 1px solid $mu-color-separator;
-    margin-bottom: 22px;
-    padding-top: 10px;
+footer {
+  margin-top: auto;
+}
+
+.mu-footer {
+  border-top: 1px solid $mu-color-separator;
+  margin-bottom: 22px;
+  padding-top: 10px;
 
-    .mu-footer-row {
+  .mu-footer-row {
 
-      @media (min-width: 768px){
-        @include display-flex(row, space-between, center);
-      }
+    @media (min-width: 768px){
+      @include display-flex(row, space-between, center);
+    }
 
-      @media (max-width: 767px){
-        @include display-flex(column, space-between, center);
-      }
+    @media (max-width: 767px){
+      @include display-flex(column, space-between, center);
     }
   }
 }

data/app/assets/stylesheets/scss/_links.scss

@@ -0,0 +1,7 @@
+a:link, .dropdown-item:hover, .nav-link:hover {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}

data/app/assets/stylesheets/scss/_modules.scss

@@ -1,9 +1,11 @@
+@import 'modules/blockquote';
 @import 'modules/breadcrumb';
 @import 'modules/callout';
-@import 'modules/checkbox';
+@import 'modules/code';
 @import 'modules/conversation';
 @import 'modules/follow_us';
+@import 'modules/form';
 @import 'modules/highlight';
-@import 'modules/notification';
 @import 'modules/new_message';
 @import 'modules/multiple_scenarios';
+@import 'modules/pre';

data/app/assets/stylesheets/scss/_navbar.scss

@@ -3,13 +3,12 @@ $breadcrumb-separator-gap: 8px;
 $avatar-size: 40px;
 
 .mu-navbar {
-  @include display-flex(row, space-between, center);
-
-  height: 80px;
-  border: none;
+  > div .mu-navbar-breadcrumb-container {
+    min-width: 0;
+  }
 
-  a {
-    color: $mu-color-link;
+  .navbar-toggler:not(.collapsed) {
+    margin-bottom: 15px;
   }
 
   .mu-navbar-breadcrumb {
@@ -32,18 +31,30 @@ $avatar-size: 40px;
 
       @include display-flex(row, flex-start, center);
 
+      @include media-breakpoint-down(lg) {
+        @include display-flex(column, flex-start, flex-start);
+      }
+
       overflow: hidden;
 
       .mu-breadcrumb-list-item {
-        &:before {
-          content: '/';
-          margin: 0 $breadcrumb-separator-gap;
-          color: $mu-color-disabled;
+        @include media-breakpoint-up(lg) {
+          &:before {
+            content: '/';
+            margin: 0 $breadcrumb-separator-gap;
+            color: $mu-color-disabled;
+          }
         }
+
         &.brand {
           padding-top: 2px;
           padding-left: 3px;
           font-size: 38px;
+
+          @include media-breakpoint-down(lg) {
+            margin-bottom: -10px;
+          }
+
           &:before {
             content: '';
             margin: 0;
@@ -84,6 +95,7 @@ $avatar-size: 40px;
         top: 2px;
         background-color: $mu-color-complementary;
         border: 1px solid #FFF;
+        border-radius: 50%;
       }
     }
 
@@ -136,11 +148,11 @@ $avatar-size: 40px;
   }
 
   &.mu-inverted {
-    img {
+    .profile-dropdown img {
       box-shadow: 0 0 0 2px white;
     }
 
-    .caret, .navbar-icon {
+    .dropdown-toggle, .mu-navbar-icon {
       color: white;
     }
 

data/app/assets/stylesheets/scss/_vendor.scss

@@ -1,9 +1,6 @@
-@import "bootswatch/variables";
-@import "vendor/bootstrap-sass/assets/stylesheets/bootstrap/mixins.scss";
-@import "vendor/bootstrap-sass/assets/stylesheets/bootstrap.scss";
+@import "vendor/bootstrap//bootstrap.scss";
 @import "bootswatch/bootswatch";
 @import "vendor/dev-awesome/dist/scss/dev-awesome.scss";
-@import "awesome-bootstrap-checkbox-overrides.scss";
 @import "vendor/fontawesome-free/scss/fontawesome.scss";
 @import "vendor/fontawesome-free/scss/brands.scss";
 @import "vendor/fontawesome-free/scss/regular.scss";

data/app/assets/stylesheets/scss/bootswatch/_bootswatch.scss

@@ -1,330 +1,263 @@
-// Flatly 3.3.7
+// Flatly 5.0.0-beta1
 // Bootswatch
-// -----------------------------------------------------
 
-$web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic" !default;
-@import url($web-font-path);
 
-// Navbar =====================================================================
+// Variables
 
-.navbar {
-  border-width: 0;
+$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
+@import url($web-font-path);
 
-  &-default {
+// Navbar
 
-    .badge {
-      background-color: #fff;
-      color: $navbar-default-bg;
-    }
+.bg-primary {
+  .navbar-nav .active > .nav-link {
+    color: $success !important;
   }
+}
 
-  &-inverse {
-
-    .badge {
-      background-color: #fff;
-      color: $navbar-inverse-bg;
+.bg-dark {
+  &.navbar-dark .navbar-nav {
+    .nav-link:focus,
+    .nav-link:hover,
+    .active > .nav-link {
+      color: $primary !important;
     }
   }
-
-  &-brand {
-    line-height: 1;
-  }
 }
 
-// Buttons ====================================================================
+// Buttons
 
 .btn {
-  border-width: 2px;
-}
-
-.btn:active {
-  @include box-shadow(none);
-}
-
-.btn-group.open .dropdown-toggle {
-  @include box-shadow(none);
-}
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover {
-  color: $brand-primary;
-}
-
-.text-success,
-.text-success:hover {
-  color: $brand-success;
-}
-
-.text-danger,
-.text-danger:hover {
-  color: $brand-danger;
-}
-
-.text-warning,
-.text-warning:hover {
-  color: $brand-warning;
-}
-
-.text-info,
-.text-info:hover {
-  color: $brand-info;
+  &-secondary,
+  &-secondary:hover,
+  &-warning,
+  &-warning:hover {
+    color: $white;
+  }
 }
 
-// Tables =====================================================================
+// Tables
 
-table,
 .table {
-
-  a:not(.btn) {
-    text-decoration: underline;
-  }
-
-  .dropdown-menu a {
-    text-decoration: none;
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: $white;
   }
 
-  .success,
-  .warning,
-  .danger,
-  .info {
-    color: #fff;
-
-    > th > a,
-    > td > a,
-    > a {
-      color: #fff;
+  &-primary {
+    &,
+    > th,
+    > td {
+      background-color: $primary;
     }
   }
 
-  > thead > tr > th,
-  > tbody > tr > th,
-  > tfoot > tr > th,
-  > thead > tr > td,
-  > tbody > tr > td,
-  > tfoot > tr > td {
-    border: none;
-  }
-
-  &-bordered > thead > tr > th,
-  &-bordered > tbody > tr > th,
-  &-bordered > tfoot > tr > th,
-  &-bordered > thead > tr > td,
-  &-bordered > tbody > tr > td,
-  &-bordered > tfoot > tr > td {
-    border: 1px solid $table-border-color;
+  &-secondary {
+    &,
+    > th,
+    > td {
+      background-color: $secondary;
+    }
   }
-}
 
-// Forms ======================================================================
-
-.form-control,
-input {
-  border-width: 2px;
-  @include box-shadow(none);
-
-  &:focus {
-    @include box-shadow(none);
+  &-light {
+    &,
+    > th,
+    > td {
+      background-color: $light;
+    }
   }
-}
 
-.has-warning {
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label,
-  .form-control-feedback {
-    color: $brand-warning;
+  &-dark {
+    &,
+    > th,
+    > td {
+      background-color: $dark;
+    }
   }
 
-  .form-control,
-  .form-control:focus {
-    border: 2px solid $brand-warning;
+  &-success {
+    &,
+    > th,
+    > td {
+      background-color: $success;
+    }
   }
 
-  .input-group-addon {
-    border-color: $brand-warning;
+  &-info {
+    &,
+    > th,
+    > td {
+      background-color: $info;
+    }
   }
-}
 
-.has-error {
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label,
-  .form-control-feedback {
-    color: $brand-danger;
+  &-danger {
+    &,
+    > th,
+    > td {
+      background-color: $danger;
+    }
   }
 
-  .form-control,
-  .form-control:focus {
-    border: 2px solid $brand-danger;
+  &-warning {
+    &,
+    > th,
+    > td {
+      background-color: $warning;
+    }
   }
 
-  .input-group-addon {
-    border-color: $brand-danger;
+  &-active {
+    &,
+    > th,
+    > td {
+      background-color: $table-active-bg;
+    }
   }
-}
 
-.has-success {
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label,
-  .form-control-feedback {
-    color: $brand-success;
-  }
+  &-hover {
+    .table-primary:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($primary, 5%);
+      }
+    }
 
-  .form-control,
-  .form-control:focus {
-    border: 2px solid $brand-success;
-  }
+    .table-secondary:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($secondary, 5%);
+      }
+    }
 
-  .input-group-addon {
-    border-color: $brand-success;
-  }
-}
+    .table-light:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($light, 5%);
+      }
+    }
 
-// Navs =======================================================================
+    .table-dark:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($dark, 5%);
+      }
+    }
 
-.nav {
-  .open > a,
-  .open > a:hover,
-  .open > a:focus {
-    border-color: transparent;
-  }
-}
+    .table-success:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($success, 5%);
+      }
+    }
 
-.pager {
-  a,
-  a:hover {
-    color: #fff;
-  }
+    .table-info:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($info, 5%);
+      }
+    }
 
-  .disabled {
-    &>a,
-    &>a:hover,
-    &>a:focus,
-    &>span {
-      background-color: $pagination-disabled-bg;
+    .table-danger:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($danger, 5%);
+      }
     }
-  }
-}
 
-// Indicators =================================================================
+    .table-warning:hover {
+      &,
+      > th,
+      > td {
+        background-color: darken($warning, 5%);
+      }
+    }
 
-.close {
-  color: #fff;
-  text-decoration: none;
-  opacity: 0.4;
+    .table-active:hover {
+      &,
+      > th,
+      > td {
+        background-color: $table-active-bg;
+      }
+    }
 
-  &:hover,
-  &:focus {
-    color: #fff;
-    opacity: 1;
   }
 }
 
-.alert {
+// Navs
 
-  .alert-link {
-    color: #fff;
-    text-decoration: underline;
+.nav-tabs {
+  .nav-link.active,
+  .nav-link.active:focus,
+  .nav-link.active:hover,
+  .nav-item.open .nav-link,
+  .nav-item.open .nav-link:focus,
+  .nav-item.open .nav-link:hover {
+    color: $primary;
   }
 }
 
-// Progress bars ==============================================================
-
-.progress {
-  height: 10px;
-  @include box-shadow(none);
-  .progress-bar {
-    font-size: 10px;
-    line-height: 10px;
+.pagination {
+  a:hover {
+    text-decoration: none;
   }
 }
 
-// Containers =================================================================
-
-.well {
-  @include box-shadow(none);
-}
-
-a.list-group-item {
+// Indicators
 
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    border-color: $list-group-border;
+.badge {
+  &-secondary,
+  &-warning {
+    color: $white;
   }
+}
 
-  &-success {
-    &.active {
-      background-color: $state-success-bg;
-    }
+.alert {
+  border: none;
+  color: $white;
 
-    &.active:hover,
-    &.active:focus {
-      background-color: darken($state-success-bg, 5%);
-    }
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
   }
 
-  &-warning {
-    &.active {
-      background-color: $state-warning-bg;
-    }
-
-    &.active:hover,
-    &.active:focus {
-      background-color: darken($state-warning-bg, 5%);
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
     }
   }
 
-  &-danger {
-    &.active {
-      background-color: $state-danger-bg;
-    }
-
-    &.active:hover,
-    &.active:focus {
-      background-color: darken($state-danger-bg, 5%);
+  &-light {
+    &,
+    a,
+    .alert-link {
+      color: $body-color;
     }
   }
 }
 
-.panel {
-  &-default {
-    .close {
-      color: $text-color;
-    }
-  }
-}
+// Containers
 
-.modal {
-  .close {
-    color: $text-color;
+.modal,
+.toast {
+  .btn-close {
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
   }
 }
-
-.popover {
-  color: $text-color;
-}