Enable to select body content area background color.

This commit is contained in:
MinSoo Kim 2016-09-27 01:32:39 +09:00
parent b4c44968e6
commit 3d470e4972
3 changed files with 34 additions and 6 deletions

View file

@ -161,5 +161,11 @@
<description xml:lang="ko">분위기를 형성하는데 사용되는 중심 색상을 위에서 선택하지 않고 Hex 코드로 직접 입력 합니다. (기본 값: #f44336) 위 항목에서 '커스텀' 항목을 선택해야 적용됩니다.</description>
<description xml:lang="en">Please type the mood color you want, if there is no choice before. Insert your color in hex code. (dafault value: #f44336) To use this option, you have to select 'Customized' for the options before.</description>
</var>
<var name="content_color" type="colorpicker">
<title xml:lang="ko">본문 영역 색상</title>
<title xml:lang="en">Content area color</title>
<description xml:lang="ko">레이아웃 본문 영역 색상을 지정합니다. 기본 색상은 흰색입니다.</description>
<description xml:lang="en">Set content area color. The default color is white.</description>
</var>
</extra_vars>
</layout>

View file

@ -8,6 +8,8 @@
$layout_info->primary_color = 'red';
if(!$layout_info->customized_primary_color)
$layout_info->customized_primary_color = '#f44336';
if(!$layout_info->content_color)
$layout_info->content_color = '#ffffff';
$material_colors = array(
'red' => '#f44336',
@ -46,7 +48,7 @@
{Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])}
<!--// Load styles -->
{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position))}
{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position, 'content_color' => $layout_info->content_color))}
<load target="layout.scss" vars="$layout_scss_value" />
<load target="layout.js" />

View file

@ -54,9 +54,11 @@ body {
top: 25px
}
.layout_body.layout_frame {
background-color: $content_color;
}
.layout_body {
position: relative;
background-color: #fff;
}
.layout_header:after,
@ -68,6 +70,7 @@ body {
.layout_content {
overflow: auto;
padding:10px 0px;
}
.layout_content>*:first-child {
@ -81,7 +84,10 @@ body {
/* Header */
header.layout_frame {
position:relative;
background-color: lighten($primary-color, 10%);
z-index: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.layout_header>h1 {
margin:0 auto;
@ -212,7 +218,11 @@ header.layout_frame {
background-color: lighten($primary-color, 15%);
color: layoutGrayContrast(lighten($primary-color, 15%), 0.710);
}
header .layout_menu li:hover,
header .layout_menu li:focus,
header .layout_menu li:active {
background-color: lighten($grey, 40%);
}
.layout_menu li a:hover,
.layout_menu li a:focus,
.layout_menu li a:active,
@ -249,13 +259,22 @@ header.layout_frame {
}
.
.layout_menu .layout_dropdown-content a:hover {
.layout_menu .layout_dropdown-content a:hover,
.layout_menu .layout_dropdown-content a:active,
.layout_menu .layout_dropdown-content a:focus {
display: block;
background-color: lighten($primary-color, 10%);
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
}
.layout_menu .layout_dropdown:hover .layout_dropdown-content {
.layout_menu .layout_dropdown:hover .layout_dropdown-content,
.layout_menu .layout_dropdown:active .layout_dropdown-content,
.layout_menu .layout_dropdown:focus .layout_dropdown-content,
.layout_menu .layout_dropdown a:hover ~ .layout_dropdown-content,
.layout_menu .layout_dropdown a:active ~ .layout_dropdown-content,
.layout_menu .layout_dropdown a:focus ~ .layout_dropdown-content/* ,
.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:hover),
.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:focus) */ {
display: block;
}
#layout_fnb{
@ -511,7 +530,8 @@ header.layout_frame {
color: layoutGrayContrast(lighten($primary-color, 15%), 0.710);
}
.layout_menu li a:hover, .layout_dropdown:hover .dropbtn {
.layout_menu li a:hover, .layout_dropdown:hover .dropbtn,
.layout_menu li a:focus, .layout_dropdown:focus .dropbtn {
background-color: $primary-color;
color: layoutGrayContrast($primary-color, 10%, 0.710);
}