Added sass-resources-loader to css webpack rules

app/javascript/styles/_colors.scss

@@ -0,0 +1,80 @@
+// * copied for now from styles/gabsocial/variables.scss
+
+// Going to create a Gab Specific color stack and gracefully remove the existing stack
+// We know what colors we want to use for everything in the UI
+// The existing color stack is based on propagating color tint variants of a few basic colors
+
+////////// GAB SPECIFIC VARIABLE STACK //////////
+
+// NOTE - will eventually create a systematic approach of setting color variables to easily change instance themes
+
+// STATIC COLORS
+
+$gab-brand-default: #21cf7a;
+$gab-alert-red: #cc6643;
+$gab-secondary-text: #999;
+$gab-text-highlight: $gab-brand-default;
+$gab-small-cta-primary: #607CF5;
+
+
+// THEME COLORS
+
+// default theme (dark)
+$gab-background-base: #333;
+$gab-background-container: #222;
+$gab-placeholder-accent: #666;
+
+
+// light theme
+$gab-background-base-light: #f2f3f6;
+$gab-background-container-light: #fff;
+$gab-default-text-light: #6c6c6c;
+
+
+////////// EXISTING VARIABLE STACK (with modifications) //////////
+
+// Commonly used web colors
+
+// We certainly don't need variables for white and black.
+// you can declare color: white; color: black; or #fff; #000;
+$black: #000000; // Black
+$white: #ffffff; // White
+
+
+$success-green: #79bd9a !default; // Padua
+$error-red: #df405a !default; // Cerise
+$warning-red: #ff5050 !default; // Sunset Orange
+$gold-star: #ca8f04 !default; // Dark Goldenrod
+
+// Values from the classic Gab Social UI
+$classic-base-color: $gab-background-base;
+$classic-primary-color: $gab-background-base;
+$classic-secondary-color: $gab-placeholder-accent;
+$classic-highlight-color: $gab-text-highlight;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default; // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $gab-secondary-text !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;

app/javascript/styles/_font_families.scss

@@ -0,0 +1,3 @@
+$font-sans-serif: 'gabsocial-font-sans-serif' !default;
+$font-display: 'gabsocial-font-display' !default;
+$font-monospace: 'gabsocial-font-monospace' !default;

app/javascript/styles/_mixins.scss

