feat: refactor form components and improve styling consistency

master
Lucas Colombo 1 month ago
parent 93c89fd96a
commit 0587a7791e

@ -1,6 +1,8 @@
@mixin avatar { @mixin avatar {
img.ui.avatar, .ui.avatar img, .ui.avatar svg { img.ui.avatar, .ui.avatar img, .ui.avatar svg {
border-radius: 50% !important; &:not(.org-avatar) {
object-fit: fill; border-radius: 50% !important;
object-fit: fill;
}
} }
} }

@ -4,6 +4,7 @@
@mixin forms { @mixin forms {
@include forms.dropdown-menu; @include forms.dropdown-menu;
@include forms.menu;
@include forms.input; @include forms.input;
} }

@ -41,7 +41,6 @@
@mixin label-default { @mixin label-default {
.ui.label { .ui.label {
// height: var.get('measure/1.25x');
border-radius: var.get('measure/1.25x'); border-radius: var.get('measure/1.25x');
&.scope-left { &.scope-left {
@ -57,7 +56,5 @@
&.green, &.red { &.green, &.red {
color: var(--color-green-contrast) !important; color: var(--color-green-contrast) !important;
} }
} }
} }

@ -53,6 +53,9 @@
.ui.button { .ui.button {
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: color .1s ease, background-color .1s ease, border-color .1s ease; transition: color .1s ease, background-color .1s ease, border-color .1s ease;
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x');
font-size: var.get('font-size/md') !important;
line-height: 20px;
&.basic { &.basic {
border-radius: var(--border-radius); border-radius: var(--border-radius);

@ -29,13 +29,18 @@
border-color: var(--color-input-border); border-color: var(--color-input-border);
color: var(--color-input-text); color: var(--color-input-text);
border-radius: var(--border-radius); border-radius: var(--border-radius);
line-height: normal; line-height: 20px;
min-height: auto; min-height: auto;
padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x'); padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/.75x');
+.ui.button:last-child {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
} }
@include -all-inputs(':hover') { @include -all-inputs(':hover') {
border-radius: var(--border-radius); // border-radius: var(--border-radius);
border-color: var(--color-input-border); border-color: var(--color-input-border);
color: var(--color-input-text) color: var(--color-input-text)
} }
@ -58,6 +63,12 @@
z-index: 1; z-index: 1;
} }
.ui.action.input>.dropdown:not(:first-child):not(:last-child),
.ui.action.input>.button:not(:first-child):not(:last-child),
.ui.action.input>.buttons:not(:first-child):not(:last-child)>.button {
border-radius: 0 !important;
}
.ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection, .ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection,
.ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection:hover, .ui.action.input:not([class*="left action"])>input:focus+.ui.dropdown.selection:hover,
.ui.action.input:not([class*="left action"])>input:focus+.button, .ui.action.input:not([class*="left action"])>input:focus+.button,
@ -66,6 +77,7 @@
.ui.action.input:not([class*="left action"])>input:focus+i.icon+.button:hover { .ui.action.input:not([class*="left action"])>input:focus+i.icon+.button:hover {
border-left-color: var(--color-input-border); border-left-color: var(--color-input-border);
} }
.ui.form .field>label { .ui.form .field>label {
margin: 0 0 var.get('measure/.375x'); margin: 0 0 var.get('measure/.375x');
font-size: var.get('font-size/md'); font-size: var.get('font-size/md');

@ -90,12 +90,6 @@
visibility: hidden; visibility: hidden;
} }
} }
// <div class="item-secondary-info">
// <div>
// <small>Breaking change that won't be backward compatible</small>
// </div>
// </div>
.item-secondary-info { .item-secondary-info {
flex-basis: 100%; flex-basis: 100%;
@ -177,4 +171,35 @@
} }
} }
} }
}
@mixin menu {
.ui.menu {
border-radius: var(--border-radius);
>.item:first-child {
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
&.compact:not(.secondary) .item:last-child {
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
}
.ui.secondary.menu {
gap: var.get('measure/.25x');
&.vertical {
>.item {
border: none;
margin: 0 0 var.get('measure/.25x') 0;
border-radius: var(--border-radius) !important;
}
}
.dropdown.item.active:hover, a.item.active:hover {
color: var(--color-text);
background: var(--color-hover);
}
}
} }

@ -1,2 +1,2 @@
@forward './dropdown-menu'; @forward './menu';
@forward './input'; @forward './input';

@ -96,5 +96,9 @@
#readme { #readme {
} }
.repository-summary .sub-menu .item {
height: 30px;
}
} }
} }

Loading…
Cancel
Save