feat: ✨ refactor form components and improve styling consistency
This commit is contained in:
parent
93c89fd96a
commit
0587a7791e
@ -1,6 +1,8 @@
|
||||
@mixin avatar {
|
||||
img.ui.avatar, .ui.avatar img, .ui.avatar svg {
|
||||
border-radius: 50% !important;
|
||||
object-fit: fill;
|
||||
&:not(.org-avatar) {
|
||||
border-radius: 50% !important;
|
||||
object-fit: fill;
|
||||
}
|
||||
}
|
||||
}
|
@ -4,6 +4,7 @@
|
||||
|
||||
@mixin forms {
|
||||
@include forms.dropdown-menu;
|
||||
@include forms.menu;
|
||||
@include forms.input;
|
||||
}
|
||||
|
||||
|
@ -41,7 +41,6 @@
|
||||
|
||||
@mixin label-default {
|
||||
.ui.label {
|
||||
// height: var.get('measure/1.25x');
|
||||
border-radius: var.get('measure/1.25x');
|
||||
|
||||
&.scope-left {
|
||||
@ -57,7 +56,5 @@
|
||||
&.green, &.red {
|
||||
color: var(--color-green-contrast) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
@ -53,6 +53,9 @@
|
||||
.ui.button {
|
||||
border-radius: var(--border-radius);
|
||||
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 {
|
||||
border-radius: var(--border-radius);
|
||||
|
@ -29,13 +29,18 @@
|
||||
border-color: var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
border-radius: var(--border-radius);
|
||||
line-height: normal;
|
||||
line-height: 20px;
|
||||
min-height: auto;
|
||||
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') {
|
||||
border-radius: var(--border-radius);
|
||||
// border-radius: var(--border-radius);
|
||||
border-color: var(--color-input-border);
|
||||
color: var(--color-input-text)
|
||||
}
|
||||
@ -58,6 +63,12 @@
|
||||
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:hover,
|
||||
.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 {
|
||||
border-left-color: var(--color-input-border);
|
||||
}
|
||||
|
||||
.ui.form .field>label {
|
||||
margin: 0 0 var.get('measure/.375x');
|
||||
font-size: var.get('font-size/md');
|
||||
|
@ -90,12 +90,6 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// <div class="item-secondary-info">
|
||||
// <div>
|
||||
// <small>Breaking change that won't be backward compatible</small>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
.item-secondary-info {
|
||||
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';
|
@ -96,5 +96,9 @@
|
||||
#readme {
|
||||
|
||||
}
|
||||
|
||||
.repository-summary .sub-menu .item {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user