-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: start building out Newspack UI styles
- Loading branch information
Showing
24 changed files
with
1,106 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| import './style.scss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| .newspack-ui { | ||
| &__modal { | ||
| background: var( --newspack-ui-color-body-bg ); | ||
| border-radius: var( --newspack-ui-border-radius ); | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-height: 90vh; | ||
| max-width: var( --newspack-ui-modal-width-medium ); | ||
| overflow: auto; | ||
|
|
||
| // Modal header & footer | ||
| &__header, | ||
| &__footer { | ||
| padding: var( --newspack-ui-spacer-4 ) var( --newspack-ui-spacer-5 ); | ||
| } | ||
|
|
||
| &__header { | ||
| align-items: center; | ||
| background: var( --newspack-ui-color-body-bg ); | ||
| border-bottom: 1px solid var( --newspack-ui-color-border ); | ||
| display: flex; | ||
| justify-content: space-between; | ||
| position: sticky; | ||
| top: 0; | ||
|
|
||
| h2 { | ||
| font-size: var( --newspack-ui-font-size-medium ); | ||
| margin: 0; | ||
| } | ||
|
|
||
| button { // Close button | ||
| background: transparent; | ||
| border: 0; | ||
| color: var( --newspack-ui-color-text-high-contrast ); | ||
| cursor: pointer; | ||
| margin: -8px; | ||
| padding: 8px; | ||
|
|
||
| &:focus, | ||
| &:hover { | ||
| background: transparent; | ||
| color: var( --newspack-ui-color-text-med-contrast ); | ||
| } | ||
| svg { | ||
| display: block; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__content { | ||
| backface-visibility: visible; | ||
| padding: var( --newspack-ui-spacer-5 ); | ||
| } | ||
|
|
||
| &__footer { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| color: var( --newspack-ui-color-text-med-contrast ); | ||
| font-size: var( --newspack-ui-font-size-small ); | ||
| line-height: var( --newspack-ui-line-height-small ); | ||
| } | ||
|
|
||
| // Narrow modal | ||
| &__small { | ||
| max-width: var( --newspack-ui-modal-width-small ); | ||
| } | ||
|
|
||
| // Contents | ||
| h3 { | ||
| font-size: var( --newspack-ui-font-size-medium ); | ||
| } | ||
|
|
||
| &__footer, | ||
| &__content { | ||
| > *:first-child { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| > *:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| .newspack-ui { | ||
| .newspack-ui { | ||
| &__box { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| border-radius: var( --newspack-ui-border-radius ); | ||
| margin-bottom: var( --newspack-ui-spacer-5 ); | ||
| padding: var( --newspack-ui-spacer-5 ); | ||
|
|
||
| // Backgrounds & Borders | ||
| &__success { | ||
| background: var( --newspack-ui-color-alert-green-bg ); | ||
| } | ||
|
|
||
| &__error { | ||
| background: var( --newspack-ui-color-alert-red-bg ); | ||
| } | ||
|
|
||
| &__warning { | ||
| // TODO | ||
| } | ||
|
|
||
| &__border { | ||
| background: transparent; | ||
| border: 1px solid var( --newspack-ui-color-border ); | ||
| } | ||
|
|
||
| // Text alignments | ||
| &__text-center { | ||
| text-align: center; | ||
| } | ||
|
|
||
| // Some style resets. | ||
| h2 { | ||
| font-size: 1em; | ||
| } | ||
|
|
||
| > *:first-child { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| > *:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| // Thank you SVG | ||
| .newspack-ui { | ||
| &__icon { | ||
| align-items: center; | ||
| border-radius: 100%; | ||
| display: flex; | ||
| height: var( --newspack-ui-spacer-7 ); | ||
| justify-content:center; | ||
| margin: 0 auto var( --newspack-ui-spacer-2 ); | ||
| width: var( --newspack-ui-spacer-7 ); | ||
|
|
||
| &__success { | ||
| background: var( --newspack-ui-color-alert-green ); | ||
| color: var( --newspack-ui-color-body-bg ); | ||
| } | ||
|
|
||
| &__error { | ||
| background: var( --newspack-ui-color-alert-red ); | ||
| color: var( --newspack-ui-color-body-bg ); | ||
| } | ||
|
|
||
| &__warning { | ||
| background: var( --newspack-ui-color-alert-yellow ); | ||
| color: var( --newspack-ui-color-body-bg ); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| @use 'boxes'; | ||
| @use 'forms'; | ||
| @use 'icons'; | ||
| @use 'misc'; | ||
| @use 'tables'; | ||
| @use 'typography'; | ||
| @use 'woocommerce'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .newspack-ui { | ||
| table { | ||
| border: 0; | ||
| font-size: var( --newspack-ui-font-size-small ); // Prevent relative font size | ||
| line-height: var( --newspack-ui-line-height-large ); | ||
| margin: calc( var( --newspack-ui-spacer-base ) / -2 ) 0; // Offset cell padding. | ||
| th, | ||
| td { | ||
| background: transparent; | ||
| border-color: var( --newspack-ui-color-border ); | ||
| border-width: 0 0 1px; | ||
| font-size: var( --newspack-ui-font-size-small ); // Prevent relative font size | ||
| padding: calc( var( --newspack-ui-spacer-base ) / 2 ) 0; | ||
| vertical-align: top; | ||
| > * { | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
| th { | ||
| font-weight: 600; | ||
| text-align: left; | ||
| } | ||
| tfoot tr:last-child { | ||
| th, | ||
| td { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .newspack-ui { | ||
| -webkit-font-smoothing: antialiased; | ||
|
|
||
| p { | ||
| margin: var( --newspack-ui-spacer-2 ) 0; | ||
| } | ||
|
|
||
| strong, | ||
| &__font__bold { | ||
| font-weight: var( --newspack-ui-font-weight-strong ); | ||
| } | ||
|
|
||
| &__font__normal { | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| &__font__small { | ||
| font-size: var( --newspack-ui-font-size-small ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| .newspack-ui { | ||
| // TODO: define some kind of size hierachy for buttons eg. small, medium, large; | ||
| // not needed for RAS, but likely for My Account. | ||
| .button, | ||
| button, | ||
| input[type='button'], | ||
| input[type='reset'], | ||
| input[type='submit'] { | ||
| align-items: center; | ||
| border: 0; | ||
| border-radius: var( --newspack-ui-border-radius-small ); | ||
| display: inline-flex; | ||
| font-family: var( --newspack-ui-font-family); | ||
| font-size: var( --newspack-ui-font-size-small ); | ||
| font-weight: 600; | ||
| gap: var( --newspack-ui-spacer-2 ); | ||
| justify-content: center; | ||
| line-height: var( --newspack-ui-line-height-large ); | ||
| margin-bottom: var( --newspack-ui-spacer-base ); | ||
| padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-3 ); // TODO: correct this | ||
| transition: background-color 150ms ease-in-out; | ||
|
|
||
| &:hover { | ||
| // TODO | ||
| } | ||
|
|
||
| &:focus { | ||
| // TODO | ||
| } | ||
|
|
||
| &:disabled { | ||
| background: var( --newspack-ui-color-gray-100 ) !important; | ||
| color: var( --newspack-ui-color-text-med-contrast ) !important; | ||
| cursor: default; | ||
| } | ||
|
|
||
| &.newspack-ui__button{ | ||
| &__wide { | ||
| display: flex; | ||
| width: 100%; | ||
| } | ||
|
|
||
| &__primary { | ||
| background: var( --newspack-ui-color-button-bg ); | ||
| color: var( --newspack-ui-color-button-text ); | ||
|
|
||
| &:hover { | ||
| background: var( --newspack-ui-color-button-bg-hover ); | ||
| } | ||
| } | ||
|
|
||
| &__secondary { | ||
| background: transparent; | ||
| border: 1px solid var( --newspack-ui-color-border ); | ||
| color: var( --newspack-ui-color-text-high-contrast ); | ||
| padding: calc( var( --newspack-ui-spacer-2 ) - 1px ) calc( var( --newspack-ui-spacer-3 ) - 1px ); | ||
|
|
||
| &:hover { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| } | ||
| } | ||
|
|
||
| &__tertiary { | ||
| background: transparent; | ||
| color: var( --newspack-ui-color-text-high-contrast ); | ||
|
|
||
| &:hover { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
71 changes: 71 additions & 0 deletions
71
assets/newspack-ui/scss/elements/forms/_checkbox-radio.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| .newspack-ui { | ||
| input[type='checkbox'], | ||
| input[type='radio'] { | ||
| appearance: none; | ||
| background: white; | ||
| border: solid 1px var( --newspack-ui-color-border ); | ||
| color: white; | ||
| cursor: pointer; | ||
| display: inline-grid; | ||
| font: inherit; | ||
| height: var( --newspack-ui-spacer-5 ) !important; | ||
| margin: 0; | ||
| place-content: center; | ||
| width: var( --newspack-ui-spacer-5 ) !important; | ||
|
|
||
| &::before { | ||
| content: ''; | ||
| display: block; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| &:checked { | ||
| &::before { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| &:focus { | ||
| outline: 1.5px solid var( --newspack-ui-color-radio-bg ); | ||
| outline-offset: 1px; | ||
| } | ||
|
|
||
| &:disabled { | ||
| cursor: not-allowed; | ||
| opacity: 0.75; | ||
| } | ||
| } | ||
|
|
||
| input[type='checkbox'] { | ||
| border-radius: var( --newspack-ui-border-radius ); | ||
|
|
||
| &::before { | ||
| background: transparent | ||
| url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E" ) | ||
| 0 0 no-repeat; | ||
| height: var( --newspack-ui-spacer-5 ); | ||
| width: var( --newspack-ui-spacer-5 ); | ||
| } | ||
|
|
||
| &:checked { | ||
| background: var( --newspack-ui-color-radio-bg ); | ||
| border-color: transparent; | ||
| } | ||
| } | ||
|
|
||
| input[type='radio'] { | ||
| border-radius: 100%; | ||
|
|
||
| &::before { | ||
| background: var( --newspack-ui-color-radio-bg ); | ||
| border-radius: 100%; | ||
| height: var( --newspack-ui-spacer-3 ); | ||
| margin: 4px; | ||
| width: var( --newspack-ui-spacer-3 ); | ||
| } | ||
|
|
||
| &:checked { | ||
| border-color: var( --newspack-ui-color-radio-bg ); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.