style for checkbox, radio button

This commit is contained in:
devin chen 2013-04-24 13:46:36 +08:00 committed by saurabhbhatia
parent 20521dc8b0
commit ad68f63a7a
12 changed files with 115 additions and 31 deletions

View File

@ -360,8 +360,12 @@ var orbitDesktop = function(dom){
this.layout_data.generate_layout_html = function(l){
$e = $("<div></div>");
$e.html(l);
column_container = $e.find("div.overview");
layout = column_container.attr("content-layout"), base_width = parseInt(column_container.attr("base-width")), no_of_entries,total_columns=0, pagination_link = column_container.attr("pagination-link"), pagination_variable = column_container.attr("pagination-var");
column_container = $e.find("div.overview"),
layout = column_container.attr("content-layout"),
base_width = parseInt(column_container.attr("base-width")),
no_of_entries,total_columns = 0,
pagination_link = column_container.attr("pagination-link"),
pagination_variable = column_container.attr("pagination-var");
var temp_div = $("<div></div>");
var entries = [];
switch (layout){
@ -411,15 +415,27 @@ var orbitDesktop = function(dom){
break;
}
// total_width = (!isNaN(base_width) ? ( base_width + 12 ) * total_columns : null);
return {"markup":temp_div.html(),"width":total_width,"total":entries.length};
return {
"markup":temp_div.html(),
"width":total_width,
"total":entries.length
};
}
var check_container = $("<div></div>").html(h).find("div[container=true]");
if(check_container.length > 0){
$("div[container=true]").html(check_container.html()).find("div.overview").wrap('<div class="tinycanvas"><div class="viewport"></div></div>');
$("div[container=true]")
.html(check_container.html())
.find("div.overview")
.wrap('<div class="tinycanvas"><div class="viewport"></div></div>');
}else{
$("div[container=true]").html(h).find("div.overview").wrap('<div class="tinycanvas"><div class="viewport"></div></div>');
$("div[container=true]")
.html(h)
.find("div.overview")
.wrap('<div class="tinycanvas"><div class="viewport"></div></div>');
}
$("div[container=true]").find("div.tinycanvas").prepend('<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
$("div[container=true]")
.find("div.tinycanvas")
.prepend('<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
var f = o.layout_data.generate_layout_html(h)
$("div[container=true] div.overview").html(f.markup);
var settings = {main : ".tinycanvas"};
@ -577,6 +593,7 @@ var orbitDesktop = function(dom){
window.o[o.data_method](target,url,cache);
}
}
header_ani();
}
});
$('#header')

View File

