mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-18 02:21:47 -05:00
Updated button styles (#21080)
DES-774 - The buttons in the Admin got very diverse over the last couple of years. This PR updates the styles to use outline buttons, white background for better contrast and slightly more rounded corners. Additionally the right click and dropdown menu typography and spacing has also been updated.
This commit is contained in:
Peter Zimon
GitHub
parent
ae8f8f128b
commit
8d54e4bf7a
14 changed files with 124 additions and 118 deletions
ghost/admin/app
|
|
@ -44,15 +44,15 @@
|
|||
@class="gh-btn gh-btn-icon refresh"
|
||||
@successClass="gh-btn gh-btn-icon refresh" />
|
||||
{{#unless this.post.emailOnly}}
|
||||
<button type="button" class="gh-post-list-cta share" {{on "click" this.togglePublishFlowModal}}>
|
||||
{{svg-jar "share" title="Share post"}}<span>Share</span>
|
||||
<button type="button" class="gh-btn gh-btn-icon share" {{on "click" this.togglePublishFlowModal}}>
|
||||
<span>{{svg-jar "share" title="Share post"}} Share</span>
|
||||
</button>
|
||||
{{/unless}}
|
||||
|
||||
<span class="dropdown">
|
||||
<GhDropdownButton
|
||||
@dropdownName="analytics-actions-menu"
|
||||
@classNames="gh-post-list-cta gh-btn-icon icon-only gh-btn-action-icon"
|
||||
@classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
|
||||
@title="Analytics Actions"
|
||||
data-test-button="analytics-actions"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -259,7 +259,7 @@ input:focus,
|
|||
}
|
||||
|
||||
.gh-btn:not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-primary):not(.gh-btn-black):not(.gh-btn-text):not(.gh-btn-accent):not(.gh-btn-link):not(.gh-editor-preview-trigger) {
|
||||
background: var(--lightgrey);
|
||||
border: 1px solid var(--lightgrey);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
|
|
@ -663,6 +663,17 @@ input:focus,
|
|||
background: var(--dark-main-bg-color);
|
||||
}
|
||||
|
||||
.gh-posts-list-item-group,
|
||||
.gh-list-scrolling tbody .gh-list-data,
|
||||
.gh-list-scrolling thead th {
|
||||
border-color: var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-list-scrolling thead th:first-child::before,
|
||||
.gh-list-scrolling tbody .gh-list-data:first-child::before {
|
||||
background: var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-posts-list-item:hover,
|
||||
.ember-power-select-group .ember-power-select-option[aria-current=true],
|
||||
.settings-tag .tag-edit-button.active,
|
||||
|
|
@ -841,7 +852,6 @@ input:focus,
|
|||
}
|
||||
|
||||
.gh-post-list-cta {
|
||||
background: #26282b;
|
||||
color: #ffffff;
|
||||
border-color: #33373d;
|
||||
}
|
||||
|
|
@ -871,6 +881,10 @@ input:focus,
|
|||
}
|
||||
|
||||
/* Members */
|
||||
.members-header .view-actions input.gh-members-list-searchfield {
|
||||
border-color: var(--lightgrey)
|
||||
}
|
||||
|
||||
.gh-members-help-card,
|
||||
.gh-offers-help-card {
|
||||
background: var(--dark-main-bg-color);
|
||||
|
|
@ -1081,6 +1095,13 @@ kbd {
|
|||
|
||||
/* Dashboard */
|
||||
|
||||
.gh-dashboard-box.is-secondary, .gh-dashboard-resource-box,
|
||||
.gh-main-section-content.grey,
|
||||
.gh-expandable,
|
||||
.gh-expandable-content {
|
||||
background: #1C1E22;
|
||||
}
|
||||
|
||||
.gh-dashboard .gh-dashboard-anchor .gh-dashboard-stats {
|
||||
background: transparent;
|
||||
border-top-color: #2b2d31;
|
||||
|
|
@ -1465,4 +1486,10 @@ Publish flow: Share modal */
|
|||
|
||||
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads) svg path {
|
||||
fill: var(--darkgrey);
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------- */
|
||||
.gh-contentfilter-menu-trigger.bordered {
|
||||
border-color: var(--lightgrey);
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
left: 0;
|
||||
float: left;
|
||||
margin: 2px 0 0;
|
||||
padding: 6px 0;
|
||||
padding: 4px 0;
|
||||
min-width: 200px;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
|
|
@ -61,15 +61,17 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
clear: both;
|
||||
padding: 6px 14px;
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
margin: 0 4px;
|
||||
width: calc(100% - 8px);
|
||||
color: var(--darkgrey);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
transition: none;
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.dropdown-menu li > button:disabled {
|
||||
|
|
@ -370,14 +372,9 @@ Post context menu
|
|||
transform: translate(-100%, -100%);
|
||||
}
|
||||
|
||||
.gh-posts-context-menu li > button {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.gh-posts-context-menu li > button span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.gh-posts-context-menu li > button span svg,
|
||||
|
|
@ -401,5 +398,5 @@ Post context menu
|
|||
margin: 5px 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--whitegrey-d1);
|
||||
background-color: var(--whitegrey);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@
|
|||
padding: 32px;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border-radius: 3px;
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
|
||||
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
|
||||
|
|
|
|||
|
|
@ -21,10 +21,9 @@
|
|||
}
|
||||
|
||||
.ember-power-select-trigger:not(.ember-power-select-multiple-trigger):not(.gh-preview-newsletter-trigger) svg {
|
||||
height: 4px;
|
||||
width: 6.11px;
|
||||
height: 6px;
|
||||
margin-left: 2px;
|
||||
margin-top: -2px;
|
||||
margin-right: -4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1026,7 +1026,7 @@
|
|||
.modal-post-success .modal-footer .gh-btn {
|
||||
min-width: 64px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -1058,6 +1058,7 @@
|
|||
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) {
|
||||
width: 56px;
|
||||
background: var(--whitegrey-l1);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .copy-link, .copy-preview-link):hover {
|
||||
|
|
|
|||
|
|
@ -44,35 +44,47 @@
|
|||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.gh-contentfilter-menu-trigger,
|
||||
.gh-contentfilter-menu-trigger:focus,
|
||||
.gh-contentfilter-menu-trigger--active {
|
||||
.gh-contentfilter-menu-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: var(--white);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 400;
|
||||
color: var(--darkgrey);
|
||||
letter-spacing: 0.2px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
height: 34px;
|
||||
padding: 6px 12px 6px;
|
||||
margin-right: 6px;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 2px !important;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px !important;
|
||||
white-space: nowrap;
|
||||
transition: all 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gh-contentfilter-menu-trigger.ember-power-select-trigger[aria-expanded="true"] {
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.gh-contentfilter-menu-trigger:focus,
|
||||
.gh-contentfilter-menu-trigger--active {
|
||||
border: 1px solid transparent;
|
||||
background: var(--whitegrey-l1);
|
||||
}
|
||||
|
||||
.gh-contentfilter-menu-trigger.bordered {
|
||||
border: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-contentfilter-menu-trigger:hover {
|
||||
cursor: pointer;
|
||||
color: var(--darkgrey);
|
||||
background: var(--whitegrey);
|
||||
background: var(--whitegrey-l1);
|
||||
}
|
||||
|
||||
.gh-contentfilter-selected .gh-contentfilter-menu-trigger,
|
||||
.gh-contentfilter-selected .gh-contentfilter-menu-trigger:hover {
|
||||
font-weight: 600;
|
||||
background: var(--whitegrey-l1);
|
||||
border: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-contentfilter-selected:not(.no-highlight) .gh-contentfilter-menu-trigger,
|
||||
|
|
@ -90,6 +102,10 @@
|
|||
stroke: var(--black);
|
||||
}
|
||||
|
||||
.gh-btn-save-view {
|
||||
border: 1px solid var(--whitegrey) !important;
|
||||
}
|
||||
|
||||
.gh-btn-save-view svg {
|
||||
margin-top: 3px !important;
|
||||
}
|
||||
|
|
@ -102,7 +118,7 @@
|
|||
.gh-contentfilter-menu-dropdown {
|
||||
width: 180px;
|
||||
margin-top: 6px;
|
||||
padding: 6px 0;
|
||||
padding: 4px 0;
|
||||
border: none !important;
|
||||
font-size: 1.35rem;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 7px 20px -5px rgba(0,0,0,.15);
|
||||
|
|
@ -120,6 +136,10 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 7px 10px;
|
||||
margin: 0 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.gh-contentfilter-sort .gh-contentfilter-menu-trigger {
|
||||
|
|
@ -142,7 +162,7 @@
|
|||
height: 33px;
|
||||
margin: 0 0 0 6px;
|
||||
line-height: 33px;
|
||||
background: color-mod(var(--whitegrey-l1) l(-3%));
|
||||
border: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -306,14 +326,11 @@
|
|||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.gh-post-list-button {
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
.gh-list-data.gh-post-list-metrics,
|
||||
.gh-list-data.gh-post-list-button {
|
||||
vertical-align: top;
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.gh-list .gh-content-entry-title {
|
||||
|
|
@ -1460,10 +1477,6 @@
|
|||
padding: 0 0 0 1px;
|
||||
}
|
||||
|
||||
.gh-post-list-button {
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
.gh-post-list-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1476,19 +1489,18 @@
|
|||
border-radius: var(--border-radius);
|
||||
transition: all .2s ease;
|
||||
white-space: nowrap;
|
||||
height: 38px;
|
||||
height: 36px;
|
||||
overflow: hidden;
|
||||
transition: all .1s linear;
|
||||
}
|
||||
|
||||
.gh-post-list-cta:hover {
|
||||
border-color: var(--lightgrey-l2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.gh-list-data .gh-post-list-cta {
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
width: 52px;
|
||||
}
|
||||
|
||||
.gh-post-analytics-header .gh-post-list-cta.edit {
|
||||
|
|
@ -1498,17 +1510,14 @@
|
|||
|
||||
.gh-post-analytics-header .share svg {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.gh-post-analytics-header .gh-btn.refresh {
|
||||
border: 1px solid var(--whitegrey-d1);
|
||||
background: var(--white);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
color: var(--darkgrey);
|
||||
stroke: var(--darkgrey);
|
||||
}
|
||||
|
||||
.gh-post-analytics-header .gh-btn.refresh:hover {
|
||||
border-color: var(--lightgrey-l2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
.gh-post-analytics-header .gh-btn-action-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gh-post-analytics-header .gh-btn.refresh svg path {
|
||||
|
|
@ -1519,23 +1528,13 @@
|
|||
border-color: var(--whitegrey-d2);
|
||||
}
|
||||
|
||||
.gh-post-list-cta.stats.is-hovered {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.gh-post-list-cta.stats.is-hovered:hover {
|
||||
border-color: var(--lightgrey-l2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.gh-post-list-cta.edit.is-hovered {
|
||||
color: var(--pink);
|
||||
}
|
||||
|
||||
.gh-post-list-cta.edit.is-hovered:hover,
|
||||
.gh-post-list-cta.edit:not(.is-hovered):hover {
|
||||
border-color: var(--lightgrey-l2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.gh-post-list-cta > svg {
|
||||
|
|
@ -1562,17 +1561,6 @@ span.dropdown .gh-post-list-cta > span {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-post-list-cta.edit.is-hovered > *,
|
||||
.gh-post-list-cta.edit.is-hovered:hover > *,
|
||||
.gh-post-list-cta.edit:not(.is-hovered):hover > * {
|
||||
color: var(--pink-d1);
|
||||
}
|
||||
|
||||
.gh-post-list-cta.stats.is-hovered > *,
|
||||
.gh-post-list-cta.stats.is-hovered:hover > * {
|
||||
color: var(--green-d1);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.gh-post-analytics-box.resources {
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -344,12 +344,6 @@ Dashboard Layout */
|
|||
}
|
||||
|
||||
.gh-dashboard-select .ember-power-select-selected-item {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.1px;
|
||||
line-height: 1em;
|
||||
padding: 0 0 10px;
|
||||
color: var(--middarkgrey);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -2925,7 +2919,7 @@ Onboarding checklist */
|
|||
.gh-onboarding-item-content {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
|
||||
.gh-onboarding-item--next {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
|
@ -3155,7 +3149,7 @@ Share publication modal */
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gh-share-links li {
|
||||
.gh-share-links li {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--darkgrey);
|
||||
|
|
@ -3169,7 +3163,7 @@ Share publication modal */
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-share-links li a {
|
||||
.gh-share-links li a {
|
||||
display: block;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
|
|
@ -3226,7 +3220,7 @@ span.gh-tip {
|
|||
display: block;
|
||||
}
|
||||
|
||||
span.gh-tip a {
|
||||
span.gh-tip a {
|
||||
text-decoration: underline;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -331,6 +331,7 @@
|
|||
|
||||
.gh-btn-editor {
|
||||
background: var(--white) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.gh-btn-editor:not(.gh-publish-trigger) span {
|
||||
|
|
@ -338,11 +339,11 @@
|
|||
}
|
||||
|
||||
.gh-btn-editor:hover {
|
||||
background: var(--whitegrey) !important;
|
||||
background: var(--whitegrey-l1) !important;
|
||||
}
|
||||
|
||||
.gh-btn-editor.active {
|
||||
background: var(--whitegrey) !important;
|
||||
background: var(--whitegrey-l1) !important;
|
||||
}
|
||||
|
||||
.gh-btn-editor.green span {
|
||||
|
|
@ -437,7 +438,7 @@
|
|||
bottom: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -448,7 +449,7 @@
|
|||
|
||||
.gh-editor-feedback-dropdown {
|
||||
min-width: 400px;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 20px -3px rgba(0, 0, 0, .2);
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
|
|
@ -878,7 +879,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
|
|||
line-height: 34px;
|
||||
white-space: nowrap;
|
||||
background: var(--white);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all 0.25s ease;
|
||||
transition-property: color, border-color, background, width, height, box-shadow;
|
||||
}
|
||||
|
|
@ -921,7 +922,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
|
|||
letter-spacing: .2px;
|
||||
line-height: 34px;
|
||||
background: var(--white);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
|
|
|||
|
|
@ -1616,9 +1616,7 @@
|
|||
}
|
||||
|
||||
.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-link) {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: color-mod(var(--whitegrey-l1) l(-3%));
|
||||
}
|
||||
|
||||
.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-link):hover {
|
||||
|
|
|
|||
|
|
@ -101,9 +101,10 @@
|
|||
.members-header .view-actions input.gh-members-list-searchfield {
|
||||
min-width: 220px;
|
||||
padding-left: 32px;
|
||||
border: none;
|
||||
background: var(--white);
|
||||
height: 34px;
|
||||
background: var(--whitegrey-l1);
|
||||
border: var(--input-border);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.members-header.grey .view-actions .gh-btn,
|
||||
|
|
@ -121,7 +122,7 @@
|
|||
height: 16px;
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
fill: var(--middarkgrey);
|
||||
fill: var(--midlightgrey);
|
||||
}
|
||||
|
||||
.members-header.black .view-actions input.gh-members-list-searchfield {
|
||||
|
|
|
|||
|
|
@ -3,35 +3,36 @@
|
|||
|
||||
/* Base button style */
|
||||
/* Should only be applied to <a> tags */
|
||||
.gh-btn,
|
||||
.gh-btn-grey {
|
||||
.gh-btn {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
background: var(--whitegrey);
|
||||
border: 1px solid var(--whitegrey-d1);
|
||||
color: var(--darkgrey);
|
||||
text-decoration: none !important;
|
||||
user-select: none;
|
||||
fill: var(--white);
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all 0.2s ease;
|
||||
transition-property: color, border-color, background, width, height, box-shadow;
|
||||
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
.gh-btn.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ALL buttons must have a span for content */
|
||||
.gh-btn span,
|
||||
.gh-btn-grey span {
|
||||
.gh-btn span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0 14px;
|
||||
height: 34px;
|
||||
font-size: 1.35rem;
|
||||
font-size: 1.3rem;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2px;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -45,10 +46,8 @@
|
|||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
.gh-btn:hover,
|
||||
.gh-btn-grey:hover {
|
||||
color: var(--darkgrey);
|
||||
background: var(--whitegrey-d1);
|
||||
.gh-btn:hover {
|
||||
background: var(--whitegrey-l1);
|
||||
}
|
||||
|
||||
.gh-btn svg {
|
||||
|
|
@ -76,7 +75,7 @@ fieldset[disabled] .gh-btn {
|
|||
.gh-btn-black {
|
||||
color: var(--white);
|
||||
background: var(--black);
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gh-btn-primary:hover,
|
||||
|
|
@ -93,18 +92,20 @@ fieldset[disabled] .gh-btn {
|
|||
color: #fff;
|
||||
fill: #fff;
|
||||
background: var(--blue);
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gh-btn-blue:hover {
|
||||
color: #fff !important;
|
||||
background: color-mod(var(--blue) l(-4%)) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-blue:active,
|
||||
.gh-btn-blue:focus {
|
||||
background: color-mod(var(--blue) l(-7%)) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Green button
|
||||
|
|
@ -115,7 +116,6 @@ fieldset[disabled] .gh-btn {
|
|||
color: #fff;
|
||||
fill: #fff;
|
||||
background: var(--green);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-green:hover {
|
||||
|
|
@ -139,7 +139,7 @@ fieldset[disabled] .gh-btn {
|
|||
fill: #fff;
|
||||
box-shadow: none;
|
||||
background: var(--red);
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gh-btn-red:hover {
|
||||
|
|
@ -263,7 +263,7 @@ fieldset[disabled] .gh-btn {
|
|||
|
||||
.gh-btn:not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-red) svg.gh-icon-spinner rect {
|
||||
fill: color-mod(var(--midgrey) l(-7%));
|
||||
}
|
||||
}
|
||||
|
||||
.gh-btn-icon-right svg,
|
||||
svg.gh-btn-icon-right {
|
||||
|
|
@ -418,7 +418,7 @@ Usage: CTA buttons grouped together horizontally.
|
|||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--whitegrey-l1);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--border-radius);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
|
@ -437,7 +437,7 @@ Usage: CTA buttons grouped together horizontally.
|
|||
border-radius: 0;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 3px;
|
||||
border-radius: calc(var(--border-radius) - 1px);
|
||||
background: transparent !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@
|
|||
--main-layout-section-vpadding: 3vw;
|
||||
|
||||
/* Style values */
|
||||
--border-radius: 3px;
|
||||
--border-radius: 5px;
|
||||
--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
--font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
|
||||
/* Inputs */
|
||||
--input-bg-color: var(--white);
|
||||
--input-border-color: var(--whitegrey-d2);
|
||||
--input-border-color: var(--whitegrey-d1);
|
||||
--input-border: var(--input-border-color) 1px solid;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
@searchEnabled={{false}}
|
||||
@onChange={{this.onDaysChange}}
|
||||
@triggerComponent={{component "gh-power-select/trigger"}}
|
||||
@triggerClass="gh-contentfilter-menu-trigger"
|
||||
@triggerClass="gh-contentfilter-menu-trigger bordered"
|
||||
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
|
||||
@matchTriggerWidth={{false}}
|
||||
@horizontalPosition="right"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue