bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +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 {
@extend .transition;
display: block;
width: 100%;
appearance: none;
padding: $input-padding-x $input-padding-y;
font-family: $input-font;
font-weight: $font-weight-bold;
font-size: $font-size-base;
line-height: $line-height;
color: $input-color;
@ -17,11 +19,10 @@
border: none;
border-bottom: 2px solid $input-border-color;
border-radius: 0;
transition: border-color ease-in-out .15s;
&:focus {
outline: 0;
border-color: #fff;
border-color: $input-border-focus;
}
// Placeholder

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

@ -6,7 +6,7 @@
// default logo
.logo {
fill: $brand-main-blue-dark;
fill: $brand-main-blue;
width: 300px;
height: 30px;
}
@ -22,7 +22,7 @@
.logo--full {
display: block;
width: 99%;
width: 100%;
height: auto;
}
@ -30,6 +30,6 @@
//
// color modifiers
//
.logo--blue {
fill: $brand-main-blue;
.logo--dark {
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-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-color: $gray-dark !default;
$input-border-color: $gray-lighter !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-border-focus: $gray !default;
$input-color-placeholder: $gray !default;
//

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

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

62
_src/styleguide.md
View File

@ -47,9 +47,35 @@ sitemap: false
</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**.
@ -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
<div class="alert alert-success"><strong class="alert__title">Lucas ipsum</strong> dolor sit amet kenobi ubese yaka weequay aka trioculus</div>