Browse Source

adding

master
Björn 5 years ago
parent
commit
808953a1ff
11 changed files with 254 additions and 147 deletions
  1. +101
    -3
      src/scss/_functions.scss
  2. +0
    -7
      src/scss/_helpers.scss
  3. +82
    -5
      src/scss/_mixins.scss
  4. +20
    -2
      src/scss/_variables.scss
  5. +14
    -5
      src/scss/crispy.scss
  6. +2
    -2
      src/scss/helpers/_float.scss
  7. +9
    -1
      src/scss/helpers/_modifizer.scss
  8. +9
    -0
      src/scss/helpers/_spacing.scss
  9. +17
    -14
      src/scss/helpers/_typography.scss
  10. +0
    -39
      src/scss/mixins/_fonts.scss
  11. +0
    -69
      src/scss/mixins/_media-queries.scss

+ 101
- 3
src/scss/_functions.scss View File

@ -1,3 +1,101 @@
@import
'functions/units',
'functions/zIndex';
/**
* functions
*
*
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/
/**
* px to em, wrapper of toRelatives
*
* @param {mixed} $values
* @param {mixed} $base
* @return {rem}
*/
@function toEm($values, $base: $crispy__font-size) {
@return toRelatives($values, 1em, $base);
}
/**
* px to rem, wrapper of toRelatives
*
* @param {mixed} $values
* @param {mixed} $base
* @return {rem}
*/
@function toRem($values, $base: $crispy__font-size) {
@return toRelatives($values, 1rem, $base);
}
/**
* values to relative
*
* @param {mixed} $values
* @param {mixed} $unit
* @param {mixed} $base
* @return {number}
*/
@function toRelatives($values, $unit, $base: $crispy__font-size) {
$results: 0;
@if type-of($values) == 'number' {
$results: toRelative($values, $base) * $unit;
} @else {
$results: ();
@each $value in $values {
@if $value == 0 {
$results: append($results, $value);
}
@else {
$results: append($results, toRelative($value, $base) * $unit);
}
}
}
@return $results;
}
/**
* to relative
*
* @param {mixed} $value
* @param {mixed} $base
* @return {number}
*/
@function toRelative($value, $base: $crispy__font-size) {
@return stripUnit($value) / stripUnit($base);
}
/**
* strip unit from value
*
* @param {mixed} $value
* @return {number}
*/
@function stripUnit($value) {
@return $value / ($value * 0 + 1);
}
/**
* function: z-index
*
* uses map $crispy__z-index to get value by key
*
* @author Björn Hase
*
*/
@function zIndex($name) {
@if map-has-key($crispy__z-index, $name) {
@return map-get($crispy__z-index, $name);
} @else {
@warn 'There is no item "#{$name}" in this list; choose one of: #{$crispy__z-index}';
@return null;
}
}

+ 0
- 7
src/scss/_helpers.scss View File

@ -1,7 +0,0 @@
@import
'helpers/float',
'helpers/spacing',
'helpers/media',
'helpers/text',
'helpers/visibility',
'helpers/width';

+ 82
- 5
src/scss/_mixins.scss View File

@ -1,6 +1,14 @@
@import
'mixins/fonts',
'mixins/media-queries';
/**
* mixins
*
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/
/**
* clearfix to end floating
@ -21,11 +29,11 @@
}
/**
* clear default styles from list
* clear styles from list
*
*
*/
@mixin crispy__clearlist() {
@mixin crispy__reset-list() {
list-style: none;
margin: 0;
padding: 0;
@ -35,3 +43,72 @@
padding: 0;
}
}
/**
* media-queries
*
*
*
* @author Björn Hase
*
*/
@mixin crispy__media-xs() {
@media only screen and (min-width:$crispy__xs) {
@content;
}
}
@mixin crispy__media-sm() {
@media only screen and (min-width: $crispy__sm) {
@content;
}
}
@mixin crispy__media-md() {
@media only screen and (min-width: $crispy__md) {
@content;
}
}
@mixin crispy__media-lg() {
@media only screen and (min-width: $crispy__lg) {
@content;
}
}
@mixin crispy__media-xlg() {
@media only screen and (min-width: $crispy__xlg) {
@content;
}
}
// only
@mixin crispy__media-xs-only() {
@media only screen and (min-width: $crispy__xs) and (max-width: $crispy__sm - 1) {
@content;
}
}
@mixin crispy__media-sm-only() {
@media only screen and (min-width: $crispy__sm) and (max-width: $crispy__md - 1) {
@content;
}
}
@mixin crispy__media-md-only() {
@media only screen and (min-width: $crispy__md) and (max-width: $crispy__lg - 1) {
@content;
}
}
@mixin crispy__media-lg-only() {
@media only screen and (min-width: $crispy__lg) and (max-width: $crispy__xlg - 1) {
@content;
}
}
@mixin crispy__media-xlg-only() {
@media only screen and (min-width: $crispy__xlg) {
@content;
}
}

src/scss/_config.scss → src/scss/_variables.scss View File

