diff --git a/assets/css/scss/_login.scss b/assets/css/scss/_login.scss index cc19bfc4ce..f44e1552d2 100644 --- a/assets/css/scss/_login.scss +++ b/assets/css/scss/_login.scss @@ -5,6 +5,8 @@ .p-inputtext { @apply border-none py-4 pl-4 text-support-3; + font-size: 16px; + &.p-invalid.p-component { @apply border-error; } @@ -51,11 +53,11 @@ } &__buttons { - @apply flex flex-row gap-4; + @apply grid grid-cols-2 gap-4; a.btn, .p-button { - @apply w-6/12 p-3.5; + @apply p-3.5 text-body-1; } } } diff --git a/assets/css/scss/atoms/_buttons.scss b/assets/css/scss/atoms/_buttons.scss index 3d75625c18..fa2a74711c 100644 --- a/assets/css/scss/atoms/_buttons.scss +++ b/assets/css/scss/atoms/_buttons.scss @@ -1,7 +1,6 @@ .btn { - @apply cursor-default font-semibold gap-2 inline-flex justify-center px-6 py-3 rounded-md transition flex-none; - font-size: 1rem; - line-height: 1rem; + @apply cursor-default font-semibold gap-2 inline-flex justify-center px-6 py-2 rounded-md transition flex-none; + font-size: 16px; &--primary { @apply bg-primary text-white; @@ -230,9 +229,9 @@ $border-color_12: #9333EA; .p-button { @include filled-style('primary', 'support-4'); - @apply cursor-default font-semibold gap-2 inline-flex justify-center px-6 py-3 rounded-md transition; - font-size: 1rem; - line-height: 1rem; + @apply cursor-pointer font-semibold gap-2 inline-flex justify-center items-center px-4 py-2 rounded-md transition; + + font-size: 16px; &:focus { @apply outline-none; @@ -259,7 +258,7 @@ $border-color_12: #9333EA; } &.p-button-sm { - @apply px-4 py-2; + @apply px-2 py-1; font-size: 13px; } diff --git a/assets/css/scss/atoms/_dropdown.scss b/assets/css/scss/atoms/_dropdown.scss index 2b5eb767a4..3bc7ebbac8 100644 --- a/assets/css/scss/atoms/_dropdown.scss +++ b/assets/css/scss/atoms/_dropdown.scss @@ -4,6 +4,8 @@ hover:border-primary hover:text-gray-90 hover:outline-0 hover:outline-none focus:border-primary focus:text-gray-90 focus:outline-0 focus:outline-none; + font-size: 14px; + .p-dropdown-panel, .p-multiselect-panel { @apply min-w-full; } @@ -13,6 +15,10 @@ } } +select.p-dropdown { + @apply px-4 py-2; +} + .p-dropdown { &-clear-icon { @apply absolute top-1/2 -mt-2; @@ -29,7 +35,7 @@ } .p-dropdown-label, .p-multiselect-label { - @apply block whitespace-nowrap overflow-hidden flex-1 w-[1%] overflow-ellipsis cursor-pointer + @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] overflow-ellipsis cursor-pointer bg-transparent border-none focus:outline-0 focus:outline-none; } diff --git a/assets/css/scss/atoms/_form.scss b/assets/css/scss/atoms/_form.scss index 2450cf26f0..774d358d69 100644 --- a/assets/css/scss/atoms/_form.scss +++ b/assets/css/scss/atoms/_form.scss @@ -29,7 +29,7 @@ .form { &--search, &--inline { - @apply flex-row gap-3 mb-1; + @apply flex-row gap-3; } &--search { @@ -55,7 +55,7 @@ } .field { - @apply mb-4; + @apply mb-5; > small, .help-text { diff --git a/assets/css/scss/atoms/_input_text.scss b/assets/css/scss/atoms/_input_text.scss index b3e1aac7d5..40786f248f 100644 --- a/assets/css/scss/atoms/_input_text.scss +++ b/assets/css/scss/atoms/_input_text.scss @@ -1,20 +1,22 @@ .p-inputtext { - @apply border border-support-3 px-4 py-3 text-body-1 bg-white rounded-lg text-gray-90 transition w-full duration-200 + @apply border border-support-3 px-4 py-2 bg-white rounded-lg text-gray-90 transition w-full duration-200 appearance-none font-sans placeholder:text-support-3 hover:border-primary hover:text-gray-90 hover:outline-0 hover:ring-0 focus:border-primary focus:text-gray-90 focus:outline-0 focus:ring-0; + font-size: 14px; + &.p-invalid.p-component { @apply border-error placeholder:text-error; } &.p-inputtext-sm { - @apply px-2 py-1.5 text-body-2; + @apply px-3 py-1.5 text-body-2; } &.p-inputtext-lg { - @apply py-4; + @apply py-3; } } @@ -62,7 +64,7 @@ } .p-inputnumber-input { - @apply flex-1; + @apply flex-auto; } .p-inputtextarea { diff --git a/assets/css/scss/atoms/_inputgroup.scss b/assets/css/scss/atoms/_inputgroup.scss index 3e38728216..ba81ba6e23 100644 --- a/assets/css/scss/atoms/_inputgroup.scss +++ b/assets/css/scss/atoms/_inputgroup.scss @@ -15,7 +15,7 @@ .p-inputtext, .p-inputwrapper { - @apply flex-1 w-[1%]; + @apply flex-auto w-[1%]; } > .p-component, diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss index 4c18c4c427..a8ebf04387 100755 --- a/assets/css/scss/index.scss +++ b/assets/css/scss/index.scss @@ -7,9 +7,22 @@ //@import 'install'; @layer base { + body { + line-height: normal; + } + hr { @apply text-gray-30 my-6; } + + .p-component { + font-size: 1rem; + font-weight: normal; + + & * { + @apply box-border; + } + } } @include meta.load-css("settings/typography"); diff --git a/assets/vue/components/basecomponents/BaseButton.vue b/assets/vue/components/basecomponents/BaseButton.vue index 3cfbef0672..798a723bbf 100644 --- a/assets/vue/components/basecomponents/BaseButton.vue +++ b/assets/vue/components/basecomponents/BaseButton.vue @@ -95,13 +95,6 @@ const buttonClass = computed(() => { return "p-3 text-tertiary hover:bg-tertiary-gradient/30" } let result = "" - switch (props.size) { - case "normal": - result += "py-2.5 px-4 " - break - case "small": - result += "py-2 px-3.5 " - } let commonDisabled = "disabled:bg-primary-bgdisabled disabled:border disabled:border-primary-borderdisabled disabled:text-fontdisabled disabled:pointer-events-auto disabled:cursor-not-allowed"