Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
3846eee2
Commit
3846eee2
authored
Nov 10, 2017
by
Andrew Hrdy
Browse files
Continued to make styles sassy.
parent
d0a6debc
Changes
15
Hide whitespace changes
Inline
Side-by-side
src/components/AppBar.js
View file @
3846eee2
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
,
withTheme
}
from
'
material-ui/styles
'
;
import
AppBar
from
'
material-ui/AppBar
'
;
import
Toolbar
from
'
material-ui/Toolbar
'
;
import
Typography
from
'
material-ui/Typography
'
;
import
Button
from
'
material-ui/Button
'
;
import
IconButton
from
'
material-ui/IconButton
'
;
import
MenuIcon
from
'
material-ui-icons/Menu
'
;
import
{
compose
}
from
'
redux
'
;
import
classNames
from
'
classnames
'
class
CustomAppBar
extends
React
.
Component
{
...
...
@@ -29,25 +26,24 @@ class CustomAppBar extends React.Component {
render
()
{
return
(
<
div
>
<
AppBar
position
=
"
absolute
"
className
=
{
this
.
props
.
classes
.
appBar
}
>
<
Toolbar
className
=
{
this
.
props
.
classes
.
toolBar
}
>
<
img
src
=
{
require
(
'
../images/SRCT_square.svg
'
)}
className
=
{
this
.
props
.
classes
.
navbarLogo
}
/
>
<
Typography
type
=
"
title
"
className
=
{
classNames
(
this
.
props
.
classes
.
title
,
this
.
props
.
classes
.
navbarTextColor
)}
>
<
AppBar
position
=
"
absolute
"
className
=
{
'
app-bar
'
}
>
<
Toolbar
className
=
{
'
app-bar-tool-bar
'
}
>
<
img
src
=
{
require
(
'
../images/SRCT_square.svg
'
)}
className
=
{
'
app-bar-logo
'
}
/
>
<
Typography
type
=
"
title
"
className
=
{
classNames
(
'
app-bar-title
'
,
'
app-bar-text-color
'
)}
>
What
'
s Open
</Typography>
<IconButton onClick={this.toggleExpand} aria-label="Menu"
className={classNames(
this.props.classes.appBarM
enu
B
utton,
this.props.classes.nav
bar
T
ext
C
olor)}>
className={classNames(
'
app
-
bar
-
m
enu
-
b
utton
'
,
'
app
-
bar
-
t
ext
-
c
olor
'
)}>
<MenuIcon/>
</IconButton>
<div
className={classNames(
this.props.classes.
link
C
ontainer, !this.state.isAppBarExpanded &&
this.props.classes.
hide)}>
className={classNames(
'
app
-
bar
-
link
-
c
ontainer
'
, !this.state.isAppBarExpanded &&
'
app
-
bar
-
hide
'
)}>
<Button
className={classNames(
this.props.classes.appBarL
ink
B
utton,
this.props.classes.nav
bar
T
ext
C
olor)}>
className={classNames(
'
app
-
bar
-
l
ink
-
b
utton
'
,
'
app
-
bar
-
t
ext
-
c
olor
'
)}>
About
</Button>
<Button
className={classNames(
this.props.classes.appBarL
ink
B
utton,
this.props.classes.nav
bar
T
ext
C
olor)}>
className={classNames(
'
app
-
bar
-
l
ink
-
b
utton
'
,
'
app
-
bar
-
t
ext
-
c
olor
'
)}>
Feedback
</Button>
</div>
...
...
@@ -57,51 +53,4 @@ class CustomAppBar extends React.Component {
};
}
CustomAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
const styleSheet = {
'
@
media
screen
and
(
max
-
width
:
600
px
)
'
: {
appBarLinkButton: {
display:
'
block
'
,
padding: 0,
textAlign:
'
left
'
},
appBarMenuButton: {
display:
'
inherit
!
important
'
},
hide: {
maxHeight:
'
0
!
important
'
,
overflow:
'
hidden
'
},
toolBar: {
flexWrap:
'
wrap
'
,
},
linkContainer: {
display:
'
block
'
,
flexBasis:
'
100
%
'
,
transition:
'
ease
-
in
-
out
2
s
'
}
},
appBar: {
backgroundColor:
'
white
'
,
boxShadow:
'
0
px
1
px
0
px
0
px
rgba
(
0
,
0
,
0
,
0.2
)
'
},
title: {
marginRight:
'
auto
'
,
},
appBarMenuButton: {
display:
'
none
'
},
navbarLogo: {
width:
'
30
px
'
,
height:
'
30
px
'
,
marginRight:
'
5
px
'
},
navbarTextColor: {
color:
'
#
354052
'
},
};
export default compose(withStyles(styleSheet), withTheme)(CustomAppBar);
export default CustomAppBar;
src/components/CardContainer.js
View file @
3846eee2
...
...
@@ -3,15 +3,15 @@ import {withStyles} from 'material-ui/styles';
import
FacilityCard
from
'
../containers/FacilityCard
'
import
Grid
from
'
material-ui/Grid
'
;
const
CardContainer
=
({
classes
,
searchTerm
,
facilities
})
=>
{
const
CardContainer
=
({
searchTerm
,
facilities
})
=>
{
const
filterCards
=
(
facility
)
=>
{
const
name
=
facility
.
facility_name
.
toLowerCase
()
return
name
.
includes
(
searchTerm
.
toLowerCase
())
}
return
(
<
Grid
container
className
=
{
classes
.
root
}
spacing
=
{
24
}
justify
=
{
'
center
'
}
align
=
{
'
flex-end
'
}
>
{
facilities
.
filter
(
filterCards
).
map
(
item
=>
{
return
(
<
Grid
container
className
=
{
'
card-container-
root
'
}
spacing
=
{
24
}
justify
=
{
'
center
'
}
align
=
{
'
flex-end
'
}
>
{
facilities
.
filter
(
filterCards
).
map
(
item
=>
{
return
(
<
Grid
key
=
{
item
.
slug
}
item
>
<
FacilityCard
facility
=
{
item
}
/
>
<
/Grid
>
...
...
@@ -20,15 +20,5 @@ const CardContainer = ({classes, searchTerm, facilities}) => {
<
/Grid
>
)
}
const
styleSheet
=
{
root
:
{
// backgroundColor:'red',
margin
:
0
,
width
:
'
100%
'
,
display
:
'
flex
'
,
flexWrap
:
'
wrap
'
,
},
}
export
default
withStyles
(
styleSheet
)(
CardContainer
)
\ No newline at end of file
export
default
CardContainer
;
\ No newline at end of file
src/components/FacilityCategory.js
View file @
3846eee2
...
...
@@ -11,7 +11,7 @@ import FitnessCenterIcon from 'material-ui-icons/FitnessCenter';
import
ShoppingCartIcon
from
'
material-ui-icons/ShoppingCart
'
import
{
red
,
blue
,
brown
,
grey
,
teal
,
deepOrange
,
lime
}
from
'
material-ui/colors
'
;
const
FacilityCategory
=
({
classes
,
category
})
=>
{
const
FacilityCategory
=
({
category
})
=>
{
const
generateAvatar
=
()
=>
{
let
color
;
...
...
@@ -42,42 +42,42 @@ const FacilityCategory = ({classes, category}) => {
case
2
:
//Restaurant
case
5
:
//Take out dining hall
color
=
red
[
400
];
icon
=
<
RestaurantIcon
className
=
{
classes
.
category
I
con
}
/>
;
icon
=
<
RestaurantIcon
className
=
{
'
facility-
category
-i
con
'
}
/>
;
break
;
case
3
:
//Convenience Store
color
=
blue
[
500
];
icon
=
<
StoreIcon
className
=
{
classes
.
category
I
con
}
/>
;
icon
=
<
StoreIcon
className
=
{
'
facility-
category
-i
con
'
}
/>
;
break
;
case
4
:
//Cafe
color
=
brown
[
500
];
icon
=
<
LocalCafeIcon
className
=
{
classes
.
category
I
con
}
/>
;
icon
=
<
LocalCafeIcon
className
=
{
'
facility-
category
-i
con
'
}
/>
;
break
;
case
6
:
//Athletic Facility
color
=
teal
[
500
];
icon
=
<
FitnessCenterIcon
className
=
{
classes
.
category
I
con
}
/>
;
icon
=
<
FitnessCenterIcon
className
=
{
'
facility-
category
-i
con
'
}
/>
;
break
;
case
7
:
//TODO: Print Services - NOT IN API
color
=
grey
[
500
];
icon
=
<
LocalPrintShopIcon
className
=
{
classes
.
category
I
con
}
/>
;
icon
=
<
LocalPrintShopIcon
className
=
{
'
facility-
category
-i
con
'
}
/>
;
break
;
case
8
:
//TODO Mailroom - NOT IN API
color
=
deepOrange
[
500
];
icon
=
<
LocalPostOfficeIcon
className
=
{
classes
.
category
I
con
}
/>
;
icon
=
<
LocalPostOfficeIcon
className
=
{
'
facility-
category
-i
con
'
}
/>
;
break
;
default
:
color
=
lime
[
500
];
icon
=
<
ShoppingCartIcon
className
=
{
classes
.
category
I
con
}
/
>
icon
=
<
ShoppingCartIcon
className
=
{
'
facility-
category
-i
con
'
}
/
>
}
return
(
<
Avatar
className
=
{
classes
.
avatar
}
style
=
{{
backgroundColor
:
color
}}
>
<
Avatar
className
=
{
'
facility-category-
avatar
'
}
style
=
{{
backgroundColor
:
color
}}
>
{
icon
}
<
/Avatar
>
)
};
return
(
<
div
className
=
{
classes
.
category
W
rapper
}
>
<
div
className
=
{
'
facility-
category
-w
rapper
'
}
>
{
/* {generateAvatar()} */
}
<
Typography
type
=
{
'
body1
'
}
noWrap
>
{
category
.
name
}
...
...
@@ -86,21 +86,4 @@ const FacilityCategory = ({classes, category}) => {
)
};
const
styleSheet
=
{
categoryWrapper
:
{
display
:
'
flex
'
,
alignItems
:
'
center
'
},
categoryIcon
:
{
width
:
'
14px !important
'
,
height
:
'
14px !important
'
,
padding
:
'
4px !important
'
,
},
avatar
:
{
width
:
'
auto !important
'
,
height
:
'
auto !important
'
,
marginRight
:
'
8px
'
},
};
export
default
withStyles
(
styleSheet
)(
FacilityCategory
);
\ No newline at end of file
export
default
FacilityCategory
;
\ No newline at end of file
src/components/FacilityStatus.js
View file @
3846eee2
import
React
from
'
react
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
Typography
from
'
material-ui/Typography
'
;
import
DoneIcon
from
'
material-ui-icons/Done
'
;
import
CloseIcon
from
'
material-ui-icons/Close
'
;
import
{
green
,
red
}
from
'
material-ui/colors
'
import
FacilityUtils
from
'
../utils/facilityUtils
'
;
const
FacilityStatus
=
({
classes
,
facility
})
=>
{
const
FacilityStatus
=
({
facility
})
=>
{
/**
* Generates information about the facility's status.
...
...
@@ -27,7 +26,7 @@ const FacilityStatus = ({classes, facility}) => {
label
=
'
OPEN
'
;
color
=
green
[
500
];
icon
=
<
DoneIcon
/>
;
}
else
{
}
else
{
label
=
'
CLOSED
'
;
color
=
red
[
500
];
icon
=
<
CloseIcon
/>
...
...
@@ -43,25 +42,11 @@ const FacilityStatus = ({classes, facility}) => {
const
statusInfo
=
generateStatusInfo
(
facility
);
return
(
<
Typography
type
=
{
'
caption
'
}
className
=
{
classes
.
status
T
ext
}
style
=
{{
color
:
statusInfo
.
color
}}
>
<
Typography
type
=
{
'
caption
'
}
className
=
{
'
facility-
status
-t
ext
'
}
style
=
{{
color
:
statusInfo
.
color
}}
>
{
statusInfo
.
icon
}
{
statusInfo
.
label
}
<
/Typography
>
)
};
const
styleSheet
=
{
statusText
:
{
display
:
'
flex
'
,
alignItems
:
'
center
'
},
chip
:
{
height
:
'
28px
'
,
borderRadius
:
'
4px
'
,
},
isOpenText
:
{
color
:
'
white
'
,
display
:
'
inline
'
,
}
};
export
default
withStyles
(
styleSheet
)(
FacilityStatus
);
\ No newline at end of file
export
default
FacilityStatus
;
\ No newline at end of file
src/components/FavoriteButton.js
View file @
3846eee2
...
...
@@ -23,47 +23,24 @@ class FavoriteButton extends React.Component {
}
else
{
this
.
props
.
addFavoriteFacility
(
this
.
props
.
facility
.
slug
);
}
}
}
;
render
()
{
const
{
heart
,
heartFavorited
,
heartHover
,
heartNoHover
}
=
this
.
props
.
classes
;
const
{
isHovered
}
=
this
.
props
;
if
(
this
.
props
.
isFavorite
)
{
return
(
<
FavoriteIcon
onClick
=
{
this
.
handleClick
}
className
=
{
classNames
(
heart
,
heart
F
avorited
)}
/>
)
;
return
(
<
FavoriteIcon
onClick
=
{
this
.
handleClick
}
className
=
{
classNames
(
'
favorite-button-heart
'
,
'
favorite-button-
heart
-f
avorited
'
)}
/>
)
;
}
return
(
<
FavoriteBorderIcon
onClick
=
{
this
.
handleClick
}
className
=
{
classNames
(
heart
,{[
heartHover
]:
isHovered
,[
heart
NoH
over
]:
!
isH
over
ed
}
)}
/>
)
;
return
(
<
FavoriteBorderIcon
onClick
=
{
this
.
handleClick
}
className
=
{
classNames
(
'
favorite-button-heart
'
,
isHovered
?
'
favorite-button-
heart
-h
over
'
:
'
favorite-button-heart-no-h
over
'
)}
/>
)
;
}
}
FavoriteButton
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
facility
:
PropTypes
.
object
.
isRequired
,
isFavorite
:
PropTypes
.
bool
.
isRequired
,
addFavoriteFacility
:
PropTypes
.
func
.
isRequired
,
removeFavoriteFacility
:
PropTypes
.
func
.
isRequired
,
};
const
sizeScale
=
.
75
const
styleSheet
=
{
heart
:
{
position
:
'
absolute
'
,
top
:
0
,
right
:
0
,
height
:
24
*
sizeScale
,
width
:
24
*
sizeScale
,
padding
:
5
*
sizeScale
,
cursor
:
'
pointer
'
,
},
heartFavorited
:{
color
:
pink
[
500
]
},
heartHover
:{
color
:
'
grey
'
},
heartNoHover
:{
color
:
'
rgba(0,0,0,0)
'
}
};
export
default
withStyles
(
styleSheet
)(
FavoriteButton
);
\ No newline at end of file
export
default
FavoriteButton
;
\ No newline at end of file
src/components/Sidebar.js
View file @
3846eee2
import
React
from
'
react
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
Paper
from
'
material-ui/Paper
'
import
Avatar
from
'
material-ui/Avatar
'
import
Typography
from
'
material-ui/Typography
'
...
...
@@ -9,103 +8,52 @@ import FacilitiesMap from '../components/FacilitiesMap'
import
classNames
from
'
classnames
'
;
import
Button
from
'
material-ui/Button
'
;
const
Sidebar
=
({
classes
,
facility
,
isSidebarOpen
,
isSidebarMapOpen
,
toggleSidebarMap
,
facilities
})
=>
{
const
Sidebar
=
({
facility
,
isSidebarOpen
,
isSidebarMapOpen
,
toggleSidebarMap
,
facilities
})
=>
{
const
removeBrackets
=
(
name
)
=>
{
if
(
typeof
(
name
)
===
"
undefined
"
){
return
""
}
const
openBracket
=
name
.
indexOf
(
'
[
'
)
if
(
openBracket
!==
-
1
){
return
name
.
substring
(
0
,
openBracket
)
if
(
typeof
(
name
)
===
"
undefined
"
)
{
return
""
;
}
return
name
}
// if(isSidebarOpen){
// return (<div></div>)
// }
return
(
<
Paper
className
=
{
classNames
([
classes
.
root
,(
!
isSidebarOpen
&&
classes
.
openSidebar
),(
isSidebarOpen
&&
classes
.
closedSidebar
)])}
>
<
div
className
=
{
classes
.
row1
}
>
<
Avatar
className
=
{
classes
.
avatar
}
src
=
{
require
(
'
../images/chipotleLogo.png
'
)}
/
>
<
div
className
=
{
classes
.
title
}
>
<
Typography
type
=
'
display1
'
>
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
<
/div
>
<
/div
>
<
Divider
className
=
{
classes
.
divider
}
/
>
<
div
className
=
{
classes
.
labelHolder
}
>
<
div
className
=
{
classes
.
labelRow
}
>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center
"
/>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center
"
/>
<
/div
>
<
div
className
=
{
classes
.
labelRow
}
>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center
"
/>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center asdfasdfasdfasdf asd fas as asd asdfasdfasf
"
/>
<
/div
>
<
/div
>
<
div
className
=
{
classes
.
row2
}
>
<
FacilitiesMap
isMapOpen
=
{
isSidebarMapOpen
}
facilities
=
{
facilities
}
facility
=
{
facility
}
/
>
const
openBracket
=
name
.
indexOf
(
'
[
'
);
if
(
openBracket
!==
-
1
)
{
return
name
.
substring
(
0
,
openBracket
);
}
<
Button
className
=
{
classes
.
toggleMapBtn
}
onClick
=
{
toggleSidebarMap
}
>
{
isSidebarMapOpen
?
'
Close Map
'
:
'
Open Map
'
}
<
/Button
>
<
/div
>
<
/Paper
>
)
}
const
styleSheet
=
{
'
@media screen and (max-width: 600px)
'
:
{
root
:
{
display
:
'
none !important
'
},
},
labelRow
:{
display
:
'
flex
'
,
},
labelHolder
:{
margin
:
16
,
},
openSidebar
:{
flex
:
'
1 0 400px
'
,
},
closedSidebar
:{
flex
:
'
1 0 0px
'
,
},
root
:{
overflow
:
'
hidden
'
,
display
:
'
block
'
,
boxSizing
:
'
border-box
'
,
position
:
'
relative
'
,
webkitTransition
:
'
150ms ease-in-out
'
,
mozTransition
:
'
150ms ease-in-out
'
,
oTransition
:
'
150ms ease-in-out
'
,
transition
:
'
150ms ease-in-out
'
,
},
divider
:{
margin
:
16
,
},
row1
:{
display
:
'
flex
'
,
padding
:
8
,
return
name
;
};
},
avatar
:{
width
:
100
,
height
:
100
,
},
title
:{
height
:
100
,
marginLeft
:
8
,
display
:
'
flex
'
,
alignItems
:
'
center
'
},
row2
:{
position
:
'
absolute
'
,
bottom
:
'
0px
'
,
width
:
'
100%
'
},
toggleMapBtn
:
{
width
:
'
100%
'
}
}
return
(
<
Paper
className
=
{
classNames
([
'
sidebar-root
'
,
(
!
isSidebarOpen
&&
'
sidebar-open
'
),
(
isSidebarOpen
&&
'
sidebar-closed
'
)])}
>
<
div
className
=
{
'
sidebar-row1
'
}
>
<
Avatar
className
=
{
'
sidebar-avatar
'
}
src
=
{
require
(
'
../images/chipotleLogo.png
'
)}
/
>
<
div
className
=
{
'
sidebar-title
'
}
>
<
Typography
type
=
'
display1
'
>
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
<
/div
>
<
/div
>
<
Divider
className
=
{
'
sidebar-divider
'
}
/
>
<
div
className
=
{
'
sidebar-label-holder
'
}
>
<
div
className
=
{
'
sidebar-label-row
'
}
>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center
"
/>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center
"
/>
<
/div
>
<
div
className
=
{
'
sidebar-label-row
'
}
>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center
"
/>
<
TextwTitle
label
=
"
Location
"
content
=
"
The Johnson Center asdfasdfasdfasdf asd fas as asd asdfasdfasf
"
/>
<
/div
>
<
/div
>
<
div
className
=
{
'
sidebar-row2
'
}
>
<
FacilitiesMap
isMapOpen
=
{
isSidebarMapOpen
}
facilities
=
{
facilities
}
facility
=
{
facility
}
/
>
<
Button
className
=
{
'
sidebar-toggle-map-btn
'
}
onClick
=
{
toggleSidebarMap
}
>
{
isSidebarMapOpen
?
'
Close Map
'
:
'
Open Map
'
}
<
/Button
>
<
/div
>
<
/Paper
>
)
};
export
default
withStyles
(
styleSheet
)(
Sidebar
)
export
default
Sidebar
;
src/styles/_mixins.scss
View file @
3846eee2
@mixin
transition
(
$transition
...
)
{
-moz-transition
:
$transition
;
-o-transition
:
$transition
;
-webkit-transition
:
$transition
;
transition
:
$transition
;
}
\ No newline at end of file
src/styles/_variables.scss
View file @
3846eee2
...
...
@@ -3,4 +3,8 @@
/*
This is the scaling that is applied to medium sized devices.
*/
$fc-mdScale
:
.8
;
\ No newline at end of file
$fc-mdScale
:
.8
;
/* Favorite Button */
$favorite-button-md-scale
:
.8
;
\ No newline at end of file
src/styles/components/appBar.scss
0 → 100644
View file @
3846eee2
.app-bar
{
background-color
:
white
!
important
;
box-shadow
:
0
1px
0
0
rgba
(
0
,
0
,
0
,
0
.2
)
!
important
;
};
.app-bar-title
{
margin-right
:
auto
!
important
;
};
.app-bar-menu-button
{
display
:
none
!
important
;
};
.app-bar-logo
{
width
:
30px
;
height
:
30px
;
margin-right
:
5px
;
};
.app-bar-text-color
{
color
:
#354052
;
};
@media
screen
and
(
max-width
:
600px
)
{
.app-bar-link-button
{
display
:
block
!
important
;
padding
:
0
!
important
;
text-align
:
left
;
};
.app-bar-menu-button
{
display
:
inherit
!
important
;
};
.app-bar-hide
{
max-height
:
0
!
important
;
overflow
:
hidden
};
.app-bar-tool-bar
{
flex-wrap
:
wrap
;
};
.app-bar-link-container
{
display
:
block
;
flex-basis
:
100%
;
transition
:
ease-in-out
2s
;
}
}
\ No newline at end of file
src/styles/components/cardContainer.scss
0 → 100644
View file @
3846eee2
.card-container-root
{
margin
:
0
;
width
:
100%
;
display
:
flex
;
flex-wrap
:
wrap
;
};
\ No newline at end of file
src/styles/components/facilityCategory.scss
0 → 100644
View file @
3846eee2
.facility-category-wrapper
{
display
:
flex
;
align-items
:
center
};
.facility-category-icon
{
width
:
14px
!
important
;
height
:
14px
!
important
;
padding
:
4px
!
important
;
};
.facility-category-icon
{
width
:
auto
!
important
;
height
:
auto
!
important
;
margin-right
:
8px
};
\ No newline at end of file
src/styles/components/facilityStatus.scss
0 → 100644
View file @
3846eee2
.facility-status-text
{
display
:
flex
;
align-items
:
center
;
};
\ No newline at end of file
src/styles/components/favoriteButton.scss
0 → 100644
View file @
3846eee2
.favorite-button-heart
{
position
:
absolute
;
top
:
0
;
right
:
0
;
height
:
24px
;
width
:
24px
;
padding
:
5px
;
cursor
:
pointer
;
};
.favorite-button-heart-favorited
{
color
:
#E91E63
;
//TODO: Somehow use materials color system
};
.favorite-button-heart-hover
{
color
:
grey
;
};
.favorite-button-heart-no-hover
{
color
:
rgba
(
0
,
0
,
0
,
0
);
}