Add more improvements to css

improve buttons, spacing, inputs and tables
karlitschek · May 23, 2018 · 1103f25 · 1103f25
1 parent df93322
commit 1103f25
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 97 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -67,10 +67,13 @@
       <div id="content" class="content">
         <div class="wrapper" {%if page.ignoreLinks%}data-proofer-ignore{% endif %}>
           {{ content }}
-          <div class="edit-github">
-              <div class="edit-github-button">
-                <img class="github-icon" src="{{ site.url }}/images/icons/github.svg" alt="Github">
-                <a href="https://github.com/RocketChat/docs/blob/master{{page.url}}README.md">Contribute to this page on GitHub</a>
+              <div class="edit-github">
+                <a class="button" href="https://github.com/RocketChat/docs/blob/master{{page.url}}README.md">
+                  <span class="button--icon">
+                    <img src="{{ site.url }}/images/icons/github--white.svg" alt="Github">
+                  </span>
+                  <span>Contribute to this page on GitHub</span>
+                </a>
               </div>
           </div>
         </div>

diff --git a/_sass/buttons.scss b/_sass/buttons.scss
@@ -0,0 +1,207 @@
+@mixin reset {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    outline: none;
+    border: 0;
+    background: none;
+    text-decoration: none;
+    color: $brand;
+  }
+
+  @mixin defaultStyle {
+    font-weight: 500;
+    font-size: 0.8em;
+    line-height: 1.5;
+    text-align: center;
+    display: inline-flex;
+    @include justify-content(space-around);
+    vertical-align: top;
+    padding: 0.9em 1.14em;
+    border-radius: 2px;
+    transition: all $tranitions;
+  }
+
+  @mixin disabledStyle {
+    &.disabled,
+    &[disabled] {
+      background: $grey-bg;
+      color: $grey-smoke-dark;
+      cursor: default;
+
+      &:hover {
+        background: $grey-bg;
+        color: $grey-smoke-dark;
+      }
+    }
+  }
+
+  .button {
+    @include reset;
+    @include defaultStyle;
+    @include disabledStyle;
+
+    color: #fff;
+    background-color: $brand;
+
+    &:hover {
+      background-color: $brand-dark !important;
+    }
+
+    &:active {
+      background-color: $brand;
+      box-shadow: inset 0 2px 0 0 $brand-dark;
+    }
+
+    + .button {
+      margin-left: 0.5em;
+    }
+  }
+
+  .button--ghost {
+    @include reset;
+    @include defaultStyle;
+    @include disabledStyle;
+
+    background: $grey-light;
+    color: $space;
+
+    &:hover {
+      background: $grey;
+    }
+
+    &:active {
+      background-color: $grey-light;
+      box-shadow: inset 0 2px 0 0 $grey;
+    }
+
+    &.disabled,
+    &[disabled] {
+      border-color: $grey-bg;
+    }
+  }
+
+  .button--dark {
+    @include reset;
+    @include defaultStyle;
+    @include disabledStyle;
+
+    background: $space;
+    color: #fff;
+
+    &:hover {
+      opacity: .7;
+    }
+
+    &:active {
+      background-color: $grey-light;
+      box-shadow: inset 0 2px 0 0 $grey;
+    }
+
+    &.disabled,
+    &[disabled] {
+      border-color: $grey-bg;
+    }
+  }
+
+  .button--text {
+    @include reset;
+    @include defaultStyle;
+    @include disabledStyle;
+    padding: 0;
+    font-weight: 600;
+
+    &:hover {
+      color: $brand-dark;
+    }
+
+    &.disabled,
+    &[disabled] {
+      background: none;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  .button--link {
+    padding: 0;
+    font-weight: 600;
+    transition: all $tranitions;
+    color: $brand;
+
+    &:hover {
+      color: $brand-dark;
+    }
+  }
+
+  .button--with-arrow {
+    position: relative;
+    padding-right: 2em;
+
+    &:before {
+      content: "";
+      display: block;
+      border-top: 1px solid $brand;
+      width: 1.1em;
+      position: absolute;
+      top: 0.75em;
+      right: 0;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      width: 0.5em;
+      height: 0.5em;
+      border-right: 1px solid $brand;
+      border-bottom: 1px solid $brand;
+      transform: rotate(-45deg);
+      position: absolute;
+      top: 0.5em;
+      right: 0;
+    }
+
+    &:hover {
+      &:before {
+        border-top: 1px solid $brand-dark;
+      }
+      &:after {
+        border-right: 1px solid $brand-dark;
+        border-bottom: 1px solid $brand-dark;
+      }
+    }
+  }
+
+  .button--blank {
+    @include reset;
+    @include defaultStyle;
+    @include disabledStyle;
+
+    background: #fff;
+    color: #030C1A;
+
+    &:hover {
+      background-color: #eee;
+    }
+
+    &:active {
+      box-shadow: inset 0 1px 0 0 $grey-dark;
+    }
+  }
+
+
+  .button--icon {
+    margin-right: 1em;
+  }
+
+  .button--nobreak {
+    white-space: nowrap;
+  }
+
+  // Button sizes
+  .button--full {
+    width: 100%;
+  }