@ -1,16 +1,29 @@
@import
'functions/units';
/**
* config
* Variables
*
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/
// font
$crispy__font-size: 16px !default;
$crispy__golden-ratio: 1.618 !default;
$crispy__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__family-primary: $family-sans-serif !default
$crispy__family-secondary: $family-sans-serif !default
$crispy__family-code: $family-monospace !default
$crispy__direction: ltr !default;
$crispy__border-radius: 0 !default;
// spacing
$crispy__spacing: 10px !default;
@ -26,7 +39,12 @@ $crispy__color-info: #0090d4 !default;
$crispy__color-text: #363636 !default;
$crispy__color-border: #d0d0d0 !default;
$crispy__color-background: #ffffff !default;
$crispy__color-hover: #ffffff !default;
$crispy__color-link: #ffffff !default;
$crispy__color-link-hover: #ffffff !default;
$crispy__color-link-visited: $purple !default;
$crispy__color-link-focus: $grey-darker !default;
$crispy__color-link-active: $grey-darker !default;
// breakpoints
$crispy__xs: 576px !default;

+ 14
- 5
src/scss/crispy.scss View File

@ -1,7 +1,16 @@
@import
'functions',
'variables',
'components/button',
'helpers/float',
'helpers/spacing',
'helpers/media',
'helpers/text',
'helpers/visibility',
'helpers/width',
'mixins',
'config',
'core',
'components',
'helpers';
'mixins/media-queries';

+ 2
- 2
src/scss/helpers/_float.scss View File

@ -10,11 +10,11 @@
*/
@mixin crispy__float() {
.is-float-left {
.has-float-left {
float: left;
}
.is-float-right {
.has-float-right {
float: right;
}


+ 9
- 1
src/scss/helpers/_modifizer.scss View File

@ -28,7 +28,15 @@
display: block !important;
&--inline {
display: inline;
display: inline !important;
}
&--inline-block {
display: inline !important;
}
}
.is-radiusless
border-radius: 0 !important
}
}

+ 9
- 0
src/scss/helpers/_spacing.scss View File

@ -7,6 +7,15 @@
*/
@mixin crispy__spacing() {
.is-marginless {
margin: 0 !important;
}
.is-paddingless {
padding: 0 !important;
}
@for $i from 0 through $crispy__spacing__steps {
.has-margin-top-#{($i + 1)}x {
margin-top: ($crispy__spacing * $i) !important;


+ 17
- 14
src/scss/helpers/_typography.scss View File

@ -12,6 +12,8 @@ $crispy__typography-colors: $crispy__colors !default;
$crispy__typography-font-sizes: $crispy__font-sizes !default;
@mixin crispy__typography() {
// text align
.has-text-left {
text-align: left !important;
}
@ -28,19 +30,16 @@ $crispy__typography-font-sizes: $crispy__font-sizes !default;
text-align: justify !important;
}
.has-text-italic {
font-style: italic !important;
}
.has-text-uppercase {
//
.is-text-uppercase {
text-transform: uppercase !important;
}
.has-text-lowercase {
.is-text-lowercase {
text-transform: lowercase !important;
}
.has-text-crossed {
.is-text-crossed {
text-decoration: line-through !important;
}
@ -48,6 +47,10 @@ $crispy__typography-font-sizes: $crispy__font-sizes !default;
text-transform: capitalize !important;
}
.is-text-italic {
font-style: italic !important;
}
// text weight
.is-text-weight-light {
font-weight: light !important;
@ -61,28 +64,28 @@ $crispy__typography-font-sizes: $crispy__font-sizes !default;
font-weight: bold !important;
}
.has-text-weight-medium {
.is-text-weight-medium {
font-weight: medium !important;
}
.has-text-weight-semibold {
.ist-text-weight-semibold {
font-weight: semibold !important;
}
@each $name, $font-size in $crispy__typography-font-sizes {
.has-font-size-#{$name} {
.has-text-size-#{$name} {
font-size: $font-size !important;
}
}
@each $name, $color in $crispy__typography-colors {
.has-text-#{$name} {
.has-text-color-#{$name} {
color: $color !important;
}
}
@each $name, $color in $crispy__typography-colors {
.has-background-#{$name} {
.has-background-color-#{$name} {
background-color: $color !important;
}
}


+ 0
- 39
src/scss/mixins/_fonts.scss View File

@ -1,39 +0,0 @@
/**
* fonts
*
*
* @author Björn Hase
*
*/
/**
* add font-size in px as fallback and in rem
*
*
* @param {px} $font-size
*
*/
@mixin crispy__font-size($font-size) {
font-size: $font-size;
font-size: toRem($font-size);
}
/**
* add font-sizes as modifactors
*
*
* @param {map} $font-sizes
*
*/
@mixin crispy__font-sizes($font-sizes) {
@each $name, $font-size in $font-sizes {
@if ($name == 'default') {
@include font-size($font-size);
} @else {
&--#{$name} {
@include font-size($font-size);
}
}
}
}

+ 0
- 69
src/scss/mixins/_media-queries.scss View File

@ -1,69 +0,0 @@
/**
* media-queries
*
*
* @author Björn Hase
*
*/
@mixin crispy__media-xs() {
@media only screen and (min-width:$crispy__xs) {
@content;
}
}
@mixin crispy__media-sm() {
@media only screen and (min-width: $crispy__sm) {
@content;
}
}
@mixin crispy__media-md() {
@media only screen and (min-width: $crispy__md) {
@content;
}
}
@mixin crispy__media-lg() {
@media only screen and (min-width: $crispy__lg) {
@content;
}
}
@mixin crispy__media-xlg() {
@media only screen and (min-width: $crispy__xlg) {
@content;
}
}
// only
@mixin crispy__media-xs-only() {
@media only screen and (min-width: $crispy__xs) and (max-width: $crispy__sm - 1) {
@content;
}
}
@mixin crispy__media-sm-only() {
@media only screen and (min-width: $crispy__sm) and (max-width: $crispy__md - 1) {
@content;
}
}
@mixin crispy__media-md-only() {
@media only screen and (min-width: $crispy__md) and (max-width: $crispy__lg - 1) {
@content;
}
}
@mixin crispy__media-lg-only() {
@media only screen and (min-width: $crispy__lg) and (max-width: $crispy__xlg - 1) {
@content;
}
}
@mixin crispy__media-xlg-only() {
@media only screen and (min-width: $crispy__xlg) {
@content;
}
}

Loading…
Cancel
Save