mirror of
https://github.com/Snigdha-OS/documentation.git
synced 2025-09-12 20:04:57 +02:00
131 lines
3.4 KiB
Plaintext
131 lines
3.4 KiB
Plaintext
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
:root {
|
|
--ifm-button-background-color: inherit;
|
|
--ifm-button-border-color: var(--ifm-button-background-color);
|
|
--ifm-button-border-width: var(--ifm-global-border-width);
|
|
--ifm-button-color: var(--ifm-font-color-base-inverse);
|
|
--ifm-button-font-weight: var(--ifm-font-weight-bold);
|
|
--ifm-button-padding-horizontal: 1.5rem;
|
|
--ifm-button-padding-vertical: 0.375rem;
|
|
--ifm-button-size-multiplier: 1;
|
|
--ifm-button-transition-duration: var(--ifm-transition-fast);
|
|
--ifm-button-border-radius: calc(
|
|
var(--ifm-global-radius) * var(--ifm-button-size-multiplier)
|
|
);
|
|
}
|
|
|
|
.button {
|
|
background-color: var(--ifm-button-background-color);
|
|
border: var(--ifm-button-border-width) solid var(--ifm-button-border-color);
|
|
border-radius: var(--ifm-button-border-radius);
|
|
color: var(--ifm-button-color);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
|
|
font-weight: var(--ifm-button-font-weight);
|
|
line-height: 1.5;
|
|
padding: calc(
|
|
var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier)
|
|
)
|
|
calc(
|
|
var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier)
|
|
);
|
|
text-align: center;
|
|
user-select: none;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
@mixin transition color background border-color,
|
|
var(--ifm-button-transition-duration), var(--ifm-transition-timing-default);
|
|
|
|
&:hover {
|
|
color: var(--ifm-button-color); /* Override for button links. */
|
|
text-decoration: none;
|
|
}
|
|
|
|
&--outline {
|
|
--ifm-button-background-color: transparent;
|
|
--ifm-button-color: var(--ifm-button-border-color);
|
|
|
|
&:hover {
|
|
--ifm-button-background-color: var(--ifm-button-border-color);
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&^&--active {
|
|
--ifm-button-color: var(--ifm-font-color-base-inverse);
|
|
}
|
|
}
|
|
|
|
&--link {
|
|
--ifm-button-background-color: transparent;
|
|
--ifm-button-border-color: transparent;
|
|
|
|
color: var(--ifm-link-color);
|
|
/* autoprefixer: ignore next */
|
|
text-decoration: var(--ifm-link-decoration);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&^&--active {
|
|
color: var(--ifm-link-hover-color);
|
|
/* autoprefixer: ignore next */
|
|
text-decoration: var(--ifm-link-hover-decoration);
|
|
}
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled,
|
|
&[disabled] {
|
|
opacity: 0.65;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&--sm {
|
|
--ifm-button-size-multiplier: 0.8;
|
|
}
|
|
|
|
&--lg {
|
|
--ifm-button-size-multiplier: 1.35;
|
|
}
|
|
|
|
&--block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
&&--secondary {
|
|
color: var(--ifm-color-gray-900);
|
|
|
|
&.button--outline:not(.button--active):not(:hover) {
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
}
|
|
|
|
@each $color in (primary, secondary, success, info, warning, danger) {
|
|
:where(&--$(color)) {
|
|
--ifm-button-background-color: var(--ifm-color-$(color));
|
|
--ifm-button-border-color: var(--ifm-color-$(color));
|
|
|
|
&:not(^&--outline):hover {
|
|
--ifm-button-background-color: var(--ifm-color-$(color)-dark);
|
|
--ifm-button-border-color: var(--ifm-color-$(color)-dark);
|
|
}
|
|
}
|
|
|
|
&--$(color) {
|
|
&:active,
|
|
&^&--active {
|
|
--ifm-button-background-color: var(--ifm-color-$(color)-darker);
|
|
--ifm-button-border-color: var(--ifm-color-$(color)-darker);
|
|
}
|
|
}
|
|
}
|
|
}
|