bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 17:50:07 +01:00
Code Releases Activity

form tweaks, styleguide additions

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-12-22 16:07:37 +01:00
parent ce973b848c
commit bf61802447
5 changed files with 76 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_src/_assets/styles/bigchain/_forms.scss
View File

@ -5,11 +5,13 @@
// //
.form-control { .form-control {
@extend .transition;
display: block; display: block;
width: 100%; width: 100%;
appearance: none; appearance: none;
padding: $input-padding-x $input-padding-y; padding: $input-padding-x $input-padding-y;
font-family: $input-font; font-family: $input-font;
font-weight: $font-weight-bold;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $line-height; line-height: $line-height;
color: $input-color; color: $input-color;
@ -17,11 +19,10 @@
border: none; border: none;
border-bottom: 2px solid $input-border-color; border-bottom: 2px solid $input-border-color;
border-radius: 0; border-radius: 0;
transition: border-color ease-in-out .15s;
&:focus { &:focus {
outline: 0; outline: 0;
border-color: #fff; border-color: $input-border-focus;
} }
// Placeholder // Placeholder

8
_src/_assets/styles/bigchain/_logo.scss
View File

@ -6,7 +6,7 @@
// default logo // default logo
.logo { .logo {
fill: $brand-main-blue-dark; fill: $brand-main-blue;
width: 300px; width: 300px;
height: 30px; height: 30px;
} }
@ -22,7 +22,7 @@
.logo--full { .logo--full {
display: block; display: block;
width: 99%; width: 100%;
height: auto; height: auto;
} }
@ -30,6 +30,6 @@
// //
// color modifiers // color modifiers
// //
.logo--blue { .logo--dark {
fill: $brand-main-blue; fill: $brand-main-blue-dark;
} }

8
_src/_assets/styles/bigchain/_variables.scss
View File

@ -180,13 +180,11 @@ $input-padding-y: 0 !default;
$input-bg: rgba(255,255,255,.1) !default; $input-bg: rgba(255,255,255,.1) !default;
$input-bg-disabled: $gray-lighter !default; $input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default; $input-color: $gray-dark !default;
$input-border-color: $gray-lighter !default; $input-border-color: $gray-lighter !default;
$input-border-focus: #66afe9 !default; $input-border-focus: $gray !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: $gray !default;
$input-color-placeholder: #999 !default;
// //

6
_src/_assets/styles/page-front.scss
View File

@ -153,4 +153,10 @@
max-width: $screen-sm-min; max-width: $screen-sm-min;
margin: auto; margin: auto;
} }
.form-control {
&:focus {
border-color: #fff;
}
}
} }

62
_src/styleguide.md
View File

@ -47,9 +47,35 @@ sitemap: false
</div> </div>
# Typography ## Logo
## Body Copy <svg class="logo logo--sm" aria-labelledby="title"><title>Logo Bigchain</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
<svg class="logo" aria-labelledby="title"><title>Logo Bigchain</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
<svg class="logo logo--full" aria-labelledby="title"><title>Logo Bigchain</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
```html
<svg class="logo logo--sm" aria-labelledby="title">
<title>Logo Bigchain</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
<svg class="logo" aria-labelledby="title">
<title>Logo Bigchain</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
<svg class="logo logo--full" aria-labelledby="title">
<title>Logo Bigchain</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
```
## Typography
### Body Copy
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
@ -122,6 +148,38 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo
``` ```
### Forms
<form class="js-parsley" action="#">
<div class="form-group">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Your Name</label>
</div>
<div class="form-group">
<input class="form-control" type="email" id="email" name="email">
<label class="form-label" for="email">Your Email</label>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</form>
```html
<form class="js-parsley" action="#">
<div class="form-group">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Your Name</label>
</div>
<div class="form-group">
<input class="form-control" type="email" id="email" name="email">
<label class="form-label" for="email">Your Email</label>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</form>
```
### Alerts ### Alerts
<div class="alert alert-success"><strong class="alert__title">Lucas ipsum</strong> dolor sit amet kenobi ubese yaka weequay aka trioculus</div> <div class="alert alert-success"><strong class="alert__title">Lucas ipsum</strong> dolor sit amet kenobi ubese yaka weequay aka trioculus</div>