Browse Source

adding button

master
HerrHase 6 years ago
parent
commit
5abba2af3d
5 changed files with 15 additions and 162 deletions
  1. +2
    -2
      demo/index.html
  2. +9
    -2
      dest/css/crispy.css
  3. +1
    -1
      dest/css/crispy.min.css
  4. +3
    -1
      src/scss/components/_button.scss
  5. +0
    -156
      src/scss/helpers/_visibilty.scss

+ 2
- 2
demo/index.html View File

@ -45,7 +45,7 @@
</style> </style>
</head> </head>
<body> <body>
<header class="header">
<header id="header" class="header">
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@ -58,7 +58,7 @@
</div> </div>
</div> </div>
</header> </header>
<button class="button button--up">b</button>
<a class="button button--up" href="#header">b</a>
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-2"> <div class="col-2">


+ 9
- 2
dest/css/crispy.css
File diff suppressed because it is too large
View File


+ 1
- 1
dest/css/crispy.min.css
File diff suppressed because it is too large
View File


+ 3
- 1
src/scss/components/_button.scss View File

@ -10,7 +10,7 @@ $crispy__button__padding: pxToEm(10px) pxToEm(25px) !default;
$crispy__button__border: 0 !default; $crispy__button__border: 0 !default;
$crispy__button__up-margin: pxToEm(20px) !default; $crispy__button__up-margin: pxToEm(20px) !default;
$crispy__button__up-padding: pxToEm(5px) !default;
$crispy__button__up-padding: pxToEm(8px) pxToEm(13px) !default;
$crispy__button__font-sizes: ( $crispy__button__font-sizes: (
'default': $crispy__body__font-size, 'default': $crispy__body__font-size,
@ -49,6 +49,7 @@ $crispy__button__colors: (
.button { .button {
position: relative; position: relative;
display: inline-block; display: inline-block;
text-decoration: none;
vertical-align: middle; vertical-align: middle;
appearance: none; appearance: none;
@ -137,6 +138,7 @@ $crispy__button__colors: (
background-color: $background-color; background-color: $background-color;
&:hover { &:hover {
color: $text-color;
background-color: darken($background-color, 10%); background-color: darken($background-color, 10%);
} }
} }


+ 0
- 156
src/scss/helpers/_visibilty.scss View File

@ -1,156 +0,0 @@
/**
* visibilty
*
*
* @author Björn Hase
*
*/
@mixin crispy__visibilty() {
.hide {
display: none;
}
.hide {
&--xs {
@include crispy__media-xs() {
display: none;
}
}
&--sm {
@include crispy__media-sm() {
display: none;
}
}
&--md {
@include crispy__media-md() {
display: none;
}
}
&--lg {
@include crispy__media-lg() {
display: none;
}
}
&--xlg {
@include crispy__media-xlg() {
display: none;
}
}
}
.show {
display: block;
&--inline {
display: inline;
}
&--inline-block {
display: inline-block;
}
}
// block
.show {
&--xs {
@include crispy__media-xs() {
display: block;
}
}
&--sm {
@include crispy__media-sm() {
display: block;
}
}
&--md {
@include crispy__media-md() {
display: block;
}
}
&--lg {
@include crispy__media-lg() {
display: block;
}
}
&--xlg {
@include crispy__media-xlg() {
display: block;
}
}
}
// show inline
.show {
&--inline-xs {
@include crispy__media-xs() {
display: inline;
}
}
&--inline-sm {
@include crispy__media-sm() {
display: inline;
}
}
&--inline-md {
@include crispy__media-md() {
display: inline;
}
}
&--inline-lg {
@include crispy__media-lg() {
display: inline;
}
}
&--inline-xlg {
@include crispy__media-xlg() {
display: inline;
}
}
}
// show inline block
.show {
&--inline-block-xs {
@include crispy__media-xs() {
display: inline-block;
}
}
&--inline-block-sm {
@include crispy__media-sm() {
display: inline-block;
}
}
&--inline-block-md {
@include crispy__media-md() {
display: inline-block;
}
}
&--inline-block-lg {
@include crispy__media-lg() {
display: inline-block;
}
}
&--inline-block-xlg {
@include crispy__media-xlg() {
display: inline-block;
}
}
}
}

Loading…
Cancel
Save