added navbar widget and did some cleanup to eventually get rid of bootstrap
This commit is contained in:
Felix Hamann
parent
7cb64b765a
commit
349938b0e7
@ -309,12 +309,14 @@ defaultMenuLayout menu widget = do
|
|||||||
-- you to use normal widget features in default-layout.
|
-- you to use normal widget features in default-layout.
|
||||||
|
|
||||||
pc <- widgetToPageContent $ do
|
pc <- widgetToPageContent $ do
|
||||||
addStylesheet $ StaticR css_bootstrap_css
|
-- addStylesheet $ StaticR css_globals_lucius
|
||||||
$(widgetFile "default-layout")
|
$(widgetFile "default-layout")
|
||||||
withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
|
withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
|
||||||
where
|
where
|
||||||
mainMenu :: [MenuTypes] -> Maybe (Route UniWorX) -> Widget
|
navbar :: [MenuTypes] -> Maybe (Route UniWorX) -> Widget
|
||||||
mainMenu menuTypes mcurrentRoute = $(widgetFile "main-menu")
|
navbar menuTypes mcurrentRoute = $(widgetFile "widgets/navbar")
|
||||||
|
breadcrumbsList :: [(Route UniWorX, Text)] -> Text -> Widget
|
||||||
|
breadcrumbsList parents title = $(widgetFile "widgets/breadcrumbs")
|
||||||
|
|
||||||
|
|
||||||
-- How to run database actions.
|
-- How to run database actions.
|
||||||
|
|||||||
@ -4,5 +4,5 @@ module Handler.Utils.Templates where
|
|||||||
|
|
||||||
import Import.NoFoundation
|
import Import.NoFoundation
|
||||||
|
|
||||||
-- list :: WidgetT site IO ()
|
lipsum :: WidgetT site IO ()
|
||||||
-- list = $(widgetFile "list") -- assumes /templates/list.hamlet
|
lipsum = $(widgetFile "widgets/lipsum")
|
||||||
|
|||||||
7022
static/css/bootstrap.css
vendored
7022
static/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
@ -19,12 +19,7 @@ $newline never
|
|||||||
\<!--[if lt IE 9]>
|
\<!--[if lt IE 9]>
|
||||||
\<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
\<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
\<![endif]-->
|
\<![endif]-->
|
||||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js">
|
|
||||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.min.js">
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.min.js">
|
||||||
|
|
||||||
\<!-- Bootstrap-3.3.7 compiled and minified JavaScript -->
|
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* The `defaultCsrfMiddleware` Middleware added in Foundation.hs adds a CSRF token to the request cookies. */
|
/* The `defaultCsrfMiddleware` Middleware added in Foundation.hs adds a CSRF token to the request cookies. */
|
||||||
/* AJAX requests should add that token to a header to be validated by the server. */
|
/* AJAX requests should add that token to a header to be validated by the server. */
|
||||||
@ -43,8 +38,6 @@ $newline never
|
|||||||
\ });
|
\ });
|
||||||
}
|
}
|
||||||
|
|
||||||
<script>
|
|
||||||
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
|
|
||||||
<body>
|
<body>
|
||||||
^{pageBody pc}
|
^{pageBody pc}
|
||||||
|
|
||||||
|
|||||||
@ -1,51 +1,24 @@
|
|||||||
|
<div #main.main-wrapper>
|
||||||
|
<!-- navigation -->
|
||||||
|
^{navbar menuTypes mcurrentRoute}
|
||||||
|
|
||||||
<!-- Static navbar -->
|
|
||||||
<nav .navbar.navbar-default.navbar-static-top>
|
|
||||||
<div .container>
|
|
||||||
<div .navbar-header>
|
|
||||||
<button type="button" .navbar-toggle.collapsed data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
||||||
<span class="sr-only">Toggle navigation</span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
|
|
||||||
<div #navbar .collapse.navbar-collapse>
|
<div .content-wrapper>
|
||||||
^{mainMenu menuTypes mcurrentRoute}
|
<!-- breadcrumbs -->
|
||||||
|
|
||||||
<ul .nav.navbar-nav.navbar-right>
|
|
||||||
$forall menuType <- menuTypes
|
|
||||||
$case menuType
|
|
||||||
$of NavbarRight (MenuItem label route _)
|
|
||||||
<li :Just route == mcurrentRoute:.active>
|
|
||||||
<a href=@{route}>#{label}
|
|
||||||
$of _
|
|
||||||
|
|
||||||
<!-- Page Contents -->
|
|
||||||
|
|
||||||
<div .container>
|
|
||||||
$if not $ Just HomeR == mcurrentRoute
|
$if not $ Just HomeR == mcurrentRoute
|
||||||
<ul .breadcrumb>
|
^{breadcrumbsList parents title}
|
||||||
$forall bc <- parents
|
|
||||||
<li>
|
|
||||||
<a href="@{fst bc}">#{snd bc}
|
|
||||||
|
|
||||||
<li .active>#{title}
|
|
||||||
|
|
||||||
|
<!-- alerts -->
|
||||||
$forall (status, msg) <- mmsgs
|
$forall (status, msg) <- mmsgs
|
||||||
$with status2 <- bool status "info" (status == "")
|
$with status2 <- bool status "info" (status == "")
|
||||||
<div class="alert alert-#{status2}">#{msg}
|
<div class="alert alert-#{status2}">#{msg}
|
||||||
|
|
||||||
|
<!-- actual content -->
|
||||||
$if (Just HomeR == mcurrentRoute)
|
|
||||||
^{widget}
|
^{widget}
|
||||||
$else
|
|
||||||
<div .container>
|
|
||||||
<div .row>
|
|
||||||
<div .col-md-12>
|
|
||||||
^{widget}
|
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- a little lorem ipsum for waste of vertical space -->
|
||||||
<footer .footer>
|
^{lipsum}
|
||||||
<div .container>
|
|
||||||
<p .text-muted>
|
<!-- footer -->
|
||||||
#{appCopyright $ appSettings master}
|
<footer>
|
||||||
|
#{appCopyright $ appSettings master}
|
||||||
|
|||||||
@ -1,73 +1,93 @@
|
|||||||
.masthead,
|
/* THEME 1 */
|
||||||
.navbar {
|
@base00: #72a85b;
|
||||||
background-color: rgb(27, 28, 29);
|
@base-bg-color: #1d1c1d;
|
||||||
}
|
@base-font-color: #fff;
|
||||||
|
@sec-font-color: #fff;
|
||||||
.navbar-default .navbar-nav > .active > a {
|
@box-bg-color: #3c3c3c;
|
||||||
background-color: transparent;
|
/* THEME 2 */
|
||||||
border-bottom: 2px solid white;
|
@base00: #38428a;
|
||||||
}
|
@base-bg-color: #ffffff;
|
||||||
|
@base-font-color: rgb(53, 53, 53);
|
||||||
.navbar-nav {
|
@sec-font-color: #eaf2ff;
|
||||||
padding-bottom: 1em;
|
@box-bg-color: #dddddd;
|
||||||
}
|
/* THEME 3 */
|
||||||
|
@base00: rebeccapurple;
|
||||||
.masthead {
|
|
||||||
margin-top: -21px;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
min-height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.masthead .header {
|
|
||||||
max-width: 700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.masthead h1.header {
|
|
||||||
margin-top: 1em;
|
|
||||||
margin-bottom: 0em;
|
|
||||||
font-size: 4.5em;
|
|
||||||
line-height: 1.2em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.masthead h2 {
|
|
||||||
font-size: 1.7em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.masthead .btn {
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Common styles for all types */
|
|
||||||
.bs-callout {
|
|
||||||
padding: 20px;
|
@footer-height: 50px;
|
||||||
margin: 20px 0;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-left-width: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-callout p:last-child {
|
body {
|
||||||
margin-bottom: 0;
|
background-color: white;
|
||||||
|
color: #333;
|
||||||
|
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-callout-info {
|
a,
|
||||||
border-left-color: #1b809e;
|
a:visited {
|
||||||
|
color: rebeccapurple;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color .2s ease, background-color .2s ease;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #422063;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Space things out */
|
ul {
|
||||||
.bs-docs-section {
|
list-style-type: none;
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
}
|
||||||
.bs-docs-section:last-child {
|
ul.flat > li {
|
||||||
margin-bottom: 0;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#message {
|
h1, h2, h3, h4, h5 {
|
||||||
margin-bottom: 40px;
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 10px 0 5px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 5px 0 0;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0 2px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
padding: 0 10vw;
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,74 +1,42 @@
|
|||||||
<div .masthead>
|
<div>
|
||||||
<div .container>
|
<h1>ReWorX - Demo
|
||||||
<div .row>
|
<h3>
|
||||||
<h1 .header>
|
Testumgebung für die Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
|
||||||
ReWorX - Demo
|
|
||||||
<h3>
|
|
||||||
Testumgebung für die Re-Implementierung von
|
|
||||||
<a href="https://uniworx.ifi.lmu.de/">
|
|
||||||
UniWorX
|
|
||||||
|
|
||||||
<div .container>
|
<div>
|
||||||
<!-- Starting
|
<h2>Übersicht
|
||||||
================================================== -->
|
<p>
|
||||||
<div .bs-docs-section>
|
Die Reimplementierung von
|
||||||
<div .row>
|
UniWorX ist noch nicht abgeschlossen.
|
||||||
<div .col-lg-12>
|
|
||||||
<div .page-header>
|
|
||||||
<h2 #start>Übersicht
|
|
||||||
|
|
||||||
<p>
|
<p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
|
||||||
Die Reimplementierung von
|
|
||||||
UniWorX ist noch nicht abgeschlossen.
|
|
||||||
|
|
||||||
<div .alert .alert-danger>
|
<div>
|
||||||
Das System ist noch nicht produktiv
|
<h2>Design
|
||||||
einsetzbar
|
<p>
|
||||||
|
Wir konzentrieren uns derzeit
|
||||||
|
ausschließlich auf die Funktionalität.
|
||||||
|
<p>
|
||||||
|
Insbesondere Formulare zeigen
|
||||||
|
alle Eingabefelder und Knöpfe
|
||||||
|
ohne eine gezielte Anordnung
|
||||||
|
und Reihenfolge.
|
||||||
|
Dies läßt sich leicht nachträglich einstellen.
|
||||||
|
|
||||||
<div .bs-docs-section>
|
<div>
|
||||||
<div .row>
|
<h2>Teilweise funktionierende Abschnitte
|
||||||
<div .col-lg-12>
|
|
||||||
<div .page-header>
|
|
||||||
<h2 #design>Design
|
|
||||||
|
|
||||||
<p>
|
<ul>
|
||||||
Wir konzentrieren uns derzeit
|
<li>
|
||||||
ausschließlich auf die Funktionalität.
|
<a href=@{TermShowR}>Semester Verwaltung
|
||||||
<p>
|
<li>
|
||||||
Insbesondere Formulare zeigen
|
<a href=@{CourseEditR}>Kurse anlegen, editieren und anzeigen
|
||||||
alle Eingabefelder und Knöpfe
|
|
||||||
ohne eine gezielte Anordnung
|
|
||||||
und Reihenfolge.
|
|
||||||
Dies läßt sich leicht nachträglich einstellen.
|
|
||||||
<p>
|
|
||||||
Momentan werden noch keine speziellen Grafiken oder CSS verwendet;
|
|
||||||
sondern nur gewöhnliches Bootstrap3.
|
|
||||||
|
|
||||||
<div .bs-docs-section>
|
<div>
|
||||||
<div .row>
|
<h2>Funktionen zum Testen
|
||||||
<div .col-lg-12>
|
|
||||||
<div .page-header>
|
|
||||||
<h2 #design>Teilweise funktionierende Abschnitte
|
|
||||||
|
|
||||||
<ul .list-group>
|
|
||||||
|
|
||||||
<li .list-group-item>
|
|
||||||
<a href=@{TermShowR}>Semester Verwaltung
|
|
||||||
|
|
||||||
<li .list-group-item>
|
|
||||||
<a href=@{CourseEditR}>Kurse anlegen
|
|
||||||
editieren und anzeigen
|
|
||||||
|
|
||||||
<h2 #design>Funktionen zum Testen
|
|
||||||
|
|
||||||
<ul .list-group>
|
|
||||||
|
|
||||||
<li .list-group-item>
|
|
||||||
Institut einmalig in Datenbank einfügen:
|
|
||||||
<form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
|
|
||||||
^{btnWdgt}
|
|
||||||
|
|
||||||
<li .list-group-item>
|
|
||||||
<a href=@{CourseEditR}>Kurse anlegen
|
|
||||||
editieren und anzeigen
|
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Institut einmalig in Datenbank einfügen:
|
||||||
|
<form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
|
||||||
|
^{btnWdgt}
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
<ul .nav.navbar-nav>
|
|
||||||
$forall menuType <- menuTypes
|
|
||||||
$case menuType
|
|
||||||
$of NavbarLeft (MenuItem label route _)
|
|
||||||
<li :Just route == mcurrentRoute:.active>
|
|
||||||
<a href=@{route}>#{label}
|
|
||||||
$of _
|
|
||||||
5
templates/widgets/breadcrumbs.hamlet
Normal file
5
templates/widgets/breadcrumbs.hamlet
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<div>
|
||||||
|
<ul .breadcrumbs.flat>
|
||||||
|
$forall bc <- parents
|
||||||
|
<li><a href="@{fst bc}">#{snd bc}</a> >
|
||||||
|
<li .active>#{title}
|
||||||
10
templates/widgets/lipsum.hamlet
Normal file
10
templates/widgets/lipsum.hamlet
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<div>
|
||||||
|
<h2>A little lorem ipsum to make the page scrollable
|
||||||
|
Aute velit consectetur consequat excepteur ut in qui do reprehenderit sit consequat occaecat incididunt sint eu. Nulla cillum quis et sit labore aliquip et ad excepteur duis elit deserunt aute. Anim esse reprehenderit et ipsum et sit quis minim enim sint et pariatur duis nostrud. Do minim dolore adipisicing ullamco ad aute veniam id magna est proident tempor labore non. Mollit et laboris duis esse commodo ex tempor.
|
||||||
|
Elit labore qui dolor ea non ut anim occaecat do aliqua cillum qui esse. Aliqua nisi non veniam labore esse irure velit qui veniam labore consectetur ut. Tempor laboris anim officia veniam nostrud cupidatat reprehenderit aute incididunt nostrud dolore occaecat deserunt pariatur in non dolore.
|
||||||
|
Proident anim pariatur eu laborum Lorem duis cillum est anim magna sit pariatur eu. Nulla consectetur quis ea sunt proident sint laborum. Esse est ea Lorem mollit aute excepteur fugiat ipsum ipsum ad irure do reprehenderit voluptate. Sint tempor nulla mollit voluptate pariatur aliquip culpa amet ullamco fugiat incididunt minim sint ipsum exercitation eiusmod ad. Nostrud ipsum nulla cillum ex aute elit voluptate proident proident magna ut. Ipsum officia cillum officia nostrud enim fugiat ut. Voluptate laboris aute dolore incididunt aliquip sit sit. Ea ut laboris Lorem ea ad non nostrud aute tempor non nisi.
|
||||||
|
Qui cupidatat nisi id et excepteur sint aliquip fugiat sint reprehenderit aliquip enim anim aliqua sint dolore proident. Voluptate labore tempor laboris nisi eiusmod sunt occaecat deserunt adipisicing. Consectetur fugiat quis non ad laboris aliqua voluptate in eu id. Duis velit cillum aliquip dolor non ea mollit incididunt elit ex excepteur aute consequat amet.
|
||||||
|
Aute velit consectetur consequat excepteur ut in qui do reprehenderit sit consequat occaecat incididunt sint eu. Nulla cillum quis et sit labore aliquip et ad excepteur duis elit deserunt aute. Anim esse reprehenderit et ipsum et sit quis minim enim sint et pariatur duis nostrud. Do minim dolore adipisicing ullamco ad aute veniam id magna est proident tempor labore non. Mollit et laboris duis esse commodo ex tempor.
|
||||||
|
Elit labore qui dolor ea non ut anim occaecat do aliqua cillum qui esse. Aliqua nisi non veniam labore esse irure velit qui veniam labore consectetur ut. Tempor laboris anim officia veniam nostrud cupidatat reprehenderit aute incididunt nostrud dolore occaecat deserunt pariatur in non dolore.
|
||||||
|
Proident anim pariatur eu laborum Lorem duis cillum est anim magna sit pariatur eu. Nulla consectetur quis ea sunt proident sint laborum. Esse est ea Lorem mollit aute excepteur fugiat ipsum ipsum ad irure do reprehenderit voluptate. Sint tempor nulla mollit voluptate pariatur aliquip culpa amet ullamco fugiat incididunt minim sint ipsum exercitation eiusmod ad. Nostrud ipsum nulla cillum ex aute elit voluptate proident proident magna ut. Ipsum officia cillum officia nostrud enim fugiat ut. Voluptate laboris aute dolore incididunt aliquip sit sit. Ea ut laboris Lorem ea ad non nostrud aute tempor non nisi.
|
||||||
|
Qui cupidatat nisi id et excepteur sint aliquip fugiat sint reprehenderit aliquip enim anim aliqua sint dolore proident. Voluptate labore tempor laboris nisi eiusmod sunt occaecat deserunt adipisicing. Consectetur fugiat quis non ad laboris aliqua voluptate in eu id. Duis velit cillum aliquip dolor non ea mollit incididunt elit ex excepteur aute consequat amet.
|
||||||
18
templates/widgets/navbar.hamlet
Normal file
18
templates/widgets/navbar.hamlet
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<nav .navbar>
|
||||||
|
<ul .flat>
|
||||||
|
$forall menuType <- menuTypes
|
||||||
|
$case menuType
|
||||||
|
$of NavbarLeft (MenuItem label route _)
|
||||||
|
<li :Just route == mcurrentRoute:.active>
|
||||||
|
<a href=@{route}>#{label}
|
||||||
|
$of _
|
||||||
|
|
||||||
|
<ul .flat>
|
||||||
|
$forall menuType <- menuTypes
|
||||||
|
$case menuType
|
||||||
|
$of NavbarRight (MenuItem label route _)
|
||||||
|
<li :Just route == mcurrentRoute:.active>
|
||||||
|
<a href=@{route}>#{label}
|
||||||
|
$of _
|
||||||
|
|
||||||
|
<div .navbar-pushdown>
|
||||||
21
templates/widgets/navbar.julius
Normal file
21
templates/widgets/navbar.julius
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
|
var ticking = false;
|
||||||
|
var nav = document.querySelector('.navbar');
|
||||||
|
|
||||||
|
window.addEventListener('scroll', function(e) {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(checkScroll);
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
// checks scroll direction and shows/hides navbar accordingly
|
||||||
|
function checkScroll() {
|
||||||
|
var sticky = window.scrollY > 0;
|
||||||
|
nav.classList.toggle('sticky-navbar', sticky);
|
||||||
|
ticking = false;
|
||||||
|
}
|
||||||
|
checkScroll();
|
||||||
|
|
||||||
|
});
|
||||||
52
templates/widgets/navbar.lucius
Normal file
52
templates/widgets/navbar.lucius
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
@header_height: 60px;
|
||||||
|
@header_height_collapsed: 50px;
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: #{header_height};
|
||||||
|
line-height: #{header_height};
|
||||||
|
padding: 0 10vw;
|
||||||
|
background: #663399; /* Old browsers */
|
||||||
|
background: -moz-linear-gradient(bottom, #663399 0%, #734e99 100%); /* FF3.6-15 */
|
||||||
|
background: -webkit-linear-gradient(bottom, #663399 0%,#734e99 100%); /* Chrome10-25,Safari5.1-6 */
|
||||||
|
background: linear-gradient(to top, #663399 0%,#734e99 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
li > a {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 13px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
li > a:hover {
|
||||||
|
background-color: white;
|
||||||
|
color: rebeccapurple;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.active {
|
||||||
|
background-color: #422063;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sticky-navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: #{header_height_collapsed};
|
||||||
|
line-height: #{header_height_collapsed};
|
||||||
|
z-index: 100;
|
||||||
|
transition: height 0.2s ease, line-height 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-pushdown {
|
||||||
|
display: none;
|
||||||
|
height: #{header_height};
|
||||||
|
}
|
||||||
|
.sticky-navbar + .navbar-pushdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user