Merge pull request 'feat/18-add-bulma-branding' (#19) from feat/18-add-bulma-branding into main
Reviewed-on: #19
This commit is contained in:
commit
834807a3ad
2
.gitignore
vendored
2
.gitignore
vendored
@ -15,3 +15,5 @@ venv/
|
||||
|
||||
# Secrets
|
||||
*.secret
|
||||
|
||||
priceybot2/node_modules
|
||||
12
README.md
12
README.md
@ -6,3 +6,15 @@ Set the ENV variable `GOOGLE_APPLICATION_CREDENTIALS` to the location of the goo
|
||||
|
||||
|
||||
Run the python script
|
||||
|
||||
## compiling sass
|
||||
cd into priceybot2 subfolder
|
||||
|
||||
````
|
||||
npn run dev
|
||||
npm run css-build
|
||||
````
|
||||
Or if you're working on it
|
||||
````
|
||||
npm start
|
||||
````
|
||||
4198
priceybot2/package-lock.json
generated
Normal file
4198
priceybot2/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
priceybot2/package.json
Normal file
15
priceybot2/package.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "mybulma",
|
||||
"version": "1.0.0",
|
||||
"main": "sass/mystyles.scss",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"bulma": "^0.9.4",
|
||||
"node-sass": "^8.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"css-build": "node-sass --omit-source-map-url sass/main.scss static/css/main.css",
|
||||
"css-watch": "npm run css-build -- --watch",
|
||||
"start": "npm run css-watch"
|
||||
}
|
||||
}
|
||||
70
priceybot2/sass/branding.scss
Normal file
70
priceybot2/sass/branding.scss
Normal file
@ -0,0 +1,70 @@
|
||||
//brand colors
|
||||
$nexi-white: #f8fafb; // Made up
|
||||
$nexi-lighter-black: #353535; // Made up
|
||||
$nexi-black: #181818;
|
||||
$nexi-lighter-red: #9d7c7b; // Made up
|
||||
$nexi-red: #EB312E;
|
||||
$nexi-darker-red: #EB302D; // Made up
|
||||
$nexi-grey: #E4E4E4;
|
||||
$nexi-darker-grey: #D2D2D2;
|
||||
$nexi-green: #36EA7B;
|
||||
$nexi-cyan: #36E9EA;
|
||||
$nexi-purple: #A625EA;
|
||||
$nexi-orange: #F17C25;
|
||||
$nexi-darker-orange: #F44336;
|
||||
$nexi-yellow: #FFC107;
|
||||
|
||||
$custom-colors:
|
||||
(
|
||||
"nexi-white": ($nexi-white, findColorInvert($nexi-white)),
|
||||
"nexi-lighter-black": ($nexi-lighter-black, findColorInvert($nexi-lighter-black)),
|
||||
"nexi-black": ($nexi-black, findColorInvert($nexi-black)),
|
||||
"nexi-lighter-red": ($nexi-lighter-red, findColorInvert($nexi-lighter-red)),
|
||||
"nexi-red": ($nexi-red, findColorInvert($nexi-red)),
|
||||
"nexi-darker-red": ($nexi-darker-red, findColorInvert($nexi-darker-red)),
|
||||
"nexi-grey": ($nexi-grey, findColorInvert($nexi-grey)),
|
||||
"nexi-darker-grey": ($nexi-darker-grey, findColorInvert($nexi-darker-grey)),
|
||||
"nexi-green": ($nexi-green, findColorInvert($nexi-green)),
|
||||
"nexi-cyan": ($nexi-cyan, findColorInvert($nexi-cyan)),
|
||||
"nexi-purple": ($nexi-purple, findColorInvert($nexi-purple)),
|
||||
"nexi-orange": ($nexi-orange, findColorInvert($nexi-orange)),
|
||||
"nexi-darker-orange": ($nexi-darker-orange, findColorInvert($nexi-darker-orange)),
|
||||
"nexi-yellow": ($nexi-yellow, findColorInvert($nexi-yellow)),
|
||||
);
|
||||
|
||||
// Used for texts etc.
|
||||
$grey: $nexi-lighter-black;
|
||||
$grey-dark: $nexi-black;
|
||||
|
||||
// https://github.com/jgthms/bulma/blob/master/sass/utilities/initial-variables.sass
|
||||
$orange: $nexi-orange;
|
||||
$yellow: $nexi-yellow;
|
||||
$green: $nexi-green;
|
||||
//$turquoise: hsl(171, 100%, 41%) !default
|
||||
$cyan: $nexi-cyan;
|
||||
//$blue: hsl(229, 53%, 53%) !default
|
||||
$purple: $nexi-purple;
|
||||
$red: $nexi-red;
|
||||
|
||||
// https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass
|
||||
$primary: $nexi-white;
|
||||
|
||||
//$info: $cyan;
|
||||
//$success: $green;
|
||||
//$warning: $yellow;
|
||||
//$danger: $red;
|
||||
|
||||
$border: $nexi-darker-grey;
|
||||
$border-hover: $nexi-darker-red;
|
||||
$border-light: $nexi-lighter-red;
|
||||
$border-light-hover: $nexi-grey;
|
||||
|
||||
$link: $nexi-red;
|
||||
//$link-hover: $grey-darker !default
|
||||
//$link-hover-border: $grey-light !default
|
||||
|
||||
//$link-focus: $grey-darker !default
|
||||
$link-focus-border: $nexi-darker-red;
|
||||
|
||||
//$link-active: $grey-darker !default
|
||||
//$link-active-border: $grey-dark !default
|
||||
7
priceybot2/sass/main.scss
Normal file
7
priceybot2/sass/main.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@charset "utf-8";
|
||||
|
||||
// Our scss files
|
||||
@import "branding";
|
||||
|
||||
// Import after our branding so colors work.
|
||||
@import "../node_modules/bulma/bulma.sass";
|
||||
11601
priceybot2/static/css/main.css
Normal file
11601
priceybot2/static/css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="is-clipped">
|
||||
<html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Flask Auth Example</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -11,7 +11,7 @@ Copyright 2017 Google Inc.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Hangouts Chat Bot sample</title>
|
||||
</head>
|
||||
|
||||
@ -14,13 +14,17 @@
|
||||
<form method="POST" action="{{ url_for('auth.login') }}">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label>
|
||||
<input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label>
|
||||
<input class="input is-large" type="password" name="password" placeholder="Your Password">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
@ -29,7 +33,7 @@
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="button is-block is-info is-large is-fullwidth">Login</button>
|
||||
<button class="button is-block is-nexi-red is-dark is-large is-fullwidth ">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,28 +14,36 @@
|
||||
<form method="POST" action="{{ url_for('auth.signup') }}">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label>
|
||||
<input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label>
|
||||
<input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label>
|
||||
<input class="input is-large" type="password" name="password" placeholder="Password">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label>
|
||||
<input class="input is-large" type="text" name="google_id" placeholder="Google ID">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button is-block is-info is-large is-fullwidth">Sign Up</button>
|
||||
<button class="button is-block is-nexi-red is-dark is-large is-fullwidth">Sign Up</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user