style for checkbox, radio button

app/assets/Archive/javascripts/orbitdesktop.js

@@ -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");  
+      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");   
+      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')

app/assets/Archive/stylesheets/desktop/_desktop-helper.scss

@@ -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;

app/assets/Archive/stylesheets/desktop/desktop-component.css

@@ -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,
+  .s_select_g li,
-  .check_box_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 {
+  .s_select_g li label {
-    padding-left: 4px; }
+    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 {

app/assets/Archive/stylesheets/desktop/desktop-component.scss

@@ -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;
 	}
 }
 

app/assets/Archive/stylesheets/desktop/desktop-main.css

@@ -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; }

app/assets/Archive/stylesheets/desktop/desktop-main.scss

@@ -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;

lib/desktopapp/views/journal_pages/add.erb

@@ -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>

vendor/built_in_modules/personal_conference/app/views/panel/personal_conference/desktop/conference_pages/_form.html.erb

@@ -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>

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_co_author_relations/_form.html.erb

@@ -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>

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_co_author_relations/index.html.erb

@@ -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>
 

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_co_authors/_form.html.erb

@@ -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">

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/_form.html.erb

@@ -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| %>