[develop | DONE | ADDED] add new 'small' progress-semicircle size and icon-background (without shadow)
This commit is contained in:
parent
43ed7e2679
commit
9171ec2a63
|
@ -3,6 +3,7 @@
|
||||||
@icon-button-xsmall-size: 24px;
|
@icon-button-xsmall-size: 24px;
|
||||||
@icon-bg-background: @global-background;
|
@icon-bg-background: @global-background;
|
||||||
@icon-bg-size: @icon-button-size;
|
@icon-bg-size: @icon-button-size;
|
||||||
|
@icon-bg-size-small: @icon-button-size*0.5;
|
||||||
@icon-bg-size-medium: @icon-button-size*1.5;
|
@icon-bg-size-medium: @icon-button-size*1.5;
|
||||||
@icon-bg-size-large: @icon-button-size*2;
|
@icon-bg-size-large: @icon-button-size*2;
|
||||||
|
|
||||||
|
@ -80,6 +81,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Default circle element for SVGs */
|
/* Default circle element for SVGs */
|
||||||
|
.uk-icon-bg {
|
||||||
|
border-radius: 100px;
|
||||||
|
width: @icon-bg-size;
|
||||||
|
height: @icon-bg-size;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: @icon-bg-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-icon-bg-small {
|
||||||
|
width: @icon-bg-size-small;
|
||||||
|
height: @icon-bg-size-small;
|
||||||
|
}
|
||||||
|
/**/
|
||||||
|
|
||||||
|
/* Default circle element for SVGs with shadow*/
|
||||||
.uk-icon-bg-shadow {
|
.uk-icon-bg-shadow {
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
width: @icon-button-size;
|
width: @icon-button-size;
|
||||||
|
|
|
@ -15,9 +15,11 @@
|
||||||
@progress-circle-background-open-access: conic-gradient(@progress-bar-background-open-access calc(var(--percentage) * 1%), @progress-background-open-access 0);
|
@progress-circle-background-open-access: conic-gradient(@progress-bar-background-open-access calc(var(--percentage) * 1%), @progress-background-open-access 0);
|
||||||
|
|
||||||
@progress-semicircle-size: 120px;
|
@progress-semicircle-size: 120px;
|
||||||
|
@progress-semicircle-size-small: 80px;
|
||||||
@progress-semicircle-color: @global-primary-background;
|
@progress-semicircle-color: @global-primary-background;
|
||||||
@progress-semicircle-text-font-weight: @text-bold-weight;
|
@progress-semicircle-text-font-weight: @text-bold-weight;
|
||||||
@progress-semicircle-text-font-size: @global-large-font-size;
|
@progress-semicircle-text-font-size: @global-large-font-size;
|
||||||
|
@progress-semicircle-text-font-size-small: @global-font-size;
|
||||||
@progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background calc(var(--percentage) * 1% / 2), @progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
|
@progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background calc(var(--percentage) * 1% / 2), @progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
|
||||||
@progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
|
@progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
|
||||||
|
|
||||||
|
@ -110,6 +112,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uk-progress-semicircle-small[percentage] {
|
||||||
|
width: @progress-semicircle-size-small;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
font-size: @progress-semicircle-text-font-size-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@inverse-progress-background: @inverse-global-color;
|
@inverse-progress-background: @inverse-global-color;
|
||||||
|
|
Loading…
Reference in New Issue