StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Start working on some defined styles, begin implementing password update in account

Browse source
This commit is contained in:
Dane Everitt 2019-06-22 18:53:50 -07:00
parent 0789b814dd
commit adcd2682ef
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 226 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

97
resources/assets/styles/components/forms.css
View file

@ -15,19 +15,23 @@ input[type=number] {
/**
* Styling for other forms throughout the Panel.
*/
.input {
@apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
.input, .input-dark {
@apply .appearance-none .w-full;
min-width: 0;
&:required, &:invalid {
box-shadow: none;
}
}
.input {
@apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800;
transition: border 150ms linear;
&:focus {
@apply .border-primary-400;
}
&:required, &:invalid {
box-shadow: none;
}
&.error {
@apply .text-red-600 .border-red-500;
}
@ -37,6 +41,39 @@ input[type=number] {
@apply .bg-neutral-100 .border-neutral-200;
}
.input + .input-help {
@apply .text-xs .text-neutral-400 .pt-2;
&.error {
@apply .text-red-600;
}
}
.input-dark {
@apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200;
transition: border 150ms linear, box-shaodw 150ms ease-in;
&:focus {
@apply .shadow;
}
& + .input-help {
@apply .text-xs .text-neutral-400 .mt-2
}
&.error {
@apply .text-red-100 .border-red-400;
}
&.error + .input-help {
@apply .text-red-400;
}
&:disabled {
@apply .opacity-75;
}
}
label {
@apply .block .text-xs .font-medium .uppercase .text-neutral-700 .mb-2;
}
@ -61,6 +98,10 @@ select:not(.appearance-none) {
background-position-x: calc(100% - 0.75rem);
}
.input-dark-label {
@apply .uppercase .text-neutral-200;
}
.input-label {
@apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold;
@ -69,60 +110,60 @@ select:not(.appearance-none) {
}
}
.input-help {
@apply .text-xs .text-neutral-400 .pt-2;
&.error {
@apply .text-red-600;
}
}
a.btn {
@apply .no-underline;
}
.btn {
@apply .rounded .p-2;
@apply .rounded .p-2 .uppercase .tracking-wide .text-sm;
transition: all 150ms linear;
/**
* Button Colors
*/
&.btn-primary {
@apply .bg-primary-500 .border-primary-600 .border .text-white;
@apply .bg-primary-500 .border-primary-600 .border .text-primary-50;
&:hover:not(:disabled) {
@apply .bg-primary-600 .border-primary-800;
@apply .bg-primary-600 .border-primary-700;
}
}
&.btn-green {
@apply .bg-green-500 .border-green-600 .border .text-white;
@apply .bg-green-500 .border-green-600 .border .text-green-50;
&:hover:not(:disabled) {
@apply .bg-green-600 .border-green-800;
@apply .bg-green-600 .border-green-700;
}
}
&.btn-red {
&:not(.btn-secondary) {
@apply .bg-red-500 .border-red-600 .border .text-white;
@apply .bg-red-500 .border-red-600 .text-red-50;
}
&:hover:not(:disabled) {
@apply .bg-red-600 .border-red-800;
@apply .bg-red-600 .border-red-700;
}
}
&.btn-grey {
@apply .border .border-neutral-600 .bg-neutral-500 .text-neutral-50;
&:hover:not(:disabled) {
@apply .bg-neutral-600 .border-neutral-700;
}
}
&.btn-secondary {
@apply .border .border-neutral-200 .text-neutral-400;
@apply .border .border-neutral-600 .bg-transparent .text-neutral-200;
&:hover:not(:disabled) {
@apply .border-neutral-500 .text-neutral-700;
@apply .border-neutral-500 .text-neutral-100;
}
&.btn-red:hover:not(:disabled) {
@apply .bg-red-600 .border-red-800 .text-white;
@apply .bg-red-500 .border-red-600 .text-red-50;
}
}
@ -130,19 +171,19 @@ a.btn {
* Button Sizes
*/
&.btn-jumbo {
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
@apply .p-4 .w-full;
}
&.btn-lg {
@apply .p-4 .uppercase .tracking-wide .text-sm;
@apply .p-4 .text-sm;
}
&.btn-sm {
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
@apply .p-3;
}
&.btn-xs {
@apply .py-2 .px-2 .uppercase .text-xs;
@apply .p-2 .text-xs;
}
&:disabled, &.disabled {