ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2025-02-14 21:10:26 +01:00
Code Releases Activity

buttons, buttons, buttons

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-08-24 17:18:17 +02:00
parent d3d6a4e534
commit e4033c3d5b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
10 changed files with 205 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
_src/_assets/scss/_buttons.scss Normal file
View File

@ -0,0 +1,122 @@
//
// Buttons
// ---
// ipdb.io
//
@import 'variables';
@import 'mixins';
.button {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
line-height: 1;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 0;
box-shadow: none;
transition: .25s ease-out;
// default button
@include button-size($btn-padding-y, $btn-padding-x, .9rem, $line-height, $btn-border-radius);
@include button-variant($btn-secondary-color, $btn-secondary-bg);
&:hover,
&:focus {
transform: translateY(-1px);
}
&:active,
&.active {
background-image: none;
outline: 0;
transform: translateY(0);
}
&.disabled,
&:disabled {
opacity: .45;
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
.icon {
width: $font-size-base;
height: $font-size-base;
margin-right: .25rem;
margin-bottom: -1px;
}
}
//
// Alternate buttons
//
.button--primary {
@include button-variant($btn-primary-color, $btn-primary-bg);
}
.button--secondary {
@include button-variant($btn-secondary-color, $btn-secondary-bg);
}
.button--dark {
@include button-variant($btn-dark-color, $btn-dark-bg);
}
//
// Text buttons
//
.button--text {
color: $link-color;
&:hover,
&:focus {
color: darken($link-color, 10%);
}
&,
&:hover,
&:focus,
&:active,
&.active,
&:disabled {
background: none;
padding-right: 0;
padding-left: 0;
}
&:after {
content: ' →';
}
}
//
// Button Sizes
//
.button--large {
// line-height: ensure even-numbered height of button next to large input
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $line-height, $btn-border-radius);
.icon {
width: $font-size-large;
height: $font-size-large;
}
}
.button--small {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-mini, $line-height, $btn-border-radius);
.icon {
width: $font-size-small;
height: $font-size-small;
}
}

4
_src/_assets/scss/_menus.scss
View File

@ -96,6 +96,10 @@
margin-right: -($spacer);
}
}
.button {
margin-left: $spacer;
}
}

1
_src/_assets/scss/_mixins.scss Normal file
View File

@ -0,0 +1 @@
@import '_mixins/buttons';

37
_src/_assets/scss/_mixins/_buttons.scss Normal file
View File

@ -0,0 +1,37 @@
//
// Button variants
//
@mixin button-variant($color, $background) {
$active-background: lighten($background, 5%);
color: $color;
background: $background;
&:hover,
&:focus {
color: $color;
background-color: $active-background;
}
&:active {
color: $color;
background: darken($background, 2%);
transition: none;
}
&.disabled,
&:disabled {
&:focus {
background-color: $background;
}
}
.icon { fill: $color; }
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
}

2
_src/_assets/scss/_typography.scss
View File

@ -114,7 +114,7 @@ a {
&:hover,
&:focus {
color: lighten($link-color, 10%);
color: darken($link-color, 10%);
outline: 0;
}
}

29
_src/_assets/scss/_variables.scss
View File

@ -54,3 +54,32 @@ $screen-lg-min: 85em !default;
$screen-sm: 'min-width: #{$screen-sm-min}';
$screen-md: 'min-width: #{$screen-md-min}';
$screen-lg: 'min-width: #{$screen-lg-min}';
//
// Buttons
//
$btn-font-family: inherit;
$btn-font-weight: $font-weight-bold !default;
$btn-padding-x: 2rem !default;
$btn-padding-y: .5rem !default;
$btn-padding-x-sm: 1.5rem !default;
$btn-padding-y-sm: .3rem !default;
$btn-padding-x-lg: 3rem !default;
$btn-padding-y-lg: .7rem !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-01 !default;
$btn-secondary-color: #fff !default;
$btn-secondary-bg: $brand-04 !default;
$btn-dark-color: #fff !default;
$btn-dark-bg: $brand-03 !default;
$btn-link-disabled-color: $brand-05 !default;
$btn-border-radius: 10rem !default;

2
_src/_assets/scss/ipdb.scss
View File

@ -1,8 +1,10 @@
@import 'variables';
@import 'mixins';
@import 'typography';
// Components
@import 'grid';
@import 'buttons';
@import 'sections';
@import 'hero';
@import 'header';

4
_src/_includes/menu-main.html
View File

@ -19,8 +19,8 @@
<a class="menu__link {{ active }}" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
<a class="menu__link button button--small button--primary" href="/foundation/">Signup</a>
<a class="menu__link button button--small" href="/foundation/">Login</a>
<a class="button button--small button--primary" href="/foundation/">Signup</a>
<a class="button button--small" href="/foundation/">Login</a>
</div>

10
_src/index.html
View File

@ -12,7 +12,7 @@ front_page: true
<div class="hero__content row">
<hgroup>
<h1 class="hero__title">{{ content.hero.title }}</h1>
<a href="{{ site.signup.link }}" class="hero__action button button--primary">{{ site.signup.button }}</a>
<a class="hero__action button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
</hgroup>
</div>
</header>
@ -27,8 +27,8 @@ front_page: true
{{ content.intro.text | markdownify }}
<a href="{{ site.signup.link }}" class="hero__action button button--primary">{{ site.signup.button }}</a>
<a href="" class="button button--primary">Read IPDB Documentation</a>
<a class="hero__action button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
<a href="" class="button button--text">Read IPDB Documentation</a>
</div>
</section>
@ -45,7 +45,7 @@ front_page: true
</div>
<div class="row">
<a href="/foundation/" class="button button--primary">{{ content.foundation.button }}</a>
<a href="/foundation/" class="button button--text">{{ content.foundation.button }}</a>
</div>
</section>
@ -83,7 +83,7 @@ front_page: true
<div class="connect connect--blog">
<h2 class="connect__title">{{ content.connect.blog_title }}</h2>
<a href="https://blog.ipdb.io" class="button button--primary">IPDB Blog</a>
<a href="https://blog.ipdb.io" class="button button--text">IPDB Blog</a>
</div>
<div class="connect connect--newsletter">

2
_src/styleguide.md
View File

@ -64,6 +64,8 @@ Logo can be used with a base class and modifier classes for size & color:
<a class="button button--dark" href="#">Button</a> <a class="button button--dark button--small" href="#">Button</a> <a class="button button--dark button--large" href="#">Button</a>
<a class="button button--text" href="#">Button</a> <a class="button button--small button--text" href="#">Button</a> <a class="button button--large button--text" href="#">Button</a>
## Forms
<form class="form js-parsley" action="#">