Updating background images to be svgs
This commit is contained in:
mgabdev
parent
6c8eea5160
commit
c00c202d39
|
|
@ -1,7 +1,6 @@
|
|||
.button {
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
background-color: $ui-highlight-color;
|
||||
|
|
@ -10,9 +9,9 @@
|
|||
cursor: pointer;
|
||||
|
||||
@include border-design(transparent, 10px, 4px);
|
||||
@include text-sizing(14px, 500, 36px, center);
|
||||
@include text-sizing(14px, 600, 1em, center);
|
||||
@include size(auto, 36px);
|
||||
@include text-overflow(nowrap);
|
||||
// @include text-overflow(nowrap);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
const ComposeIcon = ({
|
||||
className = 'compose-icon',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 50 50'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
>
|
||||
<g>
|
||||
<path className='compose-icon__path' d="M 37.007812 16.101562 C 36.582031 15.675781 35.828125 15.675781 35.402344 16.101562 L 13.820312 37.703125 C 13.5625 37.960938 13.445312 38.328125 13.503906 38.6875 C 13.5625 39.050781 13.789062 39.359375 14.113281 39.523438 L 15.886719 40.410156 L 15.886719 43.394531 L 10.457031 44.945312 L 4.976562 39.460938 L 6.53125 34.027344 L 9.511719 34.027344 L 10.398438 35.800781 C 10.5625 36.128906 10.871094 36.355469 11.230469 36.414062 C 11.292969 36.425781 11.351562 36.429688 11.414062 36.429688 C 11.710938 36.429688 12 36.3125 12.214844 36.097656 L 33.800781 14.496094 C 34.011719 14.28125 34.132812 13.996094 34.132812 13.691406 C 34.132812 13.390625 34.011719 13.101562 33.800781 12.890625 L 29.625 8.710938 C 29.414062 8.5 29.125 8.378906 28.824219 8.378906 L 28.820312 8.378906 C 28.519531 8.382812 28.230469 8.503906 28.019531 8.714844 L 4.867188 32.09375 C 4.855469 32.105469 4.859375 32.121094 4.847656 32.132812 C 4.730469 32.261719 4.632812 32.40625 4.582031 32.582031 L 2.613281 39.480469 L 0.0429688 48.480469 C -0.0703125 48.878906 0.0429688 49.304688 0.332031 49.597656 C 0.550781 49.8125 0.839844 49.929688 1.136719 49.929688 C 1.238281 49.929688 1.34375 49.914062 1.445312 49.886719 L 10.4375 47.316406 L 17.332031 45.34375 C 17.355469 45.335938 17.367188 45.320312 17.386719 45.316406 C 17.460938 45.289062 17.523438 45.25 17.589844 45.210938 C 17.652344 45.171875 17.71875 45.136719 17.773438 45.089844 C 17.789062 45.074219 17.804688 45.070312 17.820312 45.058594 L 41.179688 21.886719 C 41.390625 21.675781 41.511719 21.386719 41.515625 21.082031 C 41.515625 20.78125 41.394531 20.492188 41.179688 20.277344 Z M 37.007812 16.101562"/>
|
||||
<path className='compose-icon__path' d="M 48.597656 8.101562 L 41.792969 1.289062 C 40.074219 -0.429688 37.089844 -0.429688 35.371094 1.292969 L 31.210938 5.488281 C 30.773438 5.933594 30.773438 6.648438 31.214844 7.09375 L 42.800781 18.6875 C 43.023438 18.910156 43.3125 19.019531 43.601562 19.019531 C 43.890625 19.019531 44.179688 18.910156 44.402344 18.691406 L 48.597656 14.527344 C 49.457031 13.667969 49.929688 12.527344 49.929688 11.316406 C 49.929688 10.101562 49.457031 8.960938 48.597656 8.101562 Z M 48.597656 8.101562"/>
|
||||
</g>
|
||||
<g>
|
||||
<path className='compose-icon__path' d="M 17.015625 7.59375 L 10.40625 7.59375 L 10.40625 0.996094 C 10.40625 0.453125 9.964844 0 9.421875 0 L 8.578125 0 C 8.035156 0 7.59375 0.453125 7.59375 0.996094 L 7.59375 7.59375 L 0.984375 7.59375 C 0.441406 7.59375 0 8.03125 0 8.574219 L 0 9.425781 C 0 9.96875 0.441406 10.40625 0.984375 10.40625 L 7.59375 10.40625 L 7.59375 17.027344 C 7.59375 17.570312 8.035156 18 8.578125 18 L 9.421875 18 C 9.964844 18 10.40625 17.570312 10.40625 17.027344 L 10.40625 10.40625 L 17.015625 10.40625 C 17.558594 10.40625 18 9.96875 18 9.425781 L 18 8.574219 C 18 8.03125 17.558594 7.59375 17.015625 7.59375 Z M 17.015625 7.59375"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ComposeIcon
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import ComposeIcon from './assets/compose_icon';
|
||||
|
||||
import './floating_action_button.scss';
|
||||
|
||||
export default class FloatingActionButton extends Component {
|
||||
|
|
@ -6,19 +8,17 @@ export default class FloatingActionButton extends Component {
|
|||
message: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
if (nextProps.message !== this.props.message) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return nextProps.message !== this.props.message;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { onClick, message } = this.props;
|
||||
|
||||
return (
|
||||
<button onClick={onClick} className='floating-action-button' aria-label={message} />
|
||||
<button onClick={onClick} className='floating-action-button' aria-label={message}>
|
||||
<ComposeIcon />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -3,19 +3,26 @@
|
|||
position: fixed;
|
||||
z-index: 1000;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-color: $gab-brand-default;
|
||||
padding-top: 6px;
|
||||
padding-left: 10px;
|
||||
|
||||
@include size(61px, 52px);
|
||||
@include circle(56px);
|
||||
@include abs-position(auto, 14px, 14px, auto, false);
|
||||
@include background-image('/assets/images/sprite-main-navigation.png', 161px 152px, -100px 0);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
display: flex;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-position: -100px -100px;
|
||||
background-color: lighten($gab-brand-default, 5%);
|
||||
}
|
||||
|
||||
.compose-icon {
|
||||
&__path {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
object-fit: contain;
|
||||
|
||||
@include max-size($media-modal-media-max-width, $media-modal-media-max-height);
|
||||
@include background-image('/assets/images/void.png', contain, center, repeat);
|
||||
@include background-image("", contain, center, repeat);
|
||||
}
|
||||
|
||||
&--amorphous & {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import './gab_logo.scss'
|
||||
|
||||
const GabLogo = ({
|
||||
className = 'gab-logo',
|
||||
width = '50px',
|
||||
height = '30px',
|
||||
viewBox = '0 0 50 30'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='gab-logo__path' d='M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0
|
||||
c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3
|
||||
c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4
|
||||
c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z'/>
|
||||
<path className='gab-logo__path' d='M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3
|
||||
c2.4,2.4,6.9,1.9,9.3-0.9C51.5,15.9,50.1,9.6,45.6,7.7z M43.7,17.5c-2.1,1.4-5.1-0.2-5.1-2.8c0-2.1,1.9-3.7,3.9-3.3
|
||||
C45.4,12.1,46.2,15.8,43.7,17.5z'/>
|
||||
<path className='gab-logo__path' d='M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7
|
||||
c0,0,0.1,0,0.2-0.1c2.7-1.4,5.4-0.9,5.6,1.1l0,0.2l-0.4-0.1c-3-0.8-6.3-0.1-7.7,1.6c-1.8,2.2-0.9,5.8,1.7,7.1
|
||||
c2.1,1,4.6,0.6,6.1-0.8l0.2-0.2v0.6v0.6h2.4h2.4v-4C31.7,13.7,31.7,13.3,31.5,12.5z M26.9,16.4c-0.1,0.7-0.5,1.5-1,2
|
||||
c-1.2,1.1-3,0.7-3.2-0.7c-0.2-1,0.6-1.7,2-1.8c0.1,0,0.2,0,0.2,0c0,0,0.2,0,0.4,0c0.5,0,1,0.1,1.4,0.2l0.3,0.1L26.9,16.4z'/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default GabLogo
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.gab-logo {
|
||||
enable-background: new 0 0 50 30;
|
||||
|
||||
&__path {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: $gab-brand-default;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './gab_logo';
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
const GroupIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '18px',
|
||||
height = '18px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='tabs-bar-icon__path' d='M 29.011719 10.753906 C 31.234375 12.148438 32.792969 14.503906 33.078125 17.242188 C 33.984375 17.667969 34.992188 17.910156 36.058594 17.910156 C 39.953125 17.910156 43.109375 14.753906 43.109375 10.859375 C 43.109375 6.964844 39.953125 3.808594 36.058594 3.808594 C 32.199219 3.808594 29.070312 6.910156 29.011719 10.753906 Z M 24.394531 25.191406 C 28.289062 25.191406 31.445312 22.03125 31.445312 18.140625 C 31.445312 14.246094 28.289062 11.089844 24.394531 11.089844 C 20.5 11.089844 17.339844 14.246094 17.339844 18.140625 C 17.339844 22.035156 20.5 25.191406 24.394531 25.191406 Z M 27.382812 25.671875 L 21.402344 25.671875 C 16.421875 25.671875 12.375 29.722656 12.375 34.699219 L 12.375 42.015625 L 12.390625 42.132812 L 12.894531 42.289062 C 17.648438 43.773438 21.773438 44.269531 25.171875 44.269531 C 31.804688 44.269531 35.652344 42.375 35.890625 42.257812 L 36.359375 42.019531 L 36.410156 42.019531 L 36.410156 34.699219 C 36.414062 29.722656 32.363281 25.671875 27.382812 25.671875 Z M 39.050781 18.390625 L 33.113281 18.390625 C 33.050781 20.765625 32.035156 22.90625 30.429688 24.445312 C 34.855469 25.761719 38.09375 29.863281 38.09375 34.710938 L 38.09375 36.964844 C 43.957031 36.75 47.335938 35.089844 47.554688 34.976562 L 48.027344 34.738281 L 48.078125 34.738281 L 48.078125 27.417969 C 48.078125 22.441406 44.027344 18.390625 39.050781 18.390625 Z M 12.019531 17.910156 C 13.402344 17.910156 14.683594 17.507812 15.769531 16.824219 C 16.117188 14.570312 17.324219 12.597656 19.050781 11.257812 C 19.058594 11.125 19.070312 10.996094 19.070312 10.863281 C 19.070312 6.96875 15.914062 3.8125 12.019531 3.8125 C 8.125 3.8125 4.96875 6.96875 4.96875 10.863281 C 4.96875 14.753906 8.125 17.910156 12.019531 17.910156 Z M 18.351562 24.445312 C 16.757812 22.914062 15.746094 20.785156 15.671875 18.425781 C 15.453125 18.410156 15.234375 18.390625 15.011719 18.390625 L 9.027344 18.390625 C 4.050781 18.390625 0 22.441406 0 27.417969 L 0 34.738281 L 0.0195312 34.851562 L 0.523438 35.007812 C 4.332031 36.199219 7.734375 36.746094 10.691406 36.921875 L 10.691406 34.710938 C 10.691406 29.863281 13.925781 25.761719 18.351562 24.445312 Z M 18.351562 24.445312' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default GroupIcon
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
const HomeIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='tabs-bar-icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default HomeIcon
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import GroupIcon from './group_icon';
|
||||
import HomeIcon from './home_icon';
|
||||
import NotificationsIcon from './notifications_icon';
|
||||
import SearchIcon from './search_icon';
|
||||
|
||||
export {
|
||||
GroupIcon,
|
||||
HomeIcon,
|
||||
NotificationsIcon,
|
||||
SearchIcon,
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
const NotificationsIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='tabs-bar-icon__path' d='M 17.363281 43.667969 C 18.488281 46.21875 21.039062 48 24 48 C 26.960938 48 29.511719 46.21875 30.636719 43.667969 Z M 17.363281 43.667969' />
|
||||
<path className='tabs-bar-icon__path' d='M 24 4.585938 C 25.953125 4.585938 27.828125 4.929688 29.570312 5.5625 L 29.570312 5.347656 C 29.570312 2.398438 27.171875 0 24.222656 0 L 23.777344 0 C 20.828125 0 18.429688 2.398438 18.429688 5.347656 L 18.429688 5.558594 C 20.171875 4.929688 22.046875 4.585938 24 4.585938 Z M 24 4.585938' />
|
||||
<path className='tabs-bar-icon__path' d='M 41.574219 40.851562 L 6.425781 40.851562 C 5.757812 40.851562 5.148438 40.402344 5.011719 39.753906 C 4.875 39.109375 5.167969 38.472656 5.761719 38.199219 C 5.90625 38.105469 6.96875 37.363281 8.035156 35.113281 C 9.988281 30.980469 10.398438 25.160156 10.398438 21.003906 C 10.398438 13.503906 16.5 7.402344 24 7.402344 C 31.480469 7.402344 37.570312 13.472656 37.597656 20.949219 C 37.597656 20.964844 37.601562 20.984375 37.601562 21.003906 C 37.601562 25.160156 38.011719 30.980469 39.964844 35.113281 C 41.03125 37.363281 42.09375 38.105469 42.238281 38.199219 C 42.832031 38.472656 43.125 39.109375 42.988281 39.753906 C 42.851562 40.402344 42.242188 40.851562 41.574219 40.851562 Z M 42.253906 38.207031 Z M 42.253906 38.207031' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default NotificationsIcon
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
const SearchIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='tabs-bar-icon__path' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default SearchIcon
|
||||
|
|
@ -8,6 +8,13 @@ import SearchContainer from 'gabsocial/features/compose/containers/search_contai
|
|||
import Avatar from '../avatar';
|
||||
import ActionBar from 'gabsocial/features/compose/components/action_bar';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import GabLogo from './assets/gab_logo/gab_logo';
|
||||
import {
|
||||
GroupIcon,
|
||||
HomeIcon,
|
||||
NotificationsIcon,
|
||||
SearchIcon,
|
||||
} from './assets/tabs_bar_icon';
|
||||
|
||||
import './tabs_bar.scss';
|
||||
|
||||
|
|
@ -41,8 +48,9 @@ class TabsBar extends ImmutablePureComponent {
|
|||
<nav className='tabs-bar'>
|
||||
<div className='tabs-bar__container'>
|
||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
||||
<a className='tabs-bar-item--logo' href='/#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<a className='tabs-bar-item--logo' href='/#' data-preview-title-id='column.home'>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
<GabLogo />
|
||||
</a>
|
||||
<a className='tabs-bar-item home' href='/home' data-preview-title-id='column.home' >
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
|
|
@ -73,20 +81,25 @@ class TabsBar extends ImmutablePureComponent {
|
|||
<nav className='tabs-bar'>
|
||||
<div className='tabs-bar__container'>
|
||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
||||
<NavLink className='tabs-bar-item--logo' to='/home#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<NavLink className='tabs-bar-item--logo' to='/home#' data-preview-title-id='column.home'>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
<GabLogo />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item home' to='/home' data-preview-title-id='column.home' >
|
||||
<HomeIcon />
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item notifications' to='/notifications' data-preview-title-id='column.notifications' >
|
||||
<NotificationsIcon />
|
||||
<NotificationsCounter />
|
||||
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item groups' to='/groups' data-preview-title-id='column.groups' >
|
||||
<GroupIcon />
|
||||
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item optional' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<SearchIcon />
|
||||
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
|
||||
</NavLink>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -95,10 +95,8 @@
|
|||
&__button-compose {
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $gab-brand-default !important;
|
||||
border-radius: 17px;
|
||||
|
||||
@include background-image('/assets/images/sprite-main-navigation.png', 161px 152px, 18px 2px);
|
||||
@include size(70px, 34px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
|
|
@ -106,9 +104,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($gab-brand-default, 5%) !important;
|
||||
background-position: 18px -98px;
|
||||
box-shadow: inset 0px 0px 6px darken($gab-brand-default, 10%);
|
||||
background-color: lighten($gab-brand-default, 5%);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -138,20 +134,17 @@
|
|||
margin: 0 25px 0 0;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
@include background-image('/assets/images/sprite-main-navigation-links.png', auto 84px);
|
||||
padding-top: 14px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-size: auto 120px;
|
||||
margin: 4px 0 0 0;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
padding-top: 12px !important;
|
||||
|
||||
@include size(46px, 42px);
|
||||
@include size(46px, 50px);
|
||||
|
||||
&.active {
|
||||
height: 38px;
|
||||
border-bottom: 4px solid $gab-default-text-light;
|
||||
border-bottom: 2px solid $gab-brand-default;
|
||||
}
|
||||
|
||||
&>span {
|
||||
|
|
@ -159,85 +152,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
// REMINDER - to add the remaining icons (globe / word balloon) from the sprite into this css as necessary
|
||||
&.home {
|
||||
padding: 16px 0 0 26px;
|
||||
background-position: 0 18px;
|
||||
|
||||
&.active {
|
||||
background-position: 0 -52px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-position: 11px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: 11px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.notifications {
|
||||
padding: 16px 0 0 22px;
|
||||
background-position: -140px 18px;
|
||||
|
||||
&.active {
|
||||
background-position: -140px -52px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-position: -186px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: -186px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.groups {
|
||||
padding: 16px 0 0 29px;
|
||||
background-position: -280px 18px;
|
||||
|
||||
&.active {
|
||||
background-position: -280px -52px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-position: -391px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: -391px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.optional {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-2) {
|
||||
display: flex;
|
||||
background-position: -987px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: -987px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $gab-text-highlight;
|
||||
|
||||
.tabs-bar-icon__path {
|
||||
fill: $gab-text-highlight;
|
||||
}
|
||||
}
|
||||
|
||||
&--logo {
|
||||
display: block;
|
||||
margin-right: 35px;
|
||||
padding-top: 10px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include background-image('/assets/images/gab_logo.svg', 50px 30px, 0 10px);
|
||||
@include size(50px);
|
||||
|
||||
// NOTE - Revisit right-margin of home button / positioning between 376px and 350px
|
||||
// - want to keep the icons centered between logo and profile image while shrinking
|
||||
@media (min-width: $nav-breakpoint-4) and (max-width: $nav-breakpoint-1) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-4) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -245,10 +188,17 @@
|
|||
& span {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000 !important;
|
||||
border: none !important;
|
||||
.tabs-bar-icon {
|
||||
margin-right: 6px;
|
||||
|
||||
&__path {
|
||||
fill: $white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -73,6 +73,6 @@
|
|||
overflow: hidden;
|
||||
|
||||
@include size(100%, 140px);
|
||||
@include background-image;
|
||||
@include background-image("");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="50px" height="30px" viewBox="0 0 50 30" style="enable-background:new 0 0 50 30;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#21CF7A;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0
|
||||
c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3
|
||||
c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4
|
||||
c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z"/>
|
||||
<path class="st0" d="M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3
|
||||
c2.4,2.4,6.9,1.9,9.3-0.9C51.5,15.9,50.1,9.6,45.6,7.7z M43.7,17.5c-2.1,1.4-5.1-0.2-5.1-2.8c0-2.1,1.9-3.7,3.9-3.3
|
||||
C45.4,12.1,46.2,15.8,43.7,17.5z"/>
|
||||
<path class="st0" d="M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7
|
||||
c0,0,0.1,0,0.2-0.1c2.7-1.4,5.4-0.9,5.6,1.1l0,0.2l-0.4-0.1c-3-0.8-6.3-0.1-7.7,1.6c-1.8,2.2-0.9,5.8,1.7,7.1
|
||||
c2.1,1,4.6,0.6,6.1-0.8l0.2-0.2v0.6v0.6h2.4h2.4v-4C31.7,13.7,31.7,13.3,31.5,12.5z M26.9,16.4c-0.1,0.7-0.5,1.5-1,2
|
||||
c-1.2,1.1-3,0.7-3.2-0.7c-0.2-1,0.6-1.7,2-1.8c0.1,0,0.2,0,0.2,0c0,0,0.2,0,0.4,0c0.5,0,1,0.1,1.4,0.2l0.3,0.1L26.9,16.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 B |
Loading…
Reference in New Issue