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

Begin fixing design to match new colors

Browse source
This commit is contained in:
Dane Everitt 2019-02-09 15:17:38 -08:00
parent dfa175326c
commit a9fda52065
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 90 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

69
resources/assets/styles/components/buttons.css
View file

@ -1,69 +0,0 @@
.btn {
@apply .rounded .p-2;
transition: all 100ms ease-in-out;
/**
* Button Colors
*/
&.btn-primary {
@apply .bg-primary-500 .border-primary-600 .border .text-white;
&:hover:enabled {
@apply .bg-primary-600 .border-primary-800;
}
}
&.btn-green {
@apply .bg-green-500 .border-green-600 .border .text-white;
&:hover:enabled {
@apply .bg-green-600 .border-green-800;
}
}
&.btn-red {
&:not(.btn-secondary) {
@apply .bg-red-500 .border-red-600 .border .text-white;
}
&:hover:enabled {
@apply .bg-red-600 .border-red-800;
}
}
&.btn-secondary {
@apply .border .border-neutral-400 .text-neutral-600;
&:hover:enabled {
@apply .border-neutral-500 .text-neutral-800;
}
&.btn-red:hover:enabled {
@apply .bg-red-600 .border-red-800 .text-white;
}
}
/**
* Button Sizes
*/
&.btn-jumbo {
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
}
&.btn-lg {
@apply .p-4 .uppercase .tracking-wide .text-sm;
}
&.btn-sm {
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
}
&.btn-xs {
@apply .py-2 .px-2 .uppercase .text-xs;
}
&:disabled, &.disabled {
opacity: 0.55;
cursor: default;
}
}

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

@ -21,7 +21,7 @@ input[type=number] {
}
.input-open > .input {
@apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
@apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-200 .py-3 .mb-3;
&:focus {
@apply .border-primary-400;
@ -49,8 +49,8 @@ input[type=number] {
* Styling for other forms throughout the Panel.
*/
.input:not(.open-label) {
@apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full;
transition: all 100ms linear;
@apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
transition: border 150ms linear;
&:focus {
@apply .border-primary-400;
@ -66,13 +66,83 @@ input[type=number] {
}
.input-label {
@apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2;
@apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold .mb-2;
}
.input-help {
@apply .text-xs .text-neutral-500 .pt-2;
@apply .text-xs .text-neutral-400 .pt-2;
&.error {
@apply .text-red-600;
}
}
.btn {
@apply .rounded .p-2;
transition: all 150ms linear;
/**
* Button Colors
*/
&.btn-primary {
@apply .bg-primary-500 .border-primary-600 .border .text-white;
&:hover:enabled {
@apply .bg-primary-600 .border-primary-800;
}
}
&.btn-green {
@apply .bg-green-500 .border-green-600 .border .text-white;
&:hover:enabled {
@apply .bg-green-600 .border-green-800;
}
}
&.btn-red {
&:not(.btn-secondary) {
@apply .bg-red-500 .border-red-600 .border .text-white;
}
&:hover:enabled {
@apply .bg-red-600 .border-red-800;
}
}
&.btn-secondary {
@apply .border .border-neutral-400 .text-neutral-600;
&:hover:enabled {
@apply .border-neutral-500 .text-neutral-800;
}
&.btn-red:hover:enabled {
@apply .bg-red-600 .border-red-800 .text-white;
}
}
/**
* Button Sizes
*/
&.btn-jumbo {
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
}
&.btn-lg {
@apply .p-4 .uppercase .tracking-wide .text-sm;
}
&.btn-sm {
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
}
&.btn-xs {
@apply .py-2 .px-2 .uppercase .text-xs;
}
&:disabled, &.disabled {
opacity: 0.55;
cursor: default;
}
}

22
resources/assets/styles/components/navigation.css
View file

@ -1,5 +1,5 @@
.nav {
@apply .bg-primary-600 .border-b .border-t .border-primary-900;
@apply .bg-primary-600 .border-b .border-t .border-primary-700;
height: 56px;
& .logo {
@ -19,29 +19,26 @@
@apply .mr-2;
& > .search-input {
@apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-800 .bg-neutral-50 .text-neutral-900 .w-96;
opacity: 0.9;
transition: ease-in-out opacity 150ms;
@apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-600 .bg-white .text-neutral-900 .w-96;
transition: border 150ms ease-in;
&:focus {
@apply .border-primary-900;
opacity: 1;
@apply .border-primary-700;
}
&.has-search-results {
@apply .border-b-0 .rounded-b-none;
opacity: 1 !important;
}
}
& .search-results {
@apply .absolute .bg-neutral-50 .border .border-primary-900 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
@apply .absolute .bg-white .border .border-primary-700 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
& a {
@apply .block .no-underline .p-2 .rounded;
&:hover {
@apply .bg-neutral-100;
&:not(.no-hover):hover {
@apply .bg-neutral-50;
}
}
}
@ -51,10 +48,11 @@
@apply .flex .h-full .items-center;
& > a {
@apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
transition: background-color 150ms linear;
@apply .block .flex .self-stretch .items-center .no-underline .text-white .font-light .text-sm .px-5;
&:hover {
@apply .bg-primary-600;
@apply .bg-primary-700;
}
}
}