Unverified Commit 27cd90ef authored by Lyza Gardner's avatar Lyza Gardner Committed by GitHub

Merge pull request #1505 from hypothesis/factor-out-mixins

Factor out some reusable CSS into mixins
parents 569bc180 4ed4634f
...@@ -87,7 +87,7 @@ function ShareAnnotationsPanel({ analytics, flash }) { ...@@ -87,7 +87,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
onClick={copyShareLink} onClick={copyShareLink}
title="copy share link" title="copy share link"
aria-label="Copy share link" aria-label="Copy share link"
className="btn btn-clean share-annotations-panel__copy-btn" className="share-annotations-panel__copy-btn"
> >
<SvgIcon name="copy" /> <SvgIcon name="copy" />
</button> </button>
...@@ -114,8 +114,8 @@ function ShareAnnotationsPanel({ analytics, flash }) { ...@@ -114,8 +114,8 @@ function ShareAnnotationsPanel({ analytics, flash }) {
<em>Only Me</em>) annotations are only visible to you. <em>Only Me</em>) annotations are only visible to you.
</span> </span>
</p> </p>
<ul className="share-annotations-panel__links"> <ul className="share-annotations-panel-links">
<li className="share-annotations-panel__link"> <li className="share-annotations-panel-links__link">
<a <a
href={`https://twitter.com/intent/tweet?url=${encodedURI}&hashtags=annotated`} href={`https://twitter.com/intent/tweet?url=${encodedURI}&hashtags=annotated`}
title="Tweet share link" title="Tweet share link"
...@@ -123,7 +123,7 @@ function ShareAnnotationsPanel({ analytics, flash }) { ...@@ -123,7 +123,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
> >
<SvgIcon <SvgIcon
name="twitter" name="twitter"
className="share-annotations-panel__icon" className="share-annotations-panel-links__icon"
/> />
</a> </a>
</li> </li>
...@@ -135,7 +135,7 @@ function ShareAnnotationsPanel({ analytics, flash }) { ...@@ -135,7 +135,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
> >
<SvgIcon <SvgIcon
name="facebook" name="facebook"
className="share-annotations-panel__icon" className="share-annotations-panel-links__icon"
/> />
</a> </a>
</li> </li>
...@@ -149,7 +149,7 @@ function ShareAnnotationsPanel({ analytics, flash }) { ...@@ -149,7 +149,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
> >
<SvgIcon <SvgIcon
name="email" name="email"
className="share-annotations-panel__icon" className="share-annotations-panel-links__icon"
/> />
</a> </a>
</li> </li>
......
...@@ -52,10 +52,7 @@ function SidebarPanel({ children, panelName, title, onActiveChanged }) { ...@@ -52,10 +52,7 @@ function SidebarPanel({ children, panelName, title, onActiveChanged }) {
onClick={closePanel} onClick={closePanel}
aria-label="close panel" aria-label="close panel"
> >
<SvgIcon <SvgIcon name="cancel" className="action-button__icon--compact" />
name="cancel"
className="sidebar-panel__close-btn-icon"
/>
Close Close
</button> </button>
</div> </div>
......
...@@ -38,8 +38,11 @@ function VersionInfo({ flash, versionData }) { ...@@ -38,8 +38,11 @@ function VersionInfo({ flash, versionData }) {
<dd className="version-info__value">{versionData.timestamp}</dd> <dd className="version-info__value">{versionData.timestamp}</dd>
</dl> </dl>
<div className="version-info__actions"> <div className="version-info__actions">
<button className="version-info__copy-btn" onClick={copyVersionData}> <button
<SvgIcon name="copy" className="version-info__copy-btn-icon" /> className="version-info__copy-btn action-button"
onClick={copyVersionData}
>
<SvgIcon name="copy" className="action-button__icon" />
Copy version details Copy version details
</button> </button>
</div> </div>
......
@import './focus'; @use "./focus";
@use "../variables" as var;
@mixin reset-native-btn-styles { @mixin reset-native-btn-styles {
@include outline-on-keyboard-focus; @include focus.outline-on-keyboard-focus;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
background-color: transparent; background-color: transparent;
border-style: none; border-style: none;
} }
/**
* A <button> composed of an SVG icon (left) and text (right) with some
* hover transition effects
*/
@mixin action-button($icon-margin: 0 5px) {
@include reset-native-btn-styles;
display: flex;
align-items: center;
padding: 0.5em;
border-radius: 2px;
border: none;
background-color: var.$grey-1;
color: var.$grey-5;
font-weight: 700;
&__icon {
color: var.$grey-5;
margin: $icon-margin;
}
&:hover {
transition: 0.2s ease-out;
background-color: var.$grey-2;
color: var.$grey-6;
}
}
/**
* An action button that is icon-only and displayed to the right of an
* <input> element. Colors are one tick more subtle than `action-button`.
*/
@mixin input-icon-button {
@include action-button;
padding: 10px;
border-radius: 0; // Turn off border-radius to align with <input> edges
border: 1px solid var.$grey-3;
border-left: 0px; // Avoid double border with the <input>
color: var.$grey-4;
&:hover {
background-color: var.$grey-2;
color: var.$grey-5;
}
}
@use "../variables" as var;
/**
* horizontally-oriented collection of linked icons
*/
@mixin footer-links {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 8px;
border-top: 1px solid var.$grey-3;
&__icon {
display: flex;
width: 18px;
height: 18px;
margin: 0 8px;
color: var.$grey-5;
&:hover {
color: var.$grey-6;
}
}
}
@use "buttons";
@use "../variables" as var;
/**
* Base styles for a "panel"-like element, with appropriate
* padding, heading and close-button styles.
*/
@mixin panel {
background-color: var.$body-background;
border: solid 1px var.$grey-3;
border-radius: 2px;
&__header {
display: flex;
flex-direction: row;
align-items: center;
padding: 1em 0;
margin: 0 1em;
border: 1px none var.$grey-3;
border-bottom-style: solid;
}
&__subheader {
width: 100%;
text-align: center;
padding: 1em 0.5em;
border-bottom: 1px solid var.$grey-3;
font-size: 1.25em;
font-weight: 500;
color: var.$grey-5;
}
&__title {
color: var.$brand;
font-size: var.$body2-font-size;
font-weight: 700;
}
&__close-btn {
@include buttons.action-button(0px);
}
&__content {
margin: 1em;
margin-top: 0;
}
}
@use "../../mixins/buttons";
.action-button {
@include buttons.action-button;
&__icon--compact {
margin: 0;
}
}
@use "../../mixins/buttons";
@use "../../mixins/links";
.share-annotations-panel { .share-annotations-panel {
color: $grey-5; color: $grey-5;
...@@ -15,42 +18,20 @@ ...@@ -15,42 +18,20 @@
} }
&__copy-btn { &__copy-btn {
@include outline-on-keyboard-focus; @include buttons.input-icon-button;
padding: 10px;
color: $grey-4;
background: $grey-1;
border: 1px solid $grey-3;
border-radius: 0;
border-left: 0px;
&:hover {
background-color: $grey-2;
color: $grey-5;
}
} }
&__links { &__icon--inline {
display: flex; width: 1em;
flex-direction: row; height: 1em;
justify-content: center;
padding-top: 8px;
border-top: 1px solid $grey-3;
} }
&__icon { .share-annotations-panel-links {
display: flex; @include links.footer-links;
width: 24px;
height: 24px;
margin: 0 8px;
color: $grey-5;
&:hover { &__icon {
color: $grey-6; width: 24px;
height: 24px;
} }
} }
&__icon--inline {
width: 1em;
height: 1em;
}
} }
@use "../../mixins/panel";
.sidebar-panel { .sidebar-panel {
@include panel.panel;
position: relative; position: relative;
background-color: $body-background;
border: solid 1px $grey-3;
border-radius: 2px;
margin-bottom: 0.75em; margin-bottom: 0.75em;
&__header {
display: flex;
flex-direction: row;
align-items: center;
padding: 1em 0;
margin: 0 1em;
border: 1px none $grey-3;
border-bottom-style: solid;
}
&__subheader {
width: 100%;
text-align: center;
padding: 1em 0.5em;
border-bottom: 1px solid $grey-3;
font-size: 1.25em;
font-weight: 500;
color: $grey-5;
}
&__title {
color: $brand;
font-size: $body2-font-size;
font-weight: 700;
}
&__close-btn {
@include outline-on-keyboard-focus;
display: flex;
align-items: center;
border-radius: 2px;
border: none;
padding: 0.5em;
background-color: $grey-1;
color: $grey-5;
font-weight: 700;
&-icon {
color: $grey-5;
}
&:hover {
transition: 0.2s ease-out;
background-color: $grey-2;
color: $grey-6;
}
}
&__content {
margin: 1em;
margin-top: 0;
}
} }
@use "../../mixins/buttons";
.version-info { .version-info {
margin-top: 0.5em; margin-top: 0.5em;
...@@ -24,27 +26,4 @@ ...@@ -24,27 +26,4 @@
justify-content: center; justify-content: center;
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
&__copy-btn {
@include outline-on-keyboard-focus;
display: flex;
align-items: center;
border-radius: 2px;
border: none;
padding: 0.5em;
background-color: $grey-1;
color: $grey-5;
font-weight: 700;
&-icon {
color: $grey-5;
margin: 0 5px;
}
&:hover {
transition: 0.2s ease-out;
background-color: $grey-2;
color: $grey-6;
}
}
} }
...@@ -18,6 +18,7 @@ $base-line-height: 20px; ...@@ -18,6 +18,7 @@ $base-line-height: 20px;
// Components // Components
// ---------- // ----------
@import './components/action-button';
@import './components/annotation'; @import './components/annotation';
@import './components/annotation-document-info'; @import './components/annotation-document-info';
@import './components/annotation-header'; @import './components/annotation-header';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment