Merge pull request #238 from Codebrahma/themes-module-update

Themes module update

Author: KRRISH96

doc/package.json

@@ -23,6 +23,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
+    "serve": "rm -rf ./cache && rm -rf ./public && gatsby build && gatsby serve",
     "format": "prettier --write '**/*.js'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

doc/src/components/WithComponentsBar/WithComponentBar.js

@@ -9,7 +9,8 @@ import { componentList } from '../common/componentList';
 import Button from '../../../../lib/button';
 import Drawer from '../../../../lib/drawer';
 
-import theme from './styles.scss';
+import theme from './theme.module.scss';
+import './styles.scss';
 
 class WithComponentBar extends React.Component {
   componentDidUpdate(prevProps) {

doc/src/components/WithComponentsBar/styles.scss

@@ -151,11 +151,3 @@
         }
     }
 }
-
-:local(.drawer) {
-    padding: 0;
-    height: calc(100% - 100px);
-    @media only screen and (min-width: 992px) {
-        left: 0 !important;
-    }
-}

doc/src/components/WithComponentsBar/theme.module.scss

@@ -0,0 +1,8 @@
+:local(.drawer) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  height: calc(100% - 100px) !important;
+  @media only screen and (min-width: 992px) {
+      left: 0 !important;
+  }
+}

doc/src/components/documentation/Documentation.js

@@ -5,7 +5,7 @@ import { LiveProvider, LivePreview, LiveError } from 'react-live';
 
 import * as components from '../../../../lib';
 import match from '../../images/match.svg';
-import tableTheme from './tableTheme.scss';
+import tableTheme from './tableTheme.module.scss';
 import componentTheme from '../common/componentData/theme.scss';
 import './styles.scss';
 

doc/src/components/documentation/tableTheme.scss renamed to doc/src/components/documentation/tableTheme.module.scss

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import Navbar from '../../../lib/navbar';
 import liteLogo from '../images/match.svg';
-import theme from './theme.scss';
+import theme from './theme.module.scss';
 
 const Header = ({ location }) => (
   <Navbar theme={theme} className={`navbar${location.pathname !== '/' ? ' navbar-extended' : ''}`} position="fixed" flat title={<Link to="/">React Lite UI</Link>} leftIcon={<Link to="/"><img src={liteLogo} alt="navbar-left-logo" /></Link>}>

doc/src/components/header.js

@@ -28,4 +28,26 @@
       width: 100%;
       background: #e09b2d
   }
+}
+
+div[class*=navlinks] {
+  a {
+      &:hover {
+          background: transparent;
+          &::after {
+              content: '';
+              display: block;
+              height: 3px;
+              width: 100%;
+              background: #e09b2d
+          }
+      }
+
+      &::after {
+          content: '';
+          display: block;
+          height: 3px;
+          width: 100%;
+      }
+  }
 }

doc/src/components/styles.scss

@@ -25,25 +25,3 @@
 :local(.leftContent) {
   padding-left: 0.5rem;
 }
-
-div[class*=navlinks] {
-    a {
-        &:hover {
-            background: transparent;
-            &::after {
-                content: '';
-                display: block;
-                height: 3px;
-                width: 100%;
-                background: #e09b2d
-            }
-        }
-
-        &::after {
-            content: '';
-            display: block;
-            height: 3px;
-            width: 100%;
-        }
-    }
-}

doc/src/components/theme.scss renamed to doc/src/components/theme.module.scss

@@ -0,0 +1,27 @@
+:local(.menu){
+  z-index: 50;
+}
+
+:local(.selectInput) {
+  input {
+    font-size: 1.06em;
+  }
+  border-bottom-color: #8a908c;
+}
+
+:local(.option) {
+  padding: 5%;
+}
+
+:local(.border-animation) {
+  &::after {
+    background: #6679cc !important;
+  }
+}
+
+:local(.button) {
+  background-color: transparent;
+  &:hover {
+    background-color: #cecaca8a;
+  }
+}