mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
button: IE color fallback #240
This commit is contained in:
parent
e661a95828
commit
74e908ecfa
2 changed files with 119 additions and 8 deletions
|
@ -5,7 +5,9 @@ title = "Button"
|
|||
|
||||
The `button` shortcode displays a clickable button with adjustable color, title and icon.
|
||||
|
||||
{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" icon="download" icon-position="right" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
|
@ -85,7 +85,7 @@
|
|||
}
|
||||
|
||||
div.box {
|
||||
background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
|
||||
background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-NEUTRAL-color) */
|
||||
}
|
||||
|
||||
div.box > .box-label {
|
||||
|
@ -162,7 +162,7 @@
|
|||
}
|
||||
|
||||
div.box.grey {
|
||||
background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
|
||||
background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-GREY-color) */
|
||||
}
|
||||
|
||||
div.box.grey > .box-content {
|
||||
|
@ -277,14 +277,123 @@
|
|||
background-color: #ffffff; /* var(--MAIN-BG-color) */
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
.btn {
|
||||
background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
|
||||
}
|
||||
|
||||
.btn a {
|
||||
border-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
|
||||
color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
|
||||
}
|
||||
|
||||
.btn a:hover,
|
||||
.btn a:focus,
|
||||
.btn a:active {
|
||||
background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
|
||||
color: rgba( 16, 16, 16, 1 ); /* var(--BOX-NEUTRAL-TEXT-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.info {
|
||||
background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-INFO-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.info a {
|
||||
border-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-INFO-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.note {
|
||||
background-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-NOTE-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.note a {
|
||||
border-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-NOTE-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.tip {
|
||||
background-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-TIP-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.tip a {
|
||||
border-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-TIP-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.warning {
|
||||
background-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-WARNING-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.warning a {
|
||||
border-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-WARNING-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.primary {
|
||||
background-color: #7dc903; /* var(--PRIMARY-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.primary a {
|
||||
border-color: #7dc903; /* var(--PRIMARY-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.secondary {
|
||||
background-color: #486ac9; /* var(--SECONDARY-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.secondary a {
|
||||
border-color: #486ac9; /* var(--SECONDARY-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.blue {
|
||||
background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.blue a {
|
||||
border-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.green {
|
||||
background-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-GREEN-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.green a {
|
||||
border-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-GREEN-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.grey {
|
||||
background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-GREY-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.grey a {
|
||||
border-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-GREY-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.orange {
|
||||
background-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-ORANGE-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.orange a {
|
||||
border-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-ORANGE-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.red {
|
||||
background-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-RED-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.red a {
|
||||
border-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-RED-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.transparent {
|
||||
background-color: transparent;
|
||||
color: #101010; /* var(--MAIN-TEXT-color) */
|
||||
}
|
||||
|
||||
.btn-default:hover,
|
||||
.btn-default:focus,
|
||||
.btn-default:active {
|
||||
color: #ffffff;/* var(--MAIN-BG-color) */
|
||||
.btn.cstyle.transparent:hover,
|
||||
.btn.cstyle.transparent:focus,
|
||||
.btn.cstyle.transparent:active {
|
||||
background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
|
||||
}
|
||||
|
||||
.btn.cstyle.transparent a {
|
||||
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
|
||||
}
|
||||
|
||||
#body .tags a.tag-link {
|
||||
|
|
Loading…
Reference in a new issue