tentakelfabrik
/
crispy-css
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

adding responsive for navigation 

adding forms
master
HerrHase 6 years ago
parent
3b4d1c13ef
commit
19cdc3914a
9 changed files with 91 additions and 39 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +34
    -4
      dest/css/styles.css
  2. +1
    -1
      dest/css/styles.min.css
  3. +1
    -26
      dest/index.html
  4. +1
    -1
      src/scss/_base.scss
  5. +5
    -0
      src/scss/_config.scss
  6. +7
    -4
      src/scss/components/_button.scss
  7. +2
    -0
      src/scss/components/_modal.scss
  8. +37
    -0
      src/scss/example.scss
  9. +3
    -3
      src/scss/functions/_zIndex.scss

+ 34
- 4
dest/css/styles.css
File diff suppressed because it is too large
View File


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


+ 1
- 26
dest/index.html View File

@ -9,31 +9,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/styles.min.css"> <link rel="stylesheet" href="/css/styles.min.css">
<style>
.container {
max-width: 992px;
width: 100%;
margin: 0 auto;
}
.header {
padding: 8px 0 0;
background-color: #e9e9e9;
border-bottom: 1px dotted #959595;
margin: 0 0 50px;
}
.header__logo {
width: 45px;
}
.footer {
padding: 8px 0 0;
background-color: #e9e9e9;
border-top: 1px dotted #959595;
margin: 50px 0 0 0;
}
</style>
</head> </head>
<body> <body>
@ -63,7 +38,7 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12 col-sm-3"> <div class="col-12 col-sm-3">
<nav style="position: fixed;">
<nav class="nav">
<ul class="margin-top-0x"> <ul class="margin-top-0x">
<li><a href="#npm">npm</a></li> <li><a href="#npm">npm</a></li>
<li><a href="#get-started">Get Started</a></li> <li><a href="#get-started">Get Started</a></li>


+ 1
- 1
src/scss/_base.scss View File

@ -131,7 +131,7 @@ hr {
body { body {
font-family: $crispy__body__font-family; font-family: $crispy__body__font-family;
font-weight: normal; font-weight: normal;
font-size: 100%;
line-height: $crispy__body__line-height; line-height: $crispy__body__line-height;
color: $crispy__body__color; color: $crispy__body__color;
background-color: $crispy__body__background-color; background-color: $crispy__body__background-color;


+ 5
- 0
src/scss/_config.scss View File

@ -47,3 +47,8 @@ $crispy__font-sizes: (
'small': 16px, 'small': 16px,
'large': 20px 'large': 20px
) !default; ) !default;
// z-index
$crispy__z-index: (
'modal': 100
) !default;

+ 7
- 4
src/scss/components/_button.scss View File

@ -8,8 +8,9 @@
$crispy__button__padding: toEm(10px 25px) !default; $crispy__button__padding: toEm(10px 25px) !default;
$crispy__button__up-margin: toEm(20px) !default;
$crispy__button__up-padding: toEm(8px 13px) !default;
$crispy__button__up__margin: toEm(20px) !default;
$crispy__button__up__padding: toEm(8px 13px) !default;
$crispy__button__up__z-index: zIndex('modal') !default;
@mixin crispy__button() { @mixin crispy__button() {
.button { .button {
@ -29,8 +30,10 @@ $crispy__button__up-padding: toEm(8px 13px) !default;
&--up, &--down { &--up, &--down {
position:fixed; position:fixed;
bottom: 0; bottom: 0;
margin: $crispy__button__up-margin;
padding: $crispy__button__up-padding;
margin: $crispy__button__up__margin;
padding: $crispy__button__up__padding;
z-index: $crispy__button__up__z-index;
} }
&--down { &--down {


+ 2
- 0
src/scss/components/_modal.scss View File

@ -11,10 +11,12 @@
$crispy__modal__margin: toEm($crispy__margin * 2) !default; $crispy__modal__margin: toEm($crispy__margin * 2) !default;
$crispy__modal__z-index: zIndex('modal') !default;
@mixin crispy__modal { @mixin crispy__modal {
.modal { .modal {
position: absolute; position: absolute;
z-index: $crispy__modal__z-index;
&--fixed { &--fixed {
position: fixed; position: fixed;


+ 37
- 0
src/scss/example.scss View File

@ -14,6 +14,35 @@
@include crispy__form__text(); @include crispy__form__text();
.container {
max-width: 992px;
width: 100%;
margin: 0 auto;
}
.header {
padding: 8px 0 0;
background-color: #e9e9e9;
border-bottom: 1px dotted #959595;
margin: 0 0 20px;
@include crispy__media-sm() {
margin: 0 0 50px;
}
}
.header__logo {
width: 45px;
}
.footer {
padding: 8px 0 0;
background-color: #e9e9e9;
border-top: 1px dotted #959595;
margin: 50px 0 0 0;
}
// button
.button { .button {
border: 1px solid $crispy__color-primary; border: 1px solid $crispy__color-primary;
background-color: $crispy__color-primary; background-color: $crispy__color-primary;
@ -24,6 +53,14 @@
} }
} }
.nav {
position: relative;
@include crispy__media-sm() {
position: fixed;
}
}
.panel { .panel {
border: 1px solid lighten($crispy__color-secondary, 10%); border: 1px solid lighten($crispy__color-secondary, 10%);
background-color: lighten($crispy__color-secondary, 25%); background-color: lighten($crispy__color-secondary, 25%);


+ 3
- 3
src/scss/functions/_zIndex.scss View File

@ -7,10 +7,10 @@
*/ */
@function zIndex($name) { @function zIndex($name) {
@if index($z-indexes, $name) {
@return map($z-indexes, $name);
@if has-key($crispy__z-index, $name) {
@return map-get($crispy__z-index, $name);
} @else { } @else {
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
@warn 'There is no item "#{$name}" in this list; choose one of: #{$crispy__z-index}';
@return null; @return null;
} }
} }

Write Preview
Loading…
Cancel
Save