From 52928b7b4ee4f67ff1f7276e666529d47e12a645 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Tue, 10 Jan 2017 14:46:56 +0100 Subject: [PATCH] nav-main new hover for icons --- css/area_main-sidebar.less | 562 ++++++++++++++++--------------- css/area_sidetools.less | 669 +++++++++++++++++++------------------ css/base_mixins.less | 615 ++++++++++++++++++---------------- 3 files changed, 941 insertions(+), 905 deletions(-) diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less index f642dd4..fbb3cea 100755 --- a/css/area_main-sidebar.less +++ b/css/area_main-sidebar.less @@ -1,278 +1,284 @@ -/** - * This file provides the design styles for the sidebar (navmain). - * - * @author Jana Deutschlaender - */ - - -#dokuwiki__aside.main-sidebar { - counter-reset: nav-counter; - -/* + + + + + nav main + + + + + */ - .nav-main { - padding-bottom: 1.8rem; - - > ul { - @icon-size: 2rem; - - margin: 0; - padding: 0; - - ul { - margin-left: (@icon-size + .5); - } - - li { - list-style-type: none; - color: @color-nav; - - &:first-of-type { - padding-top: .3em; - } - } - - .li { - a { - display: list-item; - list-style-type: square; - color: @color-nav; - font-weight: normal; - padding-top: .1em; - padding-bottom: .1em; - transition: @transition color; - - &:hover, - &:focus, - &:active { - color: @button_background; - } - } - } - - -/* + + + first level + + + */ - > li { - counter-increment: nav-counter; - position: relative; - list-style-type: none; - margin: 0; - padding: 0 0 .3em; - - &:not(:last-of-type)::after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - display: block; - width: 100%; - height: 1px; - background-color: @color-border; - } - - > .li { - position: relative; - z-index: 1; - margin-top: -1px; - padding: .5em 0 .5em (@icon-size + 1); - - &[class="li"] { - border-bottom: solid 1px @color-border; - } - - &::before { - content: counter(nav-counter); - position: absolute; - top: 0; - left: 0; - display: flex; - display: -webkit-flex; - flex-direction: column; - -webkit-flex-direction: column; - justify-content: center; - -webkit-justify-content: center; - height: 100%; - width: @icon-size; - overflow: hidden; - color: @color-nav; - text-align: center; - margin-top: auto; - margin-bottom: auto; - } - - &::after { - content: ''; - position: absolute; - top: 15%; - bottom: 15%; - width: 1px; - left: (@icon-size + .5); - background-color: @color-border; - } - - &.opened, - &.closed { - padding: 0; - - &::before, - &::after { - display: none; - } - - a { - position: relative; - display: block; - border: 1px solid transparent; - border-radius: 2px; - margin-bottom: -.3rem; - padding: .6em 0 .6em (@icon-size + 1); - transition: @transition color, @transition background-color, @transition border-color; - - &::before { - content: counter(nav-counter); - position: absolute; - top: -.1em; - left: 0; - display: flex; - display: -webkit-flex; - flex-direction: column; - -webkit-flex-direction: column; - justify-content: center; - -webkit-justify-content: center; - height: 100%; - width: @icon-size; - overflow: hidden; - color: @color-nav; - text-align: center; - margin-top: auto; - margin-bottom: auto; - transition: @transition color; - } - - &::after { - content: ''; - position: absolute; - top: 15%; - bottom: 15%; - width: 1px; - left: (@icon-size + .5); - background-color: @color-border; - transition: @transition background-color; - } - - &:hover, - &:focus, - &:active { - background-color: @button_color; - border-color: @button_background; - color: @button_background; - text-decoration: none; - - &::before { - color: @button_background; - } - - &::after { - background-color: @button_background; - } - } - } - } - - &.opened { - a { - background-color: @button_background; - color: @button_color; - - &::before { - color: @button_color; - } - - &:hover, - &:focus, - &:active { - background-color: @button_color; - border-color: @button_background; - color: @button_background; - text-decoration: none; - - &::before { - color: @button_background; - } - } - } - - + ul { - margin-top: .5em; - margin-bottom: .25em; - } - } - - + ul { - height: auto; - overflow: hidden; - } - - &.closed + ul { - height: 0; - } - } - } - } - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* min-width: 1440px */ - -@media @screen_min-xlg { - #dokuwiki__aside.main-sidebar { - .nav-main { - .li { - font-size: .8rem; - padding: .1em 0; - - * { - font-size: inherit; - font-weight: inherit; - } - } - - > ul > li > .li { - font-size: .9rem; - - * { - font-size: inherit; - } - } - } - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1199px */ - -@media @screen_max-xlg { - #dokuwiki__aside.main-sidebar { - .nav-main { - .li { - font-size: .9rem; - padding: .15em 0 .15em .25rem; - - * { - font-size: inherit; - font-weight: inherit; - } - } - - > ul > li > .li { - font-size: 1rem; - - > * { - font-size: inherit; - } - } - } - } -} +/** + * This file provides the design styles for the sidebar (navmain). + * + * @author Jana Deutschlaender + */ + + +#dokuwiki__aside.main-sidebar { + counter-reset: nav-counter; + + +/* + + + + + nav main + + + + + */ + .nav-main { + > ul { + @icon-size: 2rem; + + margin: 0 0 1.8rem; + padding: 0; + + ul { + margin-left: (@icon-size + .5); + } + + li { + list-style-type: none; + color: @color-nav; + + &:first-of-type { + padding-top: .3em; + } + } + + .li { + a { + display: list-item; + list-style-type: square; + color: @color-nav; + font-weight: normal; + padding-top: .1em; + padding-bottom: .1em; + transition: @transition color; + + &:hover, + &:focus, + &:active { + color: @button_background; + } + } + } + + +/* + + + first level + + + */ + > li { + counter-increment: nav-counter; + position: relative; + list-style-type: none; + margin: 0; + padding: 0 0 .3em; + + &:not(:last-of-type)::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + display: block; + width: 100%; + height: 1px; + background-color: @color-border; + } + + > .li { + position: relative; + z-index: 1; + margin-top: -1px; + padding: .5em 0 .5em (@icon-size + 1); + + &[class="li"] { + border-bottom: solid 1px @color-border; + } + + &::before { + .display-flex(); + .flex-direction(); + .justify-content(); + + content: counter(nav-counter); + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 2.5rem; + overflow: hidden; + color: @color-nav; + text-align: center; + margin-top: auto; + margin-bottom: auto; + } + + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: (@icon-size + .5); + background-color: @color-border; + } + + &.opened, + &.closed { + padding: 0; + + &::before, + &::after { + display: none; + } + + a { + position: relative; + display: block; + border: 1px solid transparent; + border-radius: 2px; + margin-bottom: -.3rem; + padding: .6em 0 .6em (@icon-size + 1); + transition: @transition color, @transition background-color, @transition border-color; + + &::before { + .display-flex(); + .flex-direction(); + .justify-content(); + + content: counter(nav-counter); + position: absolute; + top: 1px; + bottom: 1px; + left: 0; + height: 100%; + width: 2.5rem; + overflow: hidden; + color: @color-nav; + text-align: center; + margin-top: auto; + margin-bottom: auto; + transition: @transition color, @transition background-color; + } + + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: (@icon-size + .5); + background-color: @color-border; + transition: @transition background-color; + } + + &:hover, + &:focus, + &:active { + background-color: @button_color; + border-color: @button_background; + color: @button_background; + text-decoration: none; + + &::before { + color: @button_background; + } + + &::after { + background-color: @button_background; + } + } + } + } + + &.opened { + a { + background-color: @button_background; + color: @button_color; + + &::before { + background-color: @color-site-bg; + } + + &::after { + display: none; + } + + &:hover, + &:focus, + &:active { + background-color: @button_color; + border-color: @button_background; + color: @button_background; + text-decoration: none; + + &::before { + background-color: @button_color; + color: @button_background; + } + + &::after { + display: block; + background-color: @button_background; + } + } + } + + + ul { + margin-top: .5em; + margin-bottom: .25em; + } + } + + + ul { + height: auto; + overflow: hidden; + } + + &.closed + ul { + height: 0; + } + } + } + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + #dokuwiki__aside.main-sidebar { + .nav-main { + .li { + font-size: .8rem; + padding: .1em 0; + + * { + font-size: inherit; + font-weight: inherit; + } + } + + > ul > li > .li { + font-size: .9rem; + + * { + font-size: inherit; + } + } + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1199px */ + +@media @screen_max-xlg { + #dokuwiki__aside.main-sidebar { + .nav-main { + .li { + font-size: .9rem; + padding: .15em 0 .15em .25rem; + + * { + font-size: inherit; + font-weight: inherit; + } + } + + > ul > li > .li { + font-size: 1rem; + + > * { + font-size: inherit; + } + } + } + } +} diff --git a/css/area_sidetools.less b/css/area_sidetools.less index 1cc1013..25fdd19 100755 --- a/css/area_sidetools.less +++ b/css/area_sidetools.less @@ -1,331 +1,338 @@ -/** - * This file provides the design styles for the sitetools (nav). - * - * @author Jana Deutschlaender - */ - - -.side-tools.main-sidebar { - @icon-size: 2rem; - - counter-increment: bar-counter; - - ul, - .trace { - padding-left: (@icon-size + .5); - } - - ul { - border-bottom: 1px solid @color-border; - } - - li { - list-style-type: none; - - a { - display: list-item; - list-style-type: square; - color: @color-nav; - padding-top: .1em; - padding-bottom: .1em; - transition: @transition color; - - &:hover, - &:focus, - &:active { - color: @button_background; - } - } - - &:first-of-type { - padding-top: .3em; - } - } - - > nav { - > ul { - margin: 0; - padding: 0 0 0 (@icon-size + .5); - - li { - list-style-type: none; - color: @color-nav; - - &:first-of-type { - padding-top: .3em; - } - } - } - } - - -/* + + + + + headlines for linklists + + + + + */ - h6 { - position: relative; - width: auto; - height: auto; - color: @color-nav; - font-weight: normal; - padding: .5em 0 .5em (@icon-size + 1.1); - - &[class="sr-only"] { - border-bottom: solid 1px @color-border; - } - - * { - color: inherit; - } - - -/* + + + icon + + + */ - &::before { - content: counter(bar-counter, lower-alpha); - position: absolute; - top: 0; - left: 0; - display: flex; - display: -webkit-flex; - flex-direction: column; - -webkit-flex-direction: column; - justify-content: center; - -webkit-justify-content: center; - height: 100%; - width: @icon-size; - overflow: hidden; - text-align: center; - margin-top: auto; - margin-bottom: auto; - } - - -/* + + + line bottom + + + */ - &::after { - content: ''; - position: absolute; - top: 15%; - bottom: 15%; - width: 1px; - left: (@icon-size + .6); - background-color: @color-border; - transition: @transition background-color; - } - - + ul, - + div { - height: auto; - overflow: hidden; - } - - -/* + + + toggle + + + */ - &.opened, - &.closed { - padding: 0; - - &::before, - &::after { - display: none; - } - - a { - position: relative; - display: block; - border: 1px solid transparent; - border-radius: 2px; - padding: .6em 0 .6em (@icon-size + 1); - transition: @transition color, @transition background-color, @transition border-color; - - &::before { - content: counter(bar-counter, lower-alpha); - position: absolute; - top: -.1em; - left: 0; - display: flex; - display: -webkit-flex; - flex-direction: column; - -webkit-flex-direction: column; - justify-content: center; - -webkit-justify-content: center; - height: 100%; - width: @icon-size; - overflow: hidden; - color: @color-nav; - text-align: center; - margin-top: auto; - margin-bottom: auto; - transition: @transition color; - } - - &::after { - content: ''; - position: absolute; - top: 15%; - bottom: 15%; - width: 1px; - left: (@icon-size + .5); - background-color: @color-border; - transition: @transition background-color; - } - - &:hover, - &:focus, - &:active { - background-color: @button_color; - border-color: @button_background; - color: @button_background; - text-decoration: none; - - &::before { - color: @button_background; - } - - &::after { - background-color: @button_background; - } - } - } - } - - &.opened { - a { - background-color: @button_background; - color: @button_color; - - &::before { - color: @button_color; - } - - &:hover, - &:focus, - &:active { - background-color: @button_color; - border-color: @button_background; - color: @button_background; - text-decoration: none; - - &::before { - color: @button_background; - } - } - } - - + ul, - + div { - height: auto; - overflow: hidden; - } - - + ul { - margin-top: .5em; - padding-bottom: .4rem; - } - } - - &.closed { - + ul, - + div { - height: 0; - } - } - } - - -/* + + + + + f.i. trace + + + + + */ - p { - max-height: 6rem; - overflow-y: auto; - background-color: @color-content-bg; - border: 1px solid @button_background; - border-radius: 2px; - font-size: .8rem; - margin-top: .1rem; - padding: .3rem .6em; - - * { - font-size: inherit; - } - - .bchead { - display: none; - } - - .bcsep { - float: left; - clear: both; - display: block; - width: 3%; - vertical-align: top; - color: @color-link; - padding-top: .3em; - } - - .breadcrumbs { - border: 0 none; - padding: 0; - margin: 0; - } - - bdi { - display: block; - float: left; - width: 94%; - line-height: 125%; - padding: .1rem 0; - margin-left: 2%; - } - - a { - cursor: pointer; - } - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* min-width: 1440px */ - -@media @screen_min-xlg { - .side-tools.main-sidebar { - h6 { - font-size: .9rem; - - * { - font-size: inherit; - } - } - - li { - font-size: .8rem; - padding: .1em 0 .1em .1rem; - - > * { - font-size: inherit; - } - } - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1439px */ - -@media @screen_max-xlg { - .side-tools.main-sidebar { - h6 { - font-size: 1rem; - } - - li { - font-size: .9rem; - padding: .15em 0 .15em .23rem; - - > * { - font-size: inherit; - } - } - - p { - font-size: .9rem; - } - } -} +/** + * This file provides the design styles for the sitetools (nav). + * + * @author Jana Deutschlaender + */ + + +.side-tools.main-sidebar { + @icon-size: 2rem; + + counter-increment: bar-counter; + + ul, + .trace { + padding-left: (@icon-size + .5); + } + + ul { + border-bottom: 1px solid @color-border; + } + + li { + list-style-type: none; + + a { + display: list-item; + list-style-type: square; + color: @color-nav; + padding-top: .1em; + padding-bottom: .1em; + transition: @transition color; + + &:hover, + &:focus, + &:active { + color: @button_background; + } + } + + &:first-of-type { + padding-top: .3em; + } + } + + > nav { + > ul { + margin: 0; + padding: 0 0 0 (@icon-size + .5); + + li { + list-style-type: none; + color: @color-nav; + + &:first-of-type { + padding-top: .3em; + } + } + } + } + + +/* + + + + + headlines for linklists + + + + + */ + h6 { + position: relative; + width: auto; + height: auto; + color: @color-nav; + font-weight: normal; + padding: .5em 0 .5em (@icon-size + 1.1); + + &[class="sr-only"] { + border-bottom: solid 1px @color-border; + } + + * { + color: inherit; + } + + +/* + + + icon + + + */ + &::before { + .display-flex(); + .flex-direction(); + .justify-content(); + + content: counter(bar-counter, lower-alpha); + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 2.5rem; + overflow: hidden; + text-align: center; + margin-top: auto; + margin-bottom: auto; + } + + +/* + + + line bottom + + + */ + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: (@icon-size + .6); + background-color: @color-border; + transition: @transition background-color; + } + + + ul, + + div { + height: auto; + overflow: hidden; + } + + +/* + + + toggle + + + */ + &.opened, + &.closed { + padding: 0; + + &::before, + &::after { + display: none; + } + + a { + position: relative; + display: block; + border: 1px solid transparent; + border-radius: 2px; + padding: .6em 0 .6em (@icon-size + 1); + transition: @transition color, @transition background-color, @transition border-color; + + &::before { + .display-flex(); + .flex-direction(); + .justify-content(); + + content: counter(bar-counter, lower-alpha); + position: absolute; + top: 1px; + bottom: 1px; + left: 0; + height: 100%; + width: 2.5rem; + overflow: hidden; + color: @color-nav; + text-align: center; + margin-top: auto; + margin-bottom: auto; + transition: @transition color; + } + + &::after { + content: ''; + position: absolute; + top: 15%; + bottom: 15%; + width: 1px; + left: (@icon-size + .5); + background-color: @color-border; + transition: @transition background-color; + } + + &:hover, + &:focus, + &:active { + background-color: @button_color; + border-color: @button_background; + color: @button_background; + text-decoration: none; + + &::before { + color: @button_background; + } + + &::after { + background-color: @button_background; + } + } + } + } + + &.opened { + a { + background-color: @button_background; + color: @button_color; + + &::before { + background-color: @color-site-bg; + } + + &::after { + display: none; + } + + &:hover, + &:focus, + &:active { + background-color: @button_color; + border-color: @button_background; + color: @button_background; + text-decoration: none; + + &::before { + background-color: @button_color; + color: @button_background; + } + + &::after { + display: block; + background-color: @button_background; + } + } + } + + + ul, + + div { + height: auto; + overflow: hidden; + } + + + ul { + margin-top: .5em; + padding-bottom: .4rem; + } + } + + &.closed { + + ul, + + div { + height: 0; + } + } + } + + +/* + + + + + f.i. trace + + + + + */ + p { + max-height: 6rem; + overflow-y: auto; + background-color: @color-content-bg; + border: 1px solid @button_background; + border-radius: 2px; + font-size: .8rem; + margin-top: .1rem; + padding: .3rem .6em; + + * { + font-size: inherit; + } + + .bchead { + display: none; + } + + .bcsep { + float: left; + clear: both; + display: block; + width: 3%; + vertical-align: top; + color: @color-link; + padding-top: .3em; + } + + .breadcrumbs { + border: 0 none; + padding: 0; + margin: 0; + } + + bdi { + display: block; + float: left; + width: 94%; + line-height: 125%; + padding: .1rem 0; + margin-left: 2%; + } + + a { + cursor: pointer; + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* min-width: 1440px */ + +@media @screen_min-xlg { + .side-tools.main-sidebar { + h6 { + font-size: .9rem; + + * { + font-size: inherit; + } + } + + li { + font-size: .8rem; + padding: .1em 0 .1em .1rem; + + > * { + font-size: inherit; + } + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1439px */ + +@media @screen_max-xlg { + .side-tools.main-sidebar { + h6 { + font-size: 1rem; + } + + li { + font-size: .9rem; + padding: .15em 0 .15em .23rem; + + > * { + font-size: inherit; + } + } + + p { + font-size: .9rem; + } + } +} diff --git a/css/base_mixins.less b/css/base_mixins.less index 628b497..456ff9d 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -1,296 +1,319 @@ -/** - * This file provides less mixins for all other style modules - * - * @author Jana Deutschlaender - */ - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* Fonts */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) { - @font-face { - font-family: @fontFamily; - font-style: normal; - font-weight: @fontWeight; - src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)"; - src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')"; - } -} - -.setIconFontFace(@fontFamily,@filename) { - @font-face { - font-family: @fontFamily; - src: ~"url('fonts/icons/@{filename}.eot?6762325')"; - src: ~"url('fonts/icons/@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/@{filename}.woff?6762325') format('woff'), url('fonts/icons/@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/@{filename}.svg?6762325#fontello') format('svg')"; - font-weight: normal; - font-style: normal; - } -} - -.fontello() { - &::before { - font-family: "fontello"; - font-style: normal; - font-weight: normal; - speak: none; - - display: inline-block; - text-decoration: inherit; - width: 1em; - margin-right: .2em; - text-align: center; - - /* 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; - - /* Animation center compensation - margins should be symmetric */ - /* remove if not needed */ - margin-left: .2em; - - /* 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); */ - } -} - -.fontello-double() { - &::before, - &::after { - font-family: "fontello"; - font-style: normal; - font-weight: normal; - speak: none; - - display: inline-block; - text-decoration: inherit; - width: 1em; - margin-right: .2em; - text-align: center; - - /* 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; - - /* Animation center compensation - margins should be symmetric */ - /* remove if not needed */ - margin-left: .2em; - - /* 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); */ - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* Screenreader / Hide */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -.sr-out() { - display: block; - width: 1px; - height: 1px; - overflow: hidden; - position: absolute; - top: -200000em; - left: -200000em; -} - -.sr-only() { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0,0,0,0); - border: 0; -} - -.sr-only-focusable() { - &:active, - &:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; - } -} - - -/* + + + + + small icon-buttons (breadcrumb, page-header) + + + + + */ -.btn-usertools-wrapper(@elem:2em) { - display: inline-block; - min-height: @elem; - min-width: @elem; - box-sizing: border-box; - color: @color-nav; - font-size: .8rem; - padding: 0; - margin: 0 .2rem; - - * { - font-size: .8rem; - } -} - -.btn-usertools-num () { - .num { - position: absolute; - right: -.4rem; - top: -.4em; - background-color: @button_background; - border-radius: 2px; - color: @button_color; - font-size: .6rem; - font-weight: 400; - text-align: center; - line-height: 1; - padding: .2em .2rem .1em; - transition: @transition color, @transition background-color; - } - - a { - &:hover, - &:active, - &:focus { - .num { - background-color: @button_background; - color: @button_color; - } - } - } -} - -.btn-prefix () { - .fontello(); - .hide-text-show-before(); - - color: inherit; - font-size: 1rem; - margin-top: .2rem; -} - - -.btn-default-size() { - height: 1rem; - width: 1rem; - min-height: 1.2em; - min-width: 1.4em; -} - -.btn-default-height() { - height: 1rem; - min-height: 1.2em; - min-width: 1.4em; -} - -.hide-text-show-before(){ - display: inline-block; - overflow: hidden; - white-space: nowrap; - text-indent: -9999px; - .btn-default-size(); - - &::before{ - text-indent: 0; - float: left; - } - - &::after{ - text-indent: 0; - float: left; - } -} - - -.hide-text-show-after() { - display: inline-block; - overflow: hidden; - white-space: nowrap; - text-indent: -9999px; - - &::before{ - text-indent: 0; - float: right; - } - &::after{ - text-indent: 0; - float: right; - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* Screenreader / Hide */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -.reset() { - background: transparent; - border: none 0; outline: 0; vertical-align: baseline; - font-style: normal; - margin: 0; padding: 0; -} - -.elementsReset() { - div, span, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, - a, abbr, em,acronym, img, strong, - dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - input, select, option, textarea, button { - .reset(); - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* Col Grid */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -.make-grid(@class) { - .float-grid-columns(@class); - .loop-grid-columns(@grid-columns, @class, width); -} - -.float-grid-columns(@class) { - .col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 { - float: left; - } -} - -.loop-grid-columns(@index, @class, @type) when (@index >= 0) { - .calc-grid-column(@index, @class, @type); - // next iteration - .loop-grid-columns((@index - 1), @class, @type); -} - -.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { - .col-@{class}-@{index} { - width: percentage((@index / @grid-columns)); - } -} +/** + * This file provides less mixins for all other style modules + * + * @author Jana Deutschlaender + */ + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* Fonts */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) { + @font-face { + font-family: @fontFamily; + font-style: normal; + font-weight: @fontWeight; + src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)"; + src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')"; + } +} + +.setIconFontFace(@fontFamily,@filename) { + @font-face { + font-family: @fontFamily; + src: ~"url('fonts/icons/@{filename}.eot?6762325')"; + src: ~"url('fonts/icons/@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/@{filename}.woff?6762325') format('woff'), url('fonts/icons/@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/@{filename}.svg?6762325#fontello') format('svg')"; + font-weight: normal; + font-style: normal; + } +} + +.fontello() { + &::before { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + + /* 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; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* 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); */ + } +} + +.fontello-double() { + &::before, + &::after { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + + /* 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; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* 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); */ + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* Screenreader / Hide */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +.sr-out() { + display: block; + width: 1px; + height: 1px; + overflow: hidden; + position: absolute; + top: -200000em; + left: -200000em; +} + +.sr-only() { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +.sr-only-focusable() { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + + +/* + + + + + small icon-buttons (breadcrumb, page-header) + + + + + */ +.btn-usertools-wrapper(@elem:2em) { + display: inline-block; + min-height: @elem; + min-width: @elem; + box-sizing: border-box; + color: @color-nav; + font-size: .8rem; + padding: 0; + margin: 0 .2rem; + + * { + font-size: .8rem; + } +} + +.btn-usertools-num () { + .num { + position: absolute; + right: -.4rem; + top: -.4em; + background-color: @button_background; + border-radius: 2px; + color: @button_color; + font-size: .6rem; + font-weight: 400; + text-align: center; + line-height: 1; + padding: .2em .2rem .1em; + transition: @transition color, @transition background-color; + } + + a { + &:hover, + &:active, + &:focus { + .num { + background-color: @button_background; + color: @button_color; + } + } + } +} + +.btn-prefix () { + .fontello(); + .hide-text-show-before(); + + color: inherit; + font-size: 1rem; + margin-top: .2rem; +} + + +.btn-default-size() { + height: 1rem; + width: 1rem; + min-height: 1.2em; + min-width: 1.4em; +} + +.btn-default-height() { + height: 1rem; + min-height: 1.2em; + min-width: 1.4em; +} + +.hide-text-show-before(){ + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-indent: -9999px; + .btn-default-size(); + + &::before{ + text-indent: 0; + float: left; + } + + &::after{ + text-indent: 0; + float: left; + } +} + + +.hide-text-show-after() { + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-indent: -9999px; + + &::before{ + text-indent: 0; + float: right; + } + &::after{ + text-indent: 0; + float: right; + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* flex-box */ + +.display-flex() { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; +} + +.flex-direction(@elem:column) { + flex-direction: @elem; + -ms-flex-direction: @elem; + -webkit-flex-direction: @elem; +} + +// default "center" +.justify-content(@elem:center) { + justify-content: @elem; + -ms-justify-content: @elem; + -webkit-justify-content: @elem; +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* Screenreader / Hide */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +.reset() { + background: transparent; + border: none 0; outline: 0; vertical-align: baseline; + font-style: normal; + margin: 0; padding: 0; +} + +.elementsReset() { + div, span, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, + a, abbr, em,acronym, img, strong, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + input, select, option, textarea, button { + .reset(); + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* Col Grid */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +.make-grid(@class) { + .float-grid-columns(@class); + .loop-grid-columns(@grid-columns, @class, width); +} + +.float-grid-columns(@class) { + .col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 { + float: left; + } +} + +.loop-grid-columns(@index, @class, @type) when (@index >= 0) { + .calc-grid-column(@index, @class, @type); + // next iteration + .loop-grid-columns((@index - 1), @class, @type); +} + +.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { + .col-@{class}-@{index} { + width: percentage((@index / @grid-columns)); + } +}