@ -8,6 +8,10 @@ $gray: #ddd;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: #{$font-size}px;
}
@mixin font-icon($font-size) {
font-family: "FontAwesome";
font-size: #{$font-size}px;
}
@mixin transition-type($property, $sec) {
-webkit-transition: #{$property} #{$sec}s ease;
-moz-transition: #{$property} #{$sec}s ease;

View File

@ -128,7 +128,7 @@
font-size: 15px;
line-height: 36px; }
.s_menu li {
border-top: solid 1px #f7f7f7; }
border-top: solid 1px #eaeaea; }
.s_menu li:first-child {
border: none; }
.s_menu a {
@ -216,7 +216,7 @@
.s_form .s_table thead th {
border-bottom: solid 1px #eeeeee; }
.check_box_g {
.s_select_g {
padding: 4px 8px;
-webkit-box-sizing: border-box;
/* webkit */
@ -228,22 +228,50 @@
/* ie */
box-sizing: border-box;
/* css3 */ }
.check_box_g li {
.s_select_g li {
margin: 0 6px 6px 0;
padding: 0; }
.check_box_g li,
.check_box_g li > * {
.s_select_g li,
.s_select_g li > * {
display: inline-block;
vertical-align: middle; }
.check_box_g label {
.s_select_g label {
width: auto;
margin: 0; }
.check_box_g > label {
.s_select_g > label {
font-size: 15px;
display: block;
padding: 4px 0; }
.check_box_g li label {
padding-left: 4px; }
.s_select_g li label {
padding-left: 4px;
cursor: pointer; }
.s_select_g li label:before {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
margin-right: 6px;
content: '';
border: solid 1px #c4c4c4; }
.s_select_g input[type=checkbox],
.s_select_g input[type=radio] {
display: none; }
.s_select_g input[type=checkbox]:checked + label:before, .s_select_g input[type=radio]:checked + label:before {
background-color: #444444;
border-color: #444444;
color: #fff;
font-family: "FontAwesome";
font-size: 12px; }
.s_select_g input[type=checkbox]:checked + label:before {
content: "\f00c"; }
.s_select_g input[type=radio] + label:before {
border-radius: 8px; }
.s_select_g input[type=radio]:checked + label:before {
content: "\f111";
font-size: 9px;
-webkit-text-size-adjust: none; }
/* tool bar */
.toolbar {

View File

@ -92,7 +92,7 @@
line-height: 36px;
li {
border-top: solid 1px lighten($gray, 10%);
border-top: solid 1px lighten($gray, 5%);
}
li:first-child {
border: none;
@ -203,7 +203,7 @@
}
.check_box_g {
.s_select_g {
padding: 4px 8px;
// border: solid 1px $gray;
@include box-sizing;
@ -228,6 +228,41 @@
}
li label {
padding-left: 4px;
cursor: pointer;
&:before {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
margin-right: 6px;
content: '';
border: solid 1px darken($gray, 10%);
}
}
input[type=checkbox],
input[type=radio]
{
display: none;
}
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
background-color: darken($gray, 60%);
border-color: darken($gray, 60%);
color: #fff;
@include font-icon(12);
}
input[type=checkbox]:checked + label:before {
content: "\f00c";
}
input[type=radio] + label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\f111";
font-size: 9px;
-webkit-text-size-adjust: none;
}
}

View File

@ -342,11 +342,11 @@ a.admtxt.admbg2:hover {
/* panel */
#panel_l {
background-color: #fff;
background-color: #f7f7f7;
float: left; }
#panel_r {
background-color: #f7f7f7;
background-color: #fff;
margin-left: 252px;
position: relative;
width: auto; }

View File

@ -288,11 +288,11 @@ a.admtxt.admbg2:hover {
}
/* panel */
#panel_l {
background-color: #fff;
background-color: lighten($gray, 10%);
float: left;
}
#panel_r {
background-color: lighten($gray, 10%);
background-color: #fff;
margin-left: 252px;
position: relative;
width: auto;

View File

@ -49,7 +49,7 @@
<li class="s_grid_row"><textarea class="s_grid_6 s_grid" name="" id="">Paper Title</textarea></li>
<li class="s_grid_row"><input class="s_grid_6 s_grid" type="text" value="Journal Title"><span class="icon-plus input_append"></span></li>
<li class="s_grid_row">
<div class="check_box_g">
<div class="s_select_g">
<label for="">Journal Level</label>
<ul>
<li><input type="checkbox"><label for="">SCI</label></li>

View File

@ -3,7 +3,7 @@
<%= f.submit t("save"), name: "commit", value: "Save", class: "fn_btn ini_input hp hh1 thmc2 thmtxt" %>
<!-- class: bt-cancle can't be remove -->
<% if not @writing_conference.new_record? %>
<%= submit_tag t("cancel"), :type => "button", "callback-method"=>"cancelpaper", "ajax-remote" => "get", :href => panel_personal_conference_desktop_conference_pages_path, class: "fn_btn ini_input hp hh1 thmadm thmtxt" %>
<%= submit_tag t("cancel"), :type => "button", "callback-method"=>"cancelpaper", "ajax-remote" => "get", :href => panel_personal_conference_desktop_conference_pages_path, class: "fn_btn ini_input hp hh1 admbg2 admtxt" %>
<% end %>
</div>
<div class="hh1 hp sdm">
@ -59,7 +59,7 @@
<li class="s_grid_row">
<div>
<%= label_tag("", t("personal_conference.paper_type"), class: 's_grid s_grid_4') %>
<div class="check_box_g s_grid s_grid_8 s_grid_h_1">
<div class="s_select_g s_grid s_grid_8 s_grid_h_1">
<ul>
<% @paper_types.each_with_index do |paper_type, i| %>
<li>

View File

@ -11,9 +11,9 @@
value: (@journal_co_author_relation.co_author_relation_translations[locale] rescue nil) %>
<#% end %>
-->
<%= f.submit t("save"), class: "s_grid s_grid_2 ini_input hp hh1 thmtxt thmc2" %>
<%= f.submit t("save"), class: "s_grid ini_input hp hh1 thmtxt thmc2" %>
<% if not @journal_co_author_relation.new_record? %>
<%= submit_tag t("cancel"), :type => "button", class: "bt-cancel-type s_grid s_grid_2 ini_input hp hh1 thmtxt" %>
<%= submit_tag t("cancel"), :type => "button", class: "bt-cancel-type s_grid ini_input hp hh1 admbg2 admtxt" %>
<% end %>
</li>
</ul>

View File

@ -4,11 +4,11 @@
<div class="sdm_t hp hh1 thmc2 thmtxt"><%= t("add") %></div>
<div class="admbg sdm_o">
<ul>
<li class="vp hp s_form" style="width:282px;"><%= render 'new' %></li>
<li class="vp hp s_form"><%= render 'new' %></li>
</ul>
</div>
</div>
<%= submit_tag t("back"), :type => "button", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_co_authors_path, class: "fn_btn ini_input hp hh1 thmtxt" %>
<%= submit_tag t("back"), :type => "button", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_co_authors_path, class: "fn_btn ini_input hp hh1 admbg2 admtxt" %>
</div>
</div>

View File

@ -1,7 +1,7 @@
<div class="toolbar hh1">
<div class="fn_g hp">
<%= f.submit t("save"), name: "commit", class: "fn_btn ini_input hp hh1 thmc2 thmtxt" %>
<%= submit_tag t("back"), :type => "button", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_co_authors_path, class: "fn_btn ini_input hp hh1 thmtxt" %>
<%= submit_tag t("back"), :type => "button", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_co_authors_path, class: "fn_btn ini_input hp hh1 admbg2 admtxt" %>
</div>
</div>
<div id="new_co_author" class="s_grid_con s_form vp">

View File

@ -3,7 +3,7 @@
<%= f.submit t("save"), name: "commit", class: "fn_btn ini_input hp hh1 thmc2 thmtxt" %>
<% if not @writing_journal.new_record? %>
<%= submit_tag t("cancel"), :type => "button", "callback-method"=>"cancelpaper", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_pages_path, class: "fn_btn ini_input hp hh1 thmadm thmtxt" %>
<%= submit_tag t("cancel"), :type => "button", "callback-method"=>"cancelpaper", "ajax-remote" => "get", :href => panel_personal_journal_desktop_journal_pages_path, class: "fn_btn ini_input hp hh1 admbg2 admtxt" %>
<% end %>
</div>
@ -59,7 +59,7 @@
</li>
<li class="s_grid_row">
<%= label_tag("", t("personal_journal.level_type"), :class => 's_grid s_grid_4') %>
<div class="check_box_g s_grid s_grid_8 s_grid_h_2">
<div class="s_select_g s_grid s_grid_8 s_grid_h_2">
<ul>
<% @level_types.each_with_index do |level_type, i| %>