diff --git a/src/header.pug b/src/header.pug
index 80e05556df0cf6d67582b07bc5973a8576155705..a2f40dd0ce03bf9f72fe9c1dbf9ca662652357bf 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -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"}`
- )
-
diff --git a/src/index.pug b/src/index.pug
index f90b2fff8c07e21f4007f2386d86991f9d2cf22b..6719d1fa54c09bd160a7d2488332daf3582e6e13 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -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)
diff --git a/src/interactions.html b/src/interactions.html
index 5806e34a5d23ce18483c76f8a788c39d79974068..f2ec73fcbbe9e1ff017a93f43a43a140ea69bed5 100644
--- a/src/interactions.html
+++ b/src/interactions.html
@@ -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>
diff --git a/src/styles/hubl-app/_index.scss b/src/styles/hubl-app/_index.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8e45ad15eb5bb0b2b02d39235d94565bd9f8f88e 100644
--- a/src/styles/hubl-app/_index.scss
+++ b/src/styles/hubl-app/_index.scss
@@ -0,0 +1,3 @@
+@import 'header/_index';
+@import 'left-nav/_index';
+@import 'content/_index';
diff --git a/src/styles/hubl-app/content/_index.scss b/src/styles/hubl-app/content/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c1bef4ee4894717ad803a5365c66557de923ff7c
--- /dev/null
+++ b/src/styles/hubl-app/content/_index.scss
@@ -0,0 +1,3 @@
+main {
+ height: calc(100vh - 72px);
+}
\ No newline at end of file
diff --git a/src/styles/hubl-app/header/_index.scss b/src/styles/hubl-app/header/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fdca4b2a19f1a7649026373058512bc24461d714
--- /dev/null
+++ b/src/styles/hubl-app/header/_index.scss
@@ -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');
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/hubl-app/left-nav/_index.scss b/src/styles/hubl-app/left-nav/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9ceec8bf7768d6f5e905b86be98fecdd80be42bd
--- /dev/null
+++ b/src/styles/hubl-app/left-nav/_index.scss
@@ -0,0 +1,3 @@
+nav {
+ height: calc(100vh - 72px);
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss
index 4151b5c4127380cbca548e0adba42834fe1e9b31..33ac785c9b3c98f43ddc744b7af83a4f0f95b501 100644
--- a/src/styles/hubl-framework/commons/_index.scss
+++ b/src/styles/hubl-framework/commons/_index.scss
@@ -2,3 +2,5 @@
@import 'texts';
@import 'borders';
@import 'shadows';
+@import 'user-thumb';
+@import 'lists'
diff --git a/src/styles/hubl-framework/commons/borders.scss b/src/styles/hubl-framework/commons/borders.scss
index 224d5f2e3ea51d33154220033c6f1a5aeeeaf69f..fd57c33b645c8860ec1a30f264269e6dd02d7b5c 100644
--- a/src/styles/hubl-framework/commons/borders.scss
+++ b/src/styles/hubl-framework/commons/borders.scss
@@ -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);
}
diff --git a/src/styles/hubl-framework/commons/lists.scss b/src/styles/hubl-framework/commons/lists.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ce598b0e78f3aa7b1d025c8b07aa2174ea49a2c7
--- /dev/null
+++ b/src/styles/hubl-framework/commons/lists.scss
@@ -0,0 +1,5 @@
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/styles/hubl-framework/commons/user-thumb.scss b/src/styles/hubl-framework/commons/user-thumb.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c4cbead6304a529f5439b6c8a82fc25340b3d4d1
--- /dev/null
+++ b/src/styles/hubl-framework/commons/user-thumb.scss
@@ -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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/forms/inputs.scss b/src/styles/hubl-framework/forms/inputs.scss
index 160eef95ac457d06661e90cf861161de31ab83bc..8ea5a075a28bc9210ea4b08ed515d001082565bb 100644
--- a/src/styles/hubl-framework/forms/inputs.scss
+++ b/src/styles/hubl-framework/forms/inputs.scss
@@ -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;
}
diff --git a/src/styles/hubl-framework/icons/_index.scss b/src/styles/hubl-framework/icons/_index.scss
index 9bba0a97281924c2df56aef122c0e9188d2a0e1e..8484e8f270b77b24710ce9ba1de6f41b4e72e277 100644
--- a/src/styles/hubl-framework/icons/_index.scss
+++ b/src/styles/hubl-framework/icons/_index.scss
@@ -2,3 +2,6 @@
@import 'sizes';
@import 'positions';
@import 'colors';
+@import 'custom-icons';
+@import 'material-design-icons';
+@import 'simple-line-icons';
diff --git a/src/styles/hubl-framework/icons/custom-icons.scss b/src/styles/hubl-framework/icons/custom-icons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b8c030cbdbeec172a55e8bb72bdb5ba7ce0ce0dd
--- /dev/null
+++ b/src/styles/hubl-framework/icons/custom-icons.scss
@@ -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};
+ }
+}
diff --git a/src/styles/hubl-framework/icons/material-design-icons.scss b/src/styles/hubl-framework/icons/material-design-icons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2793d8491c7593d4d611e5e5b281a82d9100129d
--- /dev/null
+++ b/src/styles/hubl-framework/icons/material-design-icons.scss
@@ -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;
+}
diff --git a/src/styles/hubl-framework/icons/positions.scss b/src/styles/hubl-framework/icons/positions.scss
index 17160edeff12fbacc6c79c9a6ddbdf912383f42e..4f5126214d3e0398c225ac3e52d71fc4e84e4886 100644
--- a/src/styles/hubl-framework/icons/positions.scss
+++ b/src/styles/hubl-framework/icons/positions.scss
@@ -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;
}
diff --git a/src/styles/hubl-framework/icons/simple-line-icons.scss b/src/styles/hubl-framework/icons/simple-line-icons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..651b2375677f6b40644a96ed24a50d7c44db2c66
--- /dev/null
+++ b/src/styles/hubl-framework/icons/simple-line-icons.scss
@@ -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};
+ }
+}
diff --git a/src/styles/hubl-framework/links/_index.scss b/src/styles/hubl-framework/links/_index.scss
index 7850c39d486cb1244e643afe0761fe110bb55dd5..2994213eecce71a413d235af8c2fc1c74f30676c 100644
--- a/src/styles/hubl-framework/links/_index.scss
+++ b/src/styles/hubl-framework/links/_index.scss
@@ -1,3 +1,8 @@
+solid-link,
+solid-route {
+ cursor: pointer;
+}
+
.backlink {
color: #636363;
text-decoration: underline;
diff --git a/src/styles/hubl-framework/segments/sizes.scss b/src/styles/hubl-framework/segments/sizes.scss
index a1d71080e84167400b440c5a27b2f823e40b3ecd..c89f001da48a8e24e7722cbcedb87e97b7c09a63 100644
--- a/src/styles/hubl-framework/segments/sizes.scss
+++ b/src/styles/hubl-framework/segments/sizes.scss
@@ -1,29 +1,36 @@
+$small: "min-width: 640px";
+$medium: "min-width: 768px";
+$large: "min-width: 1024px";
+$xlarge: "min-width: 1280px";
+
.segment {
- &.lg {
- &-hidden {
- display: none;
- }
- &-quarter {
- width: 25%;
- }
- &-third {
- width: 33.333%;
- }
- &-half {
- width: 50%;
- }
- &-two-third {
- width: 66.666%;
- }
- &-three-quarter {
- width: 75%;
- }
- &-full {
- width: 100%;
- }
- &-auto {
- width: auto;
+ @media($large) {
+ &.lg {
+ &-hidden {
+ display: none;
+ }
+ &-quarter {
+ width: 25%;
+ }
+ &-third {
+ width: 33.333%;
+ }
+ &-half {
+ width: 50%;
+ }
+ &-two-third {
+ width: 66.666%;
+ }
+ &-three-quarter {
+ width: 75%;
+ }
+ &-full {
+ width: 100%;
+ }
+ &-auto {
+ width: auto;
+ }
}
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2269e041db5d92554f0c377ff79bfff62d26b62d..e9b943545b6595bad87fcd4d33da3f92c0ed40e3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -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';