YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Designing "Clicky" button

Browse Source
This commit is contained in:
Dominic Masters
2018-05-14 13:09:51 +10:00
parent 1e55aa17e9
commit 83a1ae89e6
4 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/input/button/Button.jsx
View File

@ -80,7 +80,9 @@ export default class Button extends React.Component {
href={href} href={href}
to={to} to={to}
> >
<span class="o-btn__inner">
{contents} {contents}
</span>
</ElementType> </ElementType>
); );
} }

2
public/styles/elements/all.scss
View File

@ -5,6 +5,6 @@
* Version: * Version:
* 1.0.0 - 2018/05/03 * 1.0.0 - 2018/05/03
*/ */
* { *,*:after,*:before,*::after,*::before {
box-sizing: border-box; box-sizing: border-box;
} }

45
public/styles/objects/_button.scss
View File

@ -12,18 +12,53 @@
* 1.0.1 - 2018/05/14 * 1.0.1 - 2018/05/14
*/ */
//Default Button (applies to all styles)
.o-btn { .o-btn {
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
padding-bottom: 0.5em;
overflow: hidden;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
border: $s-color--btn-default__border; border: $s-color--btn-default__border;
padding: 1em 1em; border-radius: 0.5em;
transition: all 0.2s $s-animation--ease-out; background: $s-color--btn-default__bottom;
}
@include t-horizontal-gradient($s-color--btn-default__top, $s-color--btn-default__bottom);
&__inner {
position: relative;
background: white;
display: block;
padding: 0.75em 1.5em;
border-radius: 0.5em;
border: $s-color--btn-default__border;
transition: all 0.1s $s-animation--ease-out;
}
&:hover { &:hover {
@include t-vertical-gradient($s-color--btn-default-hover__top, $s-color--btn-default-hover__bottom); .o-btn__inner {
@include t-translate-y(0.1em);
}
}
&:active {
.o-btn__inner {
@include t-translate-y(0.4em);
background: $s-color--btn-default-hover__top;
}
}
&:focus {
&::before,
.o-btn__inner {
border-color: $s-color--btn-default__focus;
}
} }
} }

2
public/styles/settings/colors.scss
View File

@ -48,6 +48,6 @@ $s-color--loader: $s-color--swatch-blue;
$s-color--btn-default__top: #FFF; $s-color--btn-default__top: #FFF;
$s-color--btn-default__bottom: #FBFBFB; $s-color--btn-default__bottom: #FBFBFB;
$s-color--btn-default__border: 1px solid #DDD; $s-color--btn-default__border: 1px solid #DDD;
$s-color--btn-default__focus: $s-color--swatch-blue;
$s-color--btn-default-hover__top: $s-color--btn-default__bottom; $s-color--btn-default-hover__top: $s-color--btn-default__bottom;
$s-color--btn-default-hover__bottom: #EEE;