Skip to content

Commit

Permalink
style: autofix with stylelint
Browse files Browse the repository at this point in the history
  • Loading branch information
@adekbadek
adekbadek committed Aug 16, 2024
1 parent 643c992 commit 4ed74df
Show file tree
Hide file tree
Showing 27 changed files with 419 additions and 407 deletions.
2 changes: 1 addition & 1 deletion src/admin/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import url( '~tachyons/css/tachyons.min.css' );
@import url( "~tachyons/css/tachyons.min.css" );
46 changes: 23 additions & 23 deletions src/blocks/reader-registration/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use './style';
@use '../../reader-activation-auth/style' as auth;
@use '~@wordpress/base-styles/colors' as wp-colors;
@use "./style";
@use "../../reader-activation-auth/style" as auth;
@use "~@wordpress/base-styles/colors" as wp-colors;

.newspack-registration {
&__state-bar {
Expand All @@ -23,12 +23,12 @@
box-shadow: none !important;
color: wp-colors.$gray-900 !important;
height: 32px !important;
&[data-is-active='true'] {
&[data-is-active="true"] {
background: wp-colors.$gray-900 !important;
color: white !important;
}
&:hover:not( [data-is-active='true'] ) {
color: var( --wp-admin-theme-color ) !important;
&:hover:not([data-is-active="true"]) {
color: var(--wp-admin-theme-color) !important;
}
}
span {
Expand All @@ -41,21 +41,21 @@
}

& &__title {
font-family: var( --newspack-ui-font-family );
font-family: var(--newspack-ui-font-family);
}

&__main {
gap: 0;

button[class*='oauth'] {
button[class*="oauth"] {
svg {
display: block;
}
}
}

&__form-content {
&:not( :has( .newspack-ui__helper-text ) ) {
&:not(:has(.newspack-ui__helper-text)) {
.newspack-ui__input-card {
border-bottom-width: 0 !important;
border-radius: 0 !important;
Expand All @@ -65,25 +65,25 @@
font-weight: 400;
}

&:has( input[type='checkbox']:checked ) {
&:has(input[type="checkbox"]:checked) {
background: transparent;
border-color: var( --newspack-ui-color-border );
border-color: var(--newspack-ui-color-border);
}

&:first-of-type {
border-top-left-radius: var( --newspack-ui-border-radius-m ) !important;
border-top-right-radius: var( --newspack-ui-border-radius-m ) !important;
border-top-left-radius: var(--newspack-ui-border-radius-m) !important;
border-top-right-radius: var(--newspack-ui-border-radius-m) !important;
border-top-width: 1px !important;
}

&:last-of-type {
border-bottom-left-radius: var( --newspack-ui-border-radius-m ) !important;
border-bottom-right-radius: var( --newspack-ui-border-radius-m ) !important;
border-bottom-left-radius: var(--newspack-ui-border-radius-m) !important;
border-bottom-right-radius: var(--newspack-ui-border-radius-m) !important;
border-bottom-width: 1px !important;
}

+ .newspack-ui__input-card {
margin-top: calc( -1 * var( --newspack-ui-spacer-2 ) ) !important;
margin-top: calc(-1 * var(--newspack-ui-spacer-2)) !important;
padding-top: 0 !important;
}
}
Expand All @@ -94,7 +94,7 @@
&__have-account {
.newspack-ui__button {
cursor: default;
font-family: var( --newspack-ui-font-family ) !important;
font-family: var(--newspack-ui-font-family) !important;

&:focus {
box-shadow: none;
Expand All @@ -113,8 +113,8 @@

&__help-text {
.rich-text {
font-size: var( --newspack-ui-font-size-xs );
line-height: var( --newspack-ui-line-height-xs );
font-size: var(--newspack-ui-font-size-xs);
line-height: var(--newspack-ui-line-height-xs);
}
}

Expand All @@ -128,9 +128,9 @@
}

.newspack-ui__box--success {
font-size: var( --newspack-ui-font-size-s );
font-size: var(--newspack-ui-font-size-s);
font-weight: 600;
line-height: var( --newspack-ui-line-height-s );
line-height: var(--newspack-ui-line-height-s);
margin: 0 !important;

.block-list-appender {
Expand All @@ -145,8 +145,8 @@
}

> * {
margin-bottom: var( --newspack-ui-spacer-2 );
margin-top: var( --newspack-ui-spacer-2 );
margin-bottom: var(--newspack-ui-spacer-2);
margin-top: var(--newspack-ui-spacer-2);
}

> :first-child {
Expand Down
109 changes: 55 additions & 54 deletions src/blocks/reader-registration/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
@use '~@wordpress/base-styles/colors' as wp-colors;
@use '../../shared/scss/mixins';
@use "~@wordpress/base-styles/colors" as wp-colors;
@use "../../shared/scss/mixins";

.newspack-registration {
container: registration / inline-size;

.has-background & {
background: var( --newspack-ui-color-body-bg );
border-radius: var( --newspack-ui-border-radius-m );
background: var(--newspack-ui-color-body-bg);
border-radius: var(--newspack-ui-border-radius-m);
overflow: hidden;
padding: var( --newspack-ui-spacer-5 );
padding: var(--newspack-ui-spacer-5);

.newspack-registration__help-text {
background: var( --newspack-ui-color-neutral-5 );
margin: var( --newspack-ui-spacer-5 ) calc( -1 * var( --newspack-ui-spacer-5 ) )
calc( -1 * var( --newspack-ui-spacer-5 ) );
padding: var( --newspack-ui-spacer-4 ) var( --newspack-ui-spacer-5 );
background: var(--newspack-ui-color-neutral-5);
margin:
var(--newspack-ui-spacer-5) calc(-1 * var(--newspack-ui-spacer-5))
calc(-1 * var(--newspack-ui-spacer-5));
padding: var(--newspack-ui-spacer-4) var(--newspack-ui-spacer-5);
}
}

Expand All @@ -35,7 +36,7 @@
&__inputs,
&__have-account {
display: grid;
gap: var( --newspack-ui-spacer-2 );
gap: var(--newspack-ui-spacer-2);
}

&__form-content {
Expand All @@ -48,9 +49,9 @@

.newspack-ui__box.newspack-ui__box--border {
display: grid;
gap: var( --newspack-ui-spacer-3 );
gap: var(--newspack-ui-spacer-3);
margin: 0;
padding: var( --newspack-ui-spacer-3 );
padding: var(--newspack-ui-spacer-3);

.newspack-ui__input-card {
background: transparent !important;
Expand All @@ -66,7 +67,7 @@
}

&__inputs {
gap: var( --newspack-ui-spacer-5 );
gap: var(--newspack-ui-spacer-5);

.newspack-ui__button {
margin-bottom: 0 !important;
Expand All @@ -78,10 +79,10 @@
}

&__header {
margin-bottom: var( --newspack-ui-spacer-5 );
margin-bottom: var(--newspack-ui-spacer-5);

&:has( + p ) {
margin-bottom: var( --newspack-ui-spacer-base );
&:has(+ p) {
margin-bottom: var(--newspack-ui-spacer-base);
}
}

Expand All @@ -94,37 +95,37 @@
}

& &__title {
font-size: var( --newspack-ui-font-size-l );
line-height: var( --newspack-ui-line-height-l );
font-size: var(--newspack-ui-font-size-l);
line-height: var(--newspack-ui-line-height-l);
margin: 0;
}

& &__description {
font-size: var( --newspack-ui-font-size-s );
line-height: var( --newspack-ui-line-height-s );
margin: 0 0 var( --newspack-ui-spacer-5 );
font-size: var(--newspack-ui-font-size-s);
line-height: var(--newspack-ui-line-height-s);
margin: 0 0 var(--newspack-ui-spacer-5);
}

&__have-account {
margin-top: var( --newspack-ui-spacer-2 );
margin-top: var(--newspack-ui-spacer-2);
text-align: center;

&:has( em ) {
border-top: 1px solid var( --newspack-ui-color-border );
gap: calc( var( --newspack-ui-spacer-base ) / 2 );
padding-top: var( --newspack-ui-spacer-2 );
&:has(em) {
border-top: 1px solid var(--newspack-ui-color-border);
gap: calc(var(--newspack-ui-spacer-base) / 2);
padding-top: var(--newspack-ui-spacer-2);
}

em {
color: var( --newspack-ui-color-neutral-60 );
color: var(--newspack-ui-color-neutral-60);
}
}

&__help-text {
color: var( --newspack-ui-color-neutral-60 );
font-size: var( --newspack-ui-font-size-xs );
line-height: var( --newspack-ui-line-height-xs );
margin-top: var( --newspack-ui-spacer-2 );
color: var(--newspack-ui-color-neutral-60);
font-size: var(--newspack-ui-font-size-xs);
line-height: var(--newspack-ui-line-height-xs);
margin-top: var(--newspack-ui-spacer-2);

> :first-child {
margin-top: 0;
Expand All @@ -143,21 +144,21 @@

&--error {
.newspack-registration__response {
color: var( --newspack-ui-color-error-50 );
font-size: var( --newspack-ui-font-size-xs );
line-height: var( --newspack-ui-line-height-xs );
color: var(--newspack-ui-color-error-50);
font-size: var(--newspack-ui-font-size-xs);
line-height: var(--newspack-ui-line-height-xs);

p {
margin: var( --newspack-ui-spacer-base ) 0 0;
margin: var(--newspack-ui-spacer-base) 0 0;
}
}

.newspack-registration__inputs {
input[type='email'] {
border-color: var( --newspack-ui-color-error-50 );
input[type="email"] {
border-color: var(--newspack-ui-color-error-50);

&:focus {
outline-color: var( --newspack-ui-color-error-50 );
outline-color: var(--newspack-ui-color-error-50);
}
}
}
Expand All @@ -173,11 +174,11 @@
.block-editor-block-list__layout,
.wp-block-newspack-reader-registration {
font-weight: 600;
margin: var( --newspack-ui-spacer-2 ) 0;
margin: var(--newspack-ui-spacer-2) 0;

> * {
margin-bottom: var( --newspack-ui-spacer-2 );
margin-top: var( --newspack-ui-spacer-2 );
margin-bottom: var(--newspack-ui-spacer-2);
margin-top: var(--newspack-ui-spacer-2);
}

> :first-child {
Expand All @@ -195,15 +196,15 @@
}

&--in-progress {
body:has( & ) {
body:has(&) {
cursor: wait;
}

* {
pointer-events: none;
}

button[type='submit'] {
button[type="submit"] {
position: relative;

span.submit {
Expand All @@ -227,7 +228,7 @@
transform: rotate(0deg);
width: var(--size);
position: absolute;
left: calc( 50% - ( var(--size) / 2 ) );
left: calc(50% - ( var(--size) / 2 ));
}
}
}
Expand All @@ -238,14 +239,14 @@
}

.nphp,
input[type='email'].nphp {
input[type="email"].nphp {
@include mixins.visuallyHidden;
}
}

@container registration ( width > 568px ) {
.newspack-registration__inputs {
gap: var( --newspack-ui-spacer-2 );
gap: var(--newspack-ui-spacer-2);
grid-template-columns: 1fr auto;
}
}
Expand All @@ -263,18 +264,18 @@

@keyframes spin {
from {
transform: rotate( 0deg );
transform: rotate(0deg);
}
to {
transform: rotate( 360deg );
transform: rotate(360deg);
}
}

@keyframes spin {
from {
transform: rotate( 0deg );
}
to {
transform: rotate( 360deg );
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
14 changes: 8 additions & 6 deletions src/newspack-ui/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
@use 'variables/breakpoints';
@use "variables/breakpoints";

@mixin newspack-ui-elevation( $size: 1 ) {
@if $size == 1 {
box-shadow: 0 1px 10px rgba( 0, 0, 0, 0.07 );
} @else if $size == 2 {
box-shadow: 0 2px 20px rgba( 0, 0, 0, 0.14 );
} @else if $size == 3 {
box-shadow: 0 3px 30px rgba( 0, 0, 0, 0.21 );
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.07);
}
@else if $size == 2 {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.14);
}
@else if $size == 3 {
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.21);
}
}

Expand Down
Loading

0 comments on commit 4ed74df

Please sign in to comment.