From: peter Date: Mon, 1 Oct 2012 16:29:55 +0000 (+0800) Subject: add more settings for top-bar: $topBarDropToggleColor, $topBarDropToggleAlpha X-Git-Tag: v3.2.0.rc1~15^2~4^2 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F969%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git add more settings for top-bar: $topBarDropToggleColor, $topBarDropToggleAlpha --- diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss index d4b9e1b24..e3a0cd989 100644 --- a/scss/foundation/_settings.scss +++ b/scss/foundation/_settings.scss @@ -117,6 +117,8 @@ $topBarLinkColor: #fff !default; $topBarLinkWeight: bold !default; $topBarLinkSize: ms(0) - 1 !default; $topBarDropToggleSize: 5px !default; +$topBarDropToggleColor: #fff !default; +$topBarDropToggleAlpha: 0.5 !default; $topBarSearchWidth: 200px !default; $topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout $topBarNavToggleSize: 8px !default; diff --git a/scss/foundation/components/modules/_topbar.scss b/scss/foundation/components/modules/_topbar.scss index 24b004e03..5dd2b7cfd 100644 --- a/scss/foundation/components/modules/_topbar.scss +++ b/scss/foundation/components/modules/_topbar.scss @@ -76,7 +76,7 @@ &.has-dropdown { position: relative; &:hover { &>.dropdown { display: block; visibility: visible; } } a { padding-right: $topBarHeight * .75; - &:after { @include cssTriangle($topBarDropToggleSize, #fff, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; } + &:after { @include cssTriangle($topBarDropToggleSize, $topBarDropToggleColor, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; } } .dropdown { background: $topBarBgColor; left: 0; margin: 0; padding: $topBarHeight / 5 0 0 0; position: absolute; visibility: hidden; z-index: 99; li { background: $topBarBgColor; line-height: 1; min-width: 100%; padding-bottom: 5px; @@ -181,7 +181,7 @@ /* Dropdown Level 1 */ &.has-dropdown { a { padding-right: $topBarHeight * .75; - &:after { @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); margin-right: $topBarHeight / 3; margin-top: -($topBarDropToggleSize / 2) - 2; position: absolute; top: 50%; } + &:after { @include cssTriangle($topBarDropToggleSize, rgba($topBarDropToggleColor, $topBarDropToggleAlpha), left); margin-right: $topBarHeight / 3; margin-top: -($topBarDropToggleSize / 2) - 2; position: absolute; top: 50%; } } &:hover >.dropdown { display: block; visibility: hidden; } .dropdown { visibility: hidden; z-index: 0 !important; } @@ -198,7 +198,7 @@ } } .back.title { padding-bottom: 0; - a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, #fff, right); } + a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, $topBarDropToggleColor, right); } h5 { margin: 0; padding-left: $topBarDropToggleSize * 3; position: relative; a { padding-top: 8px; padding-bottom: 8px; font-size: ms(2); font-weight: $topBarTitleWeight; } } @@ -211,7 +211,7 @@ &.has-dropdown { .dropdown { left: 100% !important; top: 0; right: auto !important; } &>a { padding-right: $topBarHeight * .75; - &:after { content: ""; margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; } + &:after { content: ""; margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba($topBarDropToggleColor, $topBarDropToggleAlpha), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; } } &.moved { position: static; .dropdown { top: 0; visibility: visible; } @@ -237,4 +237,4 @@ } .top-bar ul li.has-button { padding: 0 $navBarHeight / 2 5px; } .top-bar ul li .button.small { margin: 0 !important; display: inline-block; width: 100%; } - } \ No newline at end of file + } diff --git a/templates/project/scss/_settings.scss b/templates/project/scss/_settings.scss index b5ecf7796..685e7c6ca 100644 --- a/templates/project/scss/_settings.scss +++ b/templates/project/scss/_settings.scss @@ -101,6 +101,8 @@ // $topBarLinkWeight: bold; // $topBarLinkSize: ms(0) - 1; // $topBarDropToggleSize: 5px; +// $topBarDropToggleColor: #fff; +// $topBarDropToggleAlpha: 0.5; // $topBarSearchWidth: 200px; // $topBarBreakPoint: 940px; // Change to 9999px for always mobile layout -// $topBarNavToggleSize: 8px; \ No newline at end of file +// $topBarNavToggleSize: 8px;