Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
3435f32e
Commit
3435f32e
authored
Apr 16, 2021
by
Lyza Danger Gardner
Committed by
Lyza Gardner
Apr 19, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Remove buttons SASS
Instead, use SASS from `frontend-shared` package
parent
226f6155
Changes
12
Hide whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
12 additions
and
433 deletions
+12
-433
AdderToolbar.scss
src/styles/annotator/components/AdderToolbar.scss
+2
-1
Toolbar.scss
src/styles/annotator/components/Toolbar.scss
+2
-2
_index.scss
src/styles/shared/_index.scss
+0
-1
_base.scss
src/styles/shared/components/buttons/_base.scss
+0
-109
_config.scss
src/styles/shared/components/buttons/_config.scss
+0
-149
_index.scss
src/styles/shared/components/buttons/_index.scss
+0
-2
_mixins.scss
src/styles/shared/components/buttons/_mixins.scss
+0
-149
_styles.scss
src/styles/shared/components/buttons/_styles.scss
+0
-16
buttons.scss
src/styles/sidebar/buttons.scss
+3
-2
SelectionTabs.scss
src/styles/sidebar/components/SelectionTabs.scss
+1
-1
sidebar.scss
src/styles/sidebar/sidebar.scss
+1
-1
_shared.scss
src/styles/ui-playground/_shared.scss
+3
-0
No files found.
src/styles/annotator/components/AdderToolbar.scss
View file @
3435f32e
@use
"../../shared/components/buttons"
;
@use
'@hypothesis/frontend-shared/styles/components/buttons'
;
@use
"../mixins/layout"
;
@use
"../mixins/layout"
;
@use
"../mixins/molecules"
;
@use
"../mixins/molecules"
;
@use
"../mixins/utils"
;
@use
"../mixins/utils"
;
...
...
src/styles/annotator/components/Toolbar.scss
View file @
3435f32e
@use
"sass:color"
;
@use
"sass:color"
;
@use
'
../variables'
as
var
;
@use
'
@hypothesis/frontend-shared/styles/components/buttons'
as
shared-buttons
;
@use
'../
../shared/components/buttons'
as
shared-buttons
;
@use
'../
variables'
as
var
;
@use
'../mixins/buttons'
;
@use
'../mixins/buttons'
;
@use
'../mixins/layout'
;
@use
'../mixins/layout'
;
...
...
src/styles/shared/_index.scss
View file @
3435f32e
@use
'./components/buttons/styles'
;
@use
'./components/Dialog'
;
@use
'./components/Dialog'
;
src/styles/shared/components/buttons/_base.scss
deleted
100644 → 0
View file @
226f6155
@use
"sass:map"
;
// Set colors for a button
@mixin
_colors
(
$colormap
)
{
color
:
map
.
get
(
$colormap
,
'foreground'
);
background-color
:
map
.
get
(
$colormap
,
'background'
);
&
:disabled
{
color
:
map
.
get
(
$colormap
,
'disabled-foreground'
);
}
}
// Set hover colors and transition for a button
@mixin
_hover-state
(
$colormap
)
{
&
:hover:not
([
disabled
])
{
color
:
map
.
get
(
$colormap
,
'hover-foreground'
);
background-color
:
map
.
get
(
$colormap
,
'hover-background'
);
}
transition
:
color
0
.2s
ease-out
,
background-color
0
.2s
ease-out
,
opacity
0
.2s
ease-out
;
}
// Set active state colors for a button
@mixin
_active-state
(
$colormap
)
{
&
[
aria-expanded
=
'true'
],
&
[
aria-pressed
=
'true'
]
{
color
:
map
.
get
(
$colormap
,
'active-foreground'
);
@if
map
.
get
(
$colormap
,
'active-background'
)
{
background-color
:
map
.
get
(
$colormap
,
'active-background'
);
}
&
:hover:not
([
disabled
])
{
color
:
map
.
get
(
$colormap
,
'hover-foreground'
);
}
&
:focus:not
([
disabled
])
{
color
:
map
.
get
(
$colormap
,
'active-foreground'
);
}
}
}
// Variant mixin: may be be used by variants (BEM modifier classes)
@mixin
button--variant
(
$options
)
{
@include
_colors
(
map
.
get
(
$options
,
'colormap'
));
@if
map
.
get
(
$options
,
'withStates'
)
{
@include
_active-state
(
map
.
get
(
$options
,
'colormap'
));
@include
_hover-state
(
map
.
get
(
$options
,
'colormap'
));
}
@content
;
}
// Base mixin for buttons.
@mixin
button
(
$options
)
{
@include
_colors
(
map
.
get
(
$options
,
'colormap'
));
@if
map
.
get
(
$options
,
'withStates'
)
{
@include
_active-state
(
map
.
get
(
$options
,
'colormap'
));
@include
_hover-state
(
map
.
get
(
$options
,
'colormap'
));
}
border-radius
:
map
.
get
(
$options
,
'border-radius'
);
border
:
none
;
padding
:
0
.5em
;
&
--small
{
padding
:
0
.25em
;
}
&
--large
{
padding
:
0
.75em
;
}
font-size
:
1em
;
font-weight
:
700
;
white-space
:
nowrap
;
// Keep multi-word button labels from wrapping
@if
map
.
get
(
$options
,
'inline'
)
{
display
:
inline
;
}
@else
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
@if
map
.
get
(
$options
,
'withLayout'
)
{
&
--icon-left
svg
{
margin-right
:
map
.
get
(
$options
,
'margin'
);
}
&
--icon-right
svg
{
margin-left
:
map
.
get
(
$options
,
'margin'
);
}
// When a button has "layout", that indicates it has some textual content:
// Size text to the contextual 1em, and adjust the icon to look balanced.
// H frontend app buttons tend to apply an icon:text ratio of ~1.25:1
svg
{
width
:
1
.25em
;
height
:
1
.25em
;
}
}
@else
{
// In the case where an icon is the only content in a <button> element,
// size the icon based on contextual font-size. i.e. the icon IS
// the content
svg
{
width
:
1em
;
height
:
1em
;
}
}
}
src/styles/shared/components/buttons/_config.scss
deleted
100644 → 0
View file @
226f6155
@use
'sass:map'
;
@use
'../../variables'
as
var
;
// Map variables to local tokens
$touch-target-size
:
var
.
$touch-target-size
!
default
;
$color-g1
:
var
.
$color-grey-1
!
default
;
$color-g2
:
var
.
$color-grey-2
!
default
;
$color-g3
:
var
.
$color-grey-3
!
default
;
$color-g4
:
var
.
$color-grey-4
!
default
;
$color-g6
:
var
.
$color-grey-6
!
default
;
$color-g7
:
var
.
$color-grey-7
!
default
;
$color-gsemi
:
var
.
$color-grey-semi
!
default
;
$color-gmid
:
var
.
$color-grey-mid
!
default
;
$color-brand
:
var
.
$color-brand
!
default
;
$color-link-hover
:
var
.
$color-link-hover
!
default
;
// Colors for labeled buttons
$LabeledButton-colors
:
(
'foreground'
:
$color-gmid
,
'background'
:
$color-g1
,
'hover-foreground'
:
$color-g7
,
'hover-background'
:
$color-g2
,
'active-foreground'
:
$color-g7
,
'disabled-foreground'
:
$color-gmid
,
);
// Variant currently unused
$LabeledButton-colors--light
:
$LabeledButton-colors
;
$LabeledButton-colors--primary
:
(
'foreground'
:
$color-g1
,
'background'
:
$color-gmid
,
'hover-foreground'
:
$color-g1
,
'hover-background'
:
$color-g6
,
'active-foreground'
:
$color-g1
,
'disabled-foreground'
:
$color-g4
,
);
$LabeledButton-colors--dark
:
(
'foreground'
:
$color-gmid
,
'background'
:
transparent
,
'hover-foreground'
:
$color-g7
,
'hover-background'
:
$color-g3
,
'active-foreground'
:
$color-gmid
,
'active-background'
:
$color-g3
,
'disabled-foreground'
:
$color-gmid
,
);
// Colors for icon-only buttons
$IconButton-colors
:
(
'foreground'
:
$color-gmid
,
'background'
:
transparent
,
'hover-foreground'
:
$color-g7
,
'hover-background'
:
transparent
,
'active-foreground'
:
$color-brand
,
'disabled-foreground'
:
$color-gmid
,
);
$IconButton-colors--light
:
(
'foreground'
:
$color-gsemi
,
'background'
:
transparent
,
'hover-foreground'
:
$color-g6
,
'hover-background'
:
transparent
,
'active-foreground'
:
$color-gsemi
,
'disabled-foreground'
:
$color-gsemi
,
);
$IconButton-colors--primary
:
(
'foreground'
:
$color-brand
,
'background'
:
transparent
,
'hover-foreground'
:
$color-brand
,
'hover-background'
:
transparent
,
'active-foreground'
:
$color-brand
,
'disabled-foreground'
:
$color-gmid
,
);
// Variant currently unused
$IconButton-colors--dark
:
$IconButton-colors
;
// Colors for buttons styled as "links"
$LinkButton-colors
:
(
'foreground'
:
$color-gmid
,
'background'
:
transparent
,
'hover-foreground'
:
$color-link-hover
,
'hover-background'
:
transparent
,
'active-foreground'
:
$color-g7
,
'disabled-foreground'
:
$color-gmid
,
);
// Variant currently unused
$LinkButton-colors--light
:
$LinkButton-colors
;
$LinkButton-colors--primary
:
(
'foreground'
:
$color-brand
,
'background'
:
transparent
,
'hover-foreground'
:
$color-brand
,
'hover-background'
:
transparent
,
'active-foreground'
:
$color-brand
,
'disabled-foreground'
:
$color-gmid
,
);
$LinkButton-colors--dark
:
(
'foreground'
:
$color-g7
,
'background'
:
transparent
,
'hover-foreground'
:
$color-link-hover
,
'hover-background'
:
transparent
,
'active-foreground'
:
$color-g7
,
'disabled-foreground'
:
$color-gmid
,
);
$-IconButton
:
(
'normal'
:
$IconButton-colors
,
'primary'
:
$IconButton-colors--primary
,
'dark'
:
$IconButton-colors--dark
,
'light'
:
$IconButton-colors--light
,
);
$-LabeledButton
:
(
'normal'
:
$LabeledButton-colors
,
'primary'
:
$LabeledButton-colors--primary
,
'dark'
:
$LabeledButton-colors--dark
,
'light'
:
$LabeledButton-colors--light
,
);
$-LinkButton
:
(
'normal'
:
$LinkButton-colors
,
'primary'
:
$LinkButton-colors--primary
,
'dark'
:
$LinkButton-colors--dark
,
'light'
:
$LinkButton-colors--light
,
);
// Return a color map corresponding to a button component-variant combination
// Defaults to `LabeledButton--normal`
@function
colors-for
(
$button-type
:
'LabeledButton'
,
$variant
:
'normal'
)
{
$colors
:
map
.
get
(
$-LabeledButton
,
'normal'
);
@if
$button-type
==
'IconButton'
{
$colors
:
map
.
get
(
$-IconButton
,
$variant
);
}
@if
$button-type
==
'LabeledButton'
{
$colors
:
map
.
get
(
$-LabeledButton
,
$variant
);
}
@if
$button-type
==
'LinkButton'
{
$colors
:
map
.
get
(
$-LinkButton
,
$variant
);
}
@return
$colors
;
}
src/styles/shared/components/buttons/_index.scss
deleted
100644 → 0
View file @
226f6155
@forward
'config'
show
colors-for
;
@forward
'mixins'
show
reset
,
Button
,
IconButton
,
LabeledButton
,
LinkButton
;
src/styles/shared/components/buttons/_mixins.scss
deleted
100644 → 0
View file @
226f6155
@use
"sass:map"
;
@use
"@hypothesis/frontend-shared/styles/mixins/focus"
;
@use
'config'
as
c
;
@use
'base'
;
// Basic reset for browser-imposed button styles
@mixin
reset
{
@include
focus
.
outline-on-keyboard-focus
;
padding
:
0
;
margin
:
0
;
background-color
:
transparent
;
border-style
:
none
;
}
// Base mixin for <button> elements
@mixin
Button
(
$options
:
())
{
$defaultOptions
:
(
//
What
colors
should
be
used
for
this
button
's styling?
'
colormap
': c.$LabeledButton-colors,
// And for its variants...needed if `withVariants` is true (true is default)
'
colormap--primary
': c.$LabeledButton-colors--primary,
'
colormap--dark
': c.$LabeledButton-colors--dark,
'
colormap--light
': c.$LabeledButton-colors--light,
// Should this button apply an inline layout? (default is flex)
'
inline
': false,
// Should styling be added for "active" and "hover" states for this <button>?
'
withStates
': true,
// Should styling be added to support the layout of multiple sub-elements
// of this <button>? Not needed if <button> contains only one child.
'
withLayout
': false,
// Provide styling for light, primary and dark variants? If this is true,
// make sure all variant colormaps are provided
'
withVariants
': true,
// Internal margin around SVG icon
'
margin
': 0.5em,
'
border-radius
': 2px
);
$-options: map.merge($defaultOptions, $options);
@include reset;
@include base.button($options: $-options);
// Add styles for supported variants as modifier classes, if `withVariants` enabled
@if (map.get($-options, '
withVariants
')) {
&--light {
$-light-options: (
'
colormap
': map.get($-options, '
colormap--light
'),
'
withStates
': map.get($-options, '
withStates
'),
);
@include base.button--variant($-light-options);
}
&--primary {
$-primary-options: (
'
colormap
': map.get($-options, '
colormap--primary
'),
'
withStates
': map.get($-options, '
withStates
'),
);
@include base.button--variant($-primary-options);
}
&--dark {
$-dark-options: (
'
colormap
': map.get($-options, '
colormap--dark
'),
'
withStates
': map.get($-options, '
withStates
'),
);
@include base.button--variant($-dark-options);
}
}
@content;
}
// Base mixin for a button with an icon and no label/content. Supports
// variants and sizes. Will assert responsive touch-target sizing in
// --medium (default) and --large variants.
@mixin IconButton($options: ()) {
$defaultOptions: (
'
colormap
': c.$IconButton-colors,
'
colormap--light
': c.$IconButton-colors--light,
'
colormap--primary
': c.$IconButton-colors--primary,
'
colormap--dark
': c.$IconButton-colors--dark,
'
responsive
': true,
);
$-options: map.merge($defaultOptions, $options);
@include Button($-options) {
// Establish a minimum touch-target for touch devices if '
responsive
'
// option is enabled (default). This is not applied to the `--small`
// size variant.
@if map.get($-options, '
responsive
') {
@media (pointer: coarse) {
&--medium,
&--large {
min-width: c.$touch-target-size;
min-height: c.$touch-target-size;
}
}
}
}
@content;
}
// Base mixin for a button that has text/content and, optionally, an icon.
// Supports variants and sizes.
@mixin LabeledButton($options: ()) {
$defaultOptions: (
'
colormap
': c.$LabeledButton-colors,
'
colormap--light
': c.$LabeledButton-colors--light,
'
colormap--primary
': c.$LabeledButton-colors--primary,
'
colormap--dark
': c.$LabeledButton-colors--dark,
'
withLayout
': true,
);
$-options: map.merge($defaultOptions, $options);
@include Button($-options);
@content;
}
// Base mixin for a button styled to look like an <a> link. Supports variants
// but not pressed/active states at present.
@mixin LinkButton($options: ()) {
$defaultOptions: (
'
colormap
': c.$LinkButton-colors,
'
colormap--light
': c.$LinkButton-colors--light,
'
colormap--primary
': c.$LinkButton-colors--primary,
'
colormap--dark
': c.$LinkButton-colors--dark,
);
$-options: map.merge($defaultOptions, $options);
@include Button($-options) {
// Lighter font weight for link-styled buttons
font-weight: 400;
// Add an underline on hover
&:hover:not([disabled]) {
text-decoration: underline;
}
&--primary {
// Primary variant has bolder text (and also different colors)
font-weight: 500;
}
}
// Remove padding to allow button to appear flush with surrounding content
padding: 0;
@content;
}
src/styles/shared/components/buttons/_styles.scss
deleted
100644 → 0
View file @
226f6155
@use
'mixins'
;
// A button with text, and optionally an icon
.LabeledButton
{
@include
mixins
.
LabeledButton
;
}
// A button with only an icon and no label/text
.IconButton
{
@include
mixins
.
IconButton
;
}
// A button styled to appear as a link, with underline on hover
.LinkButton
{
@include
mixins
.
LinkButton
;
}
src/styles/sidebar/buttons.scss
View file @
3435f32e
@use
"sass:map"
;
@use
"sass:map"
;
@use
'../variables'
as
var
;
// Button styling for the sidebar extending common button-component styles
// Button styling for the sidebar extending common button-component styles
@use
'../shared/components/buttons'
;
@use
'@hypothesis/frontend-shared/styles/components/buttons'
;
@use
'../variables'
as
var
;
// Similar to `.LinkButton`, with inline layout (so button can be used
// Similar to `.LinkButton`, with inline layout (so button can be used
// within text)
// within text)
...
...
src/styles/sidebar/components/SelectionTabs.scss
View file @
3435f32e
@use
"../../shared/components/buttons"
;
@use
'@hypothesis/frontend-shared/styles/components/buttons'
;
@use
"../../mixins/layout"
;
@use
"../../mixins/layout"
;
@use
"../../mixins/utils"
;
@use
"../../mixins/utils"
;
...
...
src/styles/sidebar/sidebar.scss
View file @
3435f32e
...
@@ -12,7 +12,7 @@
...
@@ -12,7 +12,7 @@
@use
'@hypothesis/frontend-shared/styles'
;
@use
'@hypothesis/frontend-shared/styles'
;
// Temporary shared styles
// Temporary shared styles
// FIXME:
Replace with shared-package variant when available
// FIXME:
Currently needed for Dialog styling
@use
'../shared'
;
@use
'../shared'
;
// Custom button styling for the application
// Custom button styling for the application
...
...
src/styles/ui-playground/_shared.scss
View file @
3435f32e
...
@@ -3,6 +3,9 @@
...
@@ -3,6 +3,9 @@
@use
'../sidebar/elements'
;
@use
'../sidebar/elements'
;
@use
'../variables'
as
var
;
@use
'../variables'
as
var
;
// Shared styles from frontend-shared package
@use
'@hypothesis/frontend-shared/styles'
;
// Shared styles from components/styles temporarily still in this repository
@use
'../shared'
;
@use
'../shared'
;
body
{
body
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment