Added sass-resources-loader to css webpack rules
This commit is contained in:
mgabdev
parent
204cc2b3bd
commit
293c6502da
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
$font-sans-serif: 'gabsocial-font-sans-serif' !default;
|
||||
$font-display: 'gabsocial-font-display' !default;
|
||||
$font-monospace: 'gabsocial-font-monospace' !default;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// todo
|
||||
$themes: (
|
||||
light: (
|
||||
backgroundColor: #fff,
|
||||
),
|
||||
dark: (
|
||||
backgroundColor: #fff,
|
||||
),
|
||||
contrast: (
|
||||
backgroundColor: #fff,
|
||||
),
|
||||
);
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import './variables';
|
||||
@import './colors';
|
||||
@import './themes';
|
||||
@import './font_families';
|
||||
@import './mixins';
|
||||
|
|
@ -25,5 +25,11 @@ module.exports = {
|
|||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'sass-resources-loader',
|
||||
options: {
|
||||
resources: `${process.cwd()}/app/javascript/styles/base.scss`,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue