Skip to content

Commit

Permalink
Merge with Space 1.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomaskimura
thomaskimura committed Jul 8, 2024
1 parent d0198d8 commit c7e898f
Show file tree
Hide file tree
Showing 30 changed files with 2,683 additions and 1,119 deletions.
73 changes: 59 additions & 14 deletions src/css/base/forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
/* ======= */

@layer base {

/* basic inputs */
input[type="text"],
input[type="password"],
Expand All @@ -19,53 +20,97 @@
select,
select[multiple],
textarea {
@apply color__bg-shade-1 animation-300 border__input--radius border__input min-h-[44px] w-full appearance-none px-4 py-1.5;
&::placeholder {
@apply color__text opacity-50;
}
@apply animation-300 border__input min-h-[44px] w-full appearance-none py-1.5;
&:hover {
@apply border__input--hover;
}
&:focus {
&:focus-visible {
@apply border__input--focus color__bg-body;
}
}

/* radius */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="search"],
input[type="tel"],
select,
select[multiple] {
@apply border__input--radius
}
textarea {
@apply border__textarea--radius;
}

/* select dropdown */
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
background-position: right 1rem center !important;
background-position-x: right 1rem !important;
background-position-y: center !important;
background-repeat: no-repeat !important;
background-repeat-x: no-repeat !important;
background-repeat-y: no-repeat !important;
background-size: 1.5rem 1.5rem !important;
}

/* checkboxes and radios */
input[type="checkbox"] {
@apply color__link color__bg-shade-1 border__input cursor-pointer;
@apply cursor-pointer color__link border__input;
&:checked {
@apply bg-current !important;
@apply bg-current;
}
&:hover {
@apply border__input--hover;
}
&:focus {
&:focus-visible {
@apply border__input--focus;
}
}
input[type="radio"] {
@apply color__link color__bg-shade-1 border__input rounded-full cursor-pointer;
@apply rounded-full cursor-pointer color__link border__input;
&:checked {
@apply bg-current !important;
@apply bg-current;
}
&:hover {
@apply border__input--hover;
}
&:focus {
&:focus-visible {
@apply border__input--focus;
}
}

[type='checkbox']:focus, [type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: var(--color__background-body);
--tw-ring-color: var(--color__border-selected-1);
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* buttons */
button {
&:hover {
@apply underline opacity-75;
@apply opacity-75;
}
&:focus {
@apply simple--focus;
&:focus-visible {
@apply border--focus;
}
}

/* sliders */
input[type="range"]::-webkit-slider-thumb {
pointer-events: all;
width: 24px;
Expand Down
2 changes: 1 addition & 1 deletion src/css/base/images.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@apply relative;
}
img:after {
@apply md:type--smaller color__text md:absolute md:top-0 md:flex md:h-full md:w-full md:flex-col md:justify-center md:whitespace-normal md:p-4 md:text-center items-center justify-center hidden;
@apply items-center justify-center hidden md:type--smaller color__text md:absolute md:top-0 md:flex md:h-full md:w-full md:flex-col md:justify-center md:whitespace-normal md:p-4 md:text-center color__bg-overlay-1;
content: "" attr(alt) !important;
}
}
7 changes: 1 addition & 6 deletions src/css/base/tables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,10 @@
/* ======= */

table {
@apply border--t-width border--r-width color__border-divider-1;

p {
@apply m-0;
}
tr {
@apply border--b-width color__border-divider-1;
}
td {
@apply border--l-width color__border-divider-1 p-2;
@apply border-0;
}
}
52 changes: 16 additions & 36 deletions src/css/base/typography.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
/* ======= */

@layer base {

/* body */
html,
body,
Expand All @@ -17,42 +18,36 @@
@apply type__body type--base;
}

/* headlines */
/* headings */
h1,
.h1,
h1 > * {
@apply type__heading-1;
@apply leading-none;
@apply type__heading type__heading-1;
}
h2,
.h2,
h2 > * {
@apply type__heading-2;
@apply leading-none;
@apply type__heading type__heading-2;
}
h3,
.h3,
h3 > * {
@apply type__heading-3;
@apply leading-none;
@apply type__heading type__heading-3;
}
h4,
.h4,
h4 > * {
@apply type__heading-4;
@apply leading-tight;
@apply type__heading type__heading-4;
}
h5,
.h5,
h5 > * {
@apply type__heading-5;
@apply leading-tight;
@apply type__heading type__heading-5;
}
h6,
.h6,
h6 > * {
@apply type__heading-6;
@apply leading-tight;
@apply type__heading type__heading-6;
}

/* nav */
Expand All @@ -74,47 +69,32 @@
textarea,
.form-input,
.form-select {
@apply type__body;
@apply type__body text-[16px];
}
label {
@apply type__body type--small cursor-pointer;
@apply cursor-pointer type__body type--small;
}

/* links */
a {
@apply underline-offset-1 underline;
@apply underline animation-300;

&:hover {
@apply underline opacity-75;
@apply underline md:opacity-75;
}

&:focus {
@apply simple--focus;
&:focus-visible {
@apply border--focus;
}
}

/* spacing */
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
ul,
ol,
pre {
@apply md:mb-4 mb-2;
.rte {
@apply space-y-4;
}

ul {
@apply pl-4 list-disc;
}

ol {
@apply pl-4 list-decimal;
}
Expand Down
50 changes: 31 additions & 19 deletions src/css/components/buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
@layer components {
/* standard button */
.btn {
@apply type__nav border__button--radius color__button-primary border__button animation-500 inline-flex w-auto min-w-[44px] cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center no-underline animation-300;
text-transform: var(--type-button-capiliziation);
@apply type__nav border__button--radius color__button-primary border__button animation-500 inline-flex w-auto cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center animation-300 !no-underline;
text-transform: var(--type__button-capiliziation) !important;

* {
@apply type__nav;
text-transform: var(--type-button-capiliziation);
@apply type__nav !no-underline;
text-transform: var(--type__button-capiliziation) !important;
}

&__content {
@apply type__nav flex items-center;
@apply flex items-center type__nav;
}

/* states */
Expand All @@ -22,7 +22,7 @@
@apply no-underline opacity-75;
}
&--focus,
&:focus {
&:focus-visible {
@apply border__button--focus;
}
&--disabled,
Expand All @@ -32,19 +32,19 @@

/* sizes */
&--small {
@apply type--small px-3;
@apply px-4 type--small;
}
&--small > * {
@apply type--small;
}
&--smaller {
@apply type--smaller px-3 py-1;
@apply px-4 py-1 type--smaller;
}
&--smaller > * {
@apply type--smaller;
}
&--big {
@apply type--big px-9 py-3;
@apply py-3 type--big px-9;
}
&--big > * {
@apply type--big;
Expand All @@ -63,21 +63,29 @@
&--plain {
@apply color__button-plain;
}
&--diff{
background-color: #fff;
border-color: #fff;
color: #000;
* {
color: #000;
}
}

&--outline {
@apply border--button-width;
background-color: transparent;
color: var(--color__text-light);
border-color: var(--color__text-light);
border-width: var(--sizes-border-width);
* {
color: var(--color__text-light);
}
}
&--outline-alt {
@apply border--button-width;
background-color: transparent;
color: var(--color__text-dark);
border-color: var(--color__text-dark);
border-width: var(--sizes-border-width);
* {
color: var(--color__text-dark);
}
Expand All @@ -86,10 +94,12 @@
&--minimal {
background-color: transparent;
color: var(--color__text-light);
@apply type__body min-w-0 min-h-0 p-0 normal-case border-none rounded-none;
&:focus,
@apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
&:hover {
@apply simple--focus shadow-none;
@apply shadow-none border--focus-simple;
}
&:focus-visible {
@apply shadow-none border--focus-simple;
}
* {
color: var(--color__text-light);
Expand All @@ -99,10 +109,12 @@
&--minimal-alt {
background-color: transparent;
color: var(--color__text-dark);
@apply type__body min-w-0 min-h-0 p-0 normal-case border-none rounded-none;
&:focus,
@apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
&:hover {
@apply simple--focus shadow-none;
@apply shadow-none border--focus-simple;
}
&:focus-visible {
@apply shadow-none border--focus-simple;
}
* {
color: var(--color__text-dark);
Expand All @@ -119,9 +131,9 @@
}
/* - make sure spinner is spinner */
&__spinner {
@apply left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 bg-inherit absolute flex items-center justify-center invisible w-11/12 transform;
@apply absolute flex items-center justify-center invisible w-11/12 transform left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 bg-inherit;
svg {
@apply animate-spin-slow m-0 m-auto;
@apply m-0 m-auto animate-spin-slow;
}
}
/* - when loading class used, hide content and show spinner */
Expand Down
Loading

0 comments on commit c7e898f

Please sign in to comment.