secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Mobile friendly service tabs

Browse Source
This commit is contained in:
James Barnsley
2018-09-21 17:00:52 +12:00
parent 40a3361d67
commit ed51873baf
6 changed files with 305 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
mopidy_iris/static/app.css
View File

@ -5949,82 +5949,75 @@ main header {
white-space: wrap; white-space: wrap;
max-width: 200px; } max-width: 200px; }
.services .menu { .services .menu::after {
margin: 0 -5px; content: '';
clear: both;
display: block; }
.services .menu__inner {
display: flex; display: flex;
flex-wrap: wrap; } flex-wrap: wrap;
.services .menu::after { margin: 0 -5px; }
content: '';
clear: both; .services .menu .menu-item {
display: block; } -webkit-transition: none !important;
.services .menu .menu-item-wrapper { -moz-transition: none !important;
width: 25%; -o-transition: none !important;
min-width: 140px; transition: none !important;
max-width: 200px; width: 20%;
padding: 5px 5px 10px 5px; min-width: 120px;
max-width: 200px;
padding: 0 5px;
display: block;
box-sizing: border-box;
border: 0; }
.services .menu .menu-item__inner {
position: relative;
padding: 30px 10px;
margin-bottom: 10px;
border-radius: 3px;
background: #121212;
display: block; display: block;
text-align: center;
box-sizing: border-box; } box-sizing: border-box; }
.services .menu .menu-item-wrapper .menu-item { .services .menu .menu-item__thumbnail {
-webkit-transition: all 0.1 ease-in-out; margin-bottom: 15px;
-moz-transition: all 0.1 ease-in-out; display: inline-block; }
-o-transition: all 0.1 ease-in-out; .services .menu .menu-item__icon {
transition: all 0.1 ease-in-out; font-size: 40px;
position: relative; height: 40px;
padding: 30px 10px; margin-top: 10px;
border-radius: 3px; margin-bottom: 15px; }
background: #121212; .services .menu .menu-item__icon.icon--svg {
display: block; opacity: 0.8; }
text-align: center; .light-theme .services .menu .menu-item__icon.icon--svg {
box-sizing: border-box; -webkit-filter: invert(1);
border: 0; } filter: invert(1); }
.services .menu .menu-item-wrapper .menu-item:hover { .services .menu .menu-item__title {
background: #222222; } margin: 0;
.services .menu .menu-item-wrapper .menu-item:active { padding: 0;
-moz-transform: scale(0.98); font-weight: bold;
-webkit-transform: scale(0.98); font-size: 16px; }
transform: scale(0.98); } .services .menu .menu-item:hover .menu-item__inner {
.services .menu .menu-item-wrapper .menu-item.active { background: #222222; }
background: #222222; .services .menu .menu-item:active {
border-bottom-left-radius: 0; -moz-transform: scale(0.98);
border-bottom-right-radius: 0; } -webkit-transform: scale(0.98);
.services .menu .menu-item-wrapper .menu-item.active:after { transform: scale(0.98); }
height: 14px; .services .menu .menu-item--active .menu-item__inner {
bottom: -14px; } background: #222222;
.services .menu .menu-item-wrapper .menu-item:after { border-bottom-left-radius: 0;
content: ''; border-bottom-right-radius: 0;
display: block; padding-bottom: 40px;
width: 100%; margin-bottom: 0; }
height: 0; .light-theme .services .menu .menu-item .menu-item__inner {
position: absolute; background: #f4f2f0; }
bottom: 0; .light-theme .services .menu .menu-item .menu-item__inner:hover {
left: 0; background: #ebe8e4; }
background: #222222; } .light-theme .services .menu .menu-item .menu-item__inner:after {
.services .menu .menu-item-wrapper .menu-item .thumbnail { background: #ebe8e4; }
margin-bottom: 15px; .light-theme .services .menu .menu-item--active .menu-item__inner {
display: inline-block; } background: #ebe8e4; }
.services .menu .menu-item-wrapper .menu-item .icon {
font-size: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 15px; }
.services .menu .menu-item-wrapper .menu-item .icon--svg {
opacity: 0.8; }
.light-theme .services .menu .menu-item-wrapper .menu-item .icon--svg {
-webkit-filter: invert(1);
filter: invert(1); }
.services .menu .menu-item-wrapper .menu-item .title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 16px; }
.light-theme .services .menu .menu-item-wrapper .menu-item {
background: #f4f2f0; }
.light-theme .services .menu .menu-item-wrapper .menu-item:hover {
background: #ebe8e4; }
.light-theme .services .menu .menu-item-wrapper .menu-item.active {
background: #ebe8e4; }
.light-theme .services .menu .menu-item-wrapper .menu-item:after {
background: #ebe8e4; }
.services .service { .services .service {
padding: 20px; padding: 20px;
@ -6036,18 +6029,24 @@ main header {
background: #ebe8e4; } background: #ebe8e4; }
@media (max-width: 800px) { @media (max-width: 800px) {
.services .menu .menu-item-wrapper { .services .menu {
width: 50%; overflow-x: auto;
max-width: none; margin: 0 -20px; }
min-width: none; .services .menu::-webkit-scrollbar {
padding-bottom: 5px; } width: 0px;
.services .menu .menu-item-wrapper .menu-item { height: 0px; }
padding-top: 10px; .services .menu__inner {
padding-bottom: 10px; } width: 700px;
.services .menu .menu-item-wrapper .menu-item:after { padding: 0 20px; }
display: none; } .services .menu .menu-item {
width: 140px; }
.services .menu .menu-item__inner {
padding-top: 10px;
padding-bottom: 10px; }
.services .menu .menu-item--active .menu-item__inner {
padding-bottom: 20px; }
.services .service { .services .service {
margin-top: 5px; } } margin-top: 0; } }
.popularity-bars { .popularity-bars {
display: inline-block; display: inline-block;

188
mopidy_iris/static/app.js
View File

@ -74825,21 +74825,21 @@ var Services = function (_React$Component) {
value: function renderMenu() { value: function renderMenu() {
if (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri]) { if (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri]) {
var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.core.users[this.props.spotify.me.uri].images }); var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small', images: this.props.core.users[this.props.spotify.me.uri].images });
} else { } else {
var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small' }); var spotify_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small' });
} }
if (this.props.lastfm.me && this.props.core.users[this.props.lastfm.me.uri]) { if (this.props.lastfm.me && this.props.core.users[this.props.lastfm.me.uri]) {
var lastfm_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.core.users[this.props.lastfm.me.uri].images }); var lastfm_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small', images: this.props.core.users[this.props.lastfm.me.uri].images });
} else { } else {
var lastfm_icon = _react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'lastfm' }); var lastfm_icon = _react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'lastfm', className: 'menu-item__icon' });
} }
if (this.props.genius.me && this.props.core.users[this.props.genius.me.uri]) { if (this.props.genius.me && this.props.core.users[this.props.genius.me.uri]) {
var genius_icon = _react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.core.users[this.props.genius.me.uri].images }); var genius_icon = _react2.default.createElement(_Thumbnail2.default, { className: 'menu-item__thumbnail', circle: true, size: 'small', images: this.props.core.users[this.props.genius.me.uri].images });
} else { } else {
var genius_icon = _react2.default.createElement(_Icon2.default, { name: 'genius', type: 'svg' }); var genius_icon = _react2.default.createElement(_Icon2.default, { name: 'genius', type: 'svg', className: 'menu-item__icon' });
} }
return _react2.default.createElement( return _react2.default.createElement(
@ -74847,116 +74847,120 @@ var Services = function (_React$Component) {
{ className: 'menu' }, { className: 'menu' },
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'menu-item-wrapper' }, { className: 'menu__inner' },
_react2.default.createElement( _react2.default.createElement(
_reactRouter.Link, _reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'spotify' ? ' active' : ''), to: this.props.active == 'spotify' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/spotify' }, { className: "menu-item" + (this.props.active == 'spotify' ? ' menu-item--active' : ''), to: this.props.active == 'spotify' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/spotify' },
spotify_icon,
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'title' }, { className: 'menu-item__inner' },
'Spotify' spotify_icon,
), _react2.default.createElement(
this.props.spotify.authorization ? _react2.default.createElement( 'div',
'span', { className: 'menu-item__title' },
{ className: 'status green-text' }, 'Spotify'
'Authorized' ),
) : _react2.default.createElement( this.props.spotify.authorization ? _react2.default.createElement(
'span', 'span',
{ className: 'status grey-text' }, { className: 'status green-text' },
'Read-only' 'Authorized'
) : _react2.default.createElement(
'span',
{ className: 'status grey-text' },
'Read-only'
)
) )
) ),
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement( _react2.default.createElement(
_reactRouter.Link, _reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'lastfm' ? ' active' : ''), to: this.props.active == 'lastfm' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/lastfm' }, { className: "menu-item" + (this.props.active == 'lastfm' ? ' menu-item--active' : ''), to: this.props.active == 'lastfm' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/lastfm' },
lastfm_icon,
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'title' }, { className: 'menu-item__inner' },
'LastFM' lastfm_icon,
), _react2.default.createElement(
this.props.lastfm.session ? _react2.default.createElement( 'div',
'span', { className: 'menu-item__title' },
{ className: 'status green-text' }, 'LastFM'
'Authorized' ),
) : _react2.default.createElement( this.props.lastfm.session ? _react2.default.createElement(
'span', 'span',
{ className: 'status grey-text' }, { className: 'status green-text' },
'Read-only' 'Authorized'
) : _react2.default.createElement(
'span',
{ className: 'status grey-text' },
'Read-only'
)
) )
) ),
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement( _react2.default.createElement(
_reactRouter.Link, _reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'genius' ? ' active' : ''), to: this.props.active == 'genius' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/genius' }, { className: "menu-item" + (this.props.active == 'genius' ? ' menu-item--active' : ''), to: this.props.active == 'genius' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/genius' },
genius_icon,
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'title' }, { className: 'menu-item__inner' },
'Genius' genius_icon,
), _react2.default.createElement(
this.props.genius.authorization ? _react2.default.createElement( 'div',
'span', { className: 'menu-item__title' },
{ className: 'status green-text' }, 'Genius'
'Authorized' ),
) : _react2.default.createElement( this.props.genius.authorization ? _react2.default.createElement(
'span', 'span',
{ className: 'status grey-text' }, { className: 'status green-text' },
'Unauthorized' 'Authorized'
) : _react2.default.createElement(
'span',
{ className: 'status grey-text' },
'Unauthorized'
)
) )
) ),
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement( _react2.default.createElement(
_reactRouter.Link, _reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'snapcast' ? ' active' : ''), to: this.props.active == 'snapcast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/snapcast' }, { className: "menu-item" + (this.props.active == 'snapcast' ? ' menu-item--active' : ''), to: this.props.active == 'snapcast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/snapcast' },
_react2.default.createElement(_Icon2.default, { name: 'devices' }),
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'title' }, { className: 'menu-item__inner' },
'Snapcast' _react2.default.createElement(_Icon2.default, { className: 'menu-item__icon', name: 'devices' }),
), _react2.default.createElement(
this.props.pusher.config.snapcast_enabled ? _react2.default.createElement( 'div',
'span', { className: 'title' },
{ className: 'status green-text' }, 'Snapcast'
'Enabled' ),
) : _react2.default.createElement( this.props.pusher.config.snapcast_enabled ? _react2.default.createElement(
'span', 'span',
{ className: 'status grey-text' }, { className: 'status green-text' },
'Disabled' 'Enabled'
) : _react2.default.createElement(
'span',
{ className: 'status grey-text' },
'Disabled'
)
) )
) ),
),
_react2.default.createElement(
'div',
{ className: 'menu-item-wrapper' },
_react2.default.createElement( _react2.default.createElement(
_reactRouter.Link, _reactRouter.Link,
{ className: "menu-item" + (this.props.active == 'icecast' ? ' active' : ''), to: this.props.active == 'icecast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/icecast' }, { className: "menu-item" + (this.props.active == 'icecast' ? ' menu-item--active' : ''), to: this.props.active == 'icecast' ? global.baseURL + 'settings' : global.baseURL + 'settings/service/icecast' },
_react2.default.createElement(_Icon2.default, { name: 'wifi_tethering' }),
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'title' }, { className: 'menu-item__inner' },
'Icecast' _react2.default.createElement(_Icon2.default, { className: 'menu-item__icon', name: 'wifi_tethering' }),
), _react2.default.createElement(
this.props.core.http_streaming_enabled ? _react2.default.createElement( 'div',
'span', { className: 'menu-item__title' },
{ className: 'status green-text' }, 'Icecast'
'Enabled' ),
) : _react2.default.createElement( this.props.core.http_streaming_enabled ? _react2.default.createElement(
'span', 'span',
{ className: 'status grey-text' }, { className: 'status green-text' },
'Disabled' 'Enabled'
) : _react2.default.createElement(
'span',
{ className: 'status grey-text' },
'Disabled'
)
) )
) )
) )

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details // Release details
// These are automatically injected to built HTML // These are automatically injected to built HTML
var build = "1537487995"; var build = "1537495549";
var version = "3.26.1"; var version = "3.26.1";
// Construct the script tag // Construct the script tag

