mirror of
https://github.com/papercss/papercss
synced 2024-05-17 13:16:42 +02:00
230 lines
6.2 KiB
SCSS
230 lines
6.2 KiB
SCSS
/**
|
|
Global PaperCSS Config
|
|
*/
|
|
|
|
// Imports
|
|
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
|
|
|
// Set theme colors
|
|
$primary: #41403e !default;
|
|
$secondary: #0071de !default;
|
|
|
|
$success: #86a361 !default;
|
|
$warning: #ddcd45 !default;
|
|
$danger: #a7342d !default;
|
|
$muted: #868e96 !default;
|
|
|
|
$primary-light: lighten($primary, 50%) !default;
|
|
$secondary-light: lighten($secondary, 50%) !default;
|
|
$success-light: lighten($success, 30%) !default;
|
|
$warning-light: lighten($warning, 30%) !default;
|
|
$danger-light: lighten($danger, 45%) !default;
|
|
$muted-light: lighten($muted, 35%) !default;
|
|
|
|
$white-dark: rgba(#000, 0.03) !default;
|
|
$light-dark: rgba(#000, 0.7) !default;
|
|
$white: rgba(#fff, 1) !default;
|
|
$main-background: rgba(#fff, 1) !default;
|
|
|
|
$primary-text: #fff !default;
|
|
$secondary-text: $primary !default;
|
|
$success-text: $primary !default;
|
|
$warning-text: $primary !default;
|
|
$danger-text: $primary !default;
|
|
$muted-text: $primary !default;
|
|
|
|
$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
|
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
|
|
|
|
|
// Map to set your color names
|
|
/* stylelint-disable */
|
|
$colors: (primary, $primary, $primary-light, $primary-text),
|
|
(secondary, $secondary, $secondary-light, $secondary-text),
|
|
(success, $success, $success-light, $success-text),
|
|
(warning, $warning, $warning-light, $warning-text),
|
|
(danger, $danger, $danger-light, $danger-text),
|
|
(muted, $muted, $muted-light, $muted-text);
|
|
/* stylelint-enable */
|
|
|
|
/**
|
|
This Loop will generate the various .text- and .background- classes
|
|
based on the $colors map above.
|
|
*/
|
|
@each $colorName, $color, $color-light in $colors {
|
|
.text-#{$colorName} {
|
|
color: $color;
|
|
}
|
|
|
|
.background-#{$colorName} {
|
|
background-color: $color-light;
|
|
}
|
|
}
|
|
|
|
// Font settings
|
|
$global-font-size: 20px !default;
|
|
$header-font: 'Patrick Hand SC' !default;
|
|
$body-font: 'Neucha' !default;
|
|
$font-color: $primary !default;
|
|
|
|
// Responsive breakpoints
|
|
$large-screen: 1200px !default;
|
|
$medium-screen: 992px !default;
|
|
$small-screen: 768px !default;
|
|
$xsmall-screen: 480px !default;
|
|
|
|
// Sizes for shadows
|
|
$shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
|
|
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
|
|
$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
|
|
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|
|
|
|
|
// Mixins
|
|
/**
|
|
Assign a border style to a component selector.
|
|
@param integer
|
|
@default 1
|
|
*/
|
|
@mixin border-style($style: 1) {
|
|
@if $style==1 {
|
|
border-bottom-left-radius: 15px 255px;
|
|
border-bottom-right-radius: 225px 15px;
|
|
border-top-left-radius: 255px 15px;
|
|
border-top-right-radius: 15px 225px;
|
|
}
|
|
@if $style==2 {
|
|
border-bottom-left-radius: 185px 25px;
|
|
border-bottom-right-radius: 20px 205px;
|
|
border-top-left-radius: 125px 25px;
|
|
border-top-right-radius: 10px 205px;
|
|
}
|
|
@if $style==3 {
|
|
border-bottom-left-radius: 225px 15px;
|
|
border-bottom-right-radius: 15px 255px;
|
|
border-top-left-radius: 15px 225px;
|
|
border-top-right-radius: 255px 15px;
|
|
}
|
|
@if $style==4 {
|
|
border-bottom-left-radius: 25px 115px;
|
|
border-bottom-right-radius: 155px 25px;
|
|
border-top-left-radius: 15px 225px;
|
|
border-top-right-radius: 25px 150px;
|
|
}
|
|
@if $style==5 {
|
|
border-bottom-left-radius: 20px 115px;
|
|
border-bottom-right-radius: 15px 105px;
|
|
border-top-left-radius: 250px 15px;
|
|
border-top-right-radius: 25px 80px;
|
|
}
|
|
@if $style==6 {
|
|
border-bottom-left-radius: 15px 225px;
|
|
border-bottom-right-radius: 20px 205px;
|
|
border-top-left-radius: 28px 125px;
|
|
border-top-right-radius: 100px 30px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
Mixin for setting responsive breakpoints
|
|
@param string | integer
|
|
@default null
|
|
*/
|
|
@mixin resp($max:null, $min:null) {
|
|
@if $max == large or $max == lg { $max: $large-screen; }
|
|
@if $max == medium or $max == md { $max: $medium-screen; }
|
|
@if $max == small or $max == sm { $max: $small-screen; }
|
|
@if $max == xsmall or $max == xs { $max: $xsmall-screen; }
|
|
|
|
@if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
|
|
@else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
|
|
@else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
|
|
@else { @error 'no matching size found';}
|
|
}
|
|
|
|
/**
|
|
Useful helper mixins
|
|
*/
|
|
@mixin hr-after() {
|
|
color: lighten($primary, 30%);
|
|
content: '~~~';
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
@mixin center-all() {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin col-size($percent) {
|
|
flex: 0 0 $percent;
|
|
max-width: $percent;
|
|
}
|
|
|
|
@mixin li-bullet($char) {
|
|
li::before {
|
|
content: $char;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Add transform: translate().
|
|
Same syntax for translate() and translate3d()
|
|
To get 3D add a $z value and set 'true'
|
|
@param string | boolean
|
|
@default 0 | false
|
|
*/
|
|
@mixin translate($x, $y, $z: 0, $transform3d: false) {
|
|
@if $transform3d {
|
|
transform: translate3d($x, $y, $z);
|
|
} @else {
|
|
transform: translate($x, $y);
|
|
}
|
|
}
|
|
|
|
/*
|
|
Add global transition styles to selector
|
|
@param string
|
|
@default all | 235ms | ease-in-out | 0
|
|
*/
|
|
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
|
|
transition: $name $duration $animation $delay;
|
|
}
|
|
|
|
/**
|
|
Set the shadow type for a component
|
|
@param string
|
|
@default regular
|
|
*/
|
|
@mixin shadow($type: regular) {
|
|
@if $type == hover {
|
|
@include translate(0, 2px, 0, true);
|
|
box-shadow: $shadow-hover;
|
|
} @else if $type == small {
|
|
@include transition($animation: ease);
|
|
box-shadow: $shadow-small;
|
|
} @else if $type == regular {
|
|
@include transition($animation: ease);
|
|
box-shadow: $shadow-regular;
|
|
} @else if $type == large {
|
|
@include transition($animation: ease);
|
|
box-shadow: $shadow-large;
|
|
} @else {
|
|
@error 'wrong $type. available types: small | regular | large | hover';
|
|
}
|
|
}
|
|
|
|
//function for string replacement
|
|
@function str-replace($string, $search, $replace: '') {
|
|
$index: str-index($string, $search);
|
|
|
|
@if $index {
|
|
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
|
}
|
|
|
|
@return $string;
|
|
}
|