feat: ✨ refactor form components and improve styling consistency
This commit is contained in:
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 {
|
||||||
|
&:not(.org-avatar) {
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
object-fit: fill;
|
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');
|
||||||
|
@ -91,12 +91,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// <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%;
|
||||||
padding: 0 0 0 var.get('measure/.5x');
|
padding: 0 0 0 var.get('measure/.5x');
|
||||||
@ -178,3 +172,34 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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…
x
Reference in New Issue
Block a user