82
src/js/components/Services.js
View File

@ -287,68 +287,70 @@ class Services extends React.Component{
renderMenu(){ renderMenu(){
if (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri]){ if (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri]){
var spotify_icon = <Thumbnail circle={true} size="small" images={this.props.core.users[this.props.spotify.me.uri].images} /> var spotify_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" images={this.props.core.users[this.props.spotify.me.uri].images} />
} else { } else {
var spotify_icon = <Thumbnail circle={true} size="small" /> var spotify_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" />
} }
if (this.props.lastfm.me && this.props.core.users[this.props.lastfm.me.uri]){ if (this.props.lastfm.me && this.props.core.users[this.props.lastfm.me.uri]){
var lastfm_icon = <Thumbnail circle={true} size="small" images={this.props.core.users[this.props.lastfm.me.uri].images} /> var lastfm_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" images={this.props.core.users[this.props.lastfm.me.uri].images} />
} else { } else {
var lastfm_icon = <Icon type="fontawesome" name="lastfm" /> var lastfm_icon = <Icon type="fontawesome" name="lastfm" className="menu-item__icon" />
} }
if (this.props.genius.me && this.props.core.users[this.props.genius.me.uri]){ if (this.props.genius.me && this.props.core.users[this.props.genius.me.uri]){
var genius_icon = <Thumbnail circle={true} size="small" images={this.props.core.users[this.props.genius.me.uri].images} /> var genius_icon = <Thumbnail className="menu-item__thumbnail" circle={true} size="small" images={this.props.core.users[this.props.genius.me.uri].images} />
} else { } else {
var genius_icon = <Icon name="genius" type="svg" /> var genius_icon = <Icon name="genius" type="svg" className="menu-item__icon" />
} }
return ( return (
<div className="menu"> <div className="menu">
<div className="menu-item-wrapper"> <div className="menu__inner">
<Link className={"menu-item"+(this.props.active == 'spotify' ? ' active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'}> <Link className={"menu-item"+(this.props.active == 'spotify' ? ' menu-item--active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'}>
{spotify_icon} <div className="menu-item__inner">
<div className="title"> {spotify_icon}
Spotify <div className="menu-item__title">
Spotify
</div>
{this.props.spotify.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
</div> </div>
{this.props.spotify.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
</Link> </Link>
</div> <Link className={"menu-item"+(this.props.active == 'lastfm' ? ' menu-item--active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'}>
<div className="menu-item-wrapper"> <div className="menu-item__inner">
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'}> {lastfm_icon}
{lastfm_icon} <div className="menu-item__title">
<div className="title"> LastFM
LastFM </div>
{this.props.lastfm.session ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
</div> </div>
{this.props.lastfm.session ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Read-only</span>}
</Link> </Link>
</div> <Link className={"menu-item"+(this.props.active == 'genius' ? ' menu-item--active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'}>
<div className="menu-item-wrapper"> <div className="menu-item__inner">
<Link className={"menu-item"+(this.props.active == 'genius' ? ' active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'}> {genius_icon}
{genius_icon} <div className="menu-item__title">
<div className="title"> Genius
Genius </div>
{this.props.genius.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Unauthorized</span>}
</div> </div>
{this.props.genius.authorization ? <span className="status green-text">Authorized</span> : <span className="status grey-text">Unauthorized</span>}
</Link> </Link>
</div> <Link className={"menu-item"+(this.props.active == 'snapcast' ? ' menu-item--active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}>
<div className="menu-item-wrapper"> <div className="menu-item__inner">
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}> <Icon className="menu-item__icon" name="devices" />
<Icon name="devices" /> <div className="title">
<div className="title"> Snapcast
Snapcast </div>
{this.props.pusher.config.snapcast_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
</div> </div>
{this.props.pusher.config.snapcast_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
</Link> </Link>
</div> <Link className={"menu-item"+(this.props.active == 'icecast' ? ' menu-item--active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}>
<div className="menu-item-wrapper"> <div className="menu-item__inner">
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}> <Icon className="menu-item__icon" name="wifi_tethering" />
<Icon name="wifi_tethering" /> <div className="menu-item__title">
<div className="title"> Icecast
Icecast </div>
{this.props.core.http_streaming_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
</div> </div>
{this.props.core.http_streaming_enabled ? <span className="status green-text">Enabled</span> : <span className="status grey-text">Disabled</span>}
</Link> </Link>
</div> </div>
</div> </div>

154
src/scss/components/_services.scss
View File

@ -3,100 +3,98 @@
.menu { .menu {
@include clearfix(); @include clearfix();
margin: 0 -5px;
display: flex;
flex-wrap: wrap;
.menu-item-wrapper { &__inner {
width: 25%; display: flex;
min-width: 140px; flex-wrap: wrap;
margin: 0 -5px;
}
.menu-item {
@include noanimate();
width: 20%;
min-width: 120px;
max-width: 200px; max-width: 200px;
padding: 5px 5px 10px 5px; padding: 0 5px;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
border: 0;
.menu-item { &__inner {
@include animate(0.1);
position: relative; position: relative;
padding: 30px 10px; padding: 30px 10px;
margin-bottom: 10px;
border-radius: 3px; border-radius: 3px;
background: $darkest_grey; background: $darkest_grey;
display: block; display: block;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
border: 0; }
&:hover { &__thumbnail {
margin-bottom: 15px;
display: inline-block;
}
&__icon {
font-size: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 15px;
&.icon--svg {
opacity: 0.8;
.light-theme & {
@include invert();
}
}
}
&__title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 16px;
}
&:hover {
.menu-item__inner {
background: lighten($dark_grey, 4%); background: lighten($dark_grey, 4%);
} }
}
&:active { &:active {
-moz-transform: scale(0.98); -moz-transform: scale(0.98);
-webkit-transform: scale(0.98); -webkit-transform: scale(0.98);
transform: scale(0.98); transform: scale(0.98);
} }
&.active { &--active {
.menu-item__inner {
background: lighten($dark_grey, 4%); background: lighten($dark_grey, 4%);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
padding-bottom: 40px;
&:after { margin-bottom: 0;
height: 14px;
bottom: -14px;
}
} }
}
&:after { .light-theme & {
content: ''; .menu-item__inner {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: lighten($dark_grey, 4%);
}
.thumbnail {
margin-bottom: 15px;
display: inline-block;
}
.icon {
font-size: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 15px;
&--svg {
opacity: 0.8;
.light-theme & {
@include invert();
}
}
}
.title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 16px;
}
.light-theme & {
background: $faint_grey; background: $faint_grey;
&:hover{ &:hover{
background: darken($faint_grey, 4%); background: darken($faint_grey, 4%);
} }
&.active { &:after {
background: darken($faint_grey, 4%); background: darken($faint_grey, 4%);
} }
}
&:after { &--active {
.menu-item__inner {
background: darken($faint_grey, 4%); background: darken($faint_grey, 4%);
} }
} }
@ -120,25 +118,37 @@
@include responsive($bp_medium){ @include responsive($bp_medium){
.menu { .menu {
.menu-item-wrapper { overflow-x: auto;
width: 50%; margin: 0 -20px;
max-width: none;
min-width: none;
padding-bottom: 5px;
.menu-item { &::-webkit-scrollbar{
width: 0px;
height: 0px;
}
&__inner {
width: 700px;
padding: 0 20px;
}
.menu-item {
width: 140px;
&__inner {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
}
&:after { &--active {
display: none; .menu-item__inner {
padding-bottom: 20px;
} }
} }
} }
} }
.service { .service {
margin-top: 5px; margin-top: 0;
} }
} }
} }