khaihihi
This commit is contained in:
KhaiNguyen
@@ -0,0 +1,63 @@
|
||||
/* 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#breakpoints
|
||||
$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
|
||||
|
||||
@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 */
|
||||
@@ -0,0 +1,45 @@
|
||||
// Greys
|
||||
$core-grey-light-100: #f8f9f9;
|
||||
$core-grey-light-200: #f3f4f5;
|
||||
$core-grey-light-300: #edeff0;
|
||||
$core-grey-light-400: #e8eaeb;
|
||||
$core-grey-light-500: #e2e4e7;
|
||||
$core-grey-light-600: #d7dade;
|
||||
$core-grey-light-700: #ccd0d4;
|
||||
$core-grey-light-800: #b5bcc2;
|
||||
$core-grey-light-900: #a2aab2;
|
||||
$core-grey-dark-100: #86909b;
|
||||
$core-grey-dark-200: #78848f;
|
||||
$core-grey-dark-300: #6c7781; // This & below have 4.5+ contrast against white
|
||||
$core-grey-dark-400: #606a73;
|
||||
$core-grey-dark-500: #555d66;
|
||||
$core-grey-dark-600: #40464d;
|
||||
$core-grey-dark-700: #32373c;
|
||||
$core-grey-dark-800: #23282d;
|
||||
$core-grey-dark-900: #191e23;
|
||||
|
||||
$gray-text: $core-grey-dark-500;
|
||||
|
||||
// WooCommerce Purples
|
||||
$woocommerce-100: #ffd7ff;
|
||||
$woocommerce-200: #e2a5d7;
|
||||
$woocommerce-300: #c88bbd;
|
||||
$woocommerce-400: #af72a4;
|
||||
$woocommerce-500: #95588a;
|
||||
$woocommerce-600: #7c3f71;
|
||||
$woocommerce-700: #622557;
|
||||
$woocommerce-800: #490c3e;
|
||||
$woocommerce-900: #2f0024;
|
||||
$woocommerce: $woocommerce-500;
|
||||
|
||||
$wp-admin-background: #f1f1f1;
|
||||
$black: #24292d; // same as wp-admin sidebar
|
||||
|
||||
$white: #fff;
|
||||
|
||||
// Bright colors
|
||||
$valid-green: #4ab866;
|
||||
$notice-yellow: #ffb900;
|
||||
$error-red: #d94f4f;
|
||||
$box-shadow-blue: #5b9dd9;
|
||||
$core-orange: #ca4a1f;
|
||||
@@ -0,0 +1,77 @@
|
||||
// Rem output with px fallback
|
||||
@mixin font-size($sizeValue: 16, $lineHeight: false ) {
|
||||
font-size: $sizeValue + px;
|
||||
font-size: ($sizeValue / 16) + rem;
|
||||
@if ($lineHeight) {
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-state {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@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: $core-grey-light-500 !important;
|
||||
color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
content: "\00a0";
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Adds animation to transforms
|
||||
@mixin animate-transform( $duration: 0.2s ) {
|
||||
transition: transform ease $duration;
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide an element from sighted users, but availble to screen reader users.
|
||||
@mixin visually-hidden() {
|
||||
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;
|
||||
}
|
||||
|
||||
// Unhide a visually hidden element
|
||||
@mixin visually-shown() {
|
||||
clip: auto;
|
||||
clip-path: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin: unset;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
$gap-largest: 40px;
|
||||
$gap-larger: 36px;
|
||||
$gap-large: 24px;
|
||||
$gap: 16px;
|
||||
$gap-small: 12px;
|
||||
$gap-smaller: 8px;
|
||||
$gap-smallest: 4px;
|
||||
|
||||
// Variables pulled from Gutenberg.
|
||||
// Editor Widths
|
||||
$sidebar-width: 280px;
|
||||
$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters.
|
||||
|
||||
// Blocks
|
||||
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
|
||||
$block-spacing: 4px; // Vertical space between blocks.
|
||||
$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
|
||||
$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
|
||||
$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
|
||||
@@ -0,0 +1,42 @@
|
||||
// Import the woocommerce components stylesheet
|
||||
@import "~@woocommerce/components/build-style/style.css";
|
||||
|
||||
// Hack to hide preview overflow.
|
||||
.editor-block-preview__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Align the block icons in edit mode
|
||||
.components-placeholder__label .gridicon,
|
||||
.components-placeholder__label .material-icon {
|
||||
margin-right: 1ch;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Remove the list styling, which is added back by core GB styles.
|
||||
.editor-styles-wrapper {
|
||||
.wc-block-grid {
|
||||
.wc-block-grid__products {
|
||||
list-style: none;
|
||||
margin: 0 (-$gap/2) $gap;
|
||||
|
||||
.wp-block-button__link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wc-block-grid__product {
|
||||
margin: 0 0 $gap-large 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.components-placeholder {
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
&.is-not-found {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
/* Moved */
|
||||
Reference in New Issue
Block a user