no wp
This commit is contained in:
Rachit Bhargava
@@ -1,62 +0,0 @@
|
||||
/* stylelint-disable block-closing-brace-newline-after */
|
||||
|
||||
// Breakpoints
|
||||
// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss
|
||||
|
||||
// Think very carefully before adding a new breakpoint.
|
||||
// The list below is based on wp-admin's main breakpoints
|
||||
// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
|
||||
$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
|
||||
|
||||
// @todo refactor breakpoints so they use the mixins from Gutenberg
|
||||
// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
|
||||
@mixin breakpoint($sizes...) {
|
||||
@each $size in $sizes {
|
||||
@if type-of($size) == string {
|
||||
$approved-value: 0;
|
||||
@each $breakpoint in $breakpoints {
|
||||
$and-larger: ">" + $breakpoint;
|
||||
$and-smaller: "<" + $breakpoint;
|
||||
|
||||
@if $size == $and-smaller {
|
||||
$approved-value: 1;
|
||||
@media (max-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@if $size == $and-larger {
|
||||
$approved-value: 2;
|
||||
@media (min-width: $breakpoint + 1) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@each $breakpoint-end in $breakpoints {
|
||||
$range: $breakpoint + "-" + $breakpoint-end;
|
||||
@if $size == $range {
|
||||
$approved-value: 3;
|
||||
@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $approved-value == 0 {
|
||||
$sizes: "";
|
||||
@each $breakpoint in $breakpoints {
|
||||
$sizes: $sizes + " " + $breakpoint;
|
||||
}
|
||||
@warn "ERROR in breakpoint(#{ $size }) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
|
||||
}
|
||||
} @else {
|
||||
$sizes: "";
|
||||
@each $breakpoint in $breakpoints {
|
||||
$sizes: $sizes + " " + $breakpoint;
|
||||
}
|
||||
@error "ERROR in breakpoint(#{ $size }) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-enable */
|
||||
@@ -1,22 +0,0 @@
|
||||
@import "node_modules/@wordpress/base-styles/colors";
|
||||
@import "node_modules/@automattic/color-studio/dist/color-variables";
|
||||
|
||||
// Bright colors
|
||||
$discount-color: $alert-green;
|
||||
|
||||
$input-border-gray: #50575e;
|
||||
$input-border-dark: rgba(255, 255, 255, 0.4);
|
||||
$controls-border-dark: rgba(255, 255, 255, 0.6);
|
||||
$input-text-active: #2b2d2f;
|
||||
$input-placeholder-dark: rgba(255, 255, 255, 0.6);
|
||||
$input-text-dark: #fff;
|
||||
$input-background-dark: rgba(0, 0, 0, 0.1);
|
||||
$select-dropdown-dark: #1e1e1e;
|
||||
$select-dropdown-light: #fff;
|
||||
$select-item-dark: rgba(0, 0, 0, 0.4);
|
||||
$image-placeholder-border-color: #f2f2f2;
|
||||
|
||||
// Universal colors for use on the frontend, currently being applied to checkout blocks.
|
||||
$universal-border: rgba(17, 17, 17, 0.3); // Used for form step borders.
|
||||
$universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white.
|
||||
$universal-body-low-emphasis: rgba(17, 17, 17, 0.5); // Used for low emphasis text such as input labels.
|
||||
@@ -1,311 +0,0 @@
|
||||
$fontSizes: (
|
||||
"smaller": 0.75,
|
||||
"small": 0.875,
|
||||
"regular": 1,
|
||||
"large": 1.25,
|
||||
"larger": 2,
|
||||
);
|
||||
|
||||
// Maps a named font-size to its predefined size. Units default to em, but can
|
||||
// be changed using the multiplier parameter.
|
||||
@mixin font-size($sizeName, $multiplier: 1em) {
|
||||
font-size: map.get($fontSizes, $sizeName) * $multiplier;
|
||||
}
|
||||
|
||||
@keyframes spinner__animation {
|
||||
0% {
|
||||
animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading__animation {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
// Adds animation to placeholder section
|
||||
@mixin placeholder($include-border-radius: true) {
|
||||
outline: 0 !important;
|
||||
border: 0 !important;
|
||||
background-color: currentColor !important;
|
||||
color: currentColor !important;
|
||||
width: 100%;
|
||||
@if $include-border-radius == true {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
display: block;
|
||||
line-height: 1;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
max-width: 100% !important;
|
||||
pointer-events: none;
|
||||
box-shadow: none;
|
||||
z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
|
||||
opacity: 0.15;
|
||||
|
||||
// Forces direct descendants to keep layout but lose visibility.
|
||||
> * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: linear-gradient(90deg, currentColor, #f5f5f54d, currentColor);
|
||||
transform: translateX(-100%);
|
||||
animation: loading__animation 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin force-content() {
|
||||
&::before {
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
|
||||
// Hide an element from sighted users, but available to screen reader users.
|
||||
@mixin visually-hidden() {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
||||
overflow-wrap: normal !important;
|
||||
word-wrap: normal !important;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
@mixin visually-hidden-focus-reveal() {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: $input-text-active;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
@mixin reset-box() {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
@mixin reset-color() {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin reset-typography() {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
text-decoration: inherit;
|
||||
text-transform: inherit;
|
||||
}
|
||||
|
||||
// Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
|
||||
@mixin text-heading() {
|
||||
@include reset-box();
|
||||
@include reset-color();
|
||||
@include reset-typography();
|
||||
box-shadow: none;
|
||||
display: inline;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
|
||||
@mixin text-button() {
|
||||
@include reset-box();
|
||||
@include reset-color();
|
||||
@include reset-typography();
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
display: inline;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset <button> style so we can use link style for action buttons.
|
||||
@mixin link-button() {
|
||||
@include text-button();
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@mixin hover-effect() {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset <button> style so we can use link style for action buttons in filter blocks
|
||||
@mixin filter-link-button() {
|
||||
@include link-button();
|
||||
@include hover-effect();
|
||||
@include font-size(small);
|
||||
text-decoration: underline;
|
||||
font-weight: normal;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Makes sure long words are broken if they overflow the container.
|
||||
@mixin wrap-break-word() {
|
||||
// This is the current standard, works in most browsers.
|
||||
overflow-wrap: anywhere;
|
||||
// Safari supports word-break.
|
||||
word-break: break-word;
|
||||
// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
|
||||
-ms-word-break: break-all;
|
||||
}
|
||||
|
||||
// Add support for content alignment classes
|
||||
@mixin with-alignment() {
|
||||
// Apply max-width to floated items that have no intrinsic width
|
||||
&.alignleft,
|
||||
&.alignright {
|
||||
max-width: $content-width * 0.5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
|
||||
// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
font-size: 0;
|
||||
min-height: inherit;
|
||||
|
||||
// IE doesn't support flex so omit that.
|
||||
@supports (position: sticky) {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Aligned cover blocks should not use our global alignment rules
|
||||
&.aligncenter,
|
||||
&.alignleft,
|
||||
&.alignright {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Shows an semi-transparent overlay
|
||||
@mixin with-background-dim($opacity: 0.5) {
|
||||
&.has-background-dim {
|
||||
.background-dim__overlay::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: inherit;
|
||||
border-radius: inherit;
|
||||
opacity: $opacity;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.has-background-dim-#{ $i * 10 } .background-dim__overlay::before {
|
||||
opacity: $i * 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shows a border with the current color and a custom opacity. That can't be achieved
|
||||
// with normal border because `currentColor` doesn't allow tweaking the opacity, and
|
||||
// setting the opacity of the entire element would change the children's opacity too.
|
||||
@mixin with-translucent-border($border-width: 1px, $opacity: 0.3) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-style: solid;
|
||||
border-width: $border-width;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
opacity: $opacity;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Wraps the content with a media query specially targeting IE11.
|
||||
@mixin ie11() {
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Positions an element absolutely and stretches it over the container
|
||||
@mixin absolute-stretch() {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Converts a px unit to em.
|
||||
@function em($size, $base: 16px) {
|
||||
@return math.div($size, $base) * 1em;
|
||||
}
|
||||
|
||||
// Encodes hex colors so they can be used in URL content.
|
||||
@function encode-color($color) {
|
||||
@if type-of($color) != "color" or string.index(#{$color}, "#") != 1 {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
$hex: string.slice(color.ie-hex-str($color), 4);
|
||||
@return "%23" + unquote("#{$hex}");
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "node_modules/@wordpress/base-styles/variables";
|
||||
|
||||
// grid-unit from base-styles is 8px.
|
||||
$gap-largest: 6 * $grid-unit; // 48px
|
||||
$gap-larger: 4.5 * $grid-unit; // 36px
|
||||
$gap-large: 3 * $grid-unit; // 24px
|
||||
$gap: 2 * $grid-unit; // 16px
|
||||
$gap-small: 1.5 * $grid-unit; // 12px
|
||||
$gap-smaller: 1 * $grid-unit; // 8px
|
||||
$gap-smallest: 0.5 * $grid-unit; // 4px
|
||||
|
||||
// Standard border radius for forms.
|
||||
$universal-border-radius: 4px;
|
||||
Reference in New Issue
Block a user