autonomic-cooperative/woocommerce
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
naomi
2021-12-10 12:03:04 +00:00
commit c46c7ddbf0
3643 changed files with 582794 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss Normal file
View File

@ -0,0 +1,65 @@
/* 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 */

21
packages/woocommerce-blocks/assets/css/abstracts/_colors.scss Normal file
View File

@ -0,0 +1,21 @@
@import "node_modules/@wordpress/base-styles/colors";
@import "node_modules/@automattic/color-studio/dist/color-variables";
// Bright colors
$no-stock-color: $alert-red;
$low-stock-color: $alert-yellow;
$in-stock-color: $alert-green;
$discount-color: $alert-green;
$placeholder-color: var(--global--color-primary, $gray-200);
$input-border-gray: #50575e;
$input-border-dark: rgba(255, 255, 255, 0.4);
$input-disabled-dark: rgba(255, 255, 255, 0.3);
$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);

194
packages/woocommerce-blocks/assets/css/abstracts/_mixins.scss Normal file
View File

@ -0,0 +1,194 @@
$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 loading-fade {
0% {
opacity: 0.7;
}
50% {
opacity: 1;
}
100% {
opacity: 0.7;
}
}
// Adds animation to placeholder section
@mixin placeholder() {
animation: loading-fade 1.2s ease-in-out infinite;
background-color: $placeholder-color !important;
color: $placeholder-color !important;
outline: 0 !important;
border: 0 !important;
box-shadow: none;
pointer-events: none;
max-width: 100%;
// Forces direct descendants to keep layout but lose visibility.
> * {
visibility: hidden;
}
@media screen and (prefers-reduced-motion: reduce) {
animation: none;
}
}
@mixin force-content() {
&::after {
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;
width: 1px;
}
@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-typography() {
color: inherit;
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-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-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;
}
// 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;
}
// 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;
}
}
// 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 str-index(#{$color}, "#") != 1 {
@return $color;
}
$hex: str-slice(ie-hex-str($color), 4);
@return "%23" + unquote("#{$hex}");
}

12
packages/woocommerce-blocks/assets/css/abstracts/_variables.scss Normal file
View File

@ -0,0 +1,12 @@
@import "node_modules/@wordpress/base-styles/variables";
$gap-largest: $grid-unit-50;
$gap-larger: 4.5 * $grid-unit;
$gap-large: $grid-unit-30;
$gap: $grid-unit-20;
$gap-small: $grid-unit-15;
$gap-smaller: $grid-unit-10;
$gap-smallest: $grid-unit-05;
// Cart block
$cart-image-width: 5rem;