Added sass-resources-loader to css webpack rules

This commit is contained in:
mgabdev 2019-08-13 12:14:57 -04:00
parent 204cc2b3bd
commit 293c6502da
7 changed files with 400 additions and 0 deletions

View File

@ -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;

View File

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

View File

@ -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;
}
}

View File

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

View File

@ -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;

View File

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

View File

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