@import "variables"
/**
* The navigation subitem standalone for Desktop.
* @component .navigation
* @example <div class="ui navigation">
* <!-- content -->
* </div>
*/
.navigation
background-color rgba(255, 255, 255, 0.8)
&--inner
container-max()
clear-left()
display none
@media (min-width: screen-sm)
display block
a
padding-top 4px
padding-bottom 4px
width 100%
display inline-block
color #2c1200
font-size 2rem
@media (min-width: screen-sm)
font-size 2.4rem
&--items
font-size 0
margin 0
padding 0
list-style-type none
hlmt-rounded()
&--item
display inline-block
text-align center
column(1, 4, gutter)
margin-left gutter
margin-right gutter
a:hover
background-color #2c1200
color #fff
text-decoration none
&.is-active
background-color #2c1200
a
color #fff
/**
* The blue transparency if share buttons are presents.
* @type {variation}
* @name .as-alternative
* @memberOf .navigation
* @example <div class="ui navigation as-alternative">
* <!-- content -->
* </div>
*/
&.as-alternative
background-color rgba(221, 232, 253, 0.5)
/**
* Allow you to not align element but center them.
* @type {variation}
* @name .as-centered
* @memberOf .navigation
* @example <div class="ui navigation as-centered">
* <!-- content -->
* </div>
*/
.as-centered
.navigation--items
text-align center
font-size 0
@media (min-width: screen-sm)
.navigation--item
float none