|
@@ -36,172 +36,172 @@
|
|
|
|
|
|
//Create the tab button
|
|
|
var tab_button = $("<li />", {"class": "active"})
|
|
|
- .html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
|
|
|
- + "<i class='fa fa-wrench'></i>"
|
|
|
- + "</a>");
|
|
|
+ .html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
|
|
|
+ + "<i class='fa fa-wrench'></i>"
|
|
|
+ + "</a>");
|
|
|
|
|
|
//Add the tab button to the right sidebar tabs
|
|
|
$("[href='#control-sidebar-home-tab']")
|
|
|
- .parent()
|
|
|
- .before(tab_button);
|
|
|
+ .parent()
|
|
|
+ .before(tab_button);
|
|
|
|
|
|
//Create the menu
|
|
|
var demo_settings = $("<div />");
|
|
|
|
|
|
//Layout options
|
|
|
demo_settings.append(
|
|
|
- "<h4 class='control-sidebar-heading'>"
|
|
|
- + "Layout Options"
|
|
|
- + "</h4>"
|
|
|
- //Fixed layout
|
|
|
- + "<div class='form-group'>"
|
|
|
- + "<label class='control-sidebar-subheading'>"
|
|
|
- + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
|
|
|
- + "Fixed layout"
|
|
|
- + "</label>"
|
|
|
- + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
|
|
|
- + "</div>"
|
|
|
- //Boxed layout
|
|
|
- + "<div class='form-group'>"
|
|
|
- + "<label class='control-sidebar-subheading'>"
|
|
|
- + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
|
|
|
- + "Boxed Layout"
|
|
|
- + "</label>"
|
|
|
- + "<p>Activate the boxed layout</p>"
|
|
|
- + "</div>"
|
|
|
- //Sidebar Toggle
|
|
|
- + "<div class='form-group'>"
|
|
|
- + "<label class='control-sidebar-subheading'>"
|
|
|
- + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
|
|
|
- + "Toggle Sidebar"
|
|
|
- + "</label>"
|
|
|
- + "<p>Toggle the left sidebar's state (open or collapse)</p>"
|
|
|
- + "</div>"
|
|
|
- //Sidebar mini expand on hover toggle
|
|
|
- + "<div class='form-group'>"
|
|
|
- + "<label class='control-sidebar-subheading'>"
|
|
|
- + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
|
|
|
- + "Sidebar Expand on Hover"
|
|
|
- + "</label>"
|
|
|
- + "<p>Let the sidebar mini expand on hover</p>"
|
|
|
- + "</div>"
|
|
|
- //Control Sidebar Toggle
|
|
|
- + "<div class='form-group'>"
|
|
|
- + "<label class='control-sidebar-subheading'>"
|
|
|
- + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
|
|
|
- + "Toggle Right Sidebar Slide"
|
|
|
- + "</label>"
|
|
|
- + "<p>Toggle between slide over content and push content effects</p>"
|
|
|
- + "</div>"
|
|
|
- //Control Sidebar Skin Toggle
|
|
|
- + "<div class='form-group'>"
|
|
|
- + "<label class='control-sidebar-subheading'>"
|
|
|
- + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
|
|
|
- + "Toggle Right Sidebar Skin"
|
|
|
- + "</label>"
|
|
|
- + "<p>Toggle between dark and light skins for the right sidebar</p>"
|
|
|
- + "</div>"
|
|
|
- );
|
|
|
+ "<h4 class='control-sidebar-heading'>"
|
|
|
+ + "Layout Options"
|
|
|
+ + "</h4>"
|
|
|
+ //Fixed layout
|
|
|
+ + "<div class='form-group'>"
|
|
|
+ + "<label class='control-sidebar-subheading'>"
|
|
|
+ + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
|
|
|
+ + "Fixed layout"
|
|
|
+ + "</label>"
|
|
|
+ + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
|
|
|
+ + "</div>"
|
|
|
+ //Boxed layout
|
|
|
+ + "<div class='form-group'>"
|
|
|
+ + "<label class='control-sidebar-subheading'>"
|
|
|
+ + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
|
|
|
+ + "Boxed Layout"
|
|
|
+ + "</label>"
|
|
|
+ + "<p>Activate the boxed layout</p>"
|
|
|
+ + "</div>"
|
|
|
+ //Sidebar Toggle
|
|
|
+ + "<div class='form-group'>"
|
|
|
+ + "<label class='control-sidebar-subheading'>"
|
|
|
+ + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
|
|
|
+ + "Toggle Sidebar"
|
|
|
+ + "</label>"
|
|
|
+ + "<p>Toggle the left sidebar's state (open or collapse)</p>"
|
|
|
+ + "</div>"
|
|
|
+ //Sidebar mini expand on hover toggle
|
|
|
+ + "<div class='form-group'>"
|
|
|
+ + "<label class='control-sidebar-subheading'>"
|
|
|
+ + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
|
|
|
+ + "Sidebar Expand on Hover"
|
|
|
+ + "</label>"
|
|
|
+ + "<p>Let the sidebar mini expand on hover</p>"
|
|
|
+ + "</div>"
|
|
|
+ //Control Sidebar Toggle
|
|
|
+ + "<div class='form-group'>"
|
|
|
+ + "<label class='control-sidebar-subheading'>"
|
|
|
+ + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
|
|
|
+ + "Toggle Right Sidebar Slide"
|
|
|
+ + "</label>"
|
|
|
+ + "<p>Toggle between slide over content and push content effects</p>"
|
|
|
+ + "</div>"
|
|
|
+ //Control Sidebar Skin Toggle
|
|
|
+ + "<div class='form-group'>"
|
|
|
+ + "<label class='control-sidebar-subheading'>"
|
|
|
+ + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
|
|
|
+ + "Toggle Right Sidebar Skin"
|
|
|
+ + "</label>"
|
|
|
+ + "<p>Toggle between dark and light skins for the right sidebar</p>"
|
|
|
+ + "</div>"
|
|
|
+ );
|
|
|
var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
|
|
|
|
|
|
//Dark sidebar skins
|
|
|
var skin_blue =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-blue' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin'>Blue</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin'>Blue</p>");
|
|
|
skins_list.append(skin_blue);
|
|
|
var skin_black =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-black' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin'>Black</p>");
|
|
|
+ + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin'>Black</p>");
|
|
|
skins_list.append(skin_black);
|
|
|
var skin_purple =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-purple' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin'>Purple</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin'>Purple</p>");
|
|
|
skins_list.append(skin_purple);
|
|
|
var skin_green =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-green' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin'>Green</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin'>Green</p>");
|
|
|
skins_list.append(skin_green);
|
|
|
var skin_red =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-red' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin'>Red</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin'>Red</p>");
|
|
|
skins_list.append(skin_red);
|
|
|
var skin_yellow =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-yellow' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin'>Yellow</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin'>Yellow</p>");
|
|
|
skins_list.append(skin_yellow);
|
|
|
|
|
|
//Light sidebar skins
|
|
|
var skin_blue_light =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-blue-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin' style='font-size: 12px'>Blue Light</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin' style='font-size: 12px'>Blue Light</p>");
|
|
|
skins_list.append(skin_blue_light);
|
|
|
var skin_black_light =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-black-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin' style='font-size: 12px'>Black Light</p>");
|
|
|
+ + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin' style='font-size: 12px'>Black Light</p>");
|
|
|
skins_list.append(skin_black_light);
|
|
|
var skin_purple_light =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-purple-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin' style='font-size: 12px'>Purple Light</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin' style='font-size: 12px'>Purple Light</p>");
|
|
|
skins_list.append(skin_purple_light);
|
|
|
var skin_green_light =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-green-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin' style='font-size: 12px'>Green Light</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin' style='font-size: 12px'>Green Light</p>");
|
|
|
skins_list.append(skin_green_light);
|
|
|
var skin_red_light =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-red-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin' style='font-size: 12px'>Red Light</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin' style='font-size: 12px'>Red Light</p>");
|
|
|
skins_list.append(skin_red_light);
|
|
|
var skin_yellow_light =
|
|
|
- $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
+ $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
|
|
|
.append("<a href='javascript:void(0);' data-skin='skin-yellow-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
- + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
- + "</a>"
|
|
|
- + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
|
|
|
+ + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
|
|
|
+ + "</a>"
|
|
|
+ + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
|
|
|
skins_list.append(skin_yellow_light);
|
|
|
|
|
|
demo_settings.append("<h4 class='control-sidebar-heading'>Skins</h4>");
|