@@ -0,0 +1,263 @@
+@mixin breakpoint($point) {
+  @if $point==lg {
+    @media screen and (min-width: 1366px) {
+      @content;
+    }
+  }
+
+  @else if $point==md {
+    @media screen and (min-width: 1024px) {
+      @content;
+    }
+  }
+
+  @else if $point==sm {
+    @media screen and (max-width: 600px) {
+      @content;
+    }
+  }
+}
+
+@mixin theme($themes: $themes) {
+
+  @each $theme,
+  $map in $themes {
+    .theme-#{$theme} & {
+      $theme-map: () !global;
+
+      @each $key,
+      $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@mixin margin-center($vertical: 0) {
+  @if ($vertical !=0) {
+    margin: $vertical auto $vertical auto;
+  }
+
+  @else {
+    margin: {
+      left: auto;
+      right: auto;
+    }
+  }
+}
+
+@mixin horizontal-margin($left, $right: $left) {
+  margin-left: $left;
+  margin-right: $right;
+}
+
+@mixin vertical-margin($top, $bottom: $top) {
+  margin-top: $top;
+  margin-bottom: $bottom;
+}
+
+@mixin horizontal-padding($left, $right: $left) {
+  padding-left: $left;
+  padding-right: $right;
+}
+
+@mixin vertical-padding($top, $bottom: $top) {
+  padding-top: $top;
+  padding-bottom: $bottom;
+}
+
+@function z($name) {
+  @if index($z-indexes, $name) {
+    @return (length($z-indexes) - index($z-indexes, $name))+1;
+  }
+
+  @else {
+    @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
+    @return null;
+  }
+}
+
+@mixin flex($justifyContent: flex-start, $alignItems: stretch, $direction: row, $flexWrap: nowrap) {
+  display: flex;
+
+  @if ($justifyContent) {
+    justify-content: $justifyContent;
+  }
+
+  @if ($alignItems) {
+    align-items: $alignItems;
+  }
+
+  @if ($direction) {
+    flex-direction: $direction;
+  }
+
+  @if ($flexWrap) {
+    flex-wrap: $flexWrap;
+  }
+}
+
+@mixin abs-position($top: auto, $right: auto, $bottom: auto, $left: auto, $includeAbsolute:true) {
+  @if ($includeAbsolute) {
+    position: absolute;
+  }
+
+  top: $top;
+  left: $left;
+  bottom: $bottom;
+  right: $right;
+}
+
+@mixin border-design($color: #fff, $size: 1px, $radius: 0px) {
+  border-radius: $radius;
+  border: $size solid $color;
+}
+
+@mixin bottom-spacing($margin: 0px, $padding: $margin) {
+  margin-bottom: $margin;
+  padding-bottom: $padding;
+}
+
+@mixin text-sizing($fontSize, $fontWeight, $lineHeight: 1, $textAlign: '', $letterSpacing: '') {
+  font-size: $fontSize;
+  font-weight: $fontWeight;
+
+  @if ($lineHeight !=1) {
+    line-height: $lineHeight;
+  }
+
+  @if ($textAlign != '') {
+    text-align: $textAlign;
+  }
+
+  @if ($letterSpacing != '') {
+    letter-spacing: $letterSpacing;
+  }
+}
+
+@mixin background-image($url: "", $size: cover, $position: center, $repeat: no-repeat) {
+  @if ($url !="") {
+    background-image: url($url);
+  }
+
+  background-size: $size;
+  background-position: $position;
+  background-repeat: $repeat;
+}
+
+@mixin pseudo($content: "", $display: block, $position: absolute) {
+  content: $content;
+  display: $display;
+  position: $position;
+}
+
+@mixin circle($size) {
+  @include size($size);
+  border-radius: $size / 2;
+}
+
+@mixin size($width: 100%, $height: $width) {
+  width: $width;
+  height: $height;
+}
+
+@mixin min-size($width: 100%, $height: $width) {
+  min-width: $width;
+  min-height: $height;
+}
+
+@mixin max-size($width: 100%, $height: $width) {
+  max-width: $width;
+  max-height: $height;
+}
+
+@mixin unselectable {
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+@mixin text-overflow($whitespace: '', $wordWrap: '') {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @if ($whitespace != '') {
+    white-space: $whitespace;
+  }
+
+  @if ($wordWrap != '') {
+    word-wrap: $wordWrap;
+  }
+}
+
+@mixin input-placeholder {
+  &.placeholder {
+    @content;
+  }
+
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+// standard container drop shadow
+@mixin light-theme-shadow() {
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+// common properties for all standard containers
+@mixin gab-container-standards() {
+  border-radius: 10px;
+  background: $gab-background-container;
+
+  body.theme-gabsocial-light & {
+    @include light-theme-shadow();
+    background: $gab-background-container-light;
+  }
+}
+
+@mixin avatar-radius() {
+  border-radius: 50%;
+}
+
+@mixin search-input() {
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  box-shadow: none;
+  font-family: inherit;
+  background: $gab-background-container;
+  color: $gab-text-highlight;
+  margin: 0;
+
+  @include text-sizing(16px, 400, 19px);
+  @include border-design($gab-placeholder-accent, 1px, 4px);
+  @include input-placeholder {
+    color: $gab-placeholder-accent;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
+}

app/javascript/styles/_themes.scss

@@ -0,0 +1,12 @@
+// todo
+$themes: (
+  light: (
+    backgroundColor: #fff,
+  ),
+  dark: (
+    backgroundColor: #fff,
+  ),
+  contrast: (
+    backgroundColor: #fff,
+  ),
+);

app/javascript/styles/_variables.scss

@@ -0,0 +1,31 @@
+// turns navigation links into icon-only buttons
+$nav-breakpoint-1: 850px;
+// search field hidden and replaced with search icon link
+$nav-breakpoint-2: 650px;
+// "Gab" button hidden and replaced with floating button on bottom corner
+$nav-breakpoint-3: 450px;
+// Gab Logo hidden - bare minimum navigation for smallest width devices
+$nav-breakpoint-4: 375px;
+
+$no-gap-breakpoint: 415px;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$z-indexes: (
+  'outdated-browser',
+  'page-wrapper',
+  'site-header',
+  'site-footer'
+  'modal-backdrop',
+  'modal',
+);
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja,
+ko,
+zh-CN,
+zh-HK,
+zh-TW;

app/javascript/styles/base.scss

@@ -0,0 +1,5 @@
+@import './variables';
+@import './colors';
+@import './themes';
+@import './font_families';
+@import './mixins';

config/webpack/rules/css.js

@@ -25,5 +25,11 @@ module.exports = {
         sourceMap: true,
       },
     },
+    {
+      loader: 'sass-resources-loader',
+      options: {
+        resources: `${process.cwd()}/app/javascript/styles/base.scss`,
+      },
+    },
   ],
 };