feature: html + css - sub-menu added in user panel + styles

This commit is contained in:
gaelle morin 2020-12-05 16:17:06 +01:00
parent 961a8b6cb8
commit 1f7dbe8bca
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
20 changed files with 978 additions and 122 deletions

View File

@ -1,55 +1,59 @@
//-.segment.lg-three-quarter.float-left.align-middle
.logo
.segment.lg-three-quarter.float-left.bg-color-heading
.logo.segment.lg-auto.float-left
solid-link(next='dashboard')
img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`)
span.tag.beta.reversed.color-primary(data-trans='header.beta')
span.tag.reversed.color-primary.text-semibold(data-trans='header.beta')
//-.segment.lg-auto.float-right
.segment.lg-auto.float-left.margin-right.align-middle
.segment.lg-quarter.float-left.bg-color-third
.segment.bg-color-primary
solid-notifications.notLoggedIn(
nested-field="inbox"
bind-user
)
.segment.lg-auto.float-left.margin-left.text-bold.text-small.text-color-heading
details#user-controls.notLoggedIn.segment
.segment.lg-auto
details#user-controls.notLoggedIn
summary.segment.padding(tabindex='0' role='button')
solid-display#user-controls__profile(
fields='first_name, account.picture'
class-first_name='text-letter-spacing-larger'
class-account.picture='avatar small margin-right-small'
solid-display#user-controls__profile.user-thumb(
fields='account.picture, content(name-and-icon(first_name, button))'
class-account.picture='user-thumb-avatar user-thumb-avatar__size'
class-content='user-thumb-content'
class-name-and-icon='user-thumb-content__name-and-icon'
class-first_name='name'
class-button='icon icon-arrow-down'
widget-account.picture='hubl-user-avatar'
bind-user
)
#user-controls__panel
nav(role="user's functionalities menu")
nav.bg-color-white.text-semibold.text-color-heading
ul
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
li.border-bottom
solid-link.segment.padding(next='profile' data-trans='header.myProfile')
li.border-bottom
solid-link.segment.padding(next='admin' data-trans='header.admin')
ul
li.border-bottom.border-color-grey
solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
li.segment.padding-small.border-bottom.border-color-grey
div(data-trans='header.admin')
ul.text-normal
if (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route(name='admin-communities')
li.segment.padding.text-normal
a.icon.icon-people.icon-color-third(data-trans='admin.menuRight.community')
solid-route.text-hover(name='admin-communities')
li.segment.padding-top-small
a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community')
if endpoints.circles || (endpoints.get && endpoints.get.circles)
solid-route(name='admin-circles')
li.segment.padding.text-normal
a.icon.icon-globe.icon-color-third(data-trans='admin.menuRight.circles')
solid-route.text-hover(name='admin-circles')
li.segment.padding-top-small
a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles')
if endpoints.projects || (endpoints.get && endpoints.get.projects)
solid-route(name='admin-projects')
li.segment.padding.text-normal
a.icon.icon-folder-alt.icon-color-third(data-trans='admin.menuRight.projects')
li.border-bottom
solid-link.segment.padding(next='about' data-trans='header.about')
button.segment.padding.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
solid-route.text-hover(name='admin-projects')
li.segment.padding-top-small
a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects')
li.border-bottom.border-color-grey
solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
li
button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
sib-auth(style='display:none!important')
sib-auth-provider(
@ -59,56 +63,8 @@
)
//-.header-left
.logo
solid-link(next='dashboard')
img(src=`${clientLogo || '/images/logo.webp'}` style=`max-height:${clientLogoHeight || '74px'}`)
span.beta-tag(data-trans='header.beta')
//-solid-notifications.notLoggedIn(
nested-field="inbox"
bind-user
//-)
//- Templates for notifications from circles and from other users
include views/notifications/message-circle.pug
include views/notifications/message-private.pug
include templates/hubl-user-avatar.pug
//-details#user-controls.notLoggedIn
summary(tabindex='0' role='button')
solid-display#user-controls__profile(
fields='first_name, account.picture'
class-first_name='flex'
class-account.picture='avatar'
widget-account.picture='hubl-user-avatar'
bind-user
)
#user-controls__panel
nav(role="user's functionalities menu")
ul
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
li
solid-link(next='profile' data-trans='header.myProfile')
li
solid-link(next='admin' data-trans='header.admin')
li
solid-link(next='about' data-trans='header.about')
button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
//-button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
//-button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
//-sib-auth(style='display:none!important')
sib-auth-provider(
data-authority=`${authority}`
data-id=`${authorityName || "authority"}`
data-client-name=`${clientName || "Hubl"}`
)

View File

@ -16,17 +16,26 @@ html(lang="en")
link(rel="manifest" href="/manifest.webmanifest")
body
header#header.segment.padding-left-large.padding-right-large.shadow-small
include header.pug
nav#main__menu.segment.bg-color-heading.lg-quarter.float-left
p Hi!
main#content.segment.bg-color-third.lg-three-quarter.float-left
p Hello
//- header#header.header.is-spaced(role='banner')
include header.pug
header#header.segment.bg-color-white.shadow
//-header#header.segment.bg-color-white.shadow
include header.pug
//-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug
nav.segment.lg-quarter.bg-color-heading
//-nav.segment.lg-quarter.bg-color-heading
main.segment.lg-three-quarter.bg-color-third
//-main.segment.lg-three-quarter.bg-color-third
//-main#viewport.segment.float-left.notLoggedIn
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)

View File

@ -47,19 +47,19 @@
<solid-link class="button rounded reversed color-secondary icon-pencil icon-large bordered"></solid-link>
<p>Borders</p>
<div class="border all-sides color-primary">
<div class="border-all-sides border-color-primary">
<p>Salut</p>
</div>
<div class="border left color-secondary">
<div class="border-left border-color-secondary">
<p>Salut</p>
</div>
<div class="border bottom color-third">
<div class="border-bottom border-color-third">
<p>Salut</p>
</div>
<div class="border right color-heading">
<div class="border-right border-color-heading">
<p>Salut</p>
</div>
<div class="border all-sides color-grey">
<div class="border-all-sides border-color-grey">
<p>Salut</p>
</div>

View File

@ -0,0 +1,3 @@
@import 'header/_index';
@import 'left-nav/_index';
@import 'content/_index';

View File

@ -0,0 +1,3 @@
main {
height: calc(100vh - 72px);
}

View File

@ -0,0 +1,310 @@
header {
height: 72px;
position: fixed;
z-index: 999;
.logo {
img {
max-width: 200px;
}
}
/* Remove the disclosure triangle */
details {
summary {
/* on Firefox v.<69 */
&::-moz-list-bullet {
list-style-type: none;
}
/* on Chrome */
&::-webkit-details-marker {
display: none;
}
}
}
/* End */
solid-notifications {
color: var(--color-primary);
@media($small) {
padding: 0;
}
.solid-notifications__container {
position: relative;
.solid-notifications__button {
@include icon('bell');
font-size: 2.5rem;
@media($large) {
font-size: 3rem;
}
&::before {
margin-left: 0;
}
img {
display: none;
}
.solid-notifications__counter {
left: 2rem;
position: absolute;
top: 1px;
@media($large) {
left: 2.1rem;
top: -3px;
}
span {
color: white;
}
}
}
.solid-notifications__triangle-back {
display: none;
}
.solid-notifications__triangle-shadow {
display: none;
@media($large) {
background: white;
display: block;
position: absolute;
left: auto;
right: -2.1em;
top: 5em;
transform: initial;
width: 0;
z-index: 4;
&::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -5em;
top: 0px;
left: 50%;
border: 1em solid black;
border-color: #fff #fff transparent transparent;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
}
}
}
.solid-notifications__list {
border: none;
border-radius: 0;
box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
max-height: calc(100vh - 50px);
position: fixed;
left: 0;
top: 2.5em;
width: 100vw;
@media($large) {
max-height: calc(100vh - 93px);
position: absolute;
left: auto;
right: -2.3em;
top: 3.95em;
width: 347px;
}
/* Custom scrollbar */
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: thin;
scrollbar-color: #C9C8C8 #F1F1F1;
&::-webkit-scrollbar-track {
background: #F1F1F1;
}
&::-webkit-scrollbar-thumb {
background-color: #C9C8C8;
border-radius: 8px;
}
&::-webkit-scrollbar {
width: 8px;
}
/* End of custom scrollbar */
.solid-notifications__item {
border-bottom: none;
&:hover {
background-color: transparent;
& solid-notification__title,
& solid-notification__summary {
color: var(--color-secondary);
}
}
.solid-notification {
padding: 1.2rem 0 1.5rem;
&[data-read] {
opacity: 0.5;
}
.solid-notification__avatar {
align-items: center;
background: var(--color-grey);
display: flex;
height: 35px;
justify-content: center;
margin-left: 1.6rem;
margin-right: 1.4rem;
overflow: hidden;
position: relative;
vertical-align: middle;
width: 35px;
img {
background-color: var(--color-grey);
height: 100%;
object-fit: cover;
object-position: center center;
width: 100%;
}
object {
height: 45%;
width: 45%;
}
}
.solid-notification__content {
font-family: Open Sans, sans-serif;
.solid-notification__title {
color: var(--color-heading);
font-size: 1.3rem;
font-weight: 600;
.solid-notification__title__side {
font-weight: normal;
>span:first-child {
margin-right: 4px;
}
}
.solid-notification__title__icon {
display: inline-block;
font-family: simple-line-icons;
}
}
.solid-notification__summary {
color: var(--color-grey);
font-size: 1.2rem;
line-height: 1.7rem;
margin: 1.1rem 0 0;
@media($small) {
max-width: 226px;
}
@media($large) {
max-width: 256px;
}
}
}
.solid-notification__read {
display: none;
}
}
}
}
}
}
#user-controls {
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
summary {
cursor: pointer;
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
&:focus {
background-color: transparent;
color: white;
outline: none;
@media($large) {
background-color: var(--color-heading);
}
}
}
#user-controls__panel {
height: 0;
position: absolute;
right: 0;
z-index: 1;
/* Quick fix for mobile version */
width: 215px;
top: 42px;
@media($large) {
width: 100%;
top: 72px;
}
>nav {
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
position: absolute;
right: 0;
top: 0;
height: auto;
width: 100%;
solid-link,
button {
display: block;
}
button {
width: 100%;
text-align: left;
}
}
}
&[open] {
#user-controls__profile {
div {
solid-display-value[name='button'] {
@include icon('close');
}
}
}
}
}
}

View File

@ -0,0 +1,3 @@
nav {
height: calc(100vh - 72px);
}

View File

@ -2,3 +2,5 @@
@import 'texts';
@import 'borders';
@import 'shadows';
@import 'user-thumb';
@import 'lists'

View File

@ -1,24 +1,24 @@
.border {
&.all-sides {
&-all-sides {
border: 1px solid;
}
&.top {
&-top {
border-top: 1px solid;
}
&.right {
&-right {
border-right: 1px solid;
}
&.bottom {
&-bottom {
border-bottom: 1px solid;
}
&.left {
&-left {
border-left: 1px solid;
}
&-thick {
border-width: thick;
}
&.color {
&-color {
&-primary {
border-color: var(--color-primary);
}

View File

@ -0,0 +1,5 @@
ul {
list-style: none;
margin: 0;
padding: 0;
}

View File

@ -0,0 +1,73 @@
.user-thumb {
display: block;
position: relative;
box-sizing: border-box;
div {
display: flex;
align-items: center;
.user-thumb-avatar {
background: #E4E8ED;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 50px;
width: 50px;
margin-right: 16px;
border-radius: 50%;
overflow: hidden;
&.user-thumb-avatar__size {
height: 44px;
width: 44px;
}
>img,
object {
object-fit: cover;
object-position: center;
}
>img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
}
>object {
max-height: 40%;
max-width: 40%;
}
}
.user-thumb-content {
flex: 1 1 auto;
.user-thumb-content__name-and-icon {
display: flex;
justify-content: flex-start;
align-items: center;
.name {
font-size: 14px;
font-weight: 600;
flex: 0 1 auto;
letter-spacing: 0.38px;
}
.icon {
margin-left: 10px;
&::before {
font-size: 15px;
}
}
}
.user-thumb__sub-text {
color: red;
}
}
}
}

View File

@ -1,5 +1,6 @@
input[type='text'],
textarea {
background: #F6F6F6;
border: none;
outline: none;
color: #636363;
@ -15,10 +16,6 @@ textarea {
}
}
.input-bg-grey input {
background: #F6F6F6;
}
.input-bg-white input {
background: white;
}

View File

@ -2,3 +2,6 @@
@import 'sizes';
@import 'positions';
@import 'colors';
@import 'custom-icons';
@import 'material-design-icons';
@import 'simple-line-icons';

View File

@ -0,0 +1,116 @@
/* Custom icons */
$ci-filename: "custom-icons";
$ci-font-name: "custom-icons";
$ci-font-family: "custom-icons";
$ci-font-weight: "regular";
$ci-font-path: "../fonts" !default;
$ci-css-prefix: ci !default;
$ci-version: "tlnzh2" !default;
@font-face {
font-family: '#{$ci-font-name}';
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}');
src: url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'),
url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'),
url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'),
url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg');
font-weight: normal;
font-style: normal;
}
$ci-icons: (
awareness: '\e900',
businessman: '\e901',
information: '\e902',
list-1: '\e903',
sale: '\e904',
armor: '\e905',
chat: '\e906',
list: '\e907',
network: '\e908',
offer: '\e909',
reaction: '\e90a',
add: '\e90b',
appointment: '\e90c',
desk: '\e90d',
file: '\e90e',
premium: '\e90f',
team: '\e910',
beer: '\e911',
networking: '\e912',
receipt: '\e913',
robot: '\e914',
team-1: '\e915',
croupier: '\e916',
learning: '\e917',
review: '\e918',
surf: '\e919',
document: '\e91a',
code: '\e91b',
hat: '\e91c',
beer1: '\e91d',
alien: '\e91e',
add-user: '\e91f',
feedback: '\e920',
globe: '\e921',
bubble-add: '\e922'
);
%ci,
[class^='ci-']::before,
[class*='ci-']::before {
display: inline-block;
/* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$ci-font-name}' !important;
font-size: 25px;
font-style: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-align: center;
text-decoration: inherit;
width: 1em;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@function char($character-code) {
@if function-exists("selector-append") {
@return unquote("\"\\#{$character-code}\"");
}
@if "\\#{'x'}" == "\\x" {
@return str-slice("\x", 1, 1) + $character-code;
}
@else {
@return #{"\"\\"}#{$character-code + "\""};
}
}
@function ci($name) {
@if map-has-key($ci-icons, $name) == false {
@warn "Icon #{$name} not found.";
@return "";
}
@return char(map-get($ci-icons, $name));
}
@each $key, $value in $ci-icons {
.#{$ci-css-prefix}-#{$key}:before {
content: char($value);
}
}
@mixin ci($value) {
&:before {
@extend %ci;
@extend .#{$ci-css-prefix}-#{$value};
}
}

View File

@ -0,0 +1,91 @@
/* MaterialDesignIcons.com */
$mdi-filename: "material-design-icons";
$mdi-font-name: "material-design-icons";
$mdi-font-family: "material-design-icons";
$mdi-font-weight: "regular";
$mdi-font-path: "../fonts" !default;
$mdi-css-prefix: mdi !default;
$mdi-version: "3.3.92" !default;
@font-face {
font-family: '#{$mdi-font-name}';
src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}');
src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'),
url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'),
url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'),
url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
font-weight: normal;
font-style: normal;
}
$mdi-icons: (
account-outline: '\F013',
atom: '\F767',
cellphone-iphone: '\F120',
check: '\F12C',
email-outline: '\F1F0',
link-variant: '\F339'
);
%mdi,
[class^='mdi-']::before,
[class*='mdi-']::before {
display: inline-block;
font-family: '#{$mdi-font-name}' !important;
font-size: 25px;
font-style: normal;
font-weight: normal;
line-height: 0.5em;
margin-left: -0.15em;
text-align: center;
text-decoration: inherit;
width: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
}
@function char($character-code) {
@if function-exists("selector-append") {
@return unquote("\"\\#{$character-code}\"");
}
@if "\\#{'x'}" == "\\x" {
@return str-slice("\x", 1, 1) + $character-code;
}
@else {
@return #{"\"\\"}#{$character-code + "\""};
}
}
@function mdi($name) {
@if map-has-key($mdi-icons, $name) == false {
@warn "Icon #{$name} not found.";
@return "";
}
@return char(map-get($mdi-icons, $name));
}
@each $key, $value in $mdi-icons {
.#{$mdi-css-prefix}-#{$key}:before {
content: char($value);
}
}
@mixin mdi($value) {
&:before {
@extend %mdi;
@extend .#{$mdi-css-prefix}-#{$value};
}
}
.#{$mdi-css-prefix}-blank:before {
content: "\F68C";
visibility: hidden;
}

View File

@ -3,11 +3,12 @@
&.centered {
margin: 0 auto;
}
&.margin-right-small::before {
margin-right: 15px;
}
&.margin-right-xsmall::before {
margin-right: 10px;
}
&.margin-right-xxsmall::before {
margin-right: 5px;
}

View File

@ -0,0 +1,263 @@
@font-face {
font-family: 'simple-line-icons';
src: url('../fonts/simple-line-icons.eot?23594131');
src: url('../fonts/simple-line-icons.eot?23594131#iefix')
format('embedded-opentype'),
url('../fonts/simple-line-icons.woff2?23594131') format('woff2'),
url('../fonts/simple-line-icons.woff?23594131') format('woff'),
url('../fonts/simple-line-icons.ttf?23594131') format('truetype'),
url('../fonts/simple-line-icons.svg?23594131#simple-line-icons')
format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'simple-line-icons';
src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg');
}
}
*/
%icon,
[class^='icon-']:before,
[class*=' icon-']:before {
font-family: 'simple-line-icons';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0.2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
// text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}
$icons: (
user-female: '\e000',
people: '\e001',
user-follow: '\e002',
user-following: '\e003',
user-unfollow: '\e004',
user: '\e005',
trophy: '\e006',
speedometer: '\e007',
social-youtube: '\e008',
social-twitter: '\e009',
social-tumblr: '\e00a',
social-facebook: '\e00b',
social-dropbox: '\e00c',
social-dribbble: '\e00d',
shield: '\e00e',
screen-tablet: '\e00f',
screen-smartphone: '\e010',
screen-desktop: '\e011',
plane: '\e012',
notebook: '\e013',
mustache: '\e014',
mouse: '\e015',
magnet: '\e016',
magic-wand: '\e017',
hourglass: '\e018',
graduation: '\e019',
ghost: '\e01a',
game-controller: '\e01b',
fire: '\e01c',
eyeglass: '\e01d',
envelope-open: '\e01e',
envelope-letter: '\e01f',
energy: '\e020',
emotsmile: '\e021',
disc: '\e022',
cursor-move: '\e023',
crop: '\e024',
credit-card: '\e025',
chemistry: '\e026',
bell: '\e027',
badge: '\e028',
anchor: '\e029',
wallet: '\e02a',
vector: '\e02b',
speech: '\e02c',
puzzle: '\e02d',
printer: '\e02e',
present: '\e02f',
playlist: '\e030',
pin: '\e031',
picture: '\e032',
map: '\e033',
layers: '\e034',
handbag: '\e035',
globe-alt: '\e036',
globe: '\e037',
frame: '\e038',
folder-alt: '\e039',
film: '\e03a',
feed: '\e03b',
earphones-alt: '\e03c',
earphones: '\e03d',
drop: '\e03e',
drawar: '\e03f',
docs: '\e040',
directions: '\e041',
direction: '\e042',
diamond: '\e043',
cup: '\e044',
compass: '\e045',
call-out: '\e046',
call-in: '\e047',
call-end: '\e048',
calculator: '\e049',
bubbles: '\e04a',
briefcase: '\e04b',
book-open: '\e04c',
basket-loaded: '\e04d',
basket: '\e04e',
bag: '\e04f',
action-undo: '\e050',
action-redo: '\e051',
wrench: '\e052',
umbrella: '\e053',
trash: '\e054',
tag: '\e055',
support: '\e056',
size-fullscreen: '\e057',
size-actual: '\e058',
shuffle: '\e059',
share-alt: '\e05a',
share: '\e05b',
rocket: '\e05c',
question: '\e05d',
pie-chart: '\e05e',
pencil: '\e05f',
note: '\e060',
music-tone-alt: '\e061',
music-tone: '\e062',
microphone: '\e063',
loop: '\e064',
logout: '\e065',
login: '\e066',
list: '\e067',
like: '\e068',
home: '\e069',
grid: '\e06a',
graph: '\e06b',
equalizer: '\e06c',
dislike: '\e06d',
cursor: '\e06e',
control-start: '\e06f',
control-rewind: '\e070',
control-play: '\e071',
control-pause: '\e072',
control-forward: '\e073',
control-end: '\e074',
calendar: '\e075',
bulb: '\e076',
chart: '\e077',
arrow-up-circle: '\e078',
arrow-right-circle: '\e079',
arrow-left-circle: '\e07a',
arrow-down-circle: '\e07b',
ban: '\e07c',
bubble: '\e07d',
camrecorder: '\e07e',
camera: '\e07f',
check: '\e080',
clock: '\e081',
close: '\e082',
cloud-download: '\e083',
cloud-upload: '\e084',
doc: '\e085',
envelope: '\e086',
eye: '\e087',
flag: '\e088',
folder: '\e089',
heart: '\e08a',
info: '\e08b',
key: '\e08c',
link: '\e08d',
lock: '\e08e',
lock-open: '\e08f',
magnifier: '\e090',
magnifier-add: '\e091',
magnifier-remove: '\e092',
paper-clip: '\e093',
paper-plane: '\e094',
plus: '\e095',
location-pin: '\e096',
power: '\e097',
refresh: '\e098',
reload: '\e099',
settings: '\e09a',
star: '\e09b',
symble-female: '\e09c',
symbol-male: '\e09d',
target: '\e09e',
volume-1: '\e09f',
volume-2: '\e0a0',
volume-off: '\e0a1',
phone: '\e600',
menu: '\e601',
options-vertical: '\e602',
options: '\e603',
arrow-down: '\e604',
arrow-left: '\e605',
arrow-right: '\e606',
arrow-up: '\e607',
paypal: '\e608',
social-instagram: '\e609',
social-linkedin: '\e60a',
social-pintarest: '\e60b',
social-github: '\e60c',
social-google: '\e60d',
social-reddit: '\e60e',
social-skype: '\e60f',
social-behance: '\e610',
social-foursqare: '\e611',
social-soundcloud: '\e612',
social-spotify: '\e613',
social-stumbleupon: '\e614',
minus: '\e615',
organization: '\e616',
exclamation: '\e617',
social-vkontakte: '\e618',
event: '\e619',
social-steam: '\e620',
idea:'\e076'
);
@each $name, $code in $icons {
.icon-#{$name} {
&:before {
content: $code;
}
}
}
@mixin icon($code) {
&:before {
@extend %icon;
@extend .icon-#{$code};
}
}

View File

@ -1,3 +1,8 @@
solid-link,
solid-route {
cursor: pointer;
}
.backlink {
color: #636363;
text-decoration: underline;

View File

@ -1,5 +1,11 @@
$small: "min-width: 640px";
$medium: "min-width: 768px";
$large: "min-width: 1024px";
$xlarge: "min-width: 1280px";
.segment {
@media($large) {
&.lg {
&-hidden {
display: none;
@ -26,4 +32,5 @@
width: auto;
}
}
}
}

View File

@ -1,2 +1,11 @@
@charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media';
@import '../../node_modules/normalize.css/normalize';
:root {
font-size: 14px;
}
@import 'hubl-framework/_index';
@import 'hubl-app/_index';