Rumperuu/Oldphaloskepsis
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Initial commit

Browse source
This commit is contained in:
Ben Goldsworthy 2017-01-12 23:10:07 +00:00
commit 28e6ddf404
1083 changed files with 191734 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

64
plugins/jetpack/scss/_utilities/mixins/_arrows.scss Normal file
View file

@ -0,0 +1,64 @@
// ==========================================================================
// Arrows
//
// Use this to generate most of the code for your CSS arrows.
//
//
// EXAMPLE
//
// .tooltip {
// &:before {
// @include arrow--up(7px, #333);
// left: 50%;
// margin-left: -7px;
// }
// }
//
// ==========================================================================
@mixin arrow--base(){
position: absolute;
content: '';
width: 0;
height: 0;
}
@mixin arrow--top($size: 10px, $color: #ccc){
@include arrow--base;
bottom: 100%;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
}
@mixin arrow--up($size: 10px, $color: #ccc){
@include arrow--top($size, $color);
}
@mixin arrow--right($size: 10px, $color: #ccc){
@include arrow--base;
left: 100%;
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
}
@mixin arrow--bottom($size: 10px, $color: #ccc){
@include arrow--base;
top: 100%;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
}
@mixin arrow--down($size: 10px, $color: #ccc){
@include arrow--bottom($size, $color);
}
@mixin arrow--left($size: 10px, $color: #ccc){
@include arrow--base;
right: 100%;
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right:$size solid $color;
}

46
plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss Normal file
View file

@ -0,0 +1,46 @@
// ==========================================================================
// Breakpoint Mixin
//
// Uses Sass Maps which requires Sass v3.3.0 or newer
//
//
// EXAMPLE
//
// body {
// @include breakpoint(tablet){
// font-size: 14px;
// };
// }
// ==========================================================================
// Add or remove breakpoints as you desire
$breakpoints:(
phone: 320px,
large-phone: 530px,
phablet: 600px,
tablet: 782px,
desktop: 900px,
large-desktop: 1147px,
);
@mixin breakpoint($size){
@each $breakpoint, $value in $breakpoints {
@if $size == $breakpoint {
@media (max-width: map-get($breakpoints, $breakpoint)){
@content;
}
}
}
}
// For mobile first
@mixin minbreakpoint($size){
@each $breakpoint, $value in $breakpoints {
@if $size == $breakpoint {
@media (min-width: map-get($breakpoints, $breakpoint)){
@content;
}
}
}
}

45
plugins/jetpack/scss/_utilities/mixins/_button.scss Normal file
View file

@ -0,0 +1,45 @@
// Taken from core `wp-admin/css/colors/_mixins.scss`
/*
* Button mixin- creates 3d-ish button effect with correct
* highlights/shadows, based on a base color.
*/
@mixin button( $button-color, $text-color: white ) {
background: $button-color;
border-color: darken( $button-color, 10% );
color: $text-color;
box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
&:hover,
&:focus {
background: darken( $button-color, 5% );
border-color: darken( $button-color, 15% );
color: $text-color;
box-shadow: inset 0 1px 0 lighten( $button-color, 10% );
}
&:focus {
box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba( 30, 140, 190, .8 );
}
&:active {
background: darken( $button-color, 10% );
border-color: darken( $button-color, 15% );
color: $text-color;
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba( 30, 140, 190, .8 );
}
&[disabled],
&:disabled,
&.button-primary-disabled,
&.disabled {
color: hsl( hue( $button-color ), 10%, 80% ) !important;
background: darken( $button-color, 8% ) !important;
border-color: darken( $button-color, 15% ) !important;
text-shadow: none !important;
}
}

16
plugins/jetpack/scss/_utilities/mixins/_custom-scrollbar.scss Normal file
View file

