feature: html + css - sub-menu added in user panel + styles
This commit is contained in:
gaelle morin
parent
961a8b6cb8
commit
1f7dbe8bca
112
src/header.pug
112
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"}`
|
||||
)
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
@import 'header/_index';
|
||||
@import 'left-nav/_index';
|
||||
@import 'content/_index';
|
||||
3
src/styles/hubl-app/content/_index.scss
Normal file
3
src/styles/hubl-app/content/_index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
main {
|
||||
height: calc(100vh - 72px);
|
||||
}
|
||||
310
src/styles/hubl-app/header/_index.scss
Normal file
310
src/styles/hubl-app/header/_index.scss
Normal 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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/styles/hubl-app/left-nav/_index.scss
Normal file
3
src/styles/hubl-app/left-nav/_index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
nav {
|
||||
height: calc(100vh - 72px);
|
||||
}
|
||||
@ -2,3 +2,5 @@
|
||||
@import 'texts';
|
||||
@import 'borders';
|
||||
@import 'shadows';
|
||||
@import 'user-thumb';
|
||||
@import 'lists'
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
5
src/styles/hubl-framework/commons/lists.scss
Normal file
5
src/styles/hubl-framework/commons/lists.scss
Normal file
@ -0,0 +1,5 @@
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
73
src/styles/hubl-framework/commons/user-thumb.scss
Normal file
73
src/styles/hubl-framework/commons/user-thumb.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -2,3 +2,6 @@
|
||||
@import 'sizes';
|
||||
@import 'positions';
|
||||
@import 'colors';
|
||||
@import 'custom-icons';
|
||||
@import 'material-design-icons';
|
||||
@import 'simple-line-icons';
|
||||
|
||||
116
src/styles/hubl-framework/icons/custom-icons.scss
Normal file
116
src/styles/hubl-framework/icons/custom-icons.scss
Normal 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};
|
||||
}
|
||||
}
|
||||
91
src/styles/hubl-framework/icons/material-design-icons.scss
Normal file
91
src/styles/hubl-framework/icons/material-design-icons.scss
Normal 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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
263
src/styles/hubl-framework/icons/simple-line-icons.scss
Normal file
263
src/styles/hubl-framework/icons/simple-line-icons.scss
Normal 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};
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
solid-link,
|
||||
solid-route {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.backlink {
|
||||
color: #636363;
|
||||
text-decoration: underline;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user