wip materialization of ui

misago/emberapp/app/styles/misago/buttons.less

@@ -15,168 +15,128 @@
 
 
 // Make busy button really look busy
-.btn {
-  &.btn-busy {
-    &, &:visited, &:hover, &:focus, &:active {
-      color: transparent;
-    }
-
-    .loader-compact {
-      margin-top: @line-height-computed * -1;
-      height: 20px;
-    }
-
-    &.btn-default {
-      .loader-compact>div { background-color: @btn-default-color; }
-    }
-
-    &.btn-primary {
-      .loader-compact>div { background-color: @btn-primary-color; }
-    }
-
-    &.btn-success {
-      .loader-compact>div { background-color: @btn-success-color; }
-    }
-
-    &.btn-info {
-      .loader-compact>div { background-color: @btn-info-color; }
-    }
-
-    &.btn-warning {
-      .loader-compact>div { background-color: @btn-warning-color; }
-    }
-
-    &.btn-danger {
-      .loader-compact>div { background-color: @btn-danger-color; }
-    }
+.btn.btn-busy {
+  .loader-compact {
+    margin-top: @line-height-computed * -1;
+    height: 20px;
   }
 }
-// Mixin for styles
-.btn-outlined-style(@border, @bg, @color) {
-  &, &:visited {
-    background-color: transparent;
-    border-color: @border;
 
-    color: @border;
+
+// Flat buttons
+.btn-style(@color, @bg) {
+  &, &:link, &:visited, &:hover, &:focus, &:active {
+    .box-shadow(none);
+    outline: none;
   }
 
-  &:hover, &:focus {
-    background-color: @bg;
-    border-color: @border;
+  &, &:link, &:visited {
+    background: transparent;
+    border-color: transparent;
 
     color: @color;
   }
 
-  &:active {
-    background-color: lighten(@bg, 30%);
-    border-color: lighten(@border, 30%);
-    .box-shadow(none);
+  &:hover, &:focus {
+    background: fadeOut(@bg, 90%);
+    border-color: transparent;
 
     color: @color;
   }
 
-  &.disabled {
-    &, &:visited, &:hover, &:focus, &:active {
-      background-color: transparent;
-      border-color: desaturate(@border, 50%);
+  &:active {
+    background: fadeOut(@bg, 80%);
+    border-color: transparent;
 
-      color: desaturate(@border, 50%);
-    }
+    color: @color;
   }
 
   &.btn-busy {
-    &, &:visited, &:hover, &:focus, &:active {
-      background-color: transparent;
-      border-color: @border;
-
+    &, &:link, &:visited, &:hover, &:focus, &:active {
       color: transparent;
 
-      .loader-compact>div {
-        background-color: @border;
-      }
+      .loader-compact>div { background-color: @color; }
     }
   }
 }
 
-
-// Outlined button
-.btn-outlined {
-  border-width: 2px;
-
-  .button-size(@padding-base-vertical - 1; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
-
-  &.btn-lg {
-    .button-size(@padding-large-vertical - 1; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+.btn {
+  &.btn-default {
+    .btn-style(@btn-default-color, @btn-default-bg);
   }
 
-  &.btn-sm {
-    border-width: 1px;
-    .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  &.btn-primary {
+    .btn-style(@btn-primary-color, @btn-primary-bg);
   }
 
-  &.btn-xs {
-    border-width: 1px;
-    .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  &.btn-success {
+    .btn-style(@btn-success-color, @btn-success-bg);
   }
 
-  // Outline varieties for buttons
-  &.btn-default, &.btn-primary, &.btn-success, &.btn-info, &.btn-warning, &.btn-danger {
-    &, &:visited {
-      background-color: transparent;
-    }
+  &.btn-warning {
+    .btn-style(@btn-warning-color, @btn-warning-bg);
   }
 
-  &.btn-primary {
-    .btn-outlined-style(@btn-primary-border, @btn-primary-bg, @btn-primary-color);
+  &.btn-danger {
+    .btn-style(@btn-danger-color, @btn-danger-bg);
   }
+}
 
-  &.btn-success {
-    .btn-outlined-style(@btn-success-border, @btn-success-bg, @btn-success-color);
-  }
 
-  &.btn-info {
-    .btn-outlined-style(@btn-info-border, @btn-info-bg, @btn-info-color);
-  }
+// Raised buttons
+.btn-raised-style(@color, @bg) {
+  &, &:link, &:visited, &:hover, &:focus {
+    background: @bg;
+    border-color: @bg;
+    .box-shadow(none);
+    .shadow-2dp();
 
-  &.btn-warning {
-    .btn-outlined-style(@btn-warning-border, @btn-warning-bg, @btn-warning-color);
+    outline: none;
+
+    color: @color;
   }
 
-  &.btn-danger {
-    .btn-outlined-style(@btn-danger-border, @btn-danger-bg, @btn-danger-color);
+  &:active {
+    background: darken(@bg, 8%);
+    border-color: darken(@bg, 8%);
+    .box-shadow(none);
+    .shadow-6dp();
+
+    outline: none;
+
+    color: @color;
   }
 
-  // Extra states for default btn
-  &.btn-default {
-    &:hover,
-    &:focus,
-    &.focus {
-      background-color: @btn-default-hover-bg;
-      border-color: @btn-default-hover-border;
+  &.btn-busy {
+    &, &:link, &:visited, &:hover, &:focus, &:active {
+      .box-shadow(none);
+
+      color: transparent;
 
-      color: @btn-default-hover-color;
+      .loader-compact>div { background-color: @color; }
     }
+  }
+}
 
-    &:active,
-    &.active,
-    .open > .dropdown-toggle {
-      background-color: @btn-default-active-bg;
-      border-color: @btn-default-active-border;
 
-      color: @btn-default-active-color;
-    }
+.btn.btn-raised {
+  &.btn-default {
+    .btn-raised-style(@btn-default-raised-color, @btn-default-raised-bg);
+  }
 
-    &.btn-busy {
-      &, &:visited, &:hover, &:focus, &:active {
-        background-color: transparent;
-        border-color: @btn-default-border;
+  &.btn-primary {
+    .btn-raised-style(@btn-primary-raised-color, @btn-primary-raised-bg);
+  }
 
-        color: transparent;
+  &.btn-success {
+    .btn-raised-style(@btn-success-raised-color, @btn-success-raised-bg);
+  }
 
-        .loader-compact>div {
-          background-color: @btn-default-border;
-        }
-      }
-    }
+  &.btn-warning {
+    .btn-raised-style(@btn-warning-raised-color, @btn-warning-raised-bg);
+  }
+
+  &.btn-danger {
+    .btn-raised-style(@btn-danger-raised-color, @btn-danger-raised-bg);
   }
 }

misago/emberapp/app/styles/misago/misago.less

@@ -1,4 +1,5 @@
 // Components
+@import "shadows.less";
 @import "buttons.less";
 @import "dropdowns.less";
 @import "toast-message.less";

misago/emberapp/app/styles/misago/navbar.less

@@ -3,16 +3,18 @@
 // --------------------------------------------------
 
 
-// Affixed navbar
+// Navbar scaffold
 .navbar-spacer {
   margin-bottom: @line-height-computed;
 
   .navbar-primary {
-    border-bottom-width: 1px;
+    .shadow-3dp();
+    border-bottom: none;
     margin: 0px;
+    padding: @navbar-inner-margin 0px;
 
     &.affix {
-      .box-shadow(0px 0px 8px fadeOut(#333, 30%));
+      .shadow-6dp();
 
       width: 100%;
       top: 0px;
@@ -46,13 +48,19 @@
 
     &>li {
       float: left;
+      margin-right: @navbar-link-spacing;
 
       &>a {
+        // Border radius
+        border-radius: @navbar-link-radius;
+
         // Scale links up
         font-size: @navbar-link-size;
 
         // We don't use .active states in navbar
         &:active, &:focus {
+          background-color: @navbar-default-link-active-bg;
+
           color: @navbar-default-link-active-color;
         }
       }
@@ -98,7 +106,7 @@
   .user-menu {
     .dropdown-toggle {
       height: @navbar-height;
-      padding: (@navbar-height - @navbar-avatar-height) / 2 @navbar-padding-horizontal;
+      padding: (@navbar-height - @navbar-avatar-height) / 2;
       padding-bottom: 0px;
 
       line-height: 0px;

misago/emberapp/app/styles/misago/shadows.less

@@ -0,0 +1,40 @@
+//
+// Shadows Styles
+// --------------------------------------------------
+
+
+.shadow-2dp {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
+              0 3px 1px -2px rgba(0, 0, 0, @shadow-key-umbra-opacity),
+              0 1px 5px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
+}
+
+.shadow-3dp {
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
+              0 3px 3px -2px rgba(0, 0, 0, @shadow-key-umbra-opacity),
+              0 1px 8px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity);
+}
+
+.shadow-4dp {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
+              0 1px 10px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity),
+              0 2px 4px -1px rgba(0, 0, 0, @shadow-key-umbra-opacity);
+}
+
+.shadow-6dp {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, @shadow-key-penumbra-opacity),
+              0 1px 18px 0 rgba(0, 0, 0, @shadow-ambient-shadow-opacity),
+              0 3px 5px -1px rgba(0, 0, 0, @shadow-key-umbra-opacity);
+}
+
+.shadow-8dp {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
+              0 3px 14px 2px rgba(0, 0, 0, @shadow-ambient-shadow-opacity),
+              0 5px 5px -3px rgba(0, 0, 0, @shadow-key-umbra-opacity);
+}
+
+.shadow-16dp {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, @shadow-key-penumbra-opacity),
+              0  6px 30px 5px rgba(0, 0, 0, @shadow-ambient-shadow-opacity),
+              0  8px 10px -5px rgba(0, 0, 0, @shadow-key-umbra-opacity);
+}

misago/emberapp/app/styles/misago/toast-message.less

@@ -4,10 +4,10 @@
 
 
 .toast-message-style(@color-bg, @color-border, @color-text) {
+  .shadow-16dp();
   background: @color-bg;
   border: 1px solid @color-border;
   border-top: none;
-  .box-shadow(0px 0px 3px fadeOut(#333, 70%));
   padding: @alert-padding;
 
   color: @color-text;

misago/emberapp/app/styles/misago/user-card.less

@@ -79,6 +79,16 @@
   }
 }
 
+
+// Card header
+.user-card h4 {
+  .user-state {
+    position: relative;
+    top: -2px;
+  }
+}
+
+
 // Card nav
 .user-card nav a {
   margin: 0px 4px;

misago/emberapp/app/styles/misago/user-status.less

@@ -5,8 +5,10 @@
 
 .user-banned .material-icons {
   color: @brand-warning;
+  .opacity(1);
 }
 
 .user-online .material-icons {
   color: @brand-success;
+  .opacity(1);
 }

misago/emberapp/app/styles/misago/variables.less

@@ -8,18 +8,18 @@
 //## Gray and brand colors for use across Bootstrap.
 
 @gray-base:              #000;
-@gray-darker:            lighten(@gray-base, 13.5%); // #222
-@gray-dark:              lighten(@gray-base, 20%);   // #333
-@gray:                   lighten(@gray-base, 33.5%); // #555
-@gray-light:             lighten(@gray-base, 46.7%); // #777
-@gray-lighter:           lighten(@gray-base, 93.5%); // #eee
+@gray-darker:            #212121;
+@gray-dark:              #424242;
+@gray:                   #616161;
+@gray-light:             #bdbdbd;
+@gray-lighter:           #eeeeee;
 
-@brand-info:             #e66a5d; // misago uses info state for accents
+@brand-accent:           #e66a5d; // misago uses info state for accents
 
-@brand-primary:          #3498db;
-@brand-success:          #2ecc71;
-@brand-warning:          #ffab40;
-@brand-danger:           #ef5350;
+@brand-primary:          #1e88e5;
+@brand-success:          #43a047;
+@brand-warning:          #ef6c00;
+@brand-danger:           #e53935;
 
 
 //== Scaffolding
@@ -32,7 +32,7 @@
 @text-color:            #111;
 
 // Font weights
-@weight-light:            300;
+@weight-light:          300;
 
 //** Global textual link color.
 @link-color:            #2196f3;
@@ -42,9 +42,9 @@
 @link-hover-decoration: underline;
 
 //** Site link styles
-@site-link-color:            @gray-light;
+@site-link-color:            #9e9e9e;
 @site-link-hover-color:      @text-color;
-@site-link-active-color:     @brand-info;
+@site-link-active-color:     @brand-accent;
 
 //** In-site navs states
 @state-default:         @gray-light;
@@ -66,6 +66,14 @@
 @headings-color:          lighten(@text-color, 8%);;
 
 
+//== Shadows
+//
+//##
+@shadow-key-umbra-opacity:          0.2;
+@shadow-key-penumbra-opacity:       0.14;
+@shadow-ambient-shadow-opacity:     0.12;
+
+
 //== Badges
 //
 //##
@@ -90,9 +98,9 @@
 // Basics of a navbar
 @navbar-height:                    46px;
 @navbar-margin-bottom:             @line-height-computed;
-@navbar-border-radius:             @border-radius-base;
 @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+@navbar-inner-margin:              12px;
 @navbar-collapse-max-height:       340px;
 
 @navbar-default-color:             #777;
@@ -100,14 +108,16 @@
 @navbar-default-border:            @gray-lighter;
 
 // Navbar links
+@navbar-link-spacing:                      6px;
+@navbar-link-radius:                       @border-radius-base;
 @navbar-link-size:                         @font-size-base + 2px;
 @navbar-icon-size:                         26px;
 
 @navbar-default-link-color:                @site-link-color;
 @navbar-default-link-hover-color:          @site-link-hover-color;
 @navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         @site-link-active-color;
-@navbar-default-link-active-bg:            transparent;
+@navbar-default-link-active-color:         @site-link-hover-color;
+@navbar-default-link-active-bg:            #eee;
 
 @navbar-compact-link-active-color:         @navbar-default-bg;
 @navbar-compact-link-active-bg:            @site-link-active-color;
@@ -210,40 +220,40 @@
 //## For each of Bootstrap's buttons, define text, background and border color.
 
 @btn-font-weight:                300;
+@btn-link-disabled-color:        @gray-light;
 
-@btn-default-color:              #95a5a6;
-@btn-default-bg:                 transparent;
-@btn-default-border:             #bdc3c7;
+//** Flat buttons
+@btn-default-color:              #78909c;
+@btn-default-bg:                 #90a4ae;
 
-@btn-default-hover-color:        #4fc3f7;
-@btn-default-hover-bg:           transparent;
-@btn-default-hover-border:       #4fc3f7;
+@btn-primary-color:              @brand-primary;
+@btn-primary-bg:                 #64b5f6;
 
-@btn-default-active-color:       #2196f3;
-@btn-default-active-bg:          transparent;
-@btn-default-active-border:      #2196f3;
+@btn-success-color:              @brand-success;
+@btn-success-bg:                 #81c784;
 
-@btn-primary-color:              #fff;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             @btn-primary-bg;
+@btn-warning-color:              @brand-warning;
+@btn-warning-bg:                 #ffb74d;
 
-@btn-success-color:              #fff;
-@btn-success-bg:                 @brand-success;
-@btn-success-border:             @btn-success-bg;
+@btn-danger-color:               @brand-danger;
+@btn-danger-bg:                  #ff8a65;
 
-@btn-info-color:                 #fff;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                @btn-info-bg;
 
-@btn-warning-color:              #fff;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             @btn-warning-bg;
+//** Raised buttons
+@btn-default-raised-color:              #95a5a6;
+@btn-default-raised-bg:                 #fff;
 
-@btn-danger-color:               #fff;
-@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              @btn-danger-bg;
+@btn-primary-raised-color:              #fff;
+@btn-primary-raised-bg:                 @brand-primary;
 
-@btn-link-disabled-color:        @gray-light;
+@btn-success-raised-color:              #fff;
+@btn-success-raised-bg:                 @brand-success;
+
+@btn-warning-raised-color:              #fff;
+@btn-warning-raised-bg:                 @brand-warning;
+
+@btn-danger-raised-color:               #fff;
+@btn-danger-raised-bg:                  @brand-danger;
 
 
 //== Form panel

misago/emberapp/app/templates/index.hbs

@@ -11,4 +11,131 @@
     This code is work in progress for Misago 0.6 release. If you expected to see forums instead, please download <strong>latest 0.5 release</strong> instead.
   </p>
 
+  <h2>Material buttons</h2>
+
+  <h3>Flat</h3>
+  <ul class="list-unstyled list-inline">
+    <li>
+      <button type="button" class="btn btn-default">
+        Flat Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-primary">
+        Flat Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-success">
+        Flat Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-warning">
+        Flat Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-danger">
+        Flat Button
+      </button>
+    </li>
+  </ul>
+
+  <ul class="list-unstyled list-inline">
+    <li>
+      <button type="button" class="btn btn-default btn-busy" disabled="disabled">
+        Flat Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-primary btn-busy" disabled="disabled">
+        Flat Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-success btn-busy" disabled="disabled">
+        Flat Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-warning btn-busy" disabled="disabled">
+        Flat Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-danger btn-busy" disabled="disabled">
+        Flat Button
+        {{loader-compact}}
+      </button>
+    </li>
+  </ul>
+
+  <h3>Raised</h3>
+
+  <ul class="list-unstyled list-inline">
+    <li>
+      <button type="button" class="btn btn-default btn-raised">
+        Raised Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-primary btn-raised">
+        Raised Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-success btn-raised">
+        Raised Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-warning btn-raised">
+        Raised Button
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-danger btn-raised">
+        Raised Button
+      </button>
+    </li>
+  </ul>
+
+  <ul class="list-unstyled list-inline">
+    <li>
+      <button type="button" class="btn btn-default btn-raised btn-busy" disabled="disabled">
+        Raised Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-primary btn-raised btn-busy" disabled="disabled">
+        Raised Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-success btn-raised btn-busy" disabled="disabled">
+        Raised Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-warning btn-raised btn-busy" disabled="disabled">
+        Raised Button
+        {{loader-compact}}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="btn btn-danger btn-raised btn-busy" disabled="disabled">
+        Raised Button
+        {{loader-compact}}
+      </button>
+    </li>
+  </ul>
+
 </div>