@ -0,0 +1,16 @@
// ==========================================================================
// Custom scrollbars
// ==========================================================================
@mixin custom-scrollbar($width: .8em, $track: rgba(217, 217, 217, .5), $thumb: rgba(184, 184, 184, .5)){
::-webkit-scrollbar {
width: $width;
}
::-webkit-scrollbar-track {
background-color: $track;
}
::-webkit-scrollbar-thumb {
background: $thumb;
box-shadow: inset .05em .05em 0 rgba(0, 0, 0, .1), inset 0 -.05em 0 rgba(0, 0, 0, .07);
}
}

21
plugins/jetpack/scss/_utilities/mixins/_full-width-bars.scss Normal file
View file

@ -0,0 +1,21 @@
// ==========================================================================
// Full-width bars
// ==========================================================================
@mixin full-width-bars() {
// Still testing this one
position: relative;
z-index: 1;
&:before {
position: absolute;
content: "";
display: block;
top: 0;
left: -5000px;
height: 100%;
width: 15000px;
z-index: -1;
@content;
}
}

8
plugins/jetpack/scss/_utilities/mixins/_gradient--vertical.scss Normal file
View file

@ -0,0 +1,8 @@
// ==========================================================================
// Vertical gradient
// ==========================================================================
@mixin gradient--vertical($start, $end){
background-color: $end;
background-image: linear-gradient(top, $start, $end); // Chrome 26, Firefox 16+, IE 10+, Opera 12.10+
}

7
plugins/jetpack/scss/_utilities/mixins/_ie__gradient--vertical.scss Normal file
View file

@ -0,0 +1,7 @@
// ==========================================================================
// ie__gradient--vertical
// ==========================================================================
@mixin ie__gradient--vertical($start, $end){
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$start}', EndColorStr='#{$end}');
}

13
plugins/jetpack/scss/_utilities/mixins/_image-replacement.scss Normal file
View file

@ -0,0 +1,13 @@
// ==========================================================================
// Image replacement
// ==========================================================================
@mixin image-replacement($url, $width, $height) {
// I totally stole this idea from Marcel Shields.
// Read his article: http://css-tricks.com/replace-the-image-in-an-img-with-css/
display: block;
width: $width; // Width of new image
height: $height; // Height of new image
padding-left: $width; // Equal to width of new image
background: url($url) no-repeat;
}

13
plugins/jetpack/scss/_utilities/mixins/_mixins.scss Normal file
View file

@ -0,0 +1,13 @@
// ==========================================================================
// Mixins
// ==========================================================================
@import
"arrows",
"breakpoint",
"custom-scrollbar",
"gradient--vertical",
"ie__gradient--vertical",
"image-replacement",
"retina-background",
"sections";

17
plugins/jetpack/scss/_utilities/mixins/_retina-background.scss Normal file
View file

@ -0,0 +1,17 @@
// ==========================================================================
// Retina background
// ==========================================================================
@mixin retina-background ($url, $file-type, $width: auto, $repeat: repeat, $ratio: 1.5, $suffix: "@2x") {
background: url($url + "." + $file-type);
background-repeat: $repeat;
// Media queries from http://git.io/k-x0wA
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
only screen and (min-resolution: #{round($ratio*96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
background: url($url + $suffix + "." + $file-type);
background-size: $width auto;
}
}

25
plugins/jetpack/scss/_utilities/mixins/_sections.scss Normal file
View file

@ -0,0 +1,25 @@
// ==========================================================================
// Retina background
// ==========================================================================
@mixin section($section, $sub: false) {
// Creates value to be used as section numbers
@if variable-exists(toc-value){} @else {
$toc-value: 0 !global;
}
// Sets index numbering
@if $sub == false { // increments by 1 (rounding down)
$toc-value: floor($toc-value) + 1 !global;
} @else { // increments by .1
$toc-value: $toc-value + .1 !global;
}
$spacing: ' ';
@for $i from 1 to (6 - str-length('#{$toc-value}')) {
$spacing: $spacing + ' ';
}
/*--------------------------------------------------------------
#{$toc-value}#{$spacing}#{$section}
--------------------------------------------------------------*/
}