This repository has been archived on 2026-07-19. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
espocrm-base/frontend/less/espo/elements/buttons.less
T
2022-07-06 14:03:09 +03:00

196 lines
2.9 KiB
Plaintext

.btn {
border-radius: @button-radius;
}
.btn {
height: @input-height-base;
}
.btn-lg {
height: @input-height-large;
}
.btn-sm {
height: @input-height-small;
}
.btn.btn-link {
height: auto;
}
.panel-heading .btn-sm {
height: auto;
}
.input-group {
.input-group-btn > {
.btn {
height: @input-height-base;
}
}
&.input-group-sm {
.input-group-btn > {
.btn {
height: @input-height-small;
}
}
}
&.input-group-lg {
.input-group-btn > {
.btn {
height: @input-height-large;
}
}
}
.input-group-btn .btn.btn-sm {
height: @input-height-small;
}
}
.btn-icon {
width: 36px;
padding-left: 0;
padding-right: 0;
.fa, .fas {
position: relative;
width: 16px;
text-align: center;
}
.fa-sm {
top: -1px;
}
}
.btn-icon.btn-sm {
.fa-sm {
top: 0;
}
}
.btn-icon.btn-sm {
width: 34px;
.fa, .fas {
font-size: 12px;
width: 12px;
}
}
.btn.btn-xs-wide {
min-width: 50px;
}
.btn.btn-s-wide {
min-width: 80px;
}
.btn.btn-wide {
min-width: 100px;
}
.btn.btn-x-wide {
min-width: 150px;
}
.btn.btn-xx-wide {
min-width: 200px;
}
.btn.btn-icon-wide {
width: 54px;
}
.btn.btn-icon-x-wide {
width: 76px;
}
.btn.btn-icon-xx-wide {
width: 100px;
}
.btn.btn-full-wide {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
.btn-default > .fa,
.btn-default > .far,
.btn-default > .fas {
color: @gray-soft;
}
.btn-default > .fa.text-muted,
.btn-default > .far.text-muted,
.btn-default > .fas.text-muted {
color: @gray-light;
}
.btn-default.disabled > .fa,
.btn-default.disabled > .far,
.btn-default.disabled > .fas {
color: @gray-light;
}
.btn-text {
color: var(--btn-text-color);
border-radius: 0;
.far,
.fas {
color: @gray-soft;
}
&,
&:active,
&.active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover,
&:focus {
color: var(--btn-text-color);
text-decoration: none;
background-color: transparent;
.far,
.fas {
color: var(--btn-text-color);
}
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @gray-light;
text-decoration: none;
}
color: @gray-light;
.far,
.fas {
color: @gray-light;
}
}
&.active {
border-bottom: 1px solid @gray-light;
}
&.btn-text-hoverable {
&:hover,
&:focus {
text-decoration: underline;
}
}
font-weight: 400;
}