thredded 0.2.2 → 0.3.0

data/app/assets/stylesheets/thredded/base/_grid.scss

@@ -5,7 +5,7 @@
 }
 
 @mixin thredded-media-tablet-and-up {
-  @media screen and (min-width: map-get($thredded-grid-breakpoint-max-widths, mobile) + 1px) {
+  @media screen and (min-width: map-get($thredded-grid-breakpoint-max-widths, mobile) + 0.00001rem) {
     @content;
   }
 }

data/app/assets/stylesheets/thredded/base/_nav.scss

@@ -0,0 +1,21 @@
+%thredded--nav-link {
+  color: $thredded-nav-color;
+  text-decoration: none;
+  transition: $thredded-action-transition;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: $thredded-nav-hover-color;
+    text-decoration: none;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+%thredded--nav-link-current {
+  color: $thredded-nav-current-color;
+}

data/app/assets/stylesheets/thredded/base/_tables.scss

@@ -2,24 +2,15 @@
   font-feature-settings: "kern", "liga", "tnum";
   border-collapse: collapse;
   margin: $thredded-small-spacing 0;
-  table-layout: fixed;
-  width: 100%;
 
-  th {
-    border-bottom: 1px solid darken($thredded-base-border-color, 15%);
-    font-weight: 600;
-    padding: $thredded-small-spacing 0;
-    text-align: left;
-  }
-
-  td {
+  td, th {
+    text-align: center;
+    padding: 0.5rem 0.75rem;
     border-bottom: $thredded-base-border;
-    padding: $thredded-small-spacing 0;
+    vertical-align: middle;
   }
 
-  tr,
-  td,
   th {
-    vertical-align: middle;
+    font-weight: bold;
   }
 }

data/app/assets/stylesheets/thredded/base/_typography.scss

@@ -8,12 +8,13 @@
 %thredded--link {
   color: $thredded-action-color;
   text-decoration: none;
-  transition: color 0.1s linear;
+  transition: $thredded-action-transition;
 
   &:active,
   &:focus,
   &:hover {
-    color: darken($thredded-action-color, 15%);
+    color: $thredded-action-hover-color;
+    text-decoration: none;
   }
 
   &:active,
@@ -23,10 +24,10 @@
 }
 
 %thredded--hr {
-  border-bottom: $thredded-base-border;
+  border-bottom: none;
   border-left: none;
   border-right: none;
-  border-top: none;
+  border-top: $thredded-base-border;
   margin: $thredded-base-spacing 0;
 }
 
@@ -34,3 +35,7 @@
   margin: 0 0 $thredded-small-spacing;
 }
 
+%thredded--icon {
+  fill: currentColor;
+}
+

data/app/assets/stylesheets/thredded/base/_variables.scss

@@ -1,6 +1,6 @@
 // Grid
-$thredded-grid-container-max-width: 720px !default;
-$thredded-grid-breakpoint-max-widths: (mobile: 400px, tablet: 600px) !default;
+$thredded-grid-container-max-width: 43.125rem !default;
+$thredded-grid-breakpoint-max-widths: (mobile: 34rem, tablet: 48rem) !default;
 
 // Typography
 $thredded-base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
@@ -20,10 +20,17 @@ $thredded-brand: #4a90e2 !default;
 $thredded-dark-gray: #333 !default;
 $thredded-light-gray: #eee !default;
 
-// Colors of text, background, and actions (links)
-$thredded-base-font-color: #575d6b !default;
-$thredded-base-background-color: #fff !default;
+// Colors of text, background, actions (links), and navigation
+$thredded-text-color: #575d6b !default;
+$thredded-secondary-text-color: lighten($thredded-text-color, 30%) !default;
+$thredded-background-color: #fff !default;
 $thredded-action-color: $thredded-brand !default;
+$thredded-action-hover-color: darken($thredded-action-color, 15%) !default;
+$thredded-action-transition: color 0.1s linear !default;
+$thredded-nav-color: $thredded-text-color !default;
+$thredded-nav-hover-color: $thredded-action-color !default;
+$thredded-nav-current-color: $thredded-action-color !default;
+$thredded-secondary-nav-color: $thredded-secondary-text-color !default;
 
 // Colors of alerts and flash messages
 $thredded-alert-danger-background: #fbe3e4 !default;
@@ -39,16 +46,28 @@ $thredded-alert-warning-color: #8a6d3b !default;
 $thredded-base-border-color: $thredded-light-gray !default;
 $thredded-base-border: 1px solid $thredded-base-border-color !default;
 
-// Forms
-$thredded-form-border: 1px solid darken($thredded-base-border-color, 5%) !default;
+// Form inputs
+$thredded-form-background: $thredded-background-color !default;
+$thredded-form-border-color: darken($thredded-base-border-color, 5%) !default;
+$thredded-form-border-hover-color: darken($thredded-form-border-color, 6.4%) !default;
+$thredded-form-border-focus-color: $thredded-action-color !default;
+$thredded-form-border: 1px solid $thredded-form-border-color !default;
 $thredded-form-box-shadow: inset 0 1px 3px rgba(#000, 0.06) !default;
+$thredded-form-color: $thredded-text-color !default;
 
 // Buttons
 $thredded-button-background: $thredded-action-color !default;
-$thredded-button-border-radius: 3px !default;
 $thredded-button-color: #fff !default;
+$thredded-button-hover-color: $thredded-button-color !default;
+$thredded-button-hover-background: darken($thredded-button-background, 15%) !default;
+$thredded-button-border-radius: 3px !default;
 $thredded-button-font-family: $thredded-base-font-family !default;
 $thredded-button-font-size: $thredded-font-size-small !default;
 $thredded-button-font-weight: 600 !default;
-$thredded-button-hover-background: darken($thredded-button-background, 15%) !default;
 $thredded-button-line-height: 1 !default;
+
+// Badges (unread count, posts count)
+$thredded-badge-active-color: $thredded-button-color !default;
+$thredded-badge-active-background: $thredded-action-color !default;
+$thredded-badge-inactive-color: $thredded-button-color !default;
+$thredded-badge-inactive-background: rgba($thredded-text-color, 0.3) !default;

data/app/assets/stylesheets/thredded/components/_alerts.scss

@@ -0,0 +1,19 @@
+&--alert {
+  @extend %thredded--alert;
+}
+
+&--alert-success {
+  @extend %thredded--alert--success;
+}
+
+&--alert-danger {
+  @extend %thredded--alert--danger;
+}
+
+&--alert-info {
+  @extend %thredded--alert--info;
+}
+
+&--alert-warning {
+  @extend %thredded--alert--warning;
+}

data/app/assets/stylesheets/thredded/components/_currently-online.scss

@@ -22,7 +22,7 @@
   }
 
   &--avatar {
-    background-color: $thredded-base-font-color;
+    background-color: $thredded-text-color;
     border-radius: 50%;
     display: inline-block;
     height: 1.75rem;

data/app/assets/stylesheets/thredded/components/_form-list.scss

@@ -2,9 +2,7 @@
   @extend %thredded--list-unstyled;
 
   &.on-top {
-    border-bottom: $thredded-base-border;
-    margin-bottom: $thredded-base-spacing * 1.5;
-    padding-bottom: $thredded-small-spacing;
+    margin-bottom: $thredded-small-spacing;
   }
 
   li {
@@ -28,7 +26,7 @@
 
 &--form-list--hint {
   @extend %thredded--paragraph;
-  color: lighten($thredded-base-font-color, 20%);
+  color: $thredded-secondary-text-color;
   font-size: $thredded-font-size-small;
   font-weight: normal;
   position: relative;

data/app/assets/stylesheets/thredded/components/_icons.scss

@@ -0,0 +1,3 @@
+&--icon {
+  @extend %thredded--icon;
+}

data/app/assets/stylesheets/thredded/components/_messageboard.scss

@@ -11,7 +11,7 @@
   }
 
   &:hover {
-    background-color: lighten($thredded-brand, 40%);
+    background-color: rgba($thredded-brand, 0.035);
   }
 }
 
@@ -28,7 +28,7 @@
 
 &--messageboard--meta {
   @extend %thredded--heading;
-  color: lighten($thredded-base-font-color, 30%);
+  color: $thredded-secondary-text-color;
   display: inline-block;
   font-weight: normal;
   margin-bottom: 0;
@@ -39,12 +39,12 @@
   @extend %thredded--paragraph;
   clear: both;
   margin-bottom: $thredded-small-spacing / 2;
-  color: $thredded-base-font-color;
+  color: $thredded-text-color;
 }
 
 &--messageboard--byline {
   @extend %thredded--paragraph;
-  color: lighten($thredded-base-font-color, 30%);
+  color: $thredded-secondary-text-color;
   font-size: 0.875em;
   font-weight: normal;
   margin-bottom: 0;

data/app/assets/stylesheets/thredded/components/_pagination.scss

@@ -5,12 +5,12 @@
   text-align: center;
 
   > span {
-    color: lighten($thredded-base-font-color, 30%);
+    color: $thredded-secondary-text-color;
     display: inline-block;
     margin-right: $thredded-small-spacing;
 
     > a {
-      color: $thredded-base-font-color;
+      color: $thredded-text-color;
       display: inline-block;
 
       &:focus,

data/app/assets/stylesheets/thredded/components/_post-form.scss

@@ -7,6 +7,9 @@
     border-top: $thredded-base-border;
     margin-top: $thredded-base-spacing;
     padding-top: $thredded-large-spacing;
+    @include thredded-media-mobile {
+      padding-top: $thredded-base-spacing;
+    }
   }
 
   &--title {

data/app/assets/stylesheets/thredded/components/_post.scss

@@ -1,6 +1,9 @@
 &--post {
   position: relative;
   margin-bottom: $thredded-large-spacing;
+  @include thredded-media-mobile {
+    margin-bottom: $thredded-base-spacing;
+  }
 }
 
 &--post--avatar {
@@ -12,7 +15,7 @@
   top: 6px;
   width: 1.75rem; // 28px
 
-  @media (min-width: $thredded-grid-container-max-width + 64px) {
+  @media (min-width: $thredded-grid-container-max-width + 4rem) {
     height: 2.25rem; // 36px
     left: -3rem;
     position: absolute;
@@ -31,22 +34,26 @@
 
   a {
     @extend %thredded--link;
-    color: $thredded-base-font-color;
+    color: $thredded-text-color;
   }
 }
 
 &--post--created-at {
   @extend %thredded--paragraph;
   font-size: $thredded-font-size-small;
-  color: lighten($thredded-base-font-color, 30%);
+  color: $thredded-secondary-text-color;
   display: inline-block;
 }
 
-&--post--edit {
+&--post--edit, &--post--delete {
   font-size: $thredded-font-size-small;
   @extend %thredded--link;
 }
 
+&--post--delete {
+  margin-left: 0.4rem;
+}
+
 &--post--content {
   font-size: 1.063rem; // 17px
   line-height: 1.65;
@@ -63,4 +70,7 @@
     max-width: 100%;
     height: auto;
   }
+  table {
+    @extend %thredded--table;
+  }
 }

data/app/assets/stylesheets/thredded/components/_select2.scss

@@ -1,42 +1,112 @@
-&--main-container .select2-container {
+&--select2-container {
   width: 100%;
 
   > .select2-choices {
-    background-image: none;
-    border: $thredded-form-border;
-    box-shadow: $thredded-form-box-shadow;
+    @extend %thredded--form--input;
+    $gutter-y: 0.4rem;
+    $choices-gutter-y: 0.2rem;
+    $gutter-x: 0.6rem;
+    padding-top: ($thredded-small-spacing - $gutter-y - $choices-gutter-y);
     min-height: unset;
-    padding: $thredded-small-spacing;
 
     > .select2-search-choice {
-      margin: 0 6px 0 0;
+      border: $thredded-base-border;
+      background-color: $thredded-light-gray;
+      margin: $gutter-y $gutter-x (-$choices-gutter-y) 0;
+      &.select2-search-choice-focus {
+        background: $thredded-button-background;
+        border: 1px solid $thredded-button-background;
+        box-shadow: 0 0 2px $thredded-button-background inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+        color: $thredded-button-color;
+        transition: none;
+      }
     }
 
     > .select2-search-field {
+      background: transparent;
+      margin-top: ($gutter-y + $choices-gutter-y);
       > [type="text"] {
+        color: $thredded-form-color;
         font-family: $thredded-base-font-family;
         font-size: 1rem;
         margin: 0;
         padding: 0;
+        &.select2-active {
+          // Select2 does !important here
+          background-color: transparent !important;
+        }
       }
     }
   }
+
+  &.select2-container-active, &.select2-dropdown-open {
+    > .select2-choices {
+      @extend %thredded--form--input:focus;
+    }
+  }
 }
 
 &--select2-drop {
-  border-color: darken($thredded-base-border-color, 5%);
-  box-shadow: 0 1px 1px $thredded-base-border-color;
+  background: inherit;
+  border-color: $thredded-form-border-focus-color;
+  border-top: $thredded-base-border;
+  box-shadow: 0 1px 1px $thredded-form-border-focus-color;
   font-family: $thredded-base-font-family;
   font-size: $thredded-base-font-size;
   line-height: $thredded-base-line-height;
 
+  .select2-results {
+    background: $thredded-form-background;
+    padding: 4px;
+    margin: 0;
+  }
+
   .select2-result {
+    color: $thredded-text-color;
+
     &.select2-highlighted {
-      background: $thredded-action-color;
+      background: $thredded-button-background;
+      color: $thredded-button-color;
     }
 
     > .select2-result-label {
+      font-family: $thredded-base-font-family;
+      font-size: $thredded-base-font-size;
       padding: $thredded-small-spacing;
     }
   }
+
+  .select2-no-results, .select2-searching {
+    background: transparent;
+    color: $thredded-form-color;
+  }
+}
+
+
+&--select2-user-result {
+  &__avatar {
+    width: 2rem;
+    min-height: 2rem;
+    height: auto;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  &__name {
+    display: inline-block;
+    margin-left: 0.6rem
+  }
+}
+
+&--select2-user-selection {
+  &__avatar {
+    width: 1rem;
+    min-height: 1rem;
+    height: auto;
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
+  &__name {
+    display: inline-block;
+    margin-left: 0.4rem
+  }
 }