pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

Converting application less to sass.

Browse source
This commit is contained in:
Henrik Hautakoski 2018-08-19 00:26:22 +02:00
parent b30be955ca
commit fec6b6caa5
26 changed files with 1140 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

76
app/assets/sass/components/_button.scss Normal file
View file

@ -0,0 +1,76 @@
// ----------------------------------
// Base style.
// ----------------------------------
.button {
display: inline-block;
padding: 0.5rem 2rem;
cursor: pointer;
vertical-align: middle;
// Resets for <button> elements.
border: 1px solid transparent;
transition: all .2s ease-in-out;
&:active,
&:hover {
color: inherit;
text-decoration: none;
}
&.disabled {
cursor: not-allowed;
}
}
// ----------------------------------
// Variants
// ----------------------------------
// Round button
// ----------------------------------
.button-round {
padding: 0;
@include button-circle(40px);
}
// Colors
// ----------------------------------
.button-default { @include button-variant($text-color, $button-bg-color); }
.button-primary { @include button-variant($button-primary-color, $button-primary-bg); }
.button-brand { @include button-variant($button-brand-color, $button-brand-bg); }
.button-light { @include button-variant($text-light-color, $button-bg-color, $button-hover-color); }
.button-info { @include button-variant($button-info-color, $button-info-bg); }
.button-success { @include button-variant($button-success-color, $button-success-bg); }
.button-warning { @include button-variant($button-warning-color, $button-warning-bg); }
.button-danger { @include button-variant($button-danger-color, $button-danger-bg); }
.button-github { @include button-variant($button-github-color, $button-github-bg); }
.button-gitlab { @include button-variant($button-gitlab-color, $button-gitlab-bg); }
.button-google { @include button-variant($button-google-color, $button-google-bg); }
.button-linkedin { @include button-variant($button-linkedin-color, $button-linkedin-bg); }
// Outline
// ----------------------------------
.button-outline-primary { @include button-outline-variant($text-color, $button-bg-color); }
// Sizes
// ----------------------------------
.button-large { font-size: $text-size-large; }
.button-small { font-size: 0.6em; }
// Block button
// ----------------------------------
.button-block {
display: block;
width: 100%;
}