First version.
This commit is contained in:
rulingcom
commit
ef19d718a1
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 B |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,627 @@
|
|||
;(function($, win, undefined) {
|
||||
// ECMAScript 5 嚴格模式
|
||||
'use strict';
|
||||
|
||||
// 初始函數: 把所有的程式碼都包在init裡面，方便在之後的jQuery ready 函數裡一次呼叫
|
||||
function init() {
|
||||
// 快取一些常用的變數
|
||||
var doc = document;
|
||||
var lang = doc.documentElement.lang;
|
||||
var pageModule = doc.body.getAttribute('data-module');
|
||||
var resizeTimer = -1;
|
||||
|
||||
// 把所有的函數都包在orbit這個物件裡並按模組做簡單的分類
|
||||
var orbit = {
|
||||
|
||||
// 工具函數，裡面包含可以重覆使用的函數
|
||||
utils: {
|
||||
// 字數限制函數, 因為系統預設沒有，所以使用JS來做
|
||||
// els = 元素, maxLen = 限制長度
|
||||
truncateText: function(els, maxLen) {
|
||||
var els = doc.querySelectorAll(els);
|
||||
var newTitle = '';
|
||||
var i = -1;
|
||||
var elsLen = els.length;
|
||||
|
||||
for (i = 0; i < elsLen; i++) {
|
||||
if (els[i].firstChild !== null) {
|
||||
if (els[i].firstChild.length > maxLen) {
|
||||
newTitle = els[i].firstChild.textContent;
|
||||
els[i].textContent = newTitle.substring(0, maxLen) + '...';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 外掛，所有的外掛都可以放到這個物件裡
|
||||
plugins: {
|
||||
// 自適應圖片裁切，Ray的外掛
|
||||
bullEye: function() {
|
||||
$('.bullseye').bullseye({
|
||||
fadeEffect: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// nav: {
|
||||
// 自適應使用的下拉選單
|
||||
// setDropdown: function() {
|
||||
// var $caret1 = $('<i class="dropdown-toggle-icon level-1 fa fa-chevron-down"></i>');
|
||||
// var $caret2 = $('<i class="dropdown-toggle-icon level-2 fa fa-chevron-down"></i>');
|
||||
// var $li = null;
|
||||
// var $this = null;
|
||||
// var cls = 'active';
|
||||
// var iconDown = 'fa-chevron-down';
|
||||
// var iconUp = 'fa-chevron-up';
|
||||
|
||||
// // 如果有第二層選單，新增對應的類別到parent元素上
|
||||
// $('.nav-level-1')
|
||||
// .parent('li')
|
||||
// .addClass('has-dropdown level-1');
|
||||
|
||||
// // 檢查是否已經有dropdown-toggle-icon這個元素，才不會在resize事件中重覆新增
|
||||
// if ($('.has-dropdown.level-1 > .dropdown-toggle-icon').length < 1) {
|
||||
// $caret1.appendTo('.has-dropdown.level-1');
|
||||
|
||||
// // 如果有第三層選單，新增對應的類別到parent元素上
|
||||
// $('.nav-level-2')
|
||||
// .parent('li')
|
||||
// .addClass('has-dropdown level-2');
|
||||
// $caret2.appendTo('.has-dropdown.level-2');
|
||||
// }
|
||||
|
||||
// // 綁定事件到第二、三層下拉選單的按鈕上
|
||||
// $('.dropdown-toggle-icon.level-1, .dropdown-toggle-icon.level-2').on('vclick', function(e) {
|
||||
// e.preventDefault();
|
||||
// $this = $(this);
|
||||
// $li = $this.parent('li');
|
||||
|
||||
// // 拿掉所有選項除了目前點選的選項的 active class 並把icon換成預設的
|
||||
// $li
|
||||
// .siblings('li')
|
||||
// .removeClass(cls)
|
||||
// .find('.' + iconUp)
|
||||
// .removeClass(iconUp)
|
||||
// .addClass(iconDown);
|
||||
|
||||
|
||||
// // 換掉目前選項的icon
|
||||
// $li
|
||||
// .find('> i')
|
||||
// .removeClass(iconDown)
|
||||
// .addClass(iconUp);
|
||||
|
||||
// // 折疊已打開的選項
|
||||
// if ( $li.hasClass(cls) ){
|
||||
// $li.removeClass(cls);
|
||||
// $this.removeClass(iconUp).addClass(iconDown);
|
||||
// }
|
||||
// else{
|
||||
// $li.addClass(cls)
|
||||
// $this.removeClass(iconDown).addClass(iconUp);
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
// 移除行動版下拉選單
|
||||
// removeDropdown: function() {
|
||||
// var $nav = $('#main-nav');
|
||||
|
||||
// $nav
|
||||
// .find('.dropdown-toggle-icon')
|
||||
// .remove();
|
||||
// $nav
|
||||
// .find('.active')
|
||||
// .removeClass('active');
|
||||
// }
|
||||
// },
|
||||
|
||||
member: {
|
||||
// 欄位相同高度，小心這個函數沒有計算到圖片高度，所以可能要搭配 jQuery load函數使用，或是之後使用更好的方式例如 CSS3 flexbox
|
||||
equalHeight: function(el) {
|
||||
var bigbrother = -1;
|
||||
var $el = $(el);
|
||||
$el.each(function(i) {
|
||||
bigbrother = bigbrother > $el.eq(i).height() ? bigbrother : $el.eq(i).height();
|
||||
});
|
||||
|
||||
$el.height(bigbrother);
|
||||
},
|
||||
|
||||
// 把沒有完成資料的表格列藏起來, 因為後台不管有沒有資料都會輸出項目，所以需要在前台藏起來…
|
||||
removeEmptyRow: function() {
|
||||
// index 頁面項目
|
||||
$('.i-member-profile-item .i-member-value').each(function() {
|
||||
if ($(this).text().trim() === '' || $(this).text().trim() === ':') {
|
||||
$(this).parent().addClass('hide');
|
||||
}
|
||||
});
|
||||
|
||||
// show 頁面項目
|
||||
$('.show-member .member-data th, .show-member .member-data td').each(function() {
|
||||
if ($(this).text().trim() === '') {
|
||||
$(this).parent('tr').addClass('hide');
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
archives: {
|
||||
// 把沒有文字內容的標題藏起來，因為就算是標題裡沒有文字系統仍然會輸出，這樣會造成一些多餘的CSS margins, paddings，或許之後也可以使用 CSS3 :empty selector 處理
|
||||
// el = 要移除的元素
|
||||
removeEmptyTitle: function(el) {
|
||||
var $el = $(el);
|
||||
var $els = $el.children();
|
||||
|
||||
$.each($els, function(i, val) {
|
||||
if ($els.eq(i).text().trim() === '') {
|
||||
$els.eq(i).addClass('hide');
|
||||
}
|
||||
});
|
||||
|
||||
$.each($el, function(i, val) {
|
||||
if ($el.eq(i).children('.hide').length >= 2) {
|
||||
$el.eq(i).addClass('hide');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// bootstarp panel 功能擴充，因為原本的功能不支援多個panel
|
||||
extendPanel: function() {
|
||||
var len = $('.i-archive .panel-title').length;
|
||||
var i = -1;
|
||||
if (len > 0) {
|
||||
// 新增數字到要對應的panel按鈕id及href上面
|
||||
for (i = 0; i < len; i++) {
|
||||
$('.panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
|
||||
$('.panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
adBanner: {
|
||||
// 讓AD banner 的圖片可以點選，因為系統預設輸出的圖片是沒有連結的
|
||||
// els = 要可以點選的元素(需要配合有data-link這個參數及data-targe才能使用)
|
||||
addLinkOnADBanner: function(els) {
|
||||
$.each(els, function() {
|
||||
if ($(this).data('link') !== '' && !$(this).hasClass('youtube')) {
|
||||
$(this).on('click', function() {
|
||||
var target = $(this).data('target');
|
||||
var link = $(this).data('link');
|
||||
|
||||
// 設定頁面打開的方式，記得要加上data-target在HTML裡面
|
||||
if (target === '_blank') {
|
||||
window.open(link, target);
|
||||
} else {
|
||||
window.location.href = link;
|
||||
}
|
||||
}).addClass('cursor'); // cursor類別樣式定義在CSS裡面
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 移除行動版下拉選單
|
||||
removeDropdown: function() {
|
||||
var $nav = $('#main-nav');
|
||||
|
||||
$nav
|
||||
.find('.menu-drop')
|
||||
.remove();
|
||||
$nav
|
||||
.find('.opened')
|
||||
.removeClass('opened');
|
||||
},
|
||||
// 網站次選單設定，如果次選單有第三層就新增下拉選單的圖示及加上bootstrap class
|
||||
// els = 選單元素
|
||||
sitemenuDropdown: function(els) {
|
||||
var els = doc.querySelectorAll('.sitemenu-list.level-2');
|
||||
var len = els.length;
|
||||
var i = -1;
|
||||
var caret = null;
|
||||
|
||||
for (i = 0; i < len; i++) {
|
||||
if (els[i].children.length) {
|
||||
caret = doc.createElement('span');
|
||||
caret.className = 'sitemenu-dropdown-toggle fa fa-caret-down';
|
||||
caret.setAttribute('data-toggle', 'dropdown');
|
||||
|
||||
els[i].parentNode.insertBefore(caret, els[i]);
|
||||
els[i].className += ' dropdown-menu';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 回到頁面最頂端，動態產生DOM
|
||||
// txt = 按鈕的文字, speed = 捲動時的速度
|
||||
goBackTop: function(txt, speed) {
|
||||
var top = document.createElement('div');
|
||||
top.className = 'go-back-top no-print';
|
||||
top.textContent = txt || 'top';
|
||||
doc.body.appendChild(top);
|
||||
|
||||
// 判斷是否顯示按鈕
|
||||
$(window).scroll(function() {
|
||||
if ($(this).scrollTop() !== 0) {
|
||||
$('.go-back-top').fadeIn();
|
||||
} else {
|
||||
$('.go-back-top').fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
// 捲動效果
|
||||
$('.go-back-top').on('click', function() {
|
||||
$('body, html').animate({
|
||||
scrollTop: 0
|
||||
}, speed || 300);
|
||||
return false;
|
||||
});
|
||||
},
|
||||
|
||||
// Multi-column layout, passing ID or class string as parameters and a
|
||||
// Bootstrap col class for full width, eg: col-md-12
|
||||
setColumn: function(leftCol, rightCol, columnCls) {
|
||||
var $leftCol = $(leftCol);
|
||||
var $rightCol = $(rightCol);
|
||||
var columnCls = columnCls || 'col-sm-12';
|
||||
|
||||
if ($leftCol.length && $rightCol.length) {
|
||||
$.each([$leftCol, $rightCol], function() {
|
||||
if ($(this).is(':empty')) {
|
||||
$(this)
|
||||
.addClass('empty-column')
|
||||
.siblings()
|
||||
.removeClass(function(index, css) {
|
||||
return (css.match(/(^|\s)col-\S+/g) || []).join(' ');
|
||||
})
|
||||
.addClass(columnCls);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
MobileMenu: function() {
|
||||
var $menu = $('[data-menu-level="0"]');
|
||||
|
||||
$menu.find('ul[data-menu-level="1"]').parent().addClass('mobile-menu1');
|
||||
$menu.find('ul[data-menu-level="2"]').parent().addClass('mobile-menu2');
|
||||
|
||||
var $caret1 = $('<span class="menu-drop"><i class="dropdown-toggle-icon level-1 fa fa-chevron-down"></i></span>');
|
||||
var $caret2 = $('<span class="menu-drop"><i class="dropdown-toggle-icon level-2 fa fa-chevron-down"></i></span>');
|
||||
|
||||
// 如果有第二層選單，新增對應的類別到parent元素上
|
||||
$('.nav-level-1')
|
||||
.parent('li')
|
||||
.addClass('has-dropdown level-1');
|
||||
|
||||
// 檢查是否已經有dropdown-toggle-icon這個元素，才不會在resize事件中重覆新增
|
||||
if ($('.has-dropdown.level-1 .menu-drop').length < 1) {
|
||||
$('.mobile-menu1').append($caret1);
|
||||
|
||||
|
||||
// 如果有第三層選單，新增對應的類別到parent元素上
|
||||
$('.nav-level-2')
|
||||
.parent('li')
|
||||
.addClass('has-dropdown level-2');
|
||||
$caret2.appendTo('.has-dropdown.level-2');
|
||||
}
|
||||
},
|
||||
|
||||
ClickMenuHandler: function() {
|
||||
$('.navbar-toggle').click(function(e){
|
||||
e.preventDefault();
|
||||
$('.mobile-menu').toggleClass('active');
|
||||
$('body').toggleClass('noscroll');
|
||||
|
||||
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
|
||||
// $menu.slideToggle();
|
||||
$('.mobile-menu1 > ul').slideUp(500);
|
||||
$('.mobile-menu1 > .menu-drop').removeClass('opened');
|
||||
$('.mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
})
|
||||
|
||||
$('.mobile-menu1 > .menu-drop').click(function(){
|
||||
var $that = $(this);
|
||||
var opencheck1 = $that.hasClass('opened');
|
||||
if ( opencheck1 == 0 ) {
|
||||
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
|
||||
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
|
||||
$('.mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
$that.siblings('ul').slideDown(500);
|
||||
$that.addClass('opened');
|
||||
|
||||
} else if (opencheck1 == 1) {
|
||||
$that.siblings('ul').slideUp(500);
|
||||
$('.mobile-menu2 > ul').slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
$that.removeClass('opened');
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
$('.mobile-menu2 > .menu-drop').click(function(){
|
||||
var $that = $(this);
|
||||
var opencheck2 = $that.hasClass('opened');
|
||||
if ( opencheck2 == 0 ) {
|
||||
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
|
||||
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
|
||||
$that.siblings('ul').slideDown(500);
|
||||
$that.addClass('opened');
|
||||
} else if (opencheck2 == 1) {
|
||||
$that.siblings('ul').slideUp(500);
|
||||
$that.removeClass('opened');
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會
|
||||
win.ORBITFRONT = orbit;
|
||||
|
||||
// 在switch裡測試頁面模組後執行對應的函數
|
||||
switch (pageModule) {
|
||||
case 'home':
|
||||
break;
|
||||
case 'member':
|
||||
orbit.member.removeEmptyRow();
|
||||
$('.index-member-3 .member-data-title-email').empty();
|
||||
break;
|
||||
case 'archive':
|
||||
orbit.archives.removeEmptyTitle('.i-archive__category-item');
|
||||
orbit.archives.extendPanel();
|
||||
break;
|
||||
case 'gallery':
|
||||
orbit.utils.truncateText('.show-description', 15);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
// 在所有的頁面(包含首頁)執行下面這幾個函數
|
||||
orbit.sitemenuDropdown();
|
||||
orbit.goBackTop('top', 800);
|
||||
orbit.plugins.bullEye();
|
||||
orbit.setColumn('.left-column', '.right-column');
|
||||
|
||||
// 自適應網頁使用，當網頁載入時，如果視窗寬度小於768，就執行orbit.nav.setDropdown函數
|
||||
if ($(window).width() < 768) {
|
||||
// orbit.nav.setDropdown();
|
||||
orbit.MobileMenu();
|
||||
$('.mobile-menu').append($('.modules-menu'));
|
||||
orbit.ClickMenuHandler();
|
||||
}
|
||||
|
||||
// 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
|
||||
$(window).resize(function() {
|
||||
if ($(window).width() < 768) {
|
||||
if (resizeTimer) clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function() {
|
||||
if ( $('.modules-menu i').length == 0 ) {
|
||||
orbit.MobileMenu();
|
||||
}
|
||||
if( $('.mobile-menu .modules-menu').length == 0 ) {
|
||||
$('.mobile-menu').append($('.modules-menu'));
|
||||
$('.navbar-toggle').bind(orbit.ClickMenuHandler());
|
||||
}
|
||||
},500 )} else {
|
||||
resizeTimer = setTimeout(function(){
|
||||
if( $('.mobile-menu .modules-menu').length > 0 ) {
|
||||
$('.layout-content .layout-content2').prepend($('.modules-menu'));
|
||||
}
|
||||
orbit.removeDropdown();
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
function forFreeGo() {
|
||||
// 幫有連結目的之所有a標籤加上title
|
||||
for(var i=0;i<$('a').length;i++){
|
||||
if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){
|
||||
var titlestr="";
|
||||
if($('a').eq(i).attr('target')=='_self')
|
||||
titlestr += '在本視窗開啟 ';
|
||||
else if($('a').eq(i).attr('target') == '_blank')
|
||||
titlestr += '在新視窗開啟 ';
|
||||
if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('</') == -1)
|
||||
titlestr += $('a').eq(i).html().trim();
|
||||
else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined && $('a').eq(i).find('>span').length==1)
|
||||
titlestr += $('a').eq(i).find('>span').html().trim();
|
||||
else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){
|
||||
try{
|
||||
if($('a').eq(i).html().trim().split('>').length==2)
|
||||
titlestr += $('a').eq(i).html().trim().split('>')[1].trim();
|
||||
else if($('a').eq(i).html().trim().split('>').length==3)
|
||||
titlestr += $('a').eq(i).html().trim().split('>')[2].trim();
|
||||
}catch(e){};
|
||||
}
|
||||
else
|
||||
titlestr += $('a').eq(i).attr('title');
|
||||
if(titlestr.search('<img') != -1)
|
||||
titlestr = "這是一張照片";
|
||||
if(titlestr != "")
|
||||
$('a').eq(i).attr('title',titlestr);
|
||||
};
|
||||
};
|
||||
// 刪除banner-slide的空連結和空連結目標
|
||||
for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
|
||||
if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
|
||||
$('.w-ba-banner__slide a').eq(i).removeAttr('href');
|
||||
if($('.w-ba-banner__slide a').eq(i).attr('target') == "")
|
||||
$('.w-ba-banner__slide a').eq(i).removeAttr('target');
|
||||
};
|
||||
// 幫無標題之iframe加上title
|
||||
for(var i=0;i<$('iframe').length;i++)
|
||||
if($('iframe').eq(i).attr('title')=="" || $('iframe').eq(i).attr('title')== undefined ){
|
||||
if($('iframe').eq(i).attr('src').search('facebook') != -1 )
|
||||
$('iframe').eq(i).attr('title','facebook');
|
||||
else if($('iframe').eq(i).attr('src').search('google') != -1 )
|
||||
$('iframe').eq(i).attr('title','google');
|
||||
else if($('iframe').eq(i).attr('src').search('youtube') != -1 )
|
||||
$('iframe').eq(i).attr('title','youtube');
|
||||
else if($('iframe').eq(i).attr('src').search('twitframe') != -1 )
|
||||
$('iframe').eq(i).attr('title','twitter');
|
||||
else
|
||||
$('iframe').eq(i).attr('title','unknown');
|
||||
};
|
||||
// 刪除空的檔案室
|
||||
var archievelen = $('dd a.i-archive-files-item').length;
|
||||
for(i=archievelen-1;i>=0;i--)
|
||||
if($('dd a.i-archive-files-item').eq(i).html().trim()=="")
|
||||
$('dd a.i-archive-files-item').eq(i).parent('dd').remove();
|
||||
// 刪除具有空連結欄位的橫列
|
||||
for(var i = 0;i < $('*[data-list] tr td a').length ; i++)
|
||||
if($('*[data-list] tr td a').eq(i).html().trim()=="")
|
||||
$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
|
||||
// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
|
||||
$('.nav-level-0>li>a').focus(function(e) {
|
||||
e.stopPropagation();
|
||||
$(this).parent().focus();
|
||||
if ($(this).parent().find('.nav-level-1').hasClass('show')) {
|
||||
} else {
|
||||
$('.nav-level-1').removeClass('show');
|
||||
$(this).parent().find('.nav-level-1').addClass('show');
|
||||
}
|
||||
});
|
||||
$('.nav-level-1>li>a').focus(function(e) {
|
||||
e.stopPropagation();
|
||||
if ($(this).parent().find('.nav-level-2').hasClass('show')) {
|
||||
}else{
|
||||
$('.nav-level-2').removeClass('show');
|
||||
$(this).parent().find('.nav-level-2').addClass('show');
|
||||
}
|
||||
});
|
||||
$('show').parent('li').focus();
|
||||
}
|
||||
forFreeGo();
|
||||
|
||||
//背景widget設定
|
||||
if ( location.href.search('editmode=on') != -1 ) {
|
||||
$('.background').css('z-index','2');
|
||||
} else {
|
||||
$('.background').css('z-index','-1');
|
||||
};
|
||||
|
||||
//header banner setting
|
||||
if ( location.href.search('editmode=on') != -1 ) {
|
||||
$('.header-banner').css('z-index','2');
|
||||
} else {
|
||||
$('.header-banner').css({
|
||||
'position': 'absolute',
|
||||
'top': '0',
|
||||
'z-index': '-2',
|
||||
});
|
||||
};
|
||||
|
||||
//公告頁籤
|
||||
function annc_widget_nav() {
|
||||
$('.tab_nav').nextAll().addClass('tab_content');
|
||||
$('.tab_content').css("display","none");
|
||||
$('.tab_content').eq(0).css('display', 'block');
|
||||
|
||||
var num = $('.tab_nav li').length;
|
||||
$('.tab_content').eq(num).css('display', 'block');
|
||||
$('.tab_content').eq(num).nextAll().css('display', 'block');
|
||||
|
||||
$('.tab_nav li').off('click').on('click',function() {
|
||||
$('.tab_nav li').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
var fa = $(this).index();
|
||||
|
||||
$('.tab_content').attr('style','');
|
||||
$('.tab_content').css("display","none");
|
||||
$('.tab_content').eq(fa).css('display','block');
|
||||
var num = $('.tab_nav li').length;
|
||||
$('.tab_content').eq(num).css('display', 'block');
|
||||
$('.tab_content').eq(num).nextAll().css('display', 'block');
|
||||
});
|
||||
|
||||
var url = window.location.search;
|
||||
if (url == "?editmode=on") {
|
||||
$('.tab_content').css({'position': 'relative','display':'block'});
|
||||
}
|
||||
}
|
||||
annc_widget_nav();
|
||||
|
||||
//切換語言停留在同一頁
|
||||
if(window.location.pathname!="/")
|
||||
$("#en").attr("href",window.location.pathname.replace("zh_tw","en"))
|
||||
|
||||
//檔案室 下載檔案 hover 彈出備註訊息
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
|
||||
//下載檔案格式dot pdf分色
|
||||
$(".i-archive .label.label-primary").each(function() {
|
||||
var downloadType = $(this).text();
|
||||
$(this).addClass(downloadType);
|
||||
})
|
||||
|
||||
//檔案室模組 Widget 手風琴
|
||||
function extendPanelWidget() {
|
||||
var len = $('.panel-title').length;
|
||||
var i = -1;
|
||||
if (len > 0) {
|
||||
// 新增數字到要對應的panel按鈕id及href上面
|
||||
for (i = 0; i < len; i++) {
|
||||
$('.panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
|
||||
$('.panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
|
||||
}
|
||||
}
|
||||
}
|
||||
extendPanelWidget();
|
||||
|
||||
// member show tab scroll
|
||||
$('.nav-pills').scrollingTabs({
|
||||
scrollToTabEdge: true,
|
||||
enableSwiping: true,
|
||||
leftArrowContent: [
|
||||
'<div class="scrtabs-tab-scroll-arrow custom-scroll-arrow"><i class="fa fa-caret-left" aria-hidden="true"></i>',
|
||||
'</div>'
|
||||
].join(''),
|
||||
rightArrowContent: [
|
||||
'<div class="scrtabs-tab-scroll-arrow custom-scroll-arrow"><i class="fa fa-caret-right" aria-hidden="true"></i>',
|
||||
'</div>'
|
||||
].join('')
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 當文件物件模型(DOM)載入後，執行init函數
|
||||
$(document).ready(function() {
|
||||
//RWD 自動縮放headerbannner
|
||||
function headerH() {
|
||||
if ($(window).width() < 768) {
|
||||
const navH = $('.layout-header .navbar-header').outerHeight();
|
||||
$('.header-banner').css('height', navH );
|
||||
}
|
||||
}
|
||||
headerH();
|
||||
$(window).resize(function() {
|
||||
headerH();
|
||||
})
|
||||
|
||||
init();
|
||||
});
|
||||
|
||||
$(window).load(function(){
|
||||
$("iframe[src*='google']").attr('title','googleOauth');
|
||||
});
|
||||
|
||||
// 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
|
||||
// $(window).load(function() {
|
||||
// if ($('.index-member-3').length && $(window).width() > 992) {
|
||||
// ORBITFRONT.member.equalHeight('.i-member-item-inner');
|
||||
// }
|
||||
// });
|
||||
|
||||
}(jQuery, window));
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function($){"use strict";var t={fadeEffect:!0,effectTime:.5},i=$(window),e=function(t,i){var e=document.createElement("img"),s;t.data("bullseyeImage")?(t.html('<img src="'+t.data("bullseyeImage")+'">'),s=t.data("bullseyeImage")):(s=t.find("img").first().attr("src"),t.data("bullseyeImage",s)),i.fadeEffect&&t.find("img").first().css({opacity:0}),e.src=s,e.onload=function(){n(t,i)}},n=function(t,i){var e=t.find("img").first(),n={position:"relative",overflow:"hidden"},o={position:"absolute",top:0,right:0,bottom:0,left:0,margin:"auto",width:"100%",height:"auto"},a={start:{opacity:1,"-webkit-transition":"opacity "+i.effectTime+"s ease-in-out","-moz-transition":"opacity "+i.effectTime+"s ease-in-out","-o-transition":"opacity "+i.effectTime+"s ease-in-out",transition:"opacity "+i.effectTime+"s ease-in-out"},end:{opacity:"","-webkit-transition":"","-moz-transition":"","-o-transition":"",transition:""}};t.css(n),e.css(o),s(t),i.fadeEffect&&e.css(a.start).on("transitionend",function(){$(this).css(a.end)})},s=function(t){var i=t.find("img").first(),e=t.innerHeight(),n,s;n=i.height(),e>n?(s=e/n,i.css({"-webkit-transform":"scale("+s+")","-moz-transform":"scale("+s+")","-o-transform":"scale("+s+")",transform:"scale("+s+")"})):i.css({"-webkit-transform":"","-moz-transform":"","-o-transform":"",transform:""})},o=function(t,n){e(t,n),i.on("resize",function(){s(t)})};$.fn.bullseye=function(i){var e=$.extend({},t,i);return this.each(function(){var t=$(this);o(t,e)})}}(window.jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,959 @@
|
|||
//
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Utilities
|
||||
// -------------------------
|
||||
|
||||
// Clearfix
|
||||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
//
|
||||
// For modern browsers
|
||||
// 1. The space content is one way to avoid an Opera bug when the
|
||||
// contenteditable attribute is included anywhere else in the document.
|
||||
// Otherwise it causes space to appear at the top and bottom of elements
|
||||
// that are clearfixed.
|
||||
// 2. The use of `table` rather than `block` is only necessary if using
|
||||
// `:before` to contain the top-margins of child elements.
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " "; // 1
|
||||
display: table; // 2
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// WebKit-style focus
|
||||
@mixin tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
// WebKit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
@mixin center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
@mixin size($width, $height) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
@mixin square($size) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
&::-moz-placeholder { color: $color; // Firefox
|
||||
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
|
||||
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
// Requires inline-block or block for proper styling
|
||||
@mixin text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
//
|
||||
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
|
||||
// mixins being reused as classes with the same name, this doesn't hold up. As
|
||||
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
|
||||
// that we cannot chain the mixins together in Less, so they are repeated.
|
||||
//
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
|
||||
// Deprecated as of v3.0.1 (will be removed in v4)
|
||||
@mixin hide-text() {
|
||||
font: #{0/0} a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
// New mixin to use as of v3.0.1
|
||||
@mixin text-hide() {
|
||||
@include hide-text();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// CSS3 PROPERTIES
|
||||
// --------------------------------------------------
|
||||
|
||||
// Single side border-radius
|
||||
@mixin border-top-radius($radius) {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@mixin border-right-radius($radius) {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
@mixin border-bottom-radius($radius) {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
@mixin border-left-radius($radius) {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
//
|
||||
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
|
||||
// supported browsers that have box shadow capabilities now support the
|
||||
// standard `box-shadow` property.
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
@mixin transition($transition...) {
|
||||
-webkit-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
@mixin transition-property($transition-property...) {
|
||||
-webkit-transition-property: $transition-property;
|
||||
transition-property: $transition-property;
|
||||
}
|
||||
@mixin transition-delay($transition-delay) {
|
||||
-webkit-transition-delay: $transition-delay;
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
@mixin transition-duration($transition-duration...) {
|
||||
-webkit-transition-duration: $transition-duration;
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
@mixin transition-transform($transition...) {
|
||||
-webkit-transition: -webkit-transform $transition;
|
||||
-moz-transition: -moz-transform $transition;
|
||||
-o-transition: -o-transform $transition;
|
||||
transition: transform $transition;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
@mixin rotate($degrees) {
|
||||
-webkit-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees); // IE9 only
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
@mixin scale($scale-args...) {
|
||||
-webkit-transform: scale($scale-args);
|
||||
-ms-transform: scale($scale-args); // IE9 only
|
||||
transform: scale($scale-args);
|
||||
}
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y); // IE9 only
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin skew($x, $y) {
|
||||
-webkit-transform: skew($x, $y);
|
||||
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
transform: skew($x, $y);
|
||||
}
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin rotateX($degrees) {
|
||||
-webkit-transform: rotateX($degrees);
|
||||
-ms-transform: rotateX($degrees); // IE9 only
|
||||
transform: rotateX($degrees);
|
||||
}
|
||||
@mixin rotateY($degrees) {
|
||||
-webkit-transform: rotateY($degrees);
|
||||
-ms-transform: rotateY($degrees); // IE9 only
|
||||
transform: rotateY($degrees);
|
||||
}
|
||||
@mixin perspective($perspective) {
|
||||
-webkit-perspective: $perspective;
|
||||
-moz-perspective: $perspective;
|
||||
perspective: $perspective;
|
||||
}
|
||||
@mixin perspective-origin($perspective) {
|
||||
-webkit-perspective-origin: $perspective;
|
||||
-moz-perspective-origin: $perspective;
|
||||
perspective-origin: $perspective;
|
||||
}
|
||||
@mixin transform-origin($origin) {
|
||||
-webkit-transform-origin: $origin;
|
||||
-moz-transform-origin: $origin;
|
||||
-ms-transform-origin: $origin; // IE9 only
|
||||
transform-origin: $origin;
|
||||
}
|
||||
|
||||
// Animations
|
||||
@mixin animation($animation) {
|
||||
-webkit-animation: $animation;
|
||||
animation: $animation;
|
||||
}
|
||||
@mixin animation-name($name) {
|
||||
-webkit-animation-name: $name;
|
||||
animation-name: $name;
|
||||
}
|
||||
@mixin animation-duration($duration) {
|
||||
-webkit-animation-duration: $duration;
|
||||
animation-duration: $duration;
|
||||
}
|
||||
@mixin animation-timing-function($timing-function) {
|
||||
-webkit-animation-timing-function: $timing-function;
|
||||
animation-timing-function: $timing-function;
|
||||
}
|
||||
@mixin animation-delay($delay) {
|
||||
-webkit-animation-delay: $delay;
|
||||
animation-delay: $delay;
|
||||
}
|
||||
@mixin animation-iteration-count($iteration-count) {
|
||||
-webkit-animation-iteration-count: $iteration-count;
|
||||
animation-iteration-count: $iteration-count;
|
||||
}
|
||||
@mixin animation-direction($direction) {
|
||||
-webkit-animation-direction: $direction;
|
||||
animation-direction: $direction;
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden`
|
||||
@mixin backface-visibility($visibility){
|
||||
-webkit-backface-visibility: $visibility;
|
||||
-moz-backface-visibility: $visibility;
|
||||
backface-visibility: $visibility;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select; // IE10+
|
||||
user-select: $select;
|
||||
}
|
||||
|
||||
// Resize anything
|
||||
@mixin resizable($direction) {
|
||||
resize: $direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Safari fix
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
|
||||
-webkit-column-count: $column-count;
|
||||
-moz-column-count: $column-count;
|
||||
column-count: $column-count;
|
||||
-webkit-column-gap: $column-gap;
|
||||
-moz-column-gap: $column-gap;
|
||||
column-gap: $column-gap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
@mixin hyphens($mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: $mode;
|
||||
-moz-hyphens: $mode;
|
||||
-ms-hyphens: $mode; // IE10+
|
||||
-o-hyphens: $mode;
|
||||
hyphens: $mode;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: #{alpha(opacity=$opacity-ie)};
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GRADIENTS
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Horizontal gradient, from left to right
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
|
||||
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
-pie-background: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
|
||||
}
|
||||
|
||||
// Vertical gradient, from top to bottom
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
|
||||
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
-pie-background: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
|
||||
}
|
||||
|
||||
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
||||
background-repeat: repeat-x;
|
||||
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
|
||||
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
-pie-background: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
}
|
||||
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
|
||||
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
||||
-pie-background: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
-pie-background: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
|
||||
background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
|
||||
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
|
||||
background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
-pie-background: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
}
|
||||
|
||||
// Reset filters for IE
|
||||
//
|
||||
// When you need to remove a gradient background, do not forget to use this to reset
|
||||
// the IE filter for IE9 and below.
|
||||
@mixin reset-filter() {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Retina images
|
||||
//
|
||||
// Short retina mixin for setting background-image and -size
|
||||
|
||||
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
||||
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
|
||||
background-size: $width-1x $height-1x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive image
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
@mixin img-responsive($display: block) {
|
||||
display: $display;
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
}
|
||||
|
||||
|
||||
// COMPONENT MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Horizontal dividers
|
||||
// -------------------------
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
@mixin nav-divider($color: #e5e5e5) {
|
||||
height: 1px;
|
||||
margin: (($line-height-computed / 2) - 1) 0;
|
||||
overflow: hidden;
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
|
||||
border-color: $border;
|
||||
|
||||
& > .panel-heading {
|
||||
color: $heading-text-color;
|
||||
background-color: $heading-bg-color;
|
||||
border-color: $heading-border;
|
||||
|
||||
+ .panel-collapse .panel-body {
|
||||
border-top-color: $border;
|
||||
}
|
||||
}
|
||||
& > .panel-footer {
|
||||
+ .panel-collapse .panel-body {
|
||||
border-bottom-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alerts
|
||||
// -------------------------
|
||||
@mixin alert-variant($background, $border, $text-color) {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
color: $text-color;
|
||||
|
||||
hr {
|
||||
border-top-color: darken($border, 5%);
|
||||
}
|
||||
.alert-link {
|
||||
color: darken($text-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
@mixin table-row-variant($state, $background) {
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
.table > thead > tr,
|
||||
.table > tbody > tr,
|
||||
.table > tfoot > tr {
|
||||
> td.#{$state},
|
||||
> th.#{$state},
|
||||
&.#{$state} > td,
|
||||
&.#{$state} > th {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover > tbody > tr {
|
||||
> td.#{$state}:hover,
|
||||
> th.#{$state}:hover,
|
||||
&.#{$state}:hover > td,
|
||||
&.#{$state}:hover > th {
|
||||
background-color: darken($background, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List Groups
|
||||
// -------------------------
|
||||
@mixin list-group-item-variant($state, $background, $color) {
|
||||
.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
|
||||
// [converter] extracted a& to a.list-group-item-#{$state}
|
||||
}
|
||||
|
||||
a.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
|
||||
.list-group-item-heading { color: inherit; }
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
}
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button variants
|
||||
// -------------------------
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
@mixin button-variant($color, $background, $border) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $color;
|
||||
background-color: darken($background, 8%);
|
||||
border-color: darken($border, 12%);
|
||||
}
|
||||
.open & { &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: darken($background, 8%);
|
||||
border-color: darken($border, 12%);
|
||||
} }
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
}
|
||||
.open & { &.dropdown-toggle {
|
||||
background-image: none;
|
||||
} }
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $background;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
// -------------------------
|
||||
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Labels
|
||||
// -------------------------
|
||||
@mixin label-variant($color) {
|
||||
background-color: $color;
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Contextual backgrounds
|
||||
// -------------------------
|
||||
// [converter] $parent hack
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color;
|
||||
}
|
||||
a#{$parent}:hover {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
// [converter] $parent hack
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color;
|
||||
}
|
||||
a#{$parent}:hover {
|
||||
color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar vertical align
|
||||
// -------------------------
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
|
||||
@mixin navbar-vertical-align($element-height) {
|
||||
margin-top: (($navbar-height - $element-height) / 2);
|
||||
margin-bottom: (($navbar-height - $element-height) / 2);
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
// -------------------------
|
||||
@mixin progress-bar-variant($color) {
|
||||
background-color: $color;
|
||||
.progress-striped & {
|
||||
@include gradient-striped();
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive utilities
|
||||
// -------------------------
|
||||
// More easily include all the states for responsive-utilities.less.
|
||||
// [converter] $parent hack
|
||||
@mixin responsive-visibility($parent) {
|
||||
#{$parent} {
|
||||
display: block !important;
|
||||
}
|
||||
table#{$parent} { display: table; }
|
||||
tr#{$parent} { display: table-row !important; }
|
||||
th#{$parent},
|
||||
td#{$parent} { display: table-cell !important; }
|
||||
}
|
||||
|
||||
// [converter] $parent hack
|
||||
@mixin responsive-invisibility($parent) {
|
||||
#{$parent} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Grid System
|
||||
// -----------
|
||||
|
||||
// Centered container element
|
||||
@mixin container-fixed() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Creates a wrapper for a series of columns
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
margin-left: ($gutter / -2);
|
||||
margin-right: ($gutter / -2);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Generate the extra small columns
|
||||
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
@mixin make-xs-column-offset($columns) {
|
||||
@media (min-width: $screen-xs-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-xs-column-push($columns) {
|
||||
@media (min-width: $screen-xs-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-xs-column-pull($columns) {
|
||||
@media (min-width: $screen-xs-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the small columns
|
||||
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-offset($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-push($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-sm-column-pull($columns) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the medium columns
|
||||
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-offset($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-push($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-md-column-pull($columns) {
|
||||
@media (min-width: $screen-md-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the large columns
|
||||
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
float: left;
|
||||
width: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-offset($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
margin-left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-push($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
left: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
@mixin make-lg-column-pull($columns) {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
right: percentage(($columns / $grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin make-grid-columns() {
|
||||
$list: '';
|
||||
$i: 1;
|
||||
$list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
||||
@for $i from (1 + 1) through $grid-columns {
|
||||
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
||||
}
|
||||
#{$list} {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin float-grid-columns($class) {
|
||||
$list: '';
|
||||
$i: 1;
|
||||
$list: ".col-#{$class}-#{$i}";
|
||||
@for $i from (1 + 1) through $grid-columns {
|
||||
$list: "#{$list}, .col-#{$class}-#{$i}";
|
||||
}
|
||||
#{$list} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin calc-grid-column($index, $class, $type) {
|
||||
@if ($type == width) and ($index > 0) {
|
||||
.col-#{$class}-#{$index} {
|
||||
width: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == push) {
|
||||
.col-#{$class}-push-#{$index} {
|
||||
left: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == pull) {
|
||||
.col-#{$class}-pull-#{$index} {
|
||||
right: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
@if ($type == offset) {
|
||||
.col-#{$class}-offset-#{$index} {
|
||||
margin-left: percentage(($index / $grid-columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
||||
@mixin loop-grid-columns($columns, $class, $type) {
|
||||
@for $i from 0 through $columns {
|
||||
@include calc-grid-column($i, $class, $type);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Create grid for specific class
|
||||
@mixin make-grid($class) {
|
||||
@include float-grid-columns($class);
|
||||
@include loop-grid-columns($grid-columns, $class, width);
|
||||
@include loop-grid-columns($grid-columns, $class, pull);
|
||||
@include loop-grid-columns($grid-columns, $class, push);
|
||||
@include loop-grid-columns($grid-columns, $class, offset);
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
//
|
||||
// Used in forms.less to generate the form validation CSS for warnings, errors,
|
||||
// and successes.
|
||||
|
||||
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
|
||||
// Color the label and help text
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
color: $text-color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: $border-color;
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken($border-color, 10%);
|
||||
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
}
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: $text-color;
|
||||
border-color: $border-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
// Optional feedback icon
|
||||
.form-control-feedback {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Form control focus state
|
||||
//
|
||||
// Generate a customized focus state and for any input with the specified color,
|
||||
// which defaults to the `$input-focus-border` variable.
|
||||
//
|
||||
// We highly encourage you to not customize the default value, but instead use
|
||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
||||
// usability and accessibility should be taken into account with any change.
|
||||
//
|
||||
// Example usage: change the default blue border and shadow to white for better
|
||||
// contrast against a dark gray background.
|
||||
|
||||
@mixin form-control-focus($color: $input-border-focus) {
|
||||
$color-rgba: rgba(red($color), green($color), blue($color), .6);
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
outline: 0;
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
|
||||
}
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Relative text size, padding, and border-radii changes for form controls. For
|
||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
|
||||
// [converter] $parent hack
|
||||
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
|
||||
#{$parent} {
|
||||
height: $input-height;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
select#{$parent} {
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
textarea#{$parent},
|
||||
select[multiple]#{$parent} {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,833 @@
|
|||
// a flag to toggle asset pipeline / compass integration
|
||||
// defaults to true if twbs-font-path function is present (no function => twbs-font-path('') parsed as string == right side)
|
||||
// in Sass 3.3 this can be improved with: function-exists(twbs-font-path)
|
||||
$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default;
|
||||
//
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
$gray-darker: lighten(#000, 13.5%) !default; // #222
|
||||
$gray-dark: lighten(#000, 20%) !default; // #333
|
||||
$gray: lighten(#000, 33.5%) !default; // #555
|
||||
$gray-light: lighten(#000, 60%) !default; // #999
|
||||
$gray-lighter: lighten(#000, 93.5%) !default; // #eee
|
||||
|
||||
$brand-primary: #47bab5 !default;
|
||||
$brand-success: #5cb85c !default;
|
||||
$brand-info: #5bc0de !default;
|
||||
$brand-warning: #f0ad4e !default;
|
||||
$brand-danger: #ed4c43 !default;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
// ## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
$body-bg: #fff !default;
|
||||
//** Global text color on `<body>`.
|
||||
$text-color: $gray-dark !default;
|
||||
|
||||
//** Global textual link color.
|
||||
$link-color: $brand-primary !default;
|
||||
//** Link hover color set via `darken()` function.
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
$font-size-base: 14px !default;
|
||||
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
|
||||
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
|
||||
$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
|
||||
$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-h5: $font-size-base !default;
|
||||
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$line-height-base: 1.428571429 !default; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-color: inherit !default;
|
||||
|
||||
|
||||
//-- Iconography
|
||||
//
|
||||
//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
|
||||
|
||||
$icon-font-path: "bootstrap/" !default;
|
||||
$icon-font-name: "glyphicons-halflings-regular" !default;
|
||||
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
|
||||
|
||||
//== Components
|
||||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
$padding-base-vertical: 6px !default;
|
||||
$padding-base-horizontal: 12px !default;
|
||||
|
||||
$padding-large-vertical: 10px !default;
|
||||
$padding-large-horizontal: 16px !default;
|
||||
|
||||
$padding-small-vertical: 5px !default;
|
||||
$padding-small-horizontal: 10px !default;
|
||||
|
||||
$padding-xs-vertical: 1px !default;
|
||||
$padding-xs-horizontal: 5px !default;
|
||||
|
||||
$line-height-large: 1.33 !default;
|
||||
$line-height-small: 1.5 !default;
|
||||
|
||||
$border-radius-base: 4px !default;
|
||||
$border-radius-large: 6px !default;
|
||||
$border-radius-small: 3px !default;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
$component-active-color: #fff !default;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
$caret-width-base: 4px !default;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
$caret-width-large: 5px !default;
|
||||
|
||||
|
||||
//== Tables
|
||||
//
|
||||
//## Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
//** Padding for `<th>`s and `<td>`s.
|
||||
$table-cell-padding: 8px !default;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
$table-condensed-cell-padding: 5px !default;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
$table-bg: transparent !default;
|
||||
//** Background color used for `.table-striped`.
|
||||
$table-bg-accent: #f9f9f9 !default;
|
||||
//** Background color used for `.table-hover`.
|
||||
$table-bg-hover: #f5f5f5 !default;
|
||||
$table-bg-active: $table-bg-hover !default;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
$table-border-color: #ddd !default;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-font-weight: normal !default;
|
||||
|
||||
$btn-default-color: #333 !default;
|
||||
$btn-default-bg: #fff !default;
|
||||
$btn-default-border: #ccc !default;
|
||||
|
||||
$btn-primary-color: #fff !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
|
||||
|
||||
$btn-success-color: #fff !default;
|
||||
$btn-success-bg: $brand-success !default;
|
||||
$btn-success-border: darken($btn-success-bg, 5%) !default;
|
||||
|
||||
$btn-info-color: #fff !default;
|
||||
$btn-info-bg: $brand-info !default;
|
||||
$btn-info-border: darken($btn-info-bg, 5%) !default;
|
||||
|
||||
$btn-warning-color: #fff !default;
|
||||
$btn-warning-bg: $brand-warning !default;
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%) !default;
|
||||
|
||||
$btn-danger-color: #fff !default;
|
||||
$btn-danger-bg: $brand-danger !default;
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%) !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-light !default;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
$input-bg: #fff !default;
|
||||
//** `<input disabled>` background color
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
$input-color: $gray !default;
|
||||
//** `<input>` border color
|
||||
$input-border: #ccc !default;
|
||||
//** `<input>` border radius
|
||||
$input-border-radius: $border-radius-base !default;
|
||||
//** Border color for inputs on focus
|
||||
$input-border-focus: #66afe9 !default;
|
||||
|
||||
//** Placeholder text color
|
||||
$input-color-placeholder: $gray-light !default;
|
||||
|
||||
//** Default `.form-control` height
|
||||
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
|
||||
//** Large `.form-control` height
|
||||
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
|
||||
//** Small `.form-control` height
|
||||
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
||||
|
||||
$legend-color: $gray-dark !default;
|
||||
$legend-border-color: #e5e5e5 !default;
|
||||
|
||||
//** Background color for textual input addons
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
//** Border color for textual input addons
|
||||
$input-group-addon-border-color: $input-border !default;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
$dropdown-bg: #fff !default;
|
||||
//** Dropdown menu `border-color`.
|
||||
$dropdown-border: rgba(0,0,0,.15) !default;
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
$dropdown-fallback-border: #ccc !default;
|
||||
//** Divider color for between dropdown items.
|
||||
$dropdown-divider-bg: #e5e5e5 !default;
|
||||
|
||||
//** Dropdown link text color.
|
||||
$dropdown-link-color: $gray-dark !default;
|
||||
//** Hover color for dropdown links.
|
||||
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
||||
//** Hover background for dropdown links.
|
||||
$dropdown-link-hover-bg: #f5f5f5 !default;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
//** Active dropdown menu item background color.
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
$dropdown-link-disabled-color: $gray-light !default;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
$dropdown-header-color: $gray-light !default;
|
||||
|
||||
// Note: Deprecated $dropdown-caret-color as of v3.1.0
|
||||
$dropdown-caret-color: #000 !default;
|
||||
|
||||
|
||||
//-- Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
//
|
||||
// Note: These variables are not generated into the Customizer.
|
||||
|
||||
$zindex-navbar: 1000 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-popover: 1010 !default;
|
||||
$zindex-tooltip: 1030 !default;
|
||||
$zindex-navbar-fixed: 1030 !default;
|
||||
$zindex-modal-background: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
|
||||
|
||||
//== Media queries breakpoints
|
||||
//
|
||||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
||||
|
||||
// Extra small screen / phone
|
||||
// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
|
||||
$screen-xs: 480px !default;
|
||||
$screen-xs-min: $screen-xs !default;
|
||||
$screen-phone: $screen-xs-min !default;
|
||||
|
||||
// Small screen / tablet
|
||||
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
|
||||
$screen-sm: 768px !default;
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
$screen-tablet: $screen-sm-min !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
|
||||
$screen-md: 992px !default;
|
||||
$screen-md-min: $screen-md !default;
|
||||
$screen-desktop: $screen-md-min !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
|
||||
$screen-lg: 1200px !default;
|
||||
$screen-lg-min: $screen-lg !default;
|
||||
$screen-lg-desktop: $screen-lg-min !default;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||||
$screen-sm-max: ($screen-md-min - 1) !default;
|
||||
$screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
$grid-columns: 12 !default;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
$grid-gutter-width: 30px !default;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
$grid-float-breakpoint: $screen-sm-min !default;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
$container-tablet: ((720px + $grid-gutter-width)) !default;
|
||||
//** For `$screen-sm-min` and up.
|
||||
$container-sm: $container-tablet !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
$container-desktop: ((940px + $grid-gutter-width)) !default;
|
||||
//** For `$screen-md-min` and up.
|
||||
$container-md: $container-desktop !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
$container-large-desktop: ((1140px + $grid-gutter-width)) !default;
|
||||
//** For `$screen-lg-min` and up.
|
||||
$container-lg: $container-large-desktop !default;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
$navbar-height: 50px !default;
|
||||
$navbar-margin-bottom: $line-height-computed !default;
|
||||
$navbar-border-radius: $border-radius-base !default;
|
||||
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
|
||||
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
|
||||
$navbar-collapse-max-height: 340px !default;
|
||||
|
||||
$navbar-default-color: #777 !default;
|
||||
$navbar-default-bg: #f8f8f8 !default;
|
||||
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
|
||||
|
||||
// Navbar links
|
||||
$navbar-default-link-color: #777 !default;
|
||||
$navbar-default-link-hover-color: #333 !default;
|
||||
$navbar-default-link-hover-bg: transparent !default;
|
||||
$navbar-default-link-active-color: #555 !default;
|
||||
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
|
||||
$navbar-default-link-disabled-color: #ccc !default;
|
||||
$navbar-default-link-disabled-bg: transparent !default;
|
||||
|
||||
// Navbar brand label
|
||||
$navbar-default-brand-color: $navbar-default-link-color !default;
|
||||
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
|
||||
$navbar-default-brand-hover-bg: transparent !default;
|
||||
|
||||
// Navbar toggle
|
||||
$navbar-default-toggle-hover-bg: #ddd !default;
|
||||
$navbar-default-toggle-icon-bar-bg: #888 !default;
|
||||
$navbar-default-toggle-border-color: #ddd !default;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
$navbar-inverse-color: $gray-light !default;
|
||||
$navbar-inverse-bg: #222 !default;
|
||||
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
|
||||
|
||||
// Inverted navbar links
|
||||
$navbar-inverse-link-color: $gray-light !default;
|
||||
$navbar-inverse-link-hover-color: #fff !default;
|
||||
$navbar-inverse-link-hover-bg: transparent !default;
|
||||
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
|
||||
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
|
||||
$navbar-inverse-link-disabled-color: #444 !default;
|
||||
$navbar-inverse-link-disabled-bg: transparent !default;
|
||||
|
||||
// Inverted navbar brand label
|
||||
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
|
||||
$navbar-inverse-brand-hover-color: #fff !default;
|
||||
$navbar-inverse-brand-hover-bg: transparent !default;
|
||||
|
||||
// Inverted navbar toggle
|
||||
$navbar-inverse-toggle-hover-bg: #333 !default;
|
||||
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
|
||||
$navbar-inverse-toggle-border-color: #333 !default;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
$nav-link-padding: 10px 15px !default;
|
||||
$nav-link-hover-bg: $gray-lighter !default;
|
||||
|
||||
$nav-disabled-link-color: $gray-light !default;
|
||||
$nav-disabled-link-hover-color: $gray-light !default;
|
||||
|
||||
$nav-open-link-hover-color: #fff !default;
|
||||
|
||||
//== Tabs
|
||||
$nav-tabs-border-color: #ddd !default;
|
||||
|
||||
$nav-tabs-link-hover-border-color: $gray-lighter !default;
|
||||
|
||||
$nav-tabs-active-link-hover-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-hover-color: $gray !default;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd !default;
|
||||
|
||||
$nav-tabs-justified-link-border-color: #ddd !default;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg !default;
|
||||
|
||||
//== Pills
|
||||
$nav-pills-border-radius: $border-radius-base !default;
|
||||
$nav-pills-active-link-hover-bg: $component-active-bg !default;
|
||||
$nav-pills-active-link-hover-color: $component-active-color !default;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: #fff !default;
|
||||
$pagination-border: #ddd !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-lighter !default;
|
||||
$pagination-hover-border: #ddd !default;
|
||||
|
||||
$pagination-active-color: #fff !default;
|
||||
$pagination-active-bg: $brand-primary !default;
|
||||
$pagination-active-border: $brand-primary !default;
|
||||
|
||||
$pagination-disabled-color: $gray-light !default;
|
||||
$pagination-disabled-bg: #fff !default;
|
||||
$pagination-disabled-border: #ddd !default;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
$pager-bg: $pagination-bg !default;
|
||||
$pager-border: $pagination-border !default;
|
||||
$pager-border-radius: 15px !default;
|
||||
|
||||
$pager-hover-bg: $pagination-hover-bg !default;
|
||||
|
||||
$pager-active-bg: $pagination-active-bg !default;
|
||||
$pager-active-color: $pagination-active-color !default;
|
||||
|
||||
$pager-disabled-color: $pagination-disabled-color !default;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
$jumbotron-padding: 30px !default;
|
||||
$jumbotron-color: inherit !default;
|
||||
$jumbotron-bg: $gray-lighter !default;
|
||||
$jumbotron-heading-color: inherit !default;
|
||||
$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
$state-success-text: #3c763d !default;
|
||||
$state-success-bg: #dff0d8 !default;
|
||||
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
|
||||
|
||||
$state-info-text: #31708f !default;
|
||||
$state-info-bg: #d9edf7 !default;
|
||||
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
|
||||
|
||||
$state-warning-text: #8a6d3b !default;
|
||||
$state-warning-bg: #fcf8e3 !default;
|
||||
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
|
||||
|
||||
$state-danger-text: #a94442 !default;
|
||||
$state-danger-bg: #f2dede !default;
|
||||
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
$tooltip-max-width: 200px !default;
|
||||
//** Tooltip text color
|
||||
$tooltip-color: #fff !default;
|
||||
//** Tooltip background color
|
||||
$tooltip-bg: #000 !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
|
||||
//** Tooltip arrow width
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
//** Tooltip arrow color
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
$popover-bg: #fff !default;
|
||||
//** Popover maximum width
|
||||
$popover-max-width: 276px !default;
|
||||
//** Popover border color
|
||||
$popover-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Popover fallback border color
|
||||
$popover-fallback-border-color: #ccc !default;
|
||||
|
||||
//** Popover title background color
|
||||
$popover-title-bg: darken($popover-bg, 3%) !default;
|
||||
|
||||
//** Popover arrow width
|
||||
$popover-arrow-width: 10px !default;
|
||||
//** Popover arrow color
|
||||
$popover-arrow-color: #fff !default;
|
||||
|
||||
//** Popover outer arrow width
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
|
||||
//** Popover outer arrow color
|
||||
$popover-arrow-outer-color: fadein($popover-border-color, 5%) !default;
|
||||
//** Popover outer arrow fallback color
|
||||
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
$label-default-bg: $gray-light !default;
|
||||
//** Primary label background color
|
||||
$label-primary-bg: $brand-primary !default;
|
||||
//** Success label background color
|
||||
$label-success-bg: $brand-success !default;
|
||||
//** Info label background color
|
||||
$label-info-bg: $brand-info !default;
|
||||
//** Warning label background color
|
||||
$label-warning-bg: $brand-warning !default;
|
||||
//** Danger label background color
|
||||
$label-danger-bg: $brand-danger !default;
|
||||
|
||||
//** Default label text color
|
||||
$label-color: #fff !default;
|
||||
//** Default text color of a linked label
|
||||
$label-link-hover-color: #fff !default;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
$modal-inner-padding: 20px !default;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
$modal-title-padding: 15px !default;
|
||||
//** Modal title line-height
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
//** Background color of modal content area
|
||||
$modal-content-bg: #fff !default;
|
||||
//** Modal content border color
|
||||
$modal-content-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Modal content border color **for IE8**
|
||||
$modal-content-fallback-border-color: #999 !default;
|
||||
|
||||
//** Modal backdrop background color
|
||||
$modal-backdrop-bg: #000 !default;
|
||||
//** Modal backdrop opacity
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
//** Modal header border color
|
||||
$modal-header-border-color: #e5e5e5 !default;
|
||||
//** Modal footer border color
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
|
||||
$modal-lg: 900px !default;
|
||||
$modal-md: 600px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding: 15px !default;
|
||||
$alert-border-radius: $border-radius-base !default;
|
||||
$alert-link-font-weight: bold !default;
|
||||
|
||||
$alert-success-bg: $state-success-bg !default;
|
||||
$alert-success-text: $state-success-text !default;
|
||||
$alert-success-border: $state-success-border !default;
|
||||
|
||||
$alert-info-bg: $state-info-bg !default;
|
||||
$alert-info-text: $state-info-text !default;
|
||||
$alert-info-border: $state-info-border !default;
|
||||
|
||||
$alert-warning-bg: $state-warning-bg !default;
|
||||
$alert-warning-text: $state-warning-text !default;
|
||||
$alert-warning-border: $state-warning-border !default;
|
||||
|
||||
$alert-danger-bg: $state-danger-bg !default;
|
||||
$alert-danger-text: $state-danger-text !default;
|
||||
$alert-danger-border: $state-danger-border !default;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
$progress-bg: #f5f5f5 !default;
|
||||
//** Progress bar text color
|
||||
$progress-bar-color: #fff !default;
|
||||
|
||||
//** Default progress bar color
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
//** Success progress bar color
|
||||
$progress-bar-success-bg: $brand-success !default;
|
||||
//** Warning progress bar color
|
||||
$progress-bar-warning-bg: $brand-warning !default;
|
||||
//** Danger progress bar color
|
||||
$progress-bar-danger-bg: $brand-danger !default;
|
||||
//** Info progress bar color
|
||||
$progress-bar-info-bg: $brand-info !default;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
$list-group-bg: #fff !default;
|
||||
//** `.list-group-item` border color
|
||||
$list-group-border: #ddd !default;
|
||||
//** List group border radius
|
||||
$list-group-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Background color of single list elements on hover
|
||||
$list-group-hover-bg: #f5f5f5 !default;
|
||||
//** Text color of active list elements
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
//** Background color of active list elements
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
//** Border color of active list elements
|
||||
$list-group-active-border: $list-group-active-bg !default;
|
||||
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
|
||||
|
||||
$list-group-link-color: #555 !default;
|
||||
$list-group-link-heading-color: #333 !default;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
$panel-bg: #fff !default;
|
||||
$panel-body-padding: 15px !default;
|
||||
$panel-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: #ddd !default;
|
||||
$panel-footer-bg: #f5f5f5 !default;
|
||||
|
||||
$panel-default-text: $gray-dark !default;
|
||||
$panel-default-border: #ddd !default;
|
||||
$panel-default-heading-bg: #f5f5f5 !default;
|
||||
|
||||
$panel-primary-text: #fff !default;
|
||||
$panel-primary-border: $brand-primary !default;
|
||||
$panel-primary-heading-bg: $brand-primary !default;
|
||||
|
||||
$panel-success-text: $state-success-text !default;
|
||||
$panel-success-border: $state-success-border !default;
|
||||
$panel-success-heading-bg: $state-success-bg !default;
|
||||
|
||||
$panel-info-text: $state-info-text !default;
|
||||
$panel-info-border: $state-info-border !default;
|
||||
$panel-info-heading-bg: $state-info-bg !default;
|
||||
|
||||
$panel-warning-text: $state-warning-text !default;
|
||||
$panel-warning-border: $state-warning-border !default;
|
||||
$panel-warning-heading-bg: $state-warning-bg !default;
|
||||
|
||||
$panel-danger-text: $state-danger-text !default;
|
||||
$panel-danger-border: $state-danger-border !default;
|
||||
$panel-danger-heading-bg: $state-danger-bg !default;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
$thumbnail-padding: 4px !default;
|
||||
//** Thumbnail background color
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
//** Thumbnail border color
|
||||
$thumbnail-border: #ddd !default;
|
||||
//** Thumbnail border radius
|
||||
$thumbnail-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
$thumbnail-caption-color: $text-color !default;
|
||||
//** Padding around the thumbnail caption
|
||||
$thumbnail-caption-padding: 9px !default;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
$well-bg: #f5f5f5 !default;
|
||||
$well-border: darken($well-bg, 7%) !default;
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
$badge-color: #fff !default;
|
||||
//** Linked badge text color on hover
|
||||
$badge-link-hover-color: #fff !default;
|
||||
$badge-bg: $gray-light !default;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
$badge-active-color: $link-color !default;
|
||||
//** Badge background color in active nav link
|
||||
$badge-active-bg: #fff !default;
|
||||
|
||||
$badge-font-weight: bold !default;
|
||||
$badge-line-height: 1 !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
$breadcrumb-padding-vertical: 8px !default;
|
||||
$breadcrumb-padding-horizontal: 15px !default;
|
||||
//** Breadcrumb background color
|
||||
$breadcrumb-bg: #f5f5f5 !default;
|
||||
//** Breadcrumb text color
|
||||
$breadcrumb-color: #ccc !default;
|
||||
//** Text color of current page in the breadcrumb
|
||||
$breadcrumb-active-color: $gray-light !default;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
$breadcrumb-separator: "/" !default;
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
|
||||
|
||||
$carousel-control-color: #fff !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
$carousel-control-font-size: 20px !default;
|
||||
|
||||
$carousel-indicator-active-bg: #fff !default;
|
||||
$carousel-indicator-border-color: #fff !default;
|
||||
|
||||
$carousel-caption-color: #fff !default;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
$close-font-weight: bold !default;
|
||||
$close-color: #000 !default;
|
||||
$close-text-shadow: 0 1px 0 #fff !default;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
$code-color: #c7254e !default;
|
||||
$code-bg: #f9f2f4 !default;
|
||||
|
||||
$kbd-color: #fff !default;
|
||||
$kbd-bg: #333 !default;
|
||||
|
||||
$pre-bg: #f5f5f5 !default;
|
||||
$pre-color: $gray-dark !default;
|
||||
$pre-border-color: #ccc !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Text muted color
|
||||
$text-muted: $gray-light !default;
|
||||
//** Abbreviations and acronyms border color
|
||||
$abbr-border-color: $gray-light !default;
|
||||
//** Headings small color
|
||||
$headings-small-color: $gray-light !default;
|
||||
//** Blockquote small color
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
//** Blockquote font size
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
//** Blockquote border color
|
||||
$blockquote-border-color: $gray-lighter !default;
|
||||
//** Page header border color
|
||||
$page-header-border-color: $gray-lighter !default;
|
||||
|
||||
|
||||
//== Miscellaneous
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal line color.
|
||||
$hr-border: $gray-lighter !default;
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
$component-offset-horizontal: 180px !default;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
|||
@charset "utf-8";
|
||||
@import "initial";
|
||||
|
||||
@media(max-width: 767px) {
|
||||
.modules-menu .modules-menu-level-0>li { margin: 0; }
|
||||
.modules-menu .modules-menu-level-0>li:hover { background: transparent; }
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
@charset "utf-8";
|
||||
|
||||
a[accesskey] {
|
||||
position: absolute;
|
||||
margin-left: -0.9375em;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
#orbit-bar a[accesskey] {
|
||||
color: #666666 !important;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
body[data-module="page_content"] {
|
||||
[data-content="true"] {
|
||||
h1 {
|
||||
font-size: $font-h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-h1;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $font-h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $font-h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: $font-h6;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2;
|
||||
margin: 0 0 0.625em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
@import "variables";
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $sub-font;
|
||||
font-size: inherit;
|
||||
margin-top: 2.5em;
|
||||
background: $theme-green-light;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $theme-color-main;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: lighten($theme-color-main, 10%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.admin-edit {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// override bootsrap settings
|
||||
th,
|
||||
td {
|
||||
padding: 0.5em .5rem;
|
||||
}
|
||||
|
||||
.borderless > tbody > tr > td,
|
||||
.borderless > tbody > tr > th,
|
||||
.borderless > tfoot > tr > td,
|
||||
.borderless > tfoot > tr > th,
|
||||
.borderless > thead > tr > td,
|
||||
.borderless > thead > tr > th {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
a.btn-primary {
|
||||
color: #5fcdb0;
|
||||
border-color: #eaeaea;
|
||||
background-color:#eaeaea;
|
||||
font-size: 1rem ;
|
||||
font-style: italic;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($theme-color-main, 10%);
|
||||
border-color: darken($theme-color-main, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Page heading
|
||||
.page-module-title {
|
||||
@extend .unity-title;
|
||||
|
||||
margin-bottom: 1.125em;
|
||||
}
|
||||
|
||||
.view-count {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.view_count {
|
||||
> i {
|
||||
font-size: 0.75rem;
|
||||
|
||||
&:before {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Take care of exceeding content
|
||||
body[data-module="page_content"],
|
||||
body[data-module="announcement"] {
|
||||
.layout-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
.go-back-top {
|
||||
background: rgba($theme-color-main, 0.9);
|
||||
text-align: center;
|
||||
padding: 0.625em 0.75em;
|
||||
position: fixed;
|
||||
bottom: 0.9375em;
|
||||
right: 0.9375em;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
color: $theme-white;
|
||||
font-size: 0.750em;
|
||||
border-radius: 0.125em;
|
||||
z-index: 1050;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme-color-main, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// Set Triangle
|
||||
@import "variables";
|
||||
|
||||
@mixin arrow($direction, $width, $height, $color) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
|
||||
@if $direction == "top" {
|
||||
border-width: $width $height 0 $height;
|
||||
border-color: $color transparent transparent transparent;
|
||||
}
|
||||
|
||||
@else if $direction == "right" {
|
||||
border-width: $height $width $height 0;
|
||||
border-color: transparent $color transparent transparent;
|
||||
}
|
||||
|
||||
@else if $direction == "bottom" {
|
||||
border-width: 0 $height $width $height;
|
||||
border-color: transparent transparent $color transparent;
|
||||
}
|
||||
|
||||
@else if $direction == "left" {
|
||||
border-width: $height 0 $height $width;
|
||||
border-color: transparent transparent transparent $color;
|
||||
}
|
||||
|
||||
@else if $direction == "top-right" {
|
||||
border-width: 0 $width $height 0;
|
||||
border-color: transparent $color transparent transparent;
|
||||
}
|
||||
|
||||
@else if $direction == "top-left" {
|
||||
border-width: $height $width 0 0;
|
||||
border-color: $color transparent transparent transparent;
|
||||
}
|
||||
|
||||
@else if $direction == "bottom-right" {
|
||||
border-width: 0 0 $height $width;
|
||||
border-color: transparent transparent $color transparent;
|
||||
}
|
||||
|
||||
@else if $direction == "bottom-left" {
|
||||
border-width: $height 0 0 $width;
|
||||
border-color: transparent transparent transparent $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin list-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
$theme-white: #fff;
|
||||
$orbit-bg-color: #333;
|
||||
$orbit-bg-hover-color: #0095CF;
|
||||
$orbit-border-color: #444;
|
||||
|
||||
body {
|
||||
#orbit-bar .orbit-bar-inner > ul > li:hover > a,
|
||||
#orbit-bar .orbit-bar-inner > ul > li:hover > span,
|
||||
#orbit-bar .orbit-bar-inner > ul > li:hover > label,
|
||||
#orbit-bar .orbit-bar-inner > ul > li > ul li:hover,
|
||||
#orbit-bar .orbit-bar-inner > ul > li > ul li.active {
|
||||
background: $orbit-bg-hover-color;
|
||||
}
|
||||
|
||||
#orbit-bar .orbit-bar-inner {
|
||||
background: $orbit-bg-color;
|
||||
}
|
||||
|
||||
#orbit-bar .orbit-bar-search-sign-language #search input[type="search"] {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#orbit-bar #search {
|
||||
border-right: none;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
body #orbit-bar .orbit-bar-search-sign-language #search input[type="search"] {
|
||||
width: 8.75em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
body {
|
||||
#orbit-bar ul.orbit-bar-search-sign-language > li + li:hover > a,
|
||||
#orbit-bar ul.orbit-bar-search-sign-language > li + li:hover > span {
|
||||
background-color: $orbit-bg-color;
|
||||
}
|
||||
|
||||
#orbit-bar .orbit-bar-inner > label {
|
||||
border-color: $theme-white;
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
#orbit-bar .orbit-bar-inner > ul {
|
||||
background: $orbit-bg-color;
|
||||
}
|
||||
|
||||
#orbit-bar .orbit-bar-inner > ul > li > ul li:hover,
|
||||
#orbit-bar .orbit-bar-inner > ul > li > ul li.active {
|
||||
background: $orbit-bg-hover-color;
|
||||
}
|
||||
|
||||
#orbit-bar .orbit-bar-inner > ul > li > ul a {
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
#orbit-bar .orbit-bar-inner > ul > li > ul li.divider {
|
||||
background: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#orbit-bar ul.orbit-bar-search-sign-language > li {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#orbit-bar ul.orbit-bar-search-sign-language > li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#orbit-bar ul.orbit-bar-search-sign-language > li + li {
|
||||
border-top: 0.0625em solid $orbit-border-color;
|
||||
border-right: 0.0625em solid $orbit-border-color;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#orbit-bar ul.orbit-bar-search-sign-language > li + li:hover > ul {
|
||||
background-color: $orbit-bg-color;
|
||||
}
|
||||
|
||||
.orbit-bar-logo + ul > li {
|
||||
border-bottom: 0.0625em solid $orbit-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
.pagination {
|
||||
li {
|
||||
a {
|
||||
font-size: 0.8125rem;
|
||||
margin: 0 0.2em;
|
||||
color: $theme-color-main;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
a {
|
||||
background-color: $theme-color-main;
|
||||
border-color: $theme-color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
body .sitemap-list {
|
||||
a {
|
||||
color: $theme-color-main;
|
||||
|
||||
&:hover {
|
||||
color: lighten($theme-color-main, 10%);
|
||||
}
|
||||
}
|
||||
&.level-1 > li > a {
|
||||
font-size: 1.2em;
|
||||
font-family: $main-font;
|
||||
}
|
||||
&.level-2 > li > a {
|
||||
font-size: 1em;
|
||||
font-family: $main-font;
|
||||
}
|
||||
&.level-3 {
|
||||
font-size: 0.8em;
|
||||
font-family: $main-font;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
// Title
|
||||
.unity-title {
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.5;
|
||||
font-family: $main-font;
|
||||
font-size: $font-h1;
|
||||
color: $theme-color-main;
|
||||
|
||||
.layout-footer & {
|
||||
margin-bottom: 0.625em;
|
||||
border-bottom: none;
|
||||
|
||||
span {
|
||||
display: inline;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//transition
|
||||
.transition {
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-family: $main-font;
|
||||
font-size: 0.750em;
|
||||
}
|
||||
|
||||
.status-top {
|
||||
background-color: $theme-color-second;
|
||||
}
|
||||
|
||||
.status-hot {
|
||||
background-color: $theme-color-third;
|
||||
}
|
||||
|
||||
.status-source {
|
||||
background-color: $theme-color-main;
|
||||
|
||||
a {
|
||||
color: $theme-white;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
// 把可以重覆使用的類別放在這個檔案裡
|
||||
|
||||
// 只保留第一個editmode連結，後面的都藏起來以免使用者插入其他的內容造成版面跑版
|
||||
.single-child-datapp {
|
||||
> .editmode-ps + a[href^="/page_parts/"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.transfrom-180 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
-webkit-transition: .3s all ease;
|
||||
transition: .3s all ease;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $theme-color-main;
|
||||
}
|
||||
|
||||
.box-social-share {
|
||||
margin: 0.9375em 0;
|
||||
> * {
|
||||
display: inline-block !important;
|
||||
margin: 0 0.375em 0 0 !important;
|
||||
vertical-align: top !important;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: 0.2s;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
top: -0.1875em;
|
||||
}
|
||||
}
|
||||
.fb-share-button.fb_iframe_widget {
|
||||
> span {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
}
|
||||
.print-button {
|
||||
a {
|
||||
color: #333;
|
||||
font: 0.9375em/1.25em $main-font;
|
||||
.fa {
|
||||
color: #666;
|
||||
font-size: 1.125em;
|
||||
margin: 0 0.1875em 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
@charset "utf-8";
|
||||
@import "../../bootstrap/variables";
|
||||
// Base Color
|
||||
$theme-green-light: #EEF7F6;
|
||||
$theme-gray: #8b8b8b;
|
||||
$theme-gray-subtle: #ddd;
|
||||
$theme-gray-light: #cecece;
|
||||
$theme-gray-lighter: #f3f3f3;
|
||||
$theme-gray-dark: #363636;
|
||||
$theme-gray-darker: #242424;
|
||||
$theme-white: #fff;
|
||||
$theme-red: #d20001;
|
||||
$theme-blue: #003d7e;
|
||||
|
||||
$theme-color-main: #333333;
|
||||
$theme-color-second: #91BFEA;
|
||||
$theme-color-third: #ed4c43;
|
||||
$theme-color-green: #32D9C3;
|
||||
|
||||
// Font stacks
|
||||
$main-font: "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
||||
$sub-font: "Roboto", "新細明體", "Helvetica Neue", Helvetica, sans-serif;
|
||||
|
||||
// Font sizes
|
||||
$font-15: 0.9375rem;
|
||||
$font-13: 0.8125rem;
|
||||
|
||||
$font-h1: 1.5rem;
|
||||
$font-h2: 1.35rem;
|
||||
$font-h3: 1.2rem;
|
||||
$font-h4: 1.1rem;
|
||||
$font-h5: 1rem;
|
||||
$font-h6: 0.9rem;
|
||||
|
||||
//
|
||||
// Modules
|
||||
// --------------------------------------------------
|
||||
// ## commonly use in all widgets
|
||||
|
||||
// Font sizes
|
||||
$w-widget-title-font-size: 1.5rem;
|
||||
|
||||
// Colors
|
||||
$w-border-color: $theme-gray-lighter;
|
||||
|
||||
//
|
||||
// AD banner Module
|
||||
// --------------------------------------------------
|
||||
|
||||
// Font sizes
|
||||
$w-caption-font-size: 1.4rem;
|
||||
$w-caption-desc: 0.85rem;
|
||||
|
||||
//
|
||||
// Announcement Module
|
||||
// --------------------------------------------------
|
||||
|
||||
// Font sizes
|
||||
$w-title-font-size-small: 0.75rem;
|
||||
$w-subtitle-font-size: 0.75rem;
|
||||
$w-meta-font-size: 0.75rem;
|
||||
|
||||
$w-table-th-font-size: 0.75em;
|
||||
$w-table-td-font-size: 0.75em;
|
||||
|
||||
$i-title-font-size-large: 2em;
|
||||
|
||||
// colors
|
||||
|
||||
$link-color: $theme-color-main;
|
||||
$link-hover-color: lighten($theme-color-main, 10%);
|
||||
|
||||
$table-th-bgcolor: $theme-color-main;
|
||||
|
||||
//
|
||||
// Archive Module
|
||||
// --------------------------------------------------
|
||||
|
||||
// Font sizes
|
||||
$w-item-heading-font-size: 0.85rem;
|
||||
|
||||
//
|
||||
// Member Module
|
||||
// --------------------------------------------------
|
||||
|
||||
$border-width: 0.25em;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@import "bootstrap/mixins";
|
||||
@import "bootstrap/variables";
|
||||
@import "base/mixins";
|
||||
@import "base/variables";
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* jquery-bootstrap-scrolling-tabs
|
||||
* @version v2.6.1
|
||||
* @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
|
||||
* @author Mike Jacobson <michaeljjacobson1@gmail.com>
|
||||
* @license MIT License, http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
.scrtabs-tab-container *{box-sizing:border-box}.scrtabs-tab-container{height:42px}.scrtabs-tab-container .tab-content{clear:left}.scrtabs-tab-container.scrtabs-bootstrap4 .scrtabs-tabs-movable-container>.navbar-nav{-ms-flex-direction:row;flex-direction:row}.scrtabs-tabs-fixed-container{float:left;height:42px;overflow:hidden;width:100%}.scrtabs-tabs-movable-container{position:relative}.scrtabs-tabs-movable-container .tab-content{display:none}.scrtabs-tab-container.scrtabs-rtl .scrtabs-tabs-movable-container>ul.nav-tabs{padding-right:0}.scrtabs-tab-scroll-arrow{border:1px solid #ddd;border-top:none;color:#428bca;display:none;float:left;font-size:0.75rem;height:42px;margin-bottom:-1px;padding-left:2px;padding-top:13px;width:20px}.scrtabs-tab-scroll-arrow:hover{background-color:#eee}.scrtabs-tab-scroll-arrow,.scrtabs-tab-scroll-arrow .scrtabs-click-target{cursor:pointer}.scrtabs-tab-scroll-arrow.scrtabs-with-click-target{cursor:default}.scrtabs-tab-scroll-arrow.scrtabs-disable,.scrtabs-tab-scroll-arrow.scrtabs-disable .scrtabs-click-target{color:#ddd;cursor:default}.scrtabs-tab-scroll-arrow.scrtabs-disable:hover{background-color:initial}.scrtabs-tabs-fixed-container ul.nav-tabs>li{white-space:nowrap}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-content {
|
||||
//min-height: 37.5em;
|
||||
|
||||
.container {
|
||||
@extend .response-container;
|
||||
}
|
||||
.layout-content2{
|
||||
display: flex;
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
@media (max-width:1200px){
|
||||
width: 100%;
|
||||
}
|
||||
.layout-content-inner.container{
|
||||
width: 1000px;
|
||||
padding: 0;
|
||||
background-color: #eaeaea;
|
||||
@media (max-width:1200px){
|
||||
width:100%;
|
||||
}
|
||||
.layout-content-box.left-column.col-sm-12{
|
||||
padding: 20px 40px 20px 50px;
|
||||
}
|
||||
.body-banner{
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
.extra-box{
|
||||
background-color: #5fcdb0;
|
||||
padding: 0;
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
}
|
||||
.collapse.navbar-collapse.modules-menu{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-footer {
|
||||
padding: 2em 0;
|
||||
color: $theme-color-main;
|
||||
font-size: 0.8125em;
|
||||
background-color: $theme-color-second;
|
||||
|
||||
.container {
|
||||
@extend .response-container;
|
||||
padding: 0 7em;
|
||||
}
|
||||
.footer-counter a { padding-right: 0.5em; }
|
||||
a {
|
||||
color: $theme-color-main;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten($theme-color-main, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-header {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
z-index: 1;
|
||||
|
||||
.container {
|
||||
@extend .response-container;
|
||||
}
|
||||
.header-banner { overflow: hidden; }
|
||||
.header-nav {
|
||||
width: 50%;
|
||||
float: right;
|
||||
padding: 0;
|
||||
color: $theme-color-main;
|
||||
font-family: $main-font;
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.8em;
|
||||
color: $theme-color-main;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $theme-color-main;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
text-align: right;
|
||||
}
|
||||
@media (max-width:767px){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 0 1.25em;
|
||||
|
||||
.navbar-brand {
|
||||
height: unset;
|
||||
margin: 0.5em 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
line-height: 2.125em;
|
||||
color: $theme-color-main;
|
||||
font-size: 1.4em;
|
||||
font-family: $main-font;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
height: unset;
|
||||
margin: 0.5rem 0 0;
|
||||
padding-left: 0;
|
||||
line-height: 3.75em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: 3.5em;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin-right: 0.5em;
|
||||
float: left;
|
||||
@media (max-width:767px) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
padding: 0.875em 0.625em;
|
||||
border-radius: 0.125em;
|
||||
border-width: 0.125em;
|
||||
border-color: lighten($theme-color-main, 30%);
|
||||
|
||||
.icon-bar {
|
||||
background-color: lighten($theme-color-main, 30%);
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.icon-bar-top {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.icon-bar-middle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon-bar-bottom {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
// icon bar animation
|
||||
.icon-bar {
|
||||
transition: .2s all;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-bar-top {
|
||||
top: 0.375em;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-bar-middle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon-bar-bottom {
|
||||
top: -0.375em;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-slide {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
.w-ad-banner {
|
||||
max-width: 75em;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
//
|
||||
// Widget
|
||||
//
|
||||
|
||||
// Widget
|
||||
// ## gerenral styles
|
||||
|
||||
.w-ba-banner {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.w-ba-banner__wrap {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.w-ba-banner__slide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ad-overlay {
|
||||
color: #333333;
|
||||
z-index: 200;
|
||||
font-family: $main-font;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000);
|
||||
-pie-background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000);
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
padding: 1.5em 1em;
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 0 0.5rem;
|
||||
color: $theme-white;
|
||||
}
|
||||
p { margin: 0; padding: 0.5rem; color: $theme-white; }
|
||||
@media(max-width: $screen-sm) {
|
||||
padding: 0.5em 1em;
|
||||
position: relative;
|
||||
background: #333333;
|
||||
h3 { font-size: 1em; }
|
||||
p { font-size: 0.75em; padding: 0.3rem 0.5rem 0.8rem 0.5rem; }
|
||||
}
|
||||
}
|
||||
|
||||
.banner-pager {
|
||||
@include list-reset;
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
z-index: 200;
|
||||
text-align:center;
|
||||
width: 100%;
|
||||
li {
|
||||
display: inline-block;
|
||||
height: 3px;
|
||||
width: 4%;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: hsla(0,0%,100%,.4);
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
border: unset;
|
||||
}
|
||||
.active-slide button {
|
||||
opacity: 1;
|
||||
background: $theme-color-green;
|
||||
}
|
||||
a {
|
||||
background: white;
|
||||
display: inline-block;
|
||||
margin-right: 0.25em;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
border-radius: 50%;
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
opacity: .5;
|
||||
cursor:pointer;
|
||||
border:0;
|
||||
}
|
||||
.active-slide a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.controlplay{
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 3%;
|
||||
z-index: 200;
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: 0.25em;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
|
||||
i {
|
||||
font-family: FontAwesome;
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
color: #FFF;
|
||||
vertical-align: middle;
|
||||
font-style: unset;
|
||||
}
|
||||
}
|
||||
.resume-slide i::before{
|
||||
content:"\f04b"
|
||||
}
|
||||
.pause-slide i::before{
|
||||
content:"\f04c"
|
||||
}
|
||||
@media(max-width: $screen-sm) {
|
||||
right: 0;
|
||||
a { padding: 0 5px;}
|
||||
a i { font-size: 0.75em; }
|
||||
}
|
||||
}
|
||||
|
||||
ul.button-mid{
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 999;
|
||||
|
||||
.prev-button{
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
float:left;
|
||||
left: 0.5rem;
|
||||
width: 2.5rem;
|
||||
/* background: url(/assets/next.png) no-repeat center; */
|
||||
height: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
color: #ffffff;
|
||||
background: rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
line-height: 2.5rem;
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
@media(max-width: $screen-xs) {
|
||||
line-height: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
.next-button{
|
||||
float: right;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
right: 0.5rem;
|
||||
width: 2.5rem;
|
||||
/* background: url(/assets/next.png) no-repeat center; */
|
||||
height: 2.5rem;
|
||||
font-size: 2.2rem;
|
||||
color: $theme-white;
|
||||
background: rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
line-height: 2.5rem;
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
@media(max-width: $screen-xs) {
|
||||
line-height: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-responsive {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Widget 1
|
||||
.ba-banner-widget-1 {
|
||||
.w-ba-banner__caption {
|
||||
color: $theme-color-main;
|
||||
z-index: 200;
|
||||
|
||||
h2 {
|
||||
font-family: $main-font;
|
||||
font-size: $w-caption-font-size;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $main-font;
|
||||
font-size: $w-caption-desc;
|
||||
}
|
||||
}
|
||||
@media(max-width: $screen-sm) {
|
||||
.ad-overlay {
|
||||
padding: 0.5em 1em;
|
||||
position: relative;
|
||||
background: #333333;
|
||||
h3 { font-size: 1em; }
|
||||
p { font-size: 0.75em; }
|
||||
}
|
||||
.controlplay {
|
||||
right: 0;
|
||||
a { padding: 0 5px;}
|
||||
a i { font-size: 0.75em; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Widget 2
|
||||
.ba-banner-widget-2 {
|
||||
.w-ba-banner__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.youtube, .cycle-youtube {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
object, embed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.banner-pager {
|
||||
right: 1em;
|
||||
top: -2em;
|
||||
z-index: 102;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget 3
|
||||
.ba-banner-widget-3 {
|
||||
.w-ba-banner__wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-ba-banner__slide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-pager {
|
||||
right: 0;
|
||||
bottom: 2em;
|
||||
li { height: unset; width: unset; }
|
||||
}
|
||||
ul.button-mid { display: none; }
|
||||
}
|
||||
|
||||
//Widget 4
|
||||
.ba-banner-widget-4 {
|
||||
.w-ba-banner__wrap {
|
||||
text-align: center;
|
||||
img { margin-bottom: 0.5rem; }
|
||||
}
|
||||
}
|
||||
|
||||
// specific style for youtube widget
|
||||
.ba-banner-widget-youtube {
|
||||
.cycle-slide-active {
|
||||
z-index: 101 !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,354 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
//
|
||||
// Widget
|
||||
//
|
||||
// Widget
|
||||
// ## gerenral styles
|
||||
.w-archive {
|
||||
.w-archive__widget-title {
|
||||
@extend .unity-title;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget 1
|
||||
.widget-archive-1 {
|
||||
.w-archive__list.level-1 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.w-archive__item.level-1 {
|
||||
list-style-position: inside;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.w-archive__item-heading {
|
||||
display: inline-block;
|
||||
font-size: $w-item-heading-font-size;
|
||||
font-family: $main-font;
|
||||
color: $theme-gray;
|
||||
margin: 0;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.w-archive__list.level-2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.w-archive__item.level-2 {
|
||||
border-bottom: 0.0625em dashed $w-border-color;
|
||||
padding: 0 0 0.5rem 0.4rem;
|
||||
.w-archive__list.level-3 {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
& > li:before {
|
||||
content:"";
|
||||
background: url(/assets/arr.gif) 0 0 no-repeat;
|
||||
display:inline-block;
|
||||
width:0.3125em;
|
||||
height: 0.5em;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w-archive__link {
|
||||
font-size: $w-title-font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
//Widget 2
|
||||
.widget-archive-2 {
|
||||
.panel-default > .panel-heading {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
&:hover {
|
||||
background-color: darken($color: #f5f5f5, $amount: 10);
|
||||
}
|
||||
}
|
||||
.panel {
|
||||
font-family: $main-font;
|
||||
margin-bottom: 0.625em;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-family: $main-font;
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.625em 0.9375em;
|
||||
.fa { padding-right: 0.5em; }
|
||||
}
|
||||
}
|
||||
}
|
||||
//index setting
|
||||
.i-archive-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
.txt { background-color: #6dbb73; }
|
||||
.xlsx { background-color: #bb6d7f; }
|
||||
.pdf { background-color: #3b8347; }
|
||||
.docx { background-color: #846dbb; }
|
||||
.pptx { background-color: #6d77bb; }
|
||||
.jpg { background-color: #bb6d6d; }
|
||||
.zip { background-color: #dcb957; }
|
||||
|
||||
// Archive index 1
|
||||
.index-archive-1 {
|
||||
font-family: $main-font;
|
||||
|
||||
.i-archive__archive-title {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.625em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.i-archive__status-wrap {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.625em;
|
||||
}
|
||||
|
||||
.i-archive__item {
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
.i-archive__category-list {}
|
||||
|
||||
.i-archive__category-title {
|
||||
padding-bottom: 0.3125em;
|
||||
}
|
||||
|
||||
.i-archive__category-item {
|
||||
display: inline;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.i-archive__item-wrap {}
|
||||
|
||||
.i-archive__file-list {
|
||||
display: block;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.i-archive__file-wrap {
|
||||
margin: 0 0.625rem 1em 0;
|
||||
padding: 0.5em 0.75em;
|
||||
border-radius: 0.125em;
|
||||
border: 0.0625em solid lighten($theme-gray-light, 10%);
|
||||
}
|
||||
|
||||
.i-archive__file-name {
|
||||
font-size: 0.750em;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.index-archive-4 {
|
||||
dt.i-archive-item-list { display: none; }
|
||||
dl.i-archive-files-list { padding: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.dl-horizontal dd { margin-left: 0 !important; }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.index-archive-2,
|
||||
.index-archive-4 {
|
||||
.panel-default>.panel-heading {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
&:hover {
|
||||
background-color: darken($color: #f5f5f5, $amount: 10);
|
||||
}
|
||||
}
|
||||
.panel {
|
||||
font-family: $main-font;
|
||||
margin-bottom: 0.625em;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-family: $main-font;
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.625em 0.9375em;
|
||||
.fa { padding-right: 0.5em; }
|
||||
}
|
||||
}
|
||||
|
||||
.i-archive-tags {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.i-archive-files-item {
|
||||
font-size: 0.813em;
|
||||
font-family: $main-font;
|
||||
}
|
||||
|
||||
.i-archive-files-list {
|
||||
dd {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.i-archive-tag-name {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 0.9375rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-sm) {
|
||||
.dl-horizontal {
|
||||
dt {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.dl-horizontal dt { overflow: unset; white-space: unset; }
|
||||
.dl-horizontal dd { margin-left: 1em; }
|
||||
}
|
||||
}
|
||||
|
||||
.has-archive-tab {
|
||||
.i-tag__item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content--active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.i-archive__tag-name {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.index-archive-3 {
|
||||
.i-archive__tag-name {
|
||||
background-color: $theme-color-main;
|
||||
color: $theme-white;
|
||||
font-family: $main-font;
|
||||
display: inline-block;
|
||||
padding: 0.625em 0.75em;
|
||||
margin-right: 0.3125em;
|
||||
border-radius: 0.25em;
|
||||
font-size: 0.938em;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($theme-color-main, 7%);
|
||||
}
|
||||
|
||||
&.tab--active {
|
||||
background-color: darken($theme-color-main, 7%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
background-color: lighten($theme-gray, 65%);
|
||||
padding: 20.3125em;
|
||||
}
|
||||
|
||||
.i-archive__category-item {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.i-archive__category-title {
|
||||
font-family: $main-font;
|
||||
}
|
||||
|
||||
.i-archive__archive-title {
|
||||
font-size: 0.938em;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-bottom: 0.625em;
|
||||
}
|
||||
|
||||
.i-archive__file-name {
|
||||
font-size: 0.813em;
|
||||
}
|
||||
|
||||
.i-archive__file-wrap {
|
||||
margin-bottom: 0.625em;
|
||||
}
|
||||
|
||||
.i-archive__item-wrap {
|
||||
font-family: $main-font;
|
||||
}
|
||||
}
|
||||
|
||||
.index-archive-5 {
|
||||
.i-archive__category-title {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.625em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.i-items {
|
||||
background: #fff;
|
||||
border: 1px solid #333;
|
||||
border-bottom: transparent;
|
||||
}
|
||||
.thead.row {
|
||||
background: #91bfea;
|
||||
padding: 0.5em 0;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #333;
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.archive-items {
|
||||
border-bottom: 1px solid #333;
|
||||
line-height: 2;
|
||||
div:nth-child(1), div:nth-child(2) {
|
||||
border-right: 1px solid #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-archive-6 {
|
||||
.i-archive__category-title {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.625em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.i-items {
|
||||
background: #fff;
|
||||
border-bottom: transparent;
|
||||
}
|
||||
.head { padding: 0; }
|
||||
tbody { font-size: 0.8rem; }
|
||||
.i-archive__file { margin: 0; }
|
||||
.i-archive__file-list { padding: 0; }
|
||||
.i-archive__file-name { color: #616161; }
|
||||
.thead.row {
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.archive-items {
|
||||
border-bottom: 1px solid transparent;
|
||||
font-size: 0.8rem;
|
||||
padding: 10px;
|
||||
&:nth-child(even) {
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
div:nth-child(1), div:nth-child(2) {
|
||||
// border-right: 1px solid #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.w-calendar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.widget-title {
|
||||
text-align: center;
|
||||
border: 0.0625em solid $theme-gray-subtle;
|
||||
margin: 0;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
th {
|
||||
background: $theme-color-main;
|
||||
color: $theme-white;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0.0625em solid $theme-gray-subtle;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.w-calendar-table {
|
||||
margin-bottom: 0;
|
||||
|
||||
.w-calendar-today {
|
||||
background: $theme-color-main;
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
.w-calendar-event {
|
||||
background: $theme-color-third;
|
||||
color: $theme-white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.w-calendar-nav {
|
||||
a {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0.625em;
|
||||
color: $theme-color-main;
|
||||
}
|
||||
|
||||
.w-calendar-nav-next {
|
||||
left: auto;
|
||||
right: 0.625em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.header-banner img[src*='epaper'] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateX(50%);
|
||||
right: 50%;
|
||||
top: 3em;
|
||||
}
|
||||
.row.epaper-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
.criteria_list {
|
||||
thead {
|
||||
border-left: 6px solid rgb(105, 150, 171);
|
||||
background: rgb(74, 42, 36);
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
font-family: 微軟正黑體;
|
||||
}
|
||||
tbody {
|
||||
background-color: transparent;
|
||||
tr {
|
||||
border-bottom: 1px dotted #4a2a24;
|
||||
padding: 5px 0;
|
||||
}
|
||||
td {
|
||||
border-top: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// slider-fullscreen
|
||||
.latest-fullslider {
|
||||
margin-bottom: 2em;
|
||||
.right-fullslider {
|
||||
white-space: normal;
|
||||
padding: 0 2em 2em;
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.left-fullslider { padding-right: 0; text-align: center;}
|
||||
.epaper-description { white-space: normal; }
|
||||
.epaper-container {
|
||||
min-height: 400px;
|
||||
}
|
||||
.banner-Container { background: #fff;}
|
||||
}
|
||||
|
||||
@media(max-width: 768px){
|
||||
.latest-fullslider{
|
||||
.epaper-container{
|
||||
background: #fff;
|
||||
}
|
||||
.right-fullslider{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
a { color: $theme-white; }
|
||||
}
|
||||
.left-fullslider{
|
||||
img{
|
||||
width: 100%;
|
||||
max-height: 417px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//slider
|
||||
.latest_slider {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h3 { margin-bottom: 0; }
|
||||
.banner-Container { background: #fff; min-height: 300px; padding: 0 1rem 2rem; }
|
||||
.epaper-container {
|
||||
white-space: normal;
|
||||
flex-direction: column;
|
||||
h4 { white-space: normal; }
|
||||
img { width: 20em; }
|
||||
.epaper-description { white-space: normal; padding-top: 1em;}
|
||||
}
|
||||
.e-paper.btn { font-size: 0.65rem; }
|
||||
}
|
||||
|
||||
// epaper-show page
|
||||
|
||||
.epaper-show{
|
||||
@media(min-width: 768px){
|
||||
h3{
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
span{
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 768px){
|
||||
.epaper-content{
|
||||
padding: 15px;
|
||||
}
|
||||
span{
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// epaper-index1
|
||||
|
||||
.epaper-index1-container{
|
||||
margin-top: 15px;
|
||||
|
||||
.epaper-leftimg,.epaper-rightContent{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.epaper-leftimg{
|
||||
img{
|
||||
width: 100%;
|
||||
//max-height: 225px;
|
||||
|
||||
}
|
||||
}
|
||||
.epaper-rightContent{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media(min-width: 768px){
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
background:#fff;
|
||||
.epaper-rightContent{
|
||||
position: relative;//absolute;
|
||||
top: 10px;
|
||||
padding-bottom: 10px;
|
||||
.epaper-description{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// epaper-index2
|
||||
|
||||
.epaper-index2-container{
|
||||
border-style: solid;
|
||||
border-color: #ccc;
|
||||
border-width: 0 1px 1px;
|
||||
h1,h2,h3,h4{
|
||||
border-bottom: 1px solid #ccc;//#e1e1e1;
|
||||
margin: 0;
|
||||
padding: 10px 0 10px 10px;
|
||||
span{
|
||||
float:right;
|
||||
margin-right:10px;
|
||||
color: #0e5c92;
|
||||
border: 1px solid #d1d1d1;
|
||||
background: #f0f0f0;
|
||||
padding: 4px 6px;
|
||||
font-size: 14px;
|
||||
margin-top:-3px;
|
||||
}
|
||||
}
|
||||
margin-top: 15px;
|
||||
|
||||
.epaper-leftimg,.epaper-rightContent{
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
.epaper-leftimg{
|
||||
width: 30%;
|
||||
padding: 10px 0 10px 10px;
|
||||
img{
|
||||
width:100%;
|
||||
//max-height: 225px;
|
||||
}
|
||||
}
|
||||
.epaper-rightContent{
|
||||
padding: 10px 0 10px 10px;
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
.epaper-leftimg{
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
img{
|
||||
width:100%;
|
||||
//max-height: 225px;
|
||||
}
|
||||
}
|
||||
.epaper-rightContent{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
background:#fff;
|
||||
@media(min-width: 768px){
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
.epaper-rightContent{
|
||||
position: relative;//absolute;
|
||||
top: 10px;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 10px;
|
||||
.epaper-description{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.epaper-description a:visited{
|
||||
color: #777575;
|
||||
}
|
||||
.epaper-description a:hover{
|
||||
text-decoration-color: #333;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
// Faqs MODULES
|
||||
.widget-faqs {
|
||||
&.widget1 {
|
||||
.widget-content {
|
||||
padding-bottom: 0.625em;
|
||||
|
||||
& + .widget-content {
|
||||
border-top: 0.0625em dotted $theme-gray-light;
|
||||
}
|
||||
|
||||
.widget-content-title {
|
||||
display: inline-block;
|
||||
padding: 0.3125em 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 在 layout-content 下的樣式
|
||||
.layout-content & {
|
||||
.widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
}
|
||||
|
||||
// 在 layout-footer 下的樣式
|
||||
.layout-footer & {
|
||||
.widget-content {
|
||||
line-height: 2em;
|
||||
border-top-color: $theme-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Faqs INDEX
|
||||
.index-faqs {
|
||||
.index-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
&.index1 {
|
||||
.index-content {
|
||||
list-style-type: decimal-leading-zero;
|
||||
list-style-position: inside;
|
||||
|
||||
& + .index-content {
|
||||
border-top: 0.0625em dotted $theme-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.index2 {
|
||||
.index-content {
|
||||
margin: 1em 0;
|
||||
border: 1px solid #ccc;
|
||||
& h4 {
|
||||
@extend .transition;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
padding: 0.625em 0.9375em;
|
||||
font-size: 1em;
|
||||
font-family: $main-font;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background: darken($color: #f5f5f5, $amount: 10);
|
||||
.post { display: block; }
|
||||
}
|
||||
}
|
||||
.post {
|
||||
padding: 1em;
|
||||
display: none;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
// Gallery MODULES
|
||||
.widget-gallery {
|
||||
.widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.widget1 {
|
||||
.widget-content {
|
||||
overflow: hidden;
|
||||
|
||||
.album-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.widget-pic {
|
||||
display: inline-block;
|
||||
padding: 0.0625em;
|
||||
text-align: center;
|
||||
|
||||
@include size(33.3333%, auto);
|
||||
|
||||
img {
|
||||
@include size(100%, 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.widget2 {
|
||||
.widget-content {
|
||||
margin-left: -0.3125em;
|
||||
margin-right: -0.3125em;
|
||||
|
||||
.widget-pic {
|
||||
margin-bottom: 0.625em;
|
||||
padding-left: 0.3125em;
|
||||
padding-right: 0.3125em;
|
||||
|
||||
img {
|
||||
@include size(100%, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-gallery {
|
||||
.index-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
&.index1 {
|
||||
.index-content {
|
||||
&:nth-child(4n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.index-part {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.index-content-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.index-content-title {
|
||||
font-family: $main-font;
|
||||
font-size: 0.938em;
|
||||
}
|
||||
|
||||
.index-img-description {
|
||||
font-size: 0.813em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.index2 {
|
||||
.index-content {
|
||||
padding: 1.5625em 0.9375em;
|
||||
background: lighten($theme-gray, 60%);
|
||||
margin-bottom: 1.25em;
|
||||
border-radius: 0.125em;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: $screen-sm) {
|
||||
margin-right: 1.25em;
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.index-content-inner {
|
||||
margin-bottom: 1.5625em;
|
||||
}
|
||||
|
||||
.index-img {
|
||||
border-radius: 0.125em;
|
||||
}
|
||||
|
||||
.index-content-title {
|
||||
font-family: $main-font;
|
||||
font-size: 0.938em;
|
||||
}
|
||||
|
||||
.index-img-description {
|
||||
font-size: 0.813em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-gallery {
|
||||
.show-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.show-content {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
&:nth-child(6n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.125em;
|
||||
}
|
||||
|
||||
.show-content-inner {
|
||||
position: relative;
|
||||
padding: 0.3125em;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.show-description {
|
||||
font-family: $main-font;
|
||||
font-size: 0.813em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
//
|
||||
// Index
|
||||
//
|
||||
// Member Index
|
||||
// ## Gerneral styles for Index
|
||||
|
||||
// Index 1
|
||||
.index-member-1 {
|
||||
.i-member__status-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
.member-data-value-name, .member-data-value-2 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.i-member-tr-head {
|
||||
&:nth-child(1n+2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
th {
|
||||
background: $theme-color-main;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@media(max-width:580px) {
|
||||
thead { display: none; }
|
||||
td {
|
||||
display: flex;
|
||||
&:before {
|
||||
content: attr(data-title);
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Index 2
|
||||
.index-member-2 {
|
||||
.i-member-section {
|
||||
max-width: 31.25em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.i-member-status-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: none;
|
||||
border-radius: 0.25rem;
|
||||
padding: 1.5em 1rem;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.i-member-pic-wrap {
|
||||
height: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.i-member-pic {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.i-member-profile-list {
|
||||
@include list-reset;
|
||||
}
|
||||
|
||||
.i-member-profile-item {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: $font-13;
|
||||
}
|
||||
|
||||
// RWD
|
||||
@media screen and (min-width: $screen-sm) {
|
||||
.i-member-section {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: $theme-gray-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Index 3
|
||||
.index-member-3 {
|
||||
.i-member-section {
|
||||
margin: auto;
|
||||
}
|
||||
.i-member-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0;
|
||||
}
|
||||
.i-member-item {
|
||||
background: #f1f1f1 none repeat scroll 0 0;
|
||||
border-radius: 0.3125em;
|
||||
float: none;
|
||||
margin: 0 1% 1.875em;
|
||||
padding: 1.25em;
|
||||
width: 48%;
|
||||
|
||||
|
||||
}
|
||||
.i-member-item-inner {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.i-member-status-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.i-member-pic-wrap {
|
||||
height: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.i-member-pic {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.i-member-profile-list {
|
||||
@include list-reset;
|
||||
}
|
||||
|
||||
.i-member-profile-item {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: $font-13;
|
||||
}
|
||||
|
||||
.i-member-item:nth-child(odd) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.i-member-item-inner {}
|
||||
|
||||
.i-member-pic-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// RWD
|
||||
@media screen and (min-width: $screen-sm) {
|
||||
.i-member-section {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-md) {
|
||||
.i-member-pic-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $screen-xs) {
|
||||
.i-member-item {
|
||||
width: 100%;
|
||||
}
|
||||
.i-member-item-inner { display: flex; }
|
||||
.i-member-pic-wrap { width: 40%; }
|
||||
.i-member-profile-data-wrap { width: 60%; }
|
||||
}
|
||||
}
|
||||
|
||||
// Index 4
|
||||
.index-member-4 {
|
||||
.i-member-section {
|
||||
max-width: 31.25em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.i-member-status-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: none;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75em 1rem;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.i-member-profile-list {
|
||||
@include list-reset;
|
||||
}
|
||||
|
||||
.i-member-profile-item {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: $font-13;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.i-member-item:nth-child(4n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// RWD
|
||||
@media screen and (min-width: $screen-sm) {
|
||||
.i-member-section {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: $theme-gray-lighter;
|
||||
}
|
||||
.i-member-item:nth-child(even) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//index 5
|
||||
.index-member-5 {
|
||||
.i-member-section {
|
||||
margin: auto;
|
||||
}
|
||||
.i-member-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0;
|
||||
}
|
||||
.i-member-item {
|
||||
float: none;
|
||||
padding: 15px;
|
||||
|
||||
@media (max-width:1280px) {
|
||||
width: calc( 100% / 3 );
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
width: calc( 100% / 2 );
|
||||
}
|
||||
@media (max-width:580px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.i-member-item-inner {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.i-member-status-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.i-member-pic-wrap {
|
||||
height: auto;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media(max-width:580px) {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||||
height: 14em;
|
||||
width: 14em;
|
||||
margin: 1.5em auto 1em auto;
|
||||
}
|
||||
}
|
||||
|
||||
.i-member-pic {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.i-member-profile-list {
|
||||
@include list-reset;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.i-member-profile-item {
|
||||
font-size: 1em;
|
||||
line-height: 1.3;
|
||||
padding-top: 0.5em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.i-member-title { display: none; }
|
||||
.i-member-item:nth-child(4n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.i-member-pic-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
// Show page
|
||||
.show-member {
|
||||
font-family: $sub-font;
|
||||
|
||||
th, td {
|
||||
font-size: 0.938em;
|
||||
}
|
||||
|
||||
.member-plugins {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
font-size: 0.938em;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
|
||||
background-color: #91bfea;
|
||||
}
|
||||
.nav-pills>li>a {
|
||||
border-radius: unset;
|
||||
background-color: #eee;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.nav>li>a:focus, .nav>li>a:hover {
|
||||
background-color: darken($color: #eee, $amount: 10%);
|
||||
}
|
||||
.tab-content {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.custom-scroll-arrow {
|
||||
border: unset;
|
||||
border-top: none;
|
||||
color: #428bca;
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 0;
|
||||
padding-left: 6px;
|
||||
padding-right: 5px;
|
||||
padding-top: 6px;
|
||||
width: 20px;
|
||||
&:hover {
|
||||
background-color: unset;
|
||||
color: darken($color: #428bca, $amount: 10);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.member-pic { width: 80%; margin: 0 auto 10px; }
|
||||
.member-data { width: 100%; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.navbar-collapse.in {
|
||||
overflow-y: unset;
|
||||
}
|
||||
|
||||
.modules-menu {
|
||||
font-family: $sub-font;
|
||||
max-height: none;
|
||||
z-index: 1020;
|
||||
|
||||
li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu-drop.opened {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.modules-menu-level-0 {
|
||||
margin: 0 0 0.5em 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
background-color: #585858;
|
||||
& li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.has-dropdown.level-1.active {
|
||||
.modules-menu-level-1 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.has-dropdown.level-2.active {
|
||||
.modules-menu-level-2 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// .dropdown-toggle-icon {
|
||||
// position: absolute;
|
||||
// top: 0.5em;
|
||||
// right: 0.3em;
|
||||
// width: 2.5em;
|
||||
// height: 2.5em;
|
||||
// cursor: pointer;
|
||||
// line-height: 2.5em;
|
||||
// font-size: 1em;
|
||||
// text-align: center;
|
||||
// border-radius: 0.13em;
|
||||
// }
|
||||
|
||||
.menu-drop {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 0.3em;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
cursor: pointer;
|
||||
line-height: 2.5em;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
border-radius: 0.13em;
|
||||
}
|
||||
|
||||
// .dropdown-toggle-icon.level-1 {
|
||||
// background-color: lighten($theme-gray, 10%);
|
||||
// }
|
||||
|
||||
// .dropdown-toggle-icon.level-2 {
|
||||
// background-color: lighten($theme-gray, 10%);
|
||||
// }
|
||||
|
||||
& > li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
border-bottom: 0.0625em solid lighten($theme-gray, 5%);
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
padding: 1.125em 0;
|
||||
font-family: $main-font;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #5fcdb0;
|
||||
//border-radius: 0.5em;
|
||||
|
||||
& > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
background-color: #5fcdb0;
|
||||
//border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
||||
.modules-menu-level-1 {
|
||||
left: auto;
|
||||
|
||||
&:before {
|
||||
right: 0.625em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
& > li {
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
|
||||
& > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modules-menu-level-2 {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
padding: 1rem 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.modules-menu-level-1 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modules-menu-level-1 {
|
||||
display: none;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $theme-gray;
|
||||
list-style: none;
|
||||
z-index: 1;
|
||||
|
||||
& > li {
|
||||
position: relative;
|
||||
& + li {
|
||||
border-top: 0.0625em solid lighten($theme-gray, 5%);
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
padding: 1em 1.5em;
|
||||
font-family: $main-font;
|
||||
font-size: 0.938em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-color-second;
|
||||
& > a {
|
||||
color: $theme-color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
position: absolute;
|
||||
|
||||
& > li {
|
||||
padding-right: 2em;
|
||||
|
||||
& > a {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.modules-menu-level-2 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modules-menu-level-2 {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $theme-gray;
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
& + li {
|
||||
border-top: 0.0625em solid lighten($theme-gray, 5%);
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
padding: 0.9em 3em;
|
||||
font-family: $main-font;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-color-second;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
|
||||
& > li > a {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-mobile-dropdown {
|
||||
.modules-menu {
|
||||
.dropdown-toggle-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.modules-menu .modules-menu-level-0 {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
//mobile
|
||||
.mobile-menu {
|
||||
z-index: 1051;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modules-menu {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: #a51832;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
padding-top: 40px;
|
||||
}
|
||||
.modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 .menu-drop,.modules-menu .modules-menu-level-0 > li { color: #fff; }
|
||||
|
||||
.navbar-toggle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
top: 40px;
|
||||
z-index: 1;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
width: 20%;
|
||||
border: 0;
|
||||
}
|
||||
.cover {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//覆蓋bootstrap nav設定
|
||||
.mobile-menu .modules-menu.collapsing {
|
||||
overflow:unset !important;
|
||||
transform: translateX(100%);
|
||||
-webkit-transition-timing-function:ease;
|
||||
-o-transition-timing-function:ease;
|
||||
transition-timing-function:ease;
|
||||
-webkit-transition-duration:.35s;
|
||||
-o-transition-duration:.35s;
|
||||
transition-duration:.35s;
|
||||
-webkit-transition-property:transform;
|
||||
-o-transition-property:transform;
|
||||
transition-property:transform;
|
||||
}
|
||||
.mobile-menu .modules-menu.collapse.in {
|
||||
transform: translateX(100%);
|
||||
-webkit-transition-timing-function:ease;
|
||||
-o-transition-timing-function:ease;
|
||||
transition-timing-function:ease;
|
||||
-webkit-transition-duration:.35s;
|
||||
-o-transition-duration:.35s;
|
||||
transition-duration:.35s;
|
||||
-webkit-transition-property:transform;
|
||||
-o-transition-property:transform;
|
||||
transition-property:transform;
|
||||
}
|
||||
|
||||
.mobile-menu .collapse.navbar-collapse.modules-menu {
|
||||
overflow-y: scroll;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.plugin-show-table th {
|
||||
text-align: right;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
.search-widget h3, .projects-index h3 {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.projects-index {
|
||||
width: 100% !important;
|
||||
thead > tr th {
|
||||
word-break: keep-all;
|
||||
@media(max-width: 580px) {
|
||||
word-break: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import "../initial";
|
||||
.marquee {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 0.3125em;
|
||||
font-size: 0.938em;
|
||||
list-style: outside none none;
|
||||
margin: 0 0 1.875em;
|
||||
min-height: 1.875em;
|
||||
overflow: hidden;
|
||||
padding: 0.9375em;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.universal-table-index h3 {
|
||||
@extend .unity-title;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
// Link MODULES
|
||||
.widget-link {
|
||||
// 在 layout-content 下的樣式
|
||||
.widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
&.widget1 {
|
||||
.widget-content {
|
||||
line-height: 2.5em;
|
||||
|
||||
& + .widget-content {
|
||||
border-top: 0.0625em dotted $theme-gray-light;
|
||||
}
|
||||
|
||||
.widget-content-title {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// 在 layout-footer 下的樣式
|
||||
.layout-footer & {
|
||||
.widget-content {
|
||||
line-height: 2em;
|
||||
border-top-color: $theme-green-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link INDEX
|
||||
.index-link {
|
||||
.index-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
&.index1 {
|
||||
.index-content {
|
||||
|
||||
& + .index-content {
|
||||
border-top: 0.0625em dotted $theme-gray-light;
|
||||
}
|
||||
|
||||
.index-context {
|
||||
display: inline-block;
|
||||
font-size: 0.813em;
|
||||
margin: 0 0 0.625em 2em;
|
||||
color: darken($theme-gray-light, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.index-content-title {
|
||||
font-family: $main-font;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
&.index2 {
|
||||
.list-unstyled {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.index-content {
|
||||
padding: 1em;
|
||||
}
|
||||
.status-top {
|
||||
line-height: 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:0.0625em;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:5em;width:5em;left:50%;top:50%;margin-left:-2.5em;margin-top:-2.5em;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:0.625em}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:0.875em;margin:0.3125em;padding:0.25em 0.4375em;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:0.1875em}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:0.625em}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:0.625em;height:0.625em;margin:0.3125em 0.4375em;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:1.875em}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// Customize this scss file as you need to fit the design
|
||||
@charset "utf-8";
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
line-height: 1.3;
|
||||
font-size: 0.750em;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#orbit-bar,
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
//@import "template";
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
@import url("//fonts.googleapis.com/css?family=Droid+Sans:400,700");
|
||||
|
||||
// Base
|
||||
@import "base/orbitbar-override";
|
||||
@import "base/sitemap-override";
|
||||
@import "base/global";
|
||||
@import "base/unity";
|
||||
@import "base/utilities";
|
||||
@import "base/pagination";
|
||||
@import "base/accesskey";
|
||||
@import "base/go_back_top";
|
||||
@import "base/ckeditor-reset";
|
||||
|
||||
// Layout
|
||||
@import "layout/*";
|
||||
|
||||
// Modules
|
||||
@import "modules/*";
|
||||
|
||||
// Widget
|
||||
@import "widget/*";
|
||||
|
||||
//RWD
|
||||
@import "RWD";
|
||||
|
||||
|
||||
.dropdown-toggle:focus {
|
||||
// outline: 2px solid #43B5FC;
|
||||
outline: transparent;
|
||||
}
|
||||
|
||||
// container setting
|
||||
.response-container {
|
||||
position: relative;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
width: 60.625em;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg) {
|
||||
width: 75em;
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.extra { clear: both; }
|
||||
|
||||
//公告頁籤
|
||||
ul.tab_nav {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: $main-font;
|
||||
|
||||
li {
|
||||
padding: 0.5em 1em;
|
||||
background: $theme-color-green;
|
||||
margin: 0.2em;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
|
||||
&.active {
|
||||
background: #19524b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noscroll { overflow: hidden; position: fixed; }
|
||||
|
||||
//覆蓋bootstrap 設定
|
||||
.row { margin: 0; }
|
||||
.container>.navbar-collapse {
|
||||
@media (max-width: 767px) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//共用樣式
|
||||
.title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.superBtn {
|
||||
a.btn-primary {
|
||||
color: $theme-white;
|
||||
border-color: #990000;
|
||||
background-color: #990000;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.3em 0.5em;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#990000, 10%);
|
||||
border-color: darken(#990000, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
.breadcrumb {
|
||||
background-color: #fff;
|
||||
a:link, a:visited { color: $theme-color-main; }
|
||||
}
|
||||
.breadcrumb>li+li:before {
|
||||
color: $theme-color-main;
|
||||
}
|
||||
.widget-breadcrumb {
|
||||
&.widget1 {
|
||||
li {
|
||||
a {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
color: $theme-color-main;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.sitemenu-horizontal {
|
||||
padding: 0;
|
||||
|
||||
@include clearfix;
|
||||
|
||||
|
||||
.sitemenu-item.level-1 {
|
||||
font-size: 0.8125rem;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 1%;
|
||||
margin-bottom: 0.75em;
|
||||
padding: 0.5em .8em;
|
||||
padding-bottom: 0.5em;
|
||||
color: $theme-white;
|
||||
border-radius: .2em;
|
||||
background: $theme-color-green;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background: darken($theme-color-green, 10%);
|
||||
.sitemenu-list.level-2 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sitemenu-link.level-1 {
|
||||
margin-right: .25rem;
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
.sitemenu-dropdown-toggle {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125em .3125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// sitemenu dropdown
|
||||
.sitemenu-list.dropdown-menu {
|
||||
min-width: 100%;
|
||||
padding-top: 0.25em;
|
||||
border: none;
|
||||
border-radius: .2em;
|
||||
background: darken($theme-color-green, 10%);
|
||||
}
|
||||
|
||||
.sitemenu-link.level-2 {
|
||||
color: $theme-white;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.25em 0.625rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sitemenu-vertical {
|
||||
.sitemenu-list {
|
||||
background-color: $theme-color-green;
|
||||
}
|
||||
|
||||
.sitemenu-item.level-1 {
|
||||
padding: 0.625em 1.25em;
|
||||
position: relative;
|
||||
color: $theme-white;
|
||||
&:hover {
|
||||
.sitemenu-list.dropdown-menu { display: block; }
|
||||
background: darken($theme-color-green, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.sitemenu-link {
|
||||
font-size: 0.8125rem;
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
.sitemenu-dropdown-toggle {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125em .3125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sitemenu-list.dropdown-menu {
|
||||
border: none;
|
||||
border-radius: .2em;
|
||||
background: darken($theme-color-green, 10%);
|
||||
}
|
||||
|
||||
.sitemenu-link.level-2 {
|
||||
color: $theme-white;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.25em 0.625rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<footer class="layout-footer no-print">
|
||||
<div class="container layout-footer-inner">
|
||||
<div class="layout-footer-content">{{footer-data}}</div>
|
||||
<div class="footer-counter"><a href="https://ruling.digital/"><img src="/assets/ruling_logo.png" alt="ruling-logo-icon"></a>{{site-counter}}</div>
|
||||
<div class="footer-updated-date">{{last-updated}}</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
||||
<div class="mobile-menu">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#layout-navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar icon-bar-top"></span>
|
||||
<span class="icon-bar icon-bar-middle"></span>
|
||||
<span class="icon-bar icon-bar-bottom"></span>
|
||||
</button>
|
||||
<div class="cover"></div>
|
||||
</div>
|
||||
<header class="navbar layout-header no-print" role="navigation">
|
||||
<div class="container">
|
||||
<div class="header-nav" >
|
||||
<a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
|
||||
{{header-data}}
|
||||
</div>
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#layout-navigation">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar icon-bar-top"></span>
|
||||
<span class="icon-bar icon-bar-middle"></span>
|
||||
<span class="icon-bar icon-bar-bottom"></span>
|
||||
</button>
|
||||
<a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
|
||||
<script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
|
||||
<a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang="<%= I18n.locale.to_s %>" class="orbit">
|
||||
<head>
|
||||
<%= render_partial("head") %>
|
||||
</head>
|
||||
<body class="page-home">
|
||||
<%= render_orbit_bar %>
|
||||
<div class="background" data-pp="100"></div>
|
||||
<%= render_header %>
|
||||
<section class="layout-slide no-print single-child-datapp" data-pp="300"></section>
|
||||
<div class="layout-content">
|
||||
<a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
|
||||
<div class="layout-content2">
|
||||
<div class="collapse navbar-collapse modules-menu" id="layout-navigation">
|
||||
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
|
||||
<%= render_menu %>
|
||||
</div>
|
||||
<div class="layout-content-inner container">
|
||||
<section class="body-banner" data-pp="6"></section>
|
||||
<section class="extra-box col-sm-12" data-pp="5"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= render_footer %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<ul id="main-nav" class="navbar-right navbar-nav modules-menu-level-0 nav-level-0 no-print" data-menu-level="0">
|
||||
<li>
|
||||
<a href="" title="{{link_name}}" data-menu-link="true" class="dropdown-toggle">{{link_name}}</a>
|
||||
<ul class="modules-menu-level-1 nav-level-1" data-menu-level="1">
|
||||
<li>
|
||||
<a href="" title="{{link_name}}" data-menu-link="true">{{link_name}}</a>
|
||||
<ul class="modules-menu-level-2 nav-level-2" data-menu-level="2">
|
||||
<li>
|
||||
<a href="" title="{{link_name}}" data-menu-link="true">{{link_name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!doctype html>
|
||||
<html lang="<%= I18n.locale.to_s %>" class="orbit">
|
||||
<head>
|
||||
<%= render_partial("head") %>
|
||||
</head>
|
||||
<body class="internal-page">
|
||||
<%= render_orbit_bar %>
|
||||
<div class="background" data-pp="100"></div>
|
||||
<%= render_header %>
|
||||
<section class="layout-slide no-print single-child-datapp" data-pp="300"></section>
|
||||
<div class="layout-content">
|
||||
<div class="layout-content2">
|
||||
<div class="collapse navbar-collapse modules-menu" id="layout-navigation">
|
||||
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
|
||||
<%= render_menu %>
|
||||
</div>
|
||||
<div class="layout-content-inner container">
|
||||
<div class="breadcrumb-wrap" data-pp="500"></div>
|
||||
<div class="sitemenu-wrap" data-pp="400"></div>
|
||||
<div class="content">
|
||||
<section class="page-content-box col-sm-3" data-pp="901"></section>
|
||||
<section class="page-content-box col-sm-6" data-pp="902"></section>
|
||||
<section class="page-content-box col-sm-3" data-pp="903"></section>
|
||||
</div>
|
||||
<div class="row">
|
||||
<section class="layout-content-box left-column col-sm-9">
|
||||
<div class="extra" data-pp="600"></div>
|
||||
<main id="main-content" class="main-content" data-content="true">
|
||||
<%= yield %>
|
||||
</main>
|
||||
<%= render_every_page_sharer %>
|
||||
<div class="extra" data-pp="700"></div>
|
||||
</section>
|
||||
<aside class="layout-content-box aside right-column col-sm-3" data-pp="13"></aside>
|
||||
</div>
|
||||
<div class="extra" data-pp="800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= render_footer %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<ul class="pagination pagination-sm" data-pagination="true">
|
||||
<li class="{{pagination_active}}">
|
||||
<a href="{{pagination_link}}">{{page_number}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<table class="table table-hover table-striped active-index">
|
||||
<caption>
|
||||
<h3>{{page-title}}</h3>
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-md-2">{{th_category}}</th>
|
||||
<th class="col-md-2">{{th_act_time_range}}</th>
|
||||
<th class="col-md-5">{{th_title}}</th>
|
||||
<th class="col-md-2">{{th_sign_up_time_range}}</th>
|
||||
<th class="col-md-2">{{th_sign_up}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="acts">
|
||||
<tr>
|
||||
<td>{{category}}</td>
|
||||
<td>{{act_start_date}} ~ <br /> {{act_end_date}}</td>
|
||||
<td>{{title}}</td>
|
||||
<td>{{sign_start_date}} ~ <br /> {{sign_end_date}}</td>
|
||||
<td>{{sign_up}}</i></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"frontend": [
|
||||
{
|
||||
"filename" : "active_index",
|
||||
"name" : {
|
||||
"zh_tw" : "1. 列表",
|
||||
"en" : "1. List"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,79 @@
|
|||
<div class="w-ad-banner w-ba-banner ad-banner-widget-1 ba-banner-widget-1">
|
||||
<div class="w-ad-banner__wrap w-ba-banner__wrap cycle-slideshow"
|
||||
data-list="images"
|
||||
data-level="0"
|
||||
data-cycle-slides=".w-ba-banner__slide"
|
||||
data-cycle-log="false"
|
||||
data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
|
||||
data-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
data-cycle-timeout="{{timeout}}"
|
||||
data-cycle-fx="{{ad_fx}}"
|
||||
data-cycle-pager=".banner_caption_{{subpart-id}}"
|
||||
data-pager-template=""
|
||||
data-pager-active-class="active-slide"
|
||||
data-cycle-swipe=true
|
||||
data-cycle-swipe-fx="scrollHorz"
|
||||
>
|
||||
<div class="w-ad-banner__slide w-ba-banner__slide {{class}}"
|
||||
data-link="{{link}}"
|
||||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-overlay-template="<h3>{{title}}</h3><p>{{desc}}</p>"
|
||||
data-target="{{target}}"
|
||||
>
|
||||
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
|
||||
<img class="w-ad-banner__image w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ad-banner__caption ad-overlay w-ba-banner__caption w-ad-banner__caption w-ad-banner__overlay_{{subpart-id}}"></div>
|
||||
<div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
|
||||
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
|
||||
</div>
|
||||
<ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
|
||||
<ul class="button-mid">
|
||||
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
|
||||
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
||||
$(this).addClass('active')
|
||||
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
|
||||
});
|
||||
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
||||
$(this).addClass('active')
|
||||
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
|
||||
});
|
||||
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||||
|
||||
})
|
||||
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||||
})
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.w-ba-banner .controlplay .resume-slide.active i{
|
||||
color: #32D9C3;
|
||||
}
|
||||
.w-ba-banner .controlplay .pause-slide.active i{
|
||||
color: #ff4500;
|
||||
}
|
||||
.w-ba-banner .controlplay{
|
||||
width: auto;
|
||||
}
|
||||
.w-ba-banner .button-mid{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
top: 50%;
|
||||
}
|
||||
.next-button,.prev-button{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<div class="w-ba-banner ba-banner-widget-2">
|
||||
<div class="w-ba-banner__wrap cycle-slideshow"
|
||||
data-list="images"
|
||||
data-level="0"
|
||||
data-cycle-slides=".w-ba-banner__slide"
|
||||
data-cycle-log="false"
|
||||
data-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
data-cycle-timeout="{{timeout}}"
|
||||
data-cycle-fx="{{ad_fx}}"
|
||||
data-cycle-pager=".banner_caption_{{subpart-id}}"
|
||||
data-pager-template="<li><button></button></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
data-cycle-youtube=true
|
||||
data-cycle-youtube-autostart=false
|
||||
data-cycle-swipe=true
|
||||
data-cycle-swipe-fx="scrollHorz"
|
||||
>
|
||||
<div class="w-ba-banner__slide {{class}}"
|
||||
data-link="{{link}}"
|
||||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-overlay-template="<h3>{{title}}</h3>{{desc}}"
|
||||
data-target="{{target}}"
|
||||
>
|
||||
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
|
||||
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul class="w-ba-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
|
||||
<ul class="controlplay"><a class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
|
||||
<ul class="button-mid">
|
||||
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
|
||||
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
var flag = 1;
|
||||
$('.pause-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
||||
});
|
||||
$('.resume-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
||||
});
|
||||
$('.next-button').off('click').on('click',function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||||
|
||||
})
|
||||
$('.prev-button').off('click').on('click',function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,463 @@
|
|||
<div class="w-ad-banner ad-banner-widget-2 w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
|
||||
<div class="w-ad-banner__wrap w-ba-banner__wrap cycle-slideshow"
|
||||
data-list="images"
|
||||
data-level="0"
|
||||
data-cycle-slides=".w-ba-banner__slide"
|
||||
data-cycle-log="false"
|
||||
data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
|
||||
data-overlay-template="<h2><span>{{title}}</span></h2>{{desc}}"
|
||||
data-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
data-cycle-timeout="{{timeout}}"
|
||||
data-cycle-fx="{{ad_fx}}"
|
||||
data-pager=".banner_caption_{{subpart-id}}"
|
||||
data-pager-template="<li><button title='pager'></button></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
data-cycle-youtube="true"
|
||||
data-cycle-youtube-autostart="false"
|
||||
data-cycle-swipe="true"
|
||||
data-cycle-prev=".banner_prev"
|
||||
data-cycle-next=".banner_next"
|
||||
data-cycle-pause-on-hover="true"
|
||||
style="padding-bottom: 56.25%;"
|
||||
>
|
||||
|
||||
{{html}}
|
||||
</div>
|
||||
<div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
|
||||
<div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
|
||||
<ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
|
||||
<ul class="button-mid">
|
||||
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
|
||||
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
|
||||
</ul>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var ad_trigger_time;
|
||||
if (typeof ad_banners_count === 'undefined'){
|
||||
var ad_banners_count = 0;
|
||||
}
|
||||
var control_play_btn_pause = function(){
|
||||
this.attr('aria-label', '<%= I18n.t("ad_banner.resume") %>');
|
||||
this.attr('title', '<%= I18n.t("ad_banner.resume") %>');
|
||||
this.find('p').text('<%= I18n.t("ad_banner.resume") %>');
|
||||
this.find('i.fa-pause').removeClass('fa-pause').addClass('fa-play');
|
||||
}
|
||||
var control_play_btn_play = function(){
|
||||
this.attr('aria-label', '<%= I18n.t("ad_banner.pause") %>');
|
||||
this.attr('title', '<%= I18n.t("ad_banner.pause") %>');
|
||||
this.find('p').text('<%= I18n.t("ad_banner.pause") %>');
|
||||
this.find('i.fa-play').removeClass('fa-play').addClass('fa-pause');
|
||||
}
|
||||
function ad_audio_button(ele,is_stop){
|
||||
var $self = $(ele);
|
||||
var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
|
||||
var append_class = "";
|
||||
if (is_stop){
|
||||
button_container.find('.jarallax-video-audio').remove();
|
||||
var control_play_btn = $('.jarallax-video-control-play');
|
||||
if(control_play_btn.length){
|
||||
control_play_btn_pause.call(control_play_btn);
|
||||
}
|
||||
}else{
|
||||
var control_play_btn = null;
|
||||
if(window.accessibility_mode){
|
||||
append_class = " accessibility_mode_btn";
|
||||
var control_play_btn = $('.jarallax-video-control-play');
|
||||
if(control_play_btn.length){
|
||||
|
||||
control_play_btn_play.call(control_play_btn);
|
||||
control_play_btn = null;
|
||||
}else{
|
||||
control_play_btn = $('<button title="<%= I18n.t("ad_banner.pause") %>" class="jarallax-video-control-play"><i class="fas fa-pause" aria-label="<%= I18n.t("ad_banner.pause") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.pause") %></p></button>');
|
||||
}
|
||||
}
|
||||
var audio_div;
|
||||
if ($self.hasClass('have-audio')){
|
||||
audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.muted") %></p></button>');
|
||||
}else{
|
||||
audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.unmuted") %></p></button>');
|
||||
}
|
||||
audio_div.find('p').css('display','none'); //fix CSP
|
||||
audio_div.click(function(event) {
|
||||
var currentTime = new Date();
|
||||
if (ad_trigger_time&¤tTime-ad_trigger_time<500){
|
||||
return false;
|
||||
}else{
|
||||
ad_trigger_time = currentTime;
|
||||
}
|
||||
event.stopPropagation();
|
||||
var $video = $self.find('video');
|
||||
if ($self.hasClass('have-audio')){
|
||||
$self.removeClass('have-audio');
|
||||
$(this).attr('title','<%= I18n.t("ad_banner.unmuted") %>').find('i.fas').attr('class','fas fa-volume-mute').attr('aria-label','<%= I18n.t("ad_banner.unmuted") %>');
|
||||
}else{
|
||||
$self.addClass('have-audio');
|
||||
$(this).attr('title','<%= I18n.t("ad_banner.muted") %>').find('i.fas').attr('class','fas fa-volume-up').attr('aria-label','<%= I18n.t("ad_banner.muted") %>');
|
||||
}
|
||||
if ($video.length>0){
|
||||
$self.jPlayer("mute", !$self.data().jPlayer.options.muted);
|
||||
}else{//youtube
|
||||
var player = $self.find('iframe').data("yt_player");
|
||||
if (player.isMuted()){
|
||||
player.unMute();
|
||||
}else{
|
||||
player.mute();
|
||||
}
|
||||
}
|
||||
});
|
||||
button_container.find('.jarallax-video-audio').remove();
|
||||
button_container.append(audio_div);
|
||||
if(control_play_btn != null){
|
||||
audio_div.after(control_play_btn);
|
||||
control_play_btn.click(function(){
|
||||
var cycle_slideshow = button_container.find('.cycle-slideshow');
|
||||
var opts = cycle_slideshow.data('cycle.opts');
|
||||
var active_slide = opts.slides.filter('.'+opts.slideActiveClass);
|
||||
if(active_slide.length){
|
||||
var yt_iframe = active_slide.find('iframe');
|
||||
if(yt_iframe.length == 0){
|
||||
var jplayer = active_slide.find('.jp-jplayer').data('jPlayer');
|
||||
if(jplayer){
|
||||
if(jplayer.htmlElement.video.paused){
|
||||
jplayer.play();
|
||||
}else{
|
||||
jplayer.pause();
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(window.yt_players){
|
||||
var subpart_id = button_container.attr('data-subpart-id');
|
||||
var subpart_yt_players = window.yt_players[subpart_id];
|
||||
if(subpart_yt_players){
|
||||
var yt_player = subpart_yt_players[yt_iframe.attr('id')];
|
||||
var play_state = yt_player.getPlayerState();
|
||||
if(play_state == YT.PlayerState.PLAYING || play_state == YT.PlayerState.BUFFERING){
|
||||
yt_player.pauseVideo();
|
||||
}else if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
|
||||
yt_player.playVideo();
|
||||
play_state = yt_player.getPlayerState();
|
||||
if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
|
||||
yt_player.mute().playVideo();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if(document.getElementById("youtube-iframe-api") == null){
|
||||
var tag = document.createElement('script');
|
||||
tag.setAttribute("id", "youtube-iframe-api");
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
}
|
||||
if(window.init_yt_banner == undefined){
|
||||
function init_yt_banner(banner__slide){
|
||||
var $banner__slide = $(banner__slide);
|
||||
if( $banner__slide.data("yt-binded")== "0" ){
|
||||
$banner__slide.data("yt-binded","1");
|
||||
var obj = $banner__slide.find("iframe");
|
||||
obj.attr("id", $banner__slide.data("youtube-id") + "_" + ad_banners_count);
|
||||
ad_banners_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
$("*[data-yt-binded=0]").each(function(){
|
||||
init_yt_banner(this);
|
||||
})
|
||||
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
||||
$(document).ready(function() {
|
||||
$(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
|
||||
$(this).trigger('click');
|
||||
});
|
||||
});
|
||||
if(window.yt_players == undefined)
|
||||
window.yt_players = {};
|
||||
function find_out_yt_event_list_key(yt_player){
|
||||
var defalt_key = 'o';
|
||||
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
|
||||
var prop_nums_thresh = 6;
|
||||
if(all_keys.indexOf(defalt_key) != -1){
|
||||
if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
|
||||
return defalt_key;
|
||||
}
|
||||
}
|
||||
var event_key;
|
||||
all_keys.forEach(function(k){
|
||||
if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
|
||||
event_key = k;
|
||||
return false;
|
||||
}
|
||||
})
|
||||
return event_key;
|
||||
}
|
||||
function find_out_yt_event_list_count_key(yt_player, event_list_key){
|
||||
var defalt_key = 'v';
|
||||
var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
|
||||
var equal_count = yt_player[event_list_key].length;
|
||||
if(all_keys.indexOf(defalt_key) != -1){
|
||||
if(yt_player[defalt_key] == equal_count){
|
||||
return defalt_key;
|
||||
}
|
||||
}
|
||||
var count_key;
|
||||
all_keys.forEach(function(k){
|
||||
if(yt_player[k] == equal_count){
|
||||
count_key = k;
|
||||
return false;
|
||||
}
|
||||
})
|
||||
return count_key;
|
||||
}
|
||||
function find_out_yt_event_list_array_key(event_dict){
|
||||
var defalt_key = 'i';
|
||||
var all_keys = Object.keys(event_dict);
|
||||
if(all_keys.indexOf(defalt_key) != -1){
|
||||
var tmp = event_dict[defalt_key];
|
||||
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
|
||||
return defalt_key;
|
||||
}
|
||||
}
|
||||
var array_key;
|
||||
all_keys.forEach(function(k){
|
||||
var tmp = event_dict[k];
|
||||
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
|
||||
array_key = k;
|
||||
return false;
|
||||
}
|
||||
})
|
||||
return array_key;
|
||||
}
|
||||
function find_out_yt_event_relation_key(event_dict, is_obj){ // is_obj = true => store event idx array. false => store whether event init(true or false)
|
||||
var defalt_key = 'j';
|
||||
var all_keys = Object.keys(event_dict);
|
||||
if(all_keys.indexOf(defalt_key) != -1){
|
||||
var tmp = event_dict[defalt_key];
|
||||
if((tmp instanceof Object) && tmp['onStateChange']){
|
||||
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
|
||||
return defalt_key;
|
||||
}
|
||||
}
|
||||
}
|
||||
var relation_key;
|
||||
all_keys.forEach(function(k){
|
||||
var tmp = event_dict[k];
|
||||
if((tmp instanceof Object) && tmp['onStateChange']){
|
||||
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
|
||||
relation_key = k;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
})
|
||||
return relation_key;
|
||||
}
|
||||
function onYouTubeIframeAPIReady(){
|
||||
$(".w-ba-banner").on('cycle-post-initialize', function(){
|
||||
init_banner(this);
|
||||
});
|
||||
function init_banner(banner){
|
||||
var $banner = $(banner);
|
||||
$banner.find('.w-ad-banner__slide').each(function(j, banner__slide){
|
||||
init_yt_banner(banner__slide);
|
||||
})
|
||||
var iframes = $banner.find("iframe");
|
||||
if(iframes.length > 0){
|
||||
var id = $banner.attr("data-subpart-id");
|
||||
if(yt_players[id] == undefined)
|
||||
yt_players[id] = {};
|
||||
var remove_ids = [];
|
||||
Object.keys(yt_players[id]).forEach(function(k){
|
||||
var yt_player = yt_players[id][k];
|
||||
if($(yt_player.getIframe()).length == 0){
|
||||
yt_player.destroy();
|
||||
remove_ids.push(k);
|
||||
}
|
||||
})
|
||||
remove_ids.forEach(function(k){
|
||||
delete yt_players[id][k];
|
||||
})
|
||||
iframes.each(function(i,iframe){
|
||||
var $iframe = $(iframe);
|
||||
var yt_id = $iframe.attr("id");
|
||||
var yt_player = yt_players[id][yt_id];
|
||||
if(yt_player){
|
||||
}else{
|
||||
yt_player = new YT.Player(yt_id, {
|
||||
events: {
|
||||
'onReady': function(event){
|
||||
var yt_player = event.target;
|
||||
var height = $(yt_player.getIframe()).height();
|
||||
var banner_wrap = $iframe.parents('.w-ba-banner__wrap').eq(0);
|
||||
var carousel_wrap = banner_wrap.find(".cycle-carousel-wrap");
|
||||
if(carousel_wrap.length){
|
||||
carousel_wrap.css("top","3em");
|
||||
height += parseInt(carousel_wrap.css('font-size')) * 3;
|
||||
}
|
||||
var overlay_in_slide = $iframe.parent().siblings('.ad-overlay,.banner-overlay');
|
||||
if(overlay_in_slide.length != 0){
|
||||
height += overlay_in_slide.outerHeight(true);
|
||||
}
|
||||
banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
|
||||
var init_key = find_out_yt_event_relation_key(yt_player, false);
|
||||
if(init_key){
|
||||
delete yt_player[init_key].onStateChange;
|
||||
}
|
||||
else{
|
||||
console.log("{onReady: true, onStateChange: true} missing!");
|
||||
}
|
||||
var event_list_key = find_out_yt_event_list_key(yt_player);
|
||||
if(event_list_key){
|
||||
var event_dict = yt_player[event_list_key];
|
||||
var array_key = find_out_yt_event_list_array_key(event_dict);
|
||||
var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
|
||||
var relation_key = find_out_yt_event_relation_key(event_dict, true);
|
||||
var onStateChange_idx = event_dict[relation_key].onStateChange;
|
||||
onStateChange_idx.reverse();
|
||||
var event_size = 3;
|
||||
onStateChange_idx.forEach(function(start_idx){
|
||||
event_dict[array_key].splice(start_idx,event_size);
|
||||
});
|
||||
event_dict[relation_key].onStateChange = [];
|
||||
event_dict[count_key] = event_dict[array_key].length;
|
||||
yt_player.addEventListener('onStateChange',onPlayerStateChange);
|
||||
banner_wrap.trigger('resize');
|
||||
if(i == 0 && $iframe.parents(".youtube_slide[data-autoplay=\"1\"]").length != 0){
|
||||
yt_player.mute().playVideo();
|
||||
}
|
||||
}else{
|
||||
console.log("YT player changes its variables!")
|
||||
}
|
||||
{{extra_ready_script}}
|
||||
},
|
||||
'onStateChange': onPlayerStateChange
|
||||
}
|
||||
});
|
||||
yt_players[id][yt_id] = yt_player;
|
||||
$iframe.data("yt_player",yt_player);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
$(".w-ba-banner").each(function(i,banner){
|
||||
init_banner(banner);
|
||||
})
|
||||
}
|
||||
function onPlayerStateChange(event){
|
||||
var iframe = $(event.target.getIframe()),
|
||||
cyclediv = iframe.parents("div.cycle-slideshow");
|
||||
var widget = cyclediv.parents('.ba-banner-widget-youtube');
|
||||
if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
|
||||
cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
|
||||
cyclediv.cycle("pause");
|
||||
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','hidden')
|
||||
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
|
||||
}else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
|
||||
if(cyclediv[0].need_resume)
|
||||
cyclediv.cycle("resume");
|
||||
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-overlay').css('visibility','')
|
||||
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
|
||||
}
|
||||
{{extra_state_chnage_script}}
|
||||
}
|
||||
}
|
||||
$(document).ready(function(){
|
||||
window.onYouTubePlayerAPIReady = function() {
|
||||
onYouTubeIframeAPIReady.apply(this,arguments);
|
||||
};
|
||||
var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
|
||||
var opts = banner_wrap.data('cycle.opts');
|
||||
banner_wrap.on('cycle-paused',function(opts){
|
||||
var controlplay = $(this).nextAll(".controlplay");
|
||||
if(controlplay.length != 0){
|
||||
controlplay.find(".resume-slide").removeClass("active");
|
||||
controlplay.find(".pause-slide").addClass("active");
|
||||
}
|
||||
})
|
||||
banner_wrap.on('cycle-resumed',function(opts){
|
||||
if(!($(this).data('paused'))){
|
||||
var controlplay = $(this).nextAll(".controlplay");
|
||||
if(controlplay.length != 0){
|
||||
controlplay.find(".resume-slide").addClass("active");
|
||||
controlplay.find(".pause-slide").removeClass("active");
|
||||
}
|
||||
}
|
||||
})
|
||||
/*
|
||||
var height = opts.slides.filter('.active').height() || opts.slides.height();
|
||||
banner_wrap.height(height)*/
|
||||
banner_wrap.css("padding-bottom","");
|
||||
{{extra_document_ready_script}}
|
||||
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', true).cycle('pause');
|
||||
$(this).addClass('active');
|
||||
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
|
||||
});
|
||||
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', false).cycle('resume');
|
||||
$(this).addClass('active');
|
||||
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
|
||||
});
|
||||
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||||
})
|
||||
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.jarallax-video-audio, .jarallax-video-control-play{
|
||||
z-index: 201;
|
||||
font-size: 2em;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
right: 2%;
|
||||
height: 66px;
|
||||
width: 66px;
|
||||
border-radius: 50%;
|
||||
line-height: 1.8;
|
||||
cursor: pointer;
|
||||
border: 2px solid rgba(255,255,255,.6);
|
||||
background-color: rgba(0,0,0,.6);
|
||||
transition: all 1.2s ease;
|
||||
}
|
||||
.jarallax-video-control-play{
|
||||
margin-top: 66px;
|
||||
}
|
||||
@media (max-width: 768px){
|
||||
.jarallax-video-audio, .jarallax-video-control-play{
|
||||
top: 50%;
|
||||
}
|
||||
.jarallax-video-audio.accessibility_mode_btn{
|
||||
margin-top: -33px;
|
||||
}
|
||||
.jarallax-video-control-play{
|
||||
margin-top: 33px;
|
||||
}
|
||||
}
|
||||
.jarallax-video-audio:hover,.jarallax-video-audio:focus,.jarallax-video-control-play:hover,.jarallax-video-control-play:focus {
|
||||
color: #FFC500;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.w-ba-banner .controlplay .resume-slide.active i{
|
||||
color: #32D9C3;
|
||||
}
|
||||
.w-ba-banner .controlplay .pause-slide.active i{
|
||||
color: #ff4500;
|
||||
}
|
||||
.w-ba-banner .controlplay{
|
||||
width: auto;
|
||||
}
|
||||
.next-button,.prev-button{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<div class="w-ba-banner ba-banner-widget-3">
|
||||
<div class="w-ba-banner__wrap cycle-slideshow"
|
||||
data-list="images"
|
||||
data-level="0"
|
||||
data-cycle-slides=".w-ba-banner__slide"
|
||||
data-cycle-log="false"
|
||||
data-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
data-cycle-timeout="{{timeout}}"
|
||||
data-cycle-fx="{{ad_fx}}"
|
||||
data-cycle-pager=".banner_caption_{{subpart-id}}"
|
||||
data-pager-template="<li><a></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
data-cycle-swipe=true
|
||||
data-cycle-swipe-fx="scrollHorz"
|
||||
>
|
||||
<div class="w-ba-banner__slide {{class}}"
|
||||
data-link="{{link}}"
|
||||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-overlay-template="<h3>{{title}}</h3>{{desc}}"
|
||||
data-target="{{target}}"
|
||||
>
|
||||
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
|
||||
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="w-ba-banner__pager-3 banner-pager banner_caption_{{subpart-id}}"></ul>
|
||||
<ul class="controlplay"><a class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
|
||||
<ul class="button-mid">
|
||||
<button class="prev-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></button>
|
||||
<button class="next-button" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></button>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
var flag = 1;
|
||||
$('.pause-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
||||
});
|
||||
$('.resume-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
||||
});
|
||||
$('.next-button').off('click').on('click',function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||||
|
||||
})
|
||||
$('.prev-button').off('click').on('click',function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<div class="w-ba-banner ba-banner-widget-4">
|
||||
<div class="w-ba-banner__wrap image-only"
|
||||
data-list="images"
|
||||
data-level="0"
|
||||
>
|
||||
<a href="{{link}}" target="{{target}}" title="{{alt_title}}">
|
||||
<img class="w-ba-banner__image" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"widgets" : [
|
||||
{
|
||||
"filename" : "ad_banner_widget1",
|
||||
"name" : {
|
||||
"zh_tw" : "1. 橫幅輪播 ( 圖片, 圖片說明文字, 導航圖示 )",
|
||||
"en" : "1. Carousel ( image, description, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "ad_banner_widget2",
|
||||
"name" : {
|
||||
"zh_tw" : "2. 橫幅輪播 ( 圖片, 導航圖示 )",
|
||||
"en" : "2. Carousel ( image, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "ad_banner_widget3",
|
||||
"name" : {
|
||||
"zh_tw" : "3. 橫幅輪播 ( 圖片, 導航圖示 )",
|
||||
"en" : "3. Carousel ( image, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "ad_banner_widget4",
|
||||
"name" : {
|
||||
"zh_tw" : "4. 廣告輪播 ( 圖片 )",
|
||||
"en" : "4. AD banner ( image )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "ad_banner_widget2_video",
|
||||
"name" : {
|
||||
"zh_tw" : "4. 專業版橫幅輪播 ( 圖片, Youtube影片, 導航圖示 )",
|
||||
"en" : "4. Pro Carousel ( image, Youtube video, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
<div class="w-annc widget-announcement-1">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item">
|
||||
<div class="w-annc__img-wrap bullseye">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="w-annc widget-announcement-10">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<h4 class="w-annc__entry-title col-sm-9">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<span class="w-annc__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="w-annc widget-announcement-11">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<span class="w-annc__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<h4 class="w-annc__entry-title col-sm-9">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "Read More" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="w-annc widget-announcement-12">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<table class="w-annc__table table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="w-annc_content">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="w-annc widget-announcement-13">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<table class="w-annc__table table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
<td class="w-annc_content">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="w-annc widget-announcement-14">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<div class="w-annc__inner row">
|
||||
<div class="w-annc__img-wrap col-sm-12 bullseye">
|
||||
<img class="w-annc__img" src="{{main_picture}}" alt="{{main_picture_description}}" title="{{main_picture_description}}">
|
||||
</div>
|
||||
<ul class="w-annc__list col-sm-12" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item">
|
||||
<div class="w-annc__content row">
|
||||
<h4 class="w-annc__entry-title col-xs-9">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<span class="w-annc__postdate-wrap col-xs-3" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<div class="w-annc widget-announcement-4 w-annc widget-announcement-15" style="position:relative;">
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<h2 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h2>
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
<div style="position: absolute;top: 50%;bottom: 50%;width:100%;">
|
||||
<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
border: none;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
|
||||
<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
border: none;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
|
||||
</div>
|
||||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item col-md-4">
|
||||
<div class="w-annc__img-wrap bullseye">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<div class="transitionfade"></div>
|
||||
</div>
|
||||
<div class="w-annc__content-wrap">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script>
|
||||
function combineul_{{subpart-id}}(){
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||||
parents.each(function(i,v){
|
||||
for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
|
||||
$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
|
||||
var ullength = $(v).find('ul.w-annc__list').length;
|
||||
for(var i = 1;i < ullength;i++)
|
||||
$(v).find('ul.w-annc__list').eq(-1).remove();
|
||||
})
|
||||
};
|
||||
var num;
|
||||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
|
||||
function reorganize_{{subpart-id}}(num){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').toArray();
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
|
||||
})
|
||||
if(currentul == -1)
|
||||
currentul = 0;
|
||||
var li_active_idx = 0;
|
||||
if(currentul != 0)
|
||||
li_active_idx = $(uls[currentul]).find("li.w-annc__item").eq(0).index("li.w-annc__item");
|
||||
combineul_{{subpart-id}}();
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||||
parents.each(function(i,v){
|
||||
var lilength = $(v).find('li.w-annc__item').length;
|
||||
var ul_length = Math.ceil(lilength/num);
|
||||
for(var ii=1;ii< ul_length;ii++){
|
||||
var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
|
||||
clone_ul.empty();
|
||||
clone_ul.removeClass("active");
|
||||
clone_ul.css("display","");
|
||||
$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
|
||||
var lihtml="";
|
||||
if(ii != (ul_length-1)){
|
||||
for(var j=0;j<num;j++){
|
||||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
}else{
|
||||
for(var j=0;j< lilength - num *(ul_length-1) ;j++){
|
||||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
};
|
||||
$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
|
||||
}
|
||||
if(ul_length != 1 )
|
||||
for(var i=0;i< lilength -num ; i++)
|
||||
$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css("display","none");
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('padding','0 1.125em');
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('float','left');
|
||||
var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item").eq(li_active_idx).parents("ul.w-annc__list");
|
||||
active_ul.addClass("active");
|
||||
active_ul.removeClass("hidden_item");
|
||||
active_ul.css("display","");
|
||||
};
|
||||
$(window).resize(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(3);
|
||||
num=3;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
})
|
||||
$(document).ready(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(3);
|
||||
num=3;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
var flag=false;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] .btn-left').click(function(){
|
||||
if(!flag){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
|
||||
var ul_length = uls.length;
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active");
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
|
||||
if(currentul - 1 < 0)
|
||||
currentul += ul_length;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
|
||||
var active_item = $(uls[currentul-1]);
|
||||
active_item.addClass("active");
|
||||
active_item.find("li").css("display","block");
|
||||
flag=true;
|
||||
$("body").css("overflow-x","hidden");
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
|
||||
};
|
||||
});
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] .btn-right').click(function(){
|
||||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
|
||||
if(!flag){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
|
||||
var ul_length = uls.length;
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active");
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
|
||||
if(currentul + 1 > ul_length - 1)
|
||||
currentul -= ul_length;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
|
||||
var active_item = $(uls[currentul+1]);
|
||||
active_item.addClass("active");
|
||||
active_item.find("li").css("display","block");
|
||||
flag=true;
|
||||
$("body").css("overflow-x","hidden");
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<div class="w-annc widget-announcement-16">
|
||||
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
|
||||
<div class="slide-button">
|
||||
<button class="cycle-prev btn btn-warning"> <i class="fa fa-angle-left"></i></button>
|
||||
<button class="cycle-next btn btn-warning"> <i class="fa fa-angle-right"></i></button>
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多+" : "More NEWS" %></a>
|
||||
</div>
|
||||
|
||||
<div class="w-annc__wrap cycle-slideshow"
|
||||
data-level="0"
|
||||
data-list="announcements"
|
||||
data-cycle-slides=".w-annc__item"
|
||||
data-cycle-fx="carousel"
|
||||
data-cycle-carousel-fluid=true
|
||||
data-cycle-pause-on-hover="true"
|
||||
data-cycle-speed="200"
|
||||
data-cycle-carousel-visible="1"
|
||||
data-cycle-prev=".cycle-prev"
|
||||
data-cycle-next=".cycle-next"
|
||||
data-cycle-swipe=true
|
||||
data-cycle-swipe-fx="carousel"
|
||||
>
|
||||
|
||||
<div class="w-annc__item">
|
||||
<div class="w-annc__img-wrap">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__content-wrap">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<div class="w-annc widget-announcement-18">
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<h2 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h2>
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item col-md-4">
|
||||
<div class="w-annc__img-wrap">
|
||||
<a href="{{link_to_show}}" title="{{title}}">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-annc__content-wrap">
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<div class="w-annc__subtitle">{{subtitle}}</div>
|
||||
<div class="w-annc_read_more"><a href="{{link_to_show}}" title="{{title}}">{{read_more_text}}</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
.widget-announcement-18 [data-list="announcements"] li > *{
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.widget-announcement-18 [data-list="announcements"] .w-annc__img{
|
||||
width: 100%;
|
||||
}
|
||||
.widget-announcement-18 [data-list="announcements"] .w-annc__content-wrap{
|
||||
padding: 0 1em;
|
||||
}
|
||||
.widget-announcement-18 .w-annc__title {
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.widget-announcement-18 .w-annc__widget-title {
|
||||
float: left;
|
||||
}
|
||||
.widget-announcement-18 .w-annc__more {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.widget-announcement-18 .w-annc__list > .w-annc__item:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
.widget-announcement-18 li.w-annc__item{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.widget-announcement-18 .w-annc__img-wrap {
|
||||
padding: 0 0 1em 0;
|
||||
}
|
||||
.w-annc_read_more{
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
}
|
||||
.w-annc_read_more a{
|
||||
float: left;
|
||||
background: #4a97c2;
|
||||
color: #ffffff;
|
||||
padding: 0 0.5em;
|
||||
border-radius: 0.3em;
|
||||
border: 0.5em solid #4a97c2;
|
||||
}
|
||||
.w-annc__subtitle {
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
.w-annc_read_more a:hover{
|
||||
background: #327397;
|
||||
border: 0.5em solid #327397;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$("[data-subpart-id=\"{{subpart-id}}\"] .w-annc__subtitle").each(function(i,v){
|
||||
var subtitle = $(v).text();
|
||||
if(subtitle.length > 15){
|
||||
$(v).text(subtitle.slice(0,15) + "...");
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="w-annc widget-announcement-17">
|
||||
<div class="search_block">
|
||||
<p>Search</p>
|
||||
<form accept-charset="UTF-8" action="{{more_url}}" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
|
||||
<p>
|
||||
<input id="search_query" name="keywords" placeholder="搜尋" type="text">
|
||||
<input type="submit" value="搜尋">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<span class="w-annc__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<h4 class="w-annc__entry-title col-sm-9">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="i-annc index-announcement-18">
|
||||
<style>
|
||||
@media (min-width: 992px){
|
||||
li.i-annc__item.col-md-4:nth-child(3n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<h3 class="i-annc__page-title">{{widget-title}}</h3>
|
||||
<ul class="i-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="i-annc__item col-md-4">
|
||||
<div class="i-annc__content-wrap">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="i-annc__category-wrap">
|
||||
<i class="fa fa-clone"></i>
|
||||
<span class="i-annc__category">{{category}}</span>
|
||||
</span>
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="i-annc__entry-title">
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="i-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<div class="w-annc widget-announcement-2">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<div class="w-annc__img-wrap col-sm-4 bullseye">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__content-wrap col-sm-8">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<div class="w-annc widget-announcement-3">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<div class="w-annc__content-wrap col-sm-8">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
<div class="w-annc__img-wrap col-sm-4 bullseye">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<div class="w-annc widget-announcement-4">
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<h2 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h2>
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item col-md-4">
|
||||
<div class="w-annc__img-wrap bullseye">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__content-wrap">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
[data-subpart-id="{{subpart-id}}"] .bullseye{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function combineul_{{subpart-id}}(){
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||||
parents.each(function(i,v){
|
||||
for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
|
||||
$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
|
||||
var ullength = $(v).find('ul.w-annc__list').length;
|
||||
for(var i = 1;i < ullength;i++)
|
||||
$(v).find('ul.w-annc__list').eq(-1).remove();
|
||||
})
|
||||
};
|
||||
var num;
|
||||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
|
||||
function reorganize_{{subpart-id}}(num){
|
||||
combineul_{{subpart-id}}();
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||||
parents.each(function(i,v){
|
||||
var lilength = $(v).find('li.w-annc__item').length;
|
||||
var ul_length = Math.ceil(lilength/num);
|
||||
for(var ii=1;ii< ul_length;ii++){
|
||||
var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
|
||||
clone_ul.empty();
|
||||
clone_ul.removeClass("active");
|
||||
clone_ul.css("display","");
|
||||
$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
|
||||
var lihtml="";
|
||||
if(ii != (ul_length-1)){
|
||||
for(var j=0;j<num;j++){
|
||||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
}else{
|
||||
for(var j=0;j< lilength - num *(ul_length-1) ;j++){
|
||||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
};
|
||||
$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
|
||||
}
|
||||
if(ul_length != 1 )
|
||||
for(var i=0;i< lilength -num ; i++)
|
||||
$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
|
||||
};
|
||||
$(window).resize(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(3);
|
||||
num=3;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
})
|
||||
$(document).ready(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(3);
|
||||
num=3;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="w-annc widget-announcement-5">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item">
|
||||
<div class="w-annc__content-wrap">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="w-annc widget-announcement-6">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<span class="w-annc__category-wrap col-sm-2">
|
||||
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
<h4 class="w-annc__entry-title col-sm-8">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<span class="w-annc__postdate-wrap col-sm-2" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="w-annc widget-announcement-7">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<span class="w-annc__postdate-wrap col-sm-2" date-format="%Y-%m-%d">
|
||||
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<h4 class="w-annc__entry-title col-sm-8">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<span class="w-annc__category-wrap col-sm-2">
|
||||
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="w-annc widget-announcement-8">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<table class="w-annc__table table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-annc__th w-annc__th--category">{{category-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="w-annc__category">{{category}}</td>
|
||||
<td class="w-annc_content">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="w-annc widget-announcement-9">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<table class="w-annc__table table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--category">{{category-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
<td class="w-annc_content">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="w-annc__category">{{category}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<div class="i-annc index-announcement-1">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<ul class="i-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="i-annc__item row">
|
||||
<span class="i-annc__category-wrap col-sm-2">
|
||||
<span class="i-annc__category">{{category}}</span>
|
||||
</span>
|
||||
<h4 class="i-annc__entry-title col-sm-8">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<span class="i-annc__postdate-wrap col-sm-2" date-format="%Y-%m/%d">
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
||||
<script>
|
||||
function postdate() {
|
||||
var len = $('.i-annc__postdate').length;
|
||||
var date = $('.i-annc__postdate');
|
||||
|
||||
for (let i=0; i<len; i++) {
|
||||
newDate = date[i].innerText.slice(5,10)
|
||||
newYear = date[i].innerText.slice(0,5)
|
||||
date[i].innerHTML= '';
|
||||
date[i].append(newYear)
|
||||
|
||||
var date2 = document.createElement('span');
|
||||
date2.className = 'new-date';
|
||||
date2.textContent = newDate;
|
||||
date[i].appendChild(date2);
|
||||
}
|
||||
}
|
||||
|
||||
postdate();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<div class="i-annc index-announcement-10">
|
||||
|
||||
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
|
||||
<div class="VivaTimeline">
|
||||
<dl>
|
||||
|
||||
<!--月份 1-->
|
||||
<dt>{{date-head}}</dt>
|
||||
|
||||
<!--左側文章 start-->
|
||||
<div class="data" data-level="0" data-list="announcements">
|
||||
<dd class=" evenodd clearfix ">
|
||||
<div class="circ"></div>
|
||||
<div class="time" date-format="%Y-%m">{{postdate}}</div>
|
||||
<!--填入日期-->
|
||||
<div class="events">
|
||||
<div class="events-header">{{title}}</div>
|
||||
<!--填入標題-->
|
||||
<div class="events-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 pull-left">
|
||||
<img class="events-object img-responsive img-rounded" src="{{img_src}}"/><!--填入圖片網址--></div>
|
||||
<div class="events-desc">{{subtitle}}</div>
|
||||
<!--填入描述-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="events-footer">
|
||||
<a class="i-annc__title" href="{{link_to_show}}">more </a>
|
||||
</div>
|
||||
<!--可填底部標題 或刪除-->
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(function(){
|
||||
jQuery('.data > dd:odd').addClass(' pos-left');
|
||||
jQuery('.data > dd:even').addClass('pos-right');
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
;
|
||||
(function ($, window, document, undefined) {
|
||||
//'use strict';
|
||||
var pluginName = 'vivaTimeline'; //Plugin名稱
|
||||
|
||||
//Timeline建構式
|
||||
var Timeline = function (element, opt) {
|
||||
//私有變數
|
||||
this.target = element;
|
||||
this.carouselInterval;
|
||||
this.checkImgLoad;
|
||||
this.imgLoad = false;
|
||||
//初始化
|
||||
this._init(opt);
|
||||
|
||||
this._event();
|
||||
|
||||
}
|
||||
|
||||
//ImportKML2D預設參數
|
||||
Timeline.options = {
|
||||
carousel: true,
|
||||
carouselTime: 10000
|
||||
}
|
||||
|
||||
//Timeline私有方法
|
||||
Timeline.prototype = {
|
||||
//初始化
|
||||
_init: function (_opt) {
|
||||
//合併自訂參數與預設參數
|
||||
var self = this;
|
||||
self.options = $.extend(true, {}, Timeline.options, _opt);
|
||||
|
||||
self.target.find('.events-body').each(function () {
|
||||
var rowcount = $(this).find('.row').length;
|
||||
if (rowcount > 1) {
|
||||
var html = "<ol>";
|
||||
for (var i = 0; i < rowcount; i++) {
|
||||
html += "<li data-target='" + i + "'></li>";
|
||||
}
|
||||
html += "</ol>";
|
||||
$(this).siblings('.events-footer').html(html).find('li').first().addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
self.target.find('.events-body').each(function () {
|
||||
$(this).find('.row').first().show().siblings().hide();
|
||||
});
|
||||
|
||||
self.target.find('img').on('load', function () {
|
||||
self.target.find('.events-body').each(function () {
|
||||
var maxHeight = 0;
|
||||
$(this).find('.row').each(function () {
|
||||
if ($(this).height() > maxHeight) {
|
||||
maxHeight = $(this).height();
|
||||
}
|
||||
});
|
||||
$(this).find('.row').height(maxHeight);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//綁定事件
|
||||
_event: function () {
|
||||
var self = this;
|
||||
self.target.find('.events-header').click(function () {
|
||||
$(this).siblings('.events-body').slideToggle().end().siblings('.events-footer').toggle();
|
||||
});
|
||||
|
||||
self.target.find('.events-footer li').click(function () {
|
||||
self._carousel($(this));
|
||||
});
|
||||
|
||||
if (self.options.carousel) {
|
||||
self.carouselInterval = setInterval(function () {
|
||||
self._carousel();
|
||||
}, self.options.carouselTime);
|
||||
|
||||
self.target.find('.events').hover(function () {
|
||||
clearInterval(self.carouselInterval);
|
||||
self.carouselInterval = null;
|
||||
|
||||
}, function () {
|
||||
if (self.carouselInterval == undefined) {
|
||||
self.carouselInterval = setInterval(function () {
|
||||
self._carousel();
|
||||
}, self.options.carouselTime);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//自動輪播
|
||||
_carousel: function (_container) {
|
||||
var self = this;
|
||||
if (_container == undefined) {
|
||||
self.target.find('.events-footer .active').each(function () {
|
||||
var nextTarget;
|
||||
if ($(this).is(':last-child')) {
|
||||
nextTarget = $(this).siblings().first();
|
||||
} else {
|
||||
nextTarget = $(this).next();
|
||||
}
|
||||
self._carousel(nextTarget);
|
||||
});
|
||||
} else {
|
||||
var target = _container.data().target;
|
||||
|
||||
_container.addClass('active').siblings().removeClass('active');
|
||||
|
||||
_container.closest('.events-footer').siblings('.events-body').find('.row').eq(target).show().siblings().hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//公開方法
|
||||
$.fn[pluginName] = function (options, args) {
|
||||
var timeline;
|
||||
this.each(function () {
|
||||
timeline = new Timeline($(this), options);
|
||||
});
|
||||
return this;
|
||||
}
|
||||
})(jQuery, window, document);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('.VivaTimeline').vivaTimeline({carousel: true, carouselTime: 3000});
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div class="i-annc index-announcement-11 {{display}}">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<table class="i-annc__table table table-striped dt-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--date all" id='date'>{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title all" id='title'>{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category min-tablet" id='category'>{{category-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate" headers='date'><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||
<td class="i-annc__content" headers='title'>
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="i-annc__category" headers='category'>{{category}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
||||
<script>
|
||||
$('.i-annc__table').each(function(){
|
||||
if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
|
||||
$(this).DataTable({
|
||||
searching: false,
|
||||
paging: false,
|
||||
ordering: false,
|
||||
info: false,
|
||||
autoWidth: false
|
||||
});
|
||||
}
|
||||
});;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<div class="i-annc index-announcement-12 {{display}}">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<table class="i-annc__table table table-striped dt-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--date all" id='date'>{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title all" id='title'>{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category min-tablet" id='category'>{{category-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--view min-tablet" id='view-count'>{{view-count-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate" headers='date'><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||
<td class="i-annc__content" headers='title'>
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="i-annc__category" headers='category'>{{category}}</td>
|
||||
<td class="i-annc__view-count" headers='view-count'>{{view_count}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
||||
<script>
|
||||
$('.i-annc__table').each(function(){
|
||||
if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
|
||||
$(this).DataTable({
|
||||
searching: false,
|
||||
paging: false,
|
||||
ordering: false,
|
||||
info: false,
|
||||
autoWidth: false
|
||||
});
|
||||
}
|
||||
});;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<div class="i-annc index-announcement-13 {{display}}">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<table class="i-annc__table table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--title" id='title'>{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--date" ='date'>{{date-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__content" headers='title'>
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="i-annc__postdate" date-format="%Y-%m-%d" headers='date'>{{postdate}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<div class="i-annc index-announcement-14 {{display}}">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<table class="i-annc__table table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--date" id='date'>{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title" id='title'>{{title-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate" date-format="%Y-%m-%d" headers='date'>{{postdate}}</td>
|
||||
<td class="i-annc__content" headers='title'>
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div class="i-annc index-announcement-15 {{display}}">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<table class="i-annc__table table table-striped dt-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--date all" id='date'>{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title all" id='title'>{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category min-tablet" id='view'>{{view-count-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate" date-format="%Y-%m-%d" headers='date'>{{postdate}}</td>
|
||||
<td class="i-annc__content" headers='title'>
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="i-annc__view-count" headers='view'>{{view_count}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
||||
<script>
|
||||
$('.i-annc__table').each(function(){
|
||||
if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
|
||||
$(this).DataTable({
|
||||
searching: false,
|
||||
paging: false,
|
||||
ordering: false,
|
||||
info: false,
|
||||
autoWidth: false
|
||||
});
|
||||
}
|
||||
});;
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue