mumuki-styles 1.12.0

data/app/assets/stylesheets/_broken.scss

@@ -0,0 +1,8 @@
+.progress-list-flex .broken {
+  background-color: $mu-color-broken;
+}
+
+.text-broken,
+.text-broken:hover {
+  color: $mu-color-broken;
+}

data/app/assets/stylesheets/_browser.scss

@@ -0,0 +1,45 @@
+.mu-browser {
+  iframe {
+    margin: 0;
+    width: 100%;
+    border: none;
+  }
+  border-top: 2em solid rgba(230, 230, 230, 0.7);
+  box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
+  position: relative;
+  border-radius: 3px 3px 0 0;
+  padding: 5px;
+
+  &:before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: -1.25em;
+    left: 0.5em;
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 50%;
+    background-color: #9b3;
+    box-shadow: 0 0 0 2px #9b3;
+  }
+
+  &:after {
+    display: block;
+    position: absolute;
+    font-family: 'DejaVu Sans', 'Liberation Sans', sans-serif;
+    content: 'http://mi-sitio.com';
+    top: -1.8em;
+    left: 1.5em;
+    padding: 0 0.2em 1.4em;
+    width: calc(100% - 2.2em);
+    height: 1.2em;
+    border-radius: 2px;
+    background-color: white;
+    font-size: 0.9em;
+  }
+
+  & > * {
+    display: block;
+    margin: 2em;
+  }
+}

data/app/assets/stylesheets/_colors.scss

@@ -0,0 +1,54 @@
+$brand-info: #3498DB;
+$brand-primary: #0B465D;
+$brand-complementary: #FF5B81;
+
+$brand-danger: #d9534f;
+$brand-success: #5cb85c;
+$brand-warning: #F39C12;
+$brand-broken: #651621;
+
+$brand-info-light: lighten($brand-info, 35%);
+$brand-info-lighter: #f4f6fb;
+
+$brand-danger-light: lighten($brand-danger, 35%);
+$brand-success-light: lighten($brand-success, 35%);
+$brand-warning-light: lighten($brand-warning, 35%);
+
+$link-color: $brand-info;
+
+$code-color: $brand-info;
+$code-bg: $brand-info-lighter;
+
+$btn-success-bg: $brand-complementary;
+
+$navbar-inverse-bg: $brand-info;
+$navbar-inverse-link-hover-color: $brand-primary;
+$navbar-default-link-hover-color: $brand-info-light;
+
+$mu-color-info: $brand-info;
+$mu-color-primary: $brand-primary;
+$mu-color-complementary: $brand-complementary;
+
+$mu-color-danger: $brand-danger;
+$mu-color-success: $brand-success;
+$mu-color-warning: $brand-warning;
+$mu-color-broken: $brand-broken;
+
+$mu-color-disabled: #AAAAAA;
+$mu-color-info-light: lighten($brand-info, 35%);
+$mu-color-info-lighter: #f4f6fb;
+
+$mu-color-danger-light: lighten($mu-color-danger, 35%);
+$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-separator: #ecf0f1;
+$mu-color-content-editable: $mu-color-separator;
+
+$mu-color-dark-separator: darken($mu-color-separator, 10%);
+$mu-color-darken-separator: darken($mu-color-dark-separator, 10%);

data/app/assets/stylesheets/_fonts.scss

@@ -0,0 +1,9 @@
+$font-size-base: 17px;
+$line-height-base: 1.8;
+$mu-fonts: (ahahamojimoji, mu-font);
+
+body {
+  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+}

data/app/assets/stylesheets/_footer.scss

@@ -0,0 +1,18 @@
+$breadcrumb-separator-gap: 8px;
+
+$avatar-size: 40px;
+
+footer {
+
+  position: absolute;
+  height: 110px;
+  width: 100%;
+  bottom: 0;
+
+  .mu-footer {
+    padding-top: 30px;
+    border-top: 1px solid $mu-color-separator;
+    margin-bottom: 22px;
+  }
+
+}

data/app/assets/stylesheets/_hovers.scss

@@ -0,0 +1,15 @@
+a.text-info:hover {
+  color: $mu-color-info;
+}
+a.text-warning:hover {
+  color: $mu-color-warning;
+}
+a.text-danger:hover {
+  color: $mu-color-danger;
+}
+a.text-success:hover {
+  color: $mu-color-success;
+}
+a.text-broken:hover {
+  color: $mu-color-broken;
+}

data/app/assets/stylesheets/_mixines.scss

@@ -0,0 +1,6 @@
+@mixin display-flex($flow: row nowrap, $justify-content: flex-start, $align-items: center) {
+  display: flex;
+  flex-flow: $flow;
+  align-items: $align-items;
+  justify-content: $justify-content;
+}

data/app/assets/stylesheets/_modules.scss

@@ -0,0 +1,8 @@
+@import 'modules/breadcrumb';
+@import 'modules/callout';
+@import 'modules/checkbox';
+@import 'modules/conversation';
+@import 'modules/follow_us';
+@import 'modules/highlight';
+@import 'modules/notification';
+@import 'modules/new_message';

data/app/assets/stylesheets/_mu-file-browser.scss

@@ -0,0 +1,97 @@
+$mu-file-browser-border: 2px solid $mu-color-dark-separator;
+
+.mu-file-browser {
+  width: 100%;
+  position: relative;
+  header {
+    margin: 15px;
+    margin-bottom: 0;
+    padding: 15px;
+    border: $mu-file-browser-border;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    background-color: $mu-color-separator;
+    @include display-flex(row nowrap, flex-start, center);
+    i {
+      cursor: pointer;
+      font-size: 25px;
+      margin-right: 10px;
+      @extend .fa ;
+      @extend .fa-fw;
+      @extend .fa-arrow-circle-left;
+    }
+    input {
+      border: 1px solid $mu-color-dark-separator;
+      padding: 0 10px;
+      height: 30px;
+      border-radius: 10px;
+      width: 100%;
+      &:focus { outline: none }
+    }
+  }
+  main {
+    border: $mu-file-browser-border;
+    border-top: none;
+    margin: 15px;
+    margin-top: 0;
+    ul {
+      @include display-flex(row wrap, flex-start, flex-start);
+      align-content: flex-start;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      left: 0;
+      right: 0;
+      min-height: 208px;
+      overflow: hidden;
+      li {
+        @include display-flex(column, flex-start, flex-start);
+        align-content: flex-start;
+        margin: 5px;
+        width: 100px;
+        height: 100px;
+        cursor: pointer;
+        position: relative;
+        &:not(:hover) {
+          span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        i {
+          color: $mu-color-darken-separator;
+          padding: 6px 0;
+          width: 70px;
+          height: 70px;
+          font-size: 64px;
+          margin: auto;
+          @extend .fa ;
+          @extend .fa-fw;
+          &.file { @extend .fa-file-o; }
+          &.folder { @extend .fa-folder; }
+        }
+        span {
+          width: 100%;
+          text-align: center;
+        }
+        &:hover {
+          z-index: 10;
+          color: white;
+          i, span {
+            position: absolute;
+            background-color: transparentize(lighten($mu-color-primary, 10%), 0.25);
+            width: 100%;
+          }
+          i {
+            color: white;
+          }
+          span {
+            top: 70px;
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/_navbar.scss

@@ -0,0 +1,99 @@
+$breadcrumb-separator-gap: 8px;
+
+$avatar-size: 40px;
+
+.mu-navbar {
+  @include display-flex(row, space-between, center);
+
+  height: 80px;
+  border: none;
+
+  a {
+    color: $mu-color-link;
+  }
+
+  .mu-navbar-breadcrumb {
+
+    ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    @include display-flex(row, flex-start, center);
+
+    margin: 0;
+    padding: 0;
+
+    overflow: hidden;
+    white-space: nowrap;
+
+    .mu-breadcrumb-list {
+
+      @include display-flex(row, flex-start, center);
+
+      .mu-breadcrumb-list-item {
+        padding-top: 19px;
+        &:before {
+          content: '/';
+          margin: 0 $breadcrumb-separator-gap;
+          color: $mu-color-disabled;
+        }
+        &.brand {
+          padding-top: 2px;
+          padding-left: 3px;
+          font-size: 38px;
+          &:before {
+            content: '';
+            margin: 0;
+          }
+          a {
+            color: $mu-color-primary;
+            &:active { color: darken($mu-color-primary, 10%) }
+            &:hover {
+              color: darken($mu-color-primary, 5%);
+              text-decoration: none;
+            }
+          }
+        }
+        &.last {
+          @extend .mu-disabled;
+          a { color: $mu-color-disabled }
+        }
+      }
+    }
+  }
+
+  .mu-navbar-avatar {
+    @include display-flex;
+
+    .notifications-box {
+      .fa {
+        color: $mu-color-primary;
+      }
+
+      .badge-notifications {
+        position: absolute;
+        right: 15px;
+        font-size: .55em;
+        width: inherit;
+        padding: 2px 4px;
+        text-align: right;
+        top: 2px;
+        background-color: $mu-color-complementary;
+        border: 1px solid #FFF;
+      }
+    }
+
+    img {
+      &.mu-profile-avatar {
+        width: $avatar-size;
+        height: $avatar-size;
+        border-radius: 50%;
+        object-fit: cover;
+        cursor: pointer;
+      }
+    }
+  }
+
+}

data/app/assets/stylesheets/_styles.scss

@@ -0,0 +1,14 @@
+.pointer {
+  cursor: pointer;
+}
+
+.mu-disabled {
+  color: $mu-color-disabled;
+  pointer-events: none;
+}
+
+.divider-vertical {
+  padding: 14px 0;
+  margin: 0 14px;
+  border-left: 1px solid $mu-color-separator;
+}

data/app/assets/stylesheets/_vendor.scss

@@ -0,0 +1,7 @@
+@import "bootswatch/variables";
+@import "vendor/bootstrap-sass/assets/stylesheets/bootstrap/mixins.scss";
+@import "vendor/bootstrap-sass/assets/stylesheets/bootstrap.scss";
+@import "bootswatch/bootswatch";
+@import "vendor/font-awesome/scss/font-awesome.scss";
+@import "vendor/dev-awesome/dist/scss/dev-awesome.scss";
+@import "vendor/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";

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

@@ -0,0 +1,330 @@
+// Flatly 3.3.7
+// Bootswatch
+// -----------------------------------------------------
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic" !default;
+@import url($web-font-path);
+
+// Navbar =====================================================================
+
+.navbar {
+  border-width: 0;
+
+  &-default {
+
+    .badge {
+      background-color: #fff;
+      color: $navbar-default-bg;
+    }
+  }
+
+  &-inverse {
+
+    .badge {
+      background-color: #fff;
+      color: $navbar-inverse-bg;
+    }
+  }
+
+  &-brand {
+    line-height: 1;
+  }
+}
+
+// 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;
+}
+
+// Tables =====================================================================
+
+table,
+.table {
+
+  a:not(.btn) {
+    text-decoration: underline;
+  }
+
+  .dropdown-menu a {
+    text-decoration: none;
+  }
+
+  .success,
+  .warning,
+  .danger,
+  .info {
+    color: #fff;
+
+    > th > a,
+    > td > a,
+    > a {
+      color: #fff;
+    }
+  }
+
+  > 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;
+  }
+}
+
+// Forms ======================================================================
+
+.form-control,
+input {
+  border-width: 2px;
+  @include box-shadow(none);
+
+  &:focus {
+    @include box-shadow(none);
+  }
+}
+
+.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;
+  }
+
+  .form-control,
+  .form-control:focus {
+    border: 2px solid $brand-warning;
+  }
+
+  .input-group-addon {
+    border-color: $brand-warning;
+  }
+}
+
+.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;
+  }
+
+  .form-control,
+  .form-control:focus {
+    border: 2px solid $brand-danger;
+  }
+
+  .input-group-addon {
+    border-color: $brand-danger;
+  }
+}
+
+.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;
+  }
+
+  .form-control,
+  .form-control:focus {
+    border: 2px solid $brand-success;
+  }
+
+  .input-group-addon {
+    border-color: $brand-success;
+  }
+}
+
+// Navs =======================================================================
+
+.nav {
+  .open > a,
+  .open > a:hover,
+  .open > a:focus {
+    border-color: transparent;
+  }
+}
+
+.pager {
+  a,
+  a:hover {
+    color: #fff;
+  }
+
+  .disabled {
+    &>a,
+    &>a:hover,
+    &>a:focus,
+    &>span {
+      background-color: $pagination-disabled-bg;
+    }
+  }
+}
+
+// Indicators =================================================================
+
+.close {
+  color: #fff;
+  text-decoration: none;
+  opacity: 0.4;
+
+  &:hover,
+  &:focus {
+    color: #fff;
+    opacity: 1;
+  }
+}
+
+.alert {
+
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+}
+
+// Progress bars ==============================================================
+
+.progress {
+  height: 10px;
+  @include box-shadow(none);
+  .progress-bar {
+    font-size: 10px;
+    line-height: 10px;
+  }
+}
+
+// Containers =================================================================
+
+.well {
+  @include box-shadow(none);
+}
+
+a.list-group-item {
+
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    border-color: $list-group-border;
+  }
+
+  &-success {
+    &.active {
+      background-color: $state-success-bg;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: darken($state-success-bg, 5%);
+    }
+  }
+
+  &-warning {
+    &.active {
+      background-color: $state-warning-bg;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: darken($state-warning-bg, 5%);
+    }
+  }
+
+  &-danger {
+    &.active {
+      background-color: $state-danger-bg;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: darken($state-danger-bg, 5%);
+    }
+  }
+}
+
+.panel {
+  &-default {
+    .close {
+      color: $text-color;
+    }
+  }
+}
+
+.modal {
+  .close {
+    color: $text-color;
+  }
+}
+
+.popover {
+  color: $text-color;
+}