page actions more prominent

This commit is contained in:
Felix Hamann 2018-11-27 22:04:40 +01:00
parent 431eb45a94
commit 1085dc1df1
3 changed files with 20 additions and 29 deletions

View File

@ -5,8 +5,9 @@
--color-success: #23d160; --color-success: #23d160;
--color-info: #c4c4c4; --color-info: #c4c4c4;
--color-lightblack: #1A2A36; --color-lightblack: #1A2A36;
--color-lightwhite: #FCFFFA; --color-lightwhite: #fcfffa;
--color-grey: #B1B5C0; --color-grey: #B1B5C0;
--color-grey-light: #f4f5f6;
--color-font: #34303a; --color-font: #34303a;
--color-fontsec: #5b5861; --color-fontsec: #5b5861;

View File

@ -1,17 +1,16 @@
$newline never $newline never
$if hasPageActions $if hasPageActions
<div .page-nav-prime> <div .page-nav-prime>
<ul .pagenav__list> $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
$forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes $case menuItemType
$case menuItemType $of PageActionPrime
$of PageActionPrime <div .pagenav__list-item>
<li .pagenav__list-item> $if menuItemModal
$if menuItemModal <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic> <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel} $of PageActionSecondary
$of PageActionSecondary <div .pagenav__list-item>
<li .pagenav__list-item> $if menuItemModal
$if menuItemModal <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
<div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic> <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
<a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel} $of _
$of _

View File

@ -1,19 +1,10 @@
.page-nav-prime { .page-nav-prime {
margin: 4px 0 13px; margin: 10px 0 20px;
border-left: 2px solid #c3c3c3; background-color: var(--color-grey-light);
padding-left: 10px;
}
.pagenav__list {
display: block;
margin-left: 0;
} }
.pagenav__list-item { .pagenav__list-item {
display: inline-block; display: inline-block;
padding: 15px;
&:not(:last-child) { box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
margin-right: 7px;
padding-right: 7px;
}
} }