first commit
This commit is contained in:
commit
3272ee0839
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 600 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 787 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
|
@ -0,0 +1,422 @@
|
|||
;(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-plus"></i>');
|
||||
var $caret2 = $('<i class="dropdown-toggle-icon level-2 fa fa-minus"></i>');
|
||||
var $li = null;
|
||||
var $this = null;
|
||||
var cls = 'active';
|
||||
var iconDown = 'fa-plus';
|
||||
var iconUp = 'fa-minus';
|
||||
|
||||
// 如果有第二層選單，新增對應的類別到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裡面
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
// MobileMenu: function(els) {
|
||||
// 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');
|
||||
// $('.mobile-menu1').append('<span class="menu-drop"><i class="fa fa-chevron-down"></i></span>');
|
||||
// $('.mobile-menu2').append('<span class="menu-drop"><i class="fa fa-chevron-down"></i></span>');
|
||||
|
||||
// $menu.before('<div class="menu-toggle"><div class="toggle"><span>MENU</span><i class="fa fa-bars"></i></div></div>');
|
||||
|
||||
// $('.menu_toggle').click(function(){
|
||||
// $menu.slideToggle();
|
||||
// $('.mobile-menu1 > ul').slideUp(100);
|
||||
// $('.mobile-menu1 > .menu-drop').removeClass('opened');
|
||||
// $('.mobile-menu2 > ul').slideUp(100);
|
||||
// $('.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(100);
|
||||
// $('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
|
||||
// $('.mobile-menu2 > ul').slideUp(100);
|
||||
// $('.mobile-menu2 > .menu-drop').removeClass('opened');
|
||||
// $that.siblings('ul').slideDown(100);
|
||||
// $that.addClass('opened');
|
||||
// }else if (opencheck1 == 1) {
|
||||
// $that.siblings('ul').slideUp(100);
|
||||
// $('.mobile-menu2 > ul').slideUp(100);
|
||||
// $('.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(100);
|
||||
// $('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
|
||||
// $that.siblings('ul').slideDown(100);
|
||||
// $that.addClass('opened');
|
||||
// }else if (opencheck2 == 1) {
|
||||
// $that.siblings('ul').slideUp(100);
|
||||
// $that.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);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
toggleMenu: function(){
|
||||
$('.navbar-toggle').click(function(){
|
||||
|
||||
$(this).toggleClass('clicked');
|
||||
$('.navbar.layout-header.collpse-nav').toggleClass('active');
|
||||
$('.black-bg').toggleClass('active');
|
||||
})
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會
|
||||
win.ORBITFRONT = orbit;
|
||||
|
||||
// 在switch裡測試頁面模組後執行對應的函數
|
||||
switch (pageModule) {
|
||||
case 'home':
|
||||
break;
|
||||
case 'member':
|
||||
orbit.member.removeEmptyRow();
|
||||
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');
|
||||
orbit.toggleMenu();
|
||||
// orbit.MobileMenu();
|
||||
// testing
|
||||
// 自適應網頁使用，當網頁載入時，如果視窗寬度小於768，就執行orbit.nav.setDropdown函數
|
||||
if ($(window).width() < 992) {
|
||||
orbit.nav.setDropdown();
|
||||
}
|
||||
|
||||
// 自適應網頁使用，當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
|
||||
$(window).resize(function() {
|
||||
if ($(window).width() < 992) {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(orbit.nav.setDropdown, 500);
|
||||
} else {
|
||||
resizeTimer = setTimeout(orbit.nav.removeDropdown, 500);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 當文件物件模型(DOM)載入後，執行init函數
|
||||
$(document).ready(function() {
|
||||
init();
|
||||
|
||||
|
||||
|
||||
if( $('div[data-pp="1000"]').text() !== ''){
|
||||
$('.black-screen').addClass('active');
|
||||
}
|
||||
|
||||
$('.close-btn').click(function() {
|
||||
$('.black-screen').removeClass('active');
|
||||
})
|
||||
});
|
||||
|
||||
// 執行 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));
|
||||
$(document).ready(function(){
|
||||
if(window.location.search.indexOf('editmode=on') == -1){
|
||||
$(".nav-tabs").each(function(i,v){
|
||||
$(v).nextAll("*").not("script").addClass("tab-pane fade");
|
||||
$(v).nextAll("*").not("script").eq(0).addClass("active in");
|
||||
var tab_content = $("<div class=\"tab-content\"></div>")
|
||||
$(v).nextAll("*").not("script").appendTo(tab_content);
|
||||
$(v).after(tab_content);
|
||||
$(v).find("li").off('click').click(function(){
|
||||
$(this).parent().nextAll(".tab-content").eq(0).find(".tab-pane").removeClass("active in");
|
||||
$(this).parent().nextAll(".tab-content").eq(0).find(".tab-pane").eq($(this).index()).addClass("active in");
|
||||
$(this).addClass('active');
|
||||
$(this).siblings('li').removeClass('active');
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -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
Binary file not shown.
|
|
@ -0,0 +1,947 @@
|
|||
//
|
||||
// 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+
|
||||
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+
|
||||
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+
|
||||
}
|
||||
@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);
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
// 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
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,21 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.banner-top{
|
||||
padding: .8em;
|
||||
background-color: #31302e;
|
||||
}
|
||||
|
||||
a[accesskey] {
|
||||
position: absolute;
|
||||
margin-left: -15px;
|
||||
color: transparent!important;
|
||||
}
|
||||
|
||||
#orbit-bar a[accesskey] {
|
||||
color: #666666 !important;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
.response-content {
|
||||
position: relative;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
width: 970px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg) {
|
||||
width: 1100px;
|
||||
}
|
||||
}
|
||||
.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-h3;
|
||||
}
|
||||
|
||||
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 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
@import "variables";
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $main-font;
|
||||
font-weight: 300;
|
||||
font-size: inherit;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
font-family: $main-font;
|
||||
font-weight: 300;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: lighten($brand-primary, 10%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.admin-edit {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// override bootsrap settings
|
||||
th,
|
||||
td {
|
||||
padding: 8px .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 {
|
||||
text-transform:uppercase;
|
||||
font-weight: 500;
|
||||
border-radius: 0;
|
||||
color: $theme-gray;
|
||||
border: 3px solid $theme-gray;
|
||||
background-color: transparent;
|
||||
font-size: 0.8125rem;
|
||||
padding: .8em 1.4em;
|
||||
|
||||
&:hover,&:active,&:active:hover{
|
||||
border-radius: 0;
|
||||
color: $theme-color-third;
|
||||
background-color: transparent;
|
||||
border: 3px solid $theme-color-third;
|
||||
}
|
||||
}
|
||||
|
||||
// Page heading
|
||||
.page-module-title {
|
||||
@extend .unity-title;
|
||||
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.view-count {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.view_count {
|
||||
> i {
|
||||
font-size: 0.75rem;
|
||||
|
||||
&:before {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//index > main-section
|
||||
|
||||
.main-section{
|
||||
position: relative;
|
||||
@media(min-width: 993px){
|
||||
width: 80%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.black-bg{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: .5s;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
|
||||
&.active{
|
||||
background-color: rgba(black,.5);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 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-second, 0.9);
|
||||
text-align: center;
|
||||
padding: 10px 12px;
|
||||
position: fixed;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
color: $theme-white;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
z-index: 1050;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme-color-second, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// Set Triangle
|
||||
@import "variables";
|
||||
|
||||
@mixin arrow($direction, $width, $height, $color) {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
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,81 @@
|
|||
@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: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 1px solid $orbit-border-color;
|
||||
border-right: 1px 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: 1px 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-third;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
a {
|
||||
background-color: $theme-color-third;
|
||||
border-color: $theme-color-third;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
body .sitemap-list {
|
||||
a {
|
||||
color: $theme-gray;
|
||||
|
||||
&:hover {
|
||||
color: lighten($theme-color-main, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "variables";
|
||||
|
||||
// Title
|
||||
.unity-title {
|
||||
color: $theme-color-third;
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.5;
|
||||
font-family: $main-font;
|
||||
font-size: $font-h1;
|
||||
|
||||
.layout-footer & {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: none;
|
||||
|
||||
span {
|
||||
display: inline;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
font-family: $main-font;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.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: 15px 0;
|
||||
> * {
|
||||
display: inline-block !important;
|
||||
margin: 0 6px 0 0 !important;
|
||||
vertical-align: top !important;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: 0.2s;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.fb-share-button.fb_iframe_widget {
|
||||
> span {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
}
|
||||
.print-button {
|
||||
a {
|
||||
color: #333;
|
||||
font: 15px/20px $main-font;
|
||||
.fa {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
@charset "utf-8";
|
||||
|
||||
// Base Color
|
||||
$theme-gray: #949494;
|
||||
$theme-gray-subtle: #ddd;
|
||||
$theme-gray-light: #cecece;
|
||||
$theme-gray-lighter: #f1f1f1;
|
||||
$theme-gray-dark: #3F3F3F;
|
||||
$theme-gray-darker: #222222;
|
||||
$theme-gray-footer: #8e4d00;
|
||||
$theme-white: #fff;
|
||||
$theme-red: #d20001;
|
||||
$theme-blue: #003d7e;
|
||||
$theme-green: #21311f;
|
||||
|
||||
$theme-color-main: #ac7210;
|
||||
$theme-color-second: #9b4a03;
|
||||
$theme-color-third: #c73a0f;
|
||||
|
||||
// Font stacks
|
||||
$main-font: "Noto Sans CJK TC","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: $font-13;
|
||||
|
||||
// Colors
|
||||
$w-border-color: $theme-gray-lighter;
|
||||
|
||||
//
|
||||
// AD banner Module
|
||||
// --------------------------------------------------
|
||||
|
||||
// Font sizes
|
||||
$w-caption-font-size: $font-13;
|
||||
$w-caption-desc: $font-13;
|
||||
|
||||
//
|
||||
// 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: 4px;@import "../../bootstrap/variables";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.response-content {
|
||||
justify-self: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@import "bootstrap/mixins";
|
||||
@import "bootstrap/variables";
|
||||
@import "base/mixins";
|
||||
@import "base/variables";
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-content {
|
||||
min-height: 600px;
|
||||
|
||||
.container {
|
||||
@extend .response-content;
|
||||
}
|
||||
|
||||
.innerpage.row{
|
||||
margin: 0;
|
||||
|
||||
.right-column{
|
||||
float: none;
|
||||
|
||||
@media(min-width: $screen-sm){
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-content-box{
|
||||
padding: 15px;
|
||||
@media (max-width: $screen-xs) {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
&.innerpage{
|
||||
padding: 15px 50px;
|
||||
|
||||
@media (max-width: $screen-xs) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.about{
|
||||
margin: -15px;
|
||||
background-color: $theme-gray-lighter;
|
||||
|
||||
@media (max-width: $screen-xs) {
|
||||
margin: 0;
|
||||
}
|
||||
.about-inner{
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 30px 0;
|
||||
|
||||
.about-title{
|
||||
color: $theme-color-third;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-right: 1em;
|
||||
vertical-align: middle;
|
||||
|
||||
@media(max-width: $screen-lg) {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.about-content{
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: 2em;
|
||||
font-size: $font-13;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-footer {
|
||||
color: $theme-white;
|
||||
font-size: 12px;
|
||||
font-weight: 100;
|
||||
background-color:$theme-green;
|
||||
|
||||
.layout-footer-inner{
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #d8cca5;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten(#ffffff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-header {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: $theme-green;
|
||||
z-index: 11;
|
||||
width: 20%;
|
||||
height: 200%;
|
||||
padding: 0 15px;
|
||||
transition: .5s;
|
||||
|
||||
@media (max-width: $screen-md) {
|
||||
width: 50%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
&.active{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
.container {
|
||||
@extend .response-content;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: none;
|
||||
padding: 16px 0;
|
||||
color: #FFF;
|
||||
font-family: $main-font;
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.8em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
float: none;
|
||||
|
||||
.navbar-toggle {
|
||||
position: absolute;
|
||||
left: 110%;
|
||||
top: 15px;
|
||||
padding: 14px 10px;
|
||||
border-radius: 2px;
|
||||
border-width: 2px;
|
||||
margin: 0;
|
||||
background-color: $theme-gray-dark;
|
||||
|
||||
@media (max-width: 993px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon-bar {
|
||||
background-color: $theme-gray;
|
||||
}
|
||||
|
||||
&.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: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-bar-middle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon-bar-bottom {
|
||||
top: -6px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: auto;
|
||||
margin: 0.5rem 0 0;
|
||||
padding: 0;
|
||||
color: #FFF;
|
||||
font-size: $font-13;
|
||||
text-align: center;
|
||||
font-family: $main-font;
|
||||
|
||||
|
||||
.site-logo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div{
|
||||
display: inline-block;
|
||||
padding: .5em 1em;
|
||||
margin: auto;
|
||||
border-top: 2px solid $theme-gray-dark;
|
||||
border-bottom: 2px solid $theme-gray-dark;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.layout-slide {
|
||||
clear: both;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background: $theme-gray;
|
||||
|
||||
.w-ad-banner {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
//
|
||||
// Widget
|
||||
//
|
||||
|
||||
// Widget
|
||||
// ## gerenral styles
|
||||
.w-ba-banner {
|
||||
position: relative;
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.w-ba-banner__wrap {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.w-ba-banner__slide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-pager {
|
||||
@include list-reset;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
z-index: 200;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
background: $theme-color-main;
|
||||
display: inline-block;
|
||||
margin-right: 0.25em;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
border-radius: 50%;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.active-slide a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-responsive {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Widget 1
|
||||
.ba-banner-widget-1 {
|
||||
.w-ba-banner__caption {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
color: $theme-white;
|
||||
z-index: 200;
|
||||
transform: translate(-50%);
|
||||
text-shadow: 1px 0 10px rgba(black,.8);
|
||||
font-weight: 100;
|
||||
|
||||
h2 {
|
||||
font-family: $main-font;
|
||||
font-size: $font-h2;
|
||||
margin: 0.3em 0;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
color: lighten($theme-color-main,15%);
|
||||
font-family: $main-font;
|
||||
font-size: $font-13;
|
||||
@media(max-width: $screen-sm){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
display: inline-block;
|
||||
color: $theme-white;
|
||||
margin-top: 1em;
|
||||
font-size: 12px;
|
||||
padding: .8em 1.4em;
|
||||
border: 2px solid $theme-white;
|
||||
transition:.2s;
|
||||
|
||||
&:hover{
|
||||
box-shadow: 1px 0 10px rgba(black,.8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(min-width: $screen-lg){
|
||||
h2{
|
||||
font-size: 60px;
|
||||
}
|
||||
p{
|
||||
font-size: $font-15;
|
||||
}
|
||||
|
||||
a{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
@media(max-width: $screen-lg) and (min-width: $screen-sm){
|
||||
h2{
|
||||
font-size: 36px;
|
||||
}
|
||||
p{
|
||||
font-size: $font-13;
|
||||
}
|
||||
|
||||
a{
|
||||
font-size: $font-15;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
bottom: 1em;
|
||||
z-index: 102;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget 3
|
||||
.ba-banner-widget-3 {
|
||||
.w-ba-banner__wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-ba-banner__slide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-pager {
|
||||
top: auto;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ba-banner-widget-4{
|
||||
.w-ba-banner__wrap{
|
||||
height: 150px;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ba-banner-widget-5 {
|
||||
.w-ba-banner__caption {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 3em;
|
||||
color: $theme-white;
|
||||
text-shadow: 1px 0 10px rgba(black,.8);
|
||||
z-index: 100;
|
||||
font-weight: 100;
|
||||
|
||||
h2 {
|
||||
font-family: $main-font;
|
||||
font-size: $font-h2;
|
||||
margin: 0.3em 0;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
color: lighten($theme-color-main,15%);
|
||||
font-family: $main-font;
|
||||
font-size: $font-13;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// specific style for youtube widget
|
||||
.ba-banner-widget-youtube {
|
||||
.cycle-slide-active {
|
||||
z-index: 101 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,730 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
//
|
||||
// Widget
|
||||
//
|
||||
|
||||
// Announcement widget
|
||||
// ## Gerneral styles for widgets
|
||||
.w-annc {
|
||||
.w-annc__widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.w-annc__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.w-annc__item {
|
||||
margin: 0;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.w-annc__meta {
|
||||
.w-annc__status-wrap,
|
||||
.w-annc__postdate-wrap,
|
||||
.w-annc__category-wrap {
|
||||
display: inline-block;
|
||||
margin-right: 0.2em;
|
||||
font-size: 0.8125em;
|
||||
color: $theme-gray;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $theme-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.w-annc__subtitle {
|
||||
font-family: $main-font;
|
||||
font-size: $font-13;
|
||||
color: $theme-gray-dark;
|
||||
}
|
||||
|
||||
.w-annc__entry-title {
|
||||
font-size: $font-15;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.w-annc__title {
|
||||
font-family: $sub-font;
|
||||
color: $theme-gray-dark;
|
||||
text-decoration: none;
|
||||
font-size: 0.8125rem;
|
||||
|
||||
&:hover {
|
||||
color: $theme-color-third;
|
||||
}
|
||||
}
|
||||
.w-annc__more-wrap{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Widget-1
|
||||
.widget-announcement-1 {
|
||||
.w-annc__img-wrap {
|
||||
height: 200px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.w-annc__title {
|
||||
font-family: $main-font;
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-2
|
||||
.widget-announcement-2 {
|
||||
.w-annc__img-wrap {
|
||||
height: 200px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.w-annc__title {
|
||||
font-family: $main-font;
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-3
|
||||
.widget-announcement-3 {
|
||||
.w-annc__img-wrap {
|
||||
height: 200px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.w-annc__title {
|
||||
font-family: $main-font;
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-4
|
||||
.widget-announcement-4 {
|
||||
margin: 60px 0;
|
||||
.w-annc__widget-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.w-annc__title {
|
||||
font-family: $main-font;
|
||||
line-height: 1.3;
|
||||
font-size: $font-15;
|
||||
}
|
||||
|
||||
.w-annc__list > .w-annc__item:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.w-annc__img-wrap {
|
||||
border: 8px solid $theme-gray-light;
|
||||
height: 250px;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
float: none;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@media(max-width: $screen-sm)and(min-width: 500px){
|
||||
height: 200px
|
||||
}
|
||||
|
||||
@media(max-width: 500px){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.w-annc__content-wrap{
|
||||
@media(max-width: 500px){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-5
|
||||
.widget-announcement-5 {
|
||||
.w-annc__title {
|
||||
font-family: $main-font;
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.w-annc__item {
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-6
|
||||
.widget-announcement-6 {
|
||||
.w-annc__item {
|
||||
margin-bottom: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
}
|
||||
|
||||
.w-annc__entry-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.w-annc__category-wrap,
|
||||
.w-annc__status,
|
||||
.w-annc__title,
|
||||
.w-annc__postdate-wrap {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-7
|
||||
.widget-announcement-7 {
|
||||
.w-annc__item {
|
||||
margin-bottom: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
}
|
||||
|
||||
.w-annc__entry-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.w-annc__category-wrap,
|
||||
.w-annc__status,
|
||||
.w-annc__title,
|
||||
.w-annc__postdate-wrap {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// ## Gerneral styles for table widgets
|
||||
|
||||
.w-annc__postdate,
|
||||
.w-annc__category {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Widget-8
|
||||
// ## Table
|
||||
.widget-announcement-8 {
|
||||
.w-annc__th {
|
||||
font-weight: 300;
|
||||
color: black;
|
||||
background: lighten($theme-gray,20%);
|
||||
font-size: 0.8125em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-9
|
||||
// ## Table
|
||||
.widget-announcement-9 {
|
||||
.w-annc__th {
|
||||
color: #fff;
|
||||
background: $theme-gray-light;
|
||||
font-size: 0.8125em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-10
|
||||
.widget-announcement-10 {
|
||||
.w-annc__item {
|
||||
margin-bottom: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
}
|
||||
|
||||
.w-annc__entry-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.w-annc__postdate-wrap {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-11
|
||||
.widget-announcement-11 {
|
||||
.w-annc__item {
|
||||
margin-bottom: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
}
|
||||
|
||||
.w-annc__entry-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.w-annc__postdate-wrap {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-12
|
||||
// ## Table
|
||||
.widget-announcement-12 {
|
||||
.w-annc__th {
|
||||
color: #fff;
|
||||
background: $theme-gray-light;
|
||||
font-size: 0.8125em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-13
|
||||
// ## Table
|
||||
.widget-announcement-13 {
|
||||
.w-annc__th {
|
||||
color: #fff;
|
||||
background: $theme-gray-light;
|
||||
font-size: 0.8125em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Widget-14
|
||||
.widget-announcement-14 {
|
||||
.w-annc__list {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.w-annc__img-wrap {
|
||||
height: 300px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
height: 200px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.w-annc__item {
|
||||
margin-bottom: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
}
|
||||
|
||||
.w-annc__entry-title {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.w-annc__postdate-wrap {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
.w-annc__status {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.w-annc__postdate {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Announcement index
|
||||
// ## General style for index pages
|
||||
.i-annc {
|
||||
.i-annc__page-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-annc__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.i-annc__widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-annc__item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.i-annc__img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.i-annc__th {
|
||||
color: black;
|
||||
background: lighten($theme-gray,20%);
|
||||
font-size: 0.8125em;
|
||||
font-weight: 300;
|
||||
border: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i-annc__postdate,
|
||||
.i-annc__category,
|
||||
.i-annc__view-count {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.i-annc__status-wrap {
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: .2em .6em .3em;
|
||||
|
||||
&:last-child {
|
||||
margin: 0 5px 3px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.i-annc__title:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.i-annc__meta {
|
||||
.i-annc__status-wrap,
|
||||
.i-annc__postdate-wrap,
|
||||
.i-annc__category-wrap {
|
||||
display: inline-block;
|
||||
margin-right: 0.2em;
|
||||
font-size: 0.8125em;
|
||||
color: $theme-gray;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $theme-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.i-annc__subtitle {
|
||||
font-size: 0.8125em;
|
||||
color: $theme-gray;
|
||||
}
|
||||
|
||||
.i-annc__entry-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.i-annc__title {
|
||||
font-family: $sub-font;
|
||||
color: $theme-gray-dark;
|
||||
text-decoration: none;
|
||||
font-size: 0.8125rem;
|
||||
|
||||
&:hover{
|
||||
color: $theme-color-third;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Index-1
|
||||
.index-announcement-1 {}
|
||||
|
||||
// Index-5
|
||||
// Index-6
|
||||
.index-announcement-5,
|
||||
.index-announcement-6 {
|
||||
.i-annc__img-wrap {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.i-annc__title {
|
||||
font-family: $main-font;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
// Index-7
|
||||
.index-announcement-7 {
|
||||
.i-annc__title {
|
||||
font-family: $main-font;
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.i-annc__list > .i-annc__item:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.i-annc__img-wrap {
|
||||
height: 200px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Index-8
|
||||
.index-announcement-8 {
|
||||
.i-annc__title {
|
||||
font-family: $main-font;
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.i-annc__item {
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Index-9
|
||||
// Index-10
|
||||
.index-announcement-9,
|
||||
.index-announcement-10 {
|
||||
.i-annc__item {
|
||||
margin-bottom: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
}
|
||||
|
||||
.i-annc__entry-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.i-annc__category-wrap,
|
||||
.i-annc__status,
|
||||
.i-annc__title,
|
||||
.i-annc__postdate-wrap {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.i-annc__status {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Index-11
|
||||
// Index-12
|
||||
.index-announcement-11,
|
||||
.index-announcement-12 {
|
||||
.i-annc__item {
|
||||
margin-bottom: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
border-bottom: 1px dashed lighten($theme-gray, 65%);
|
||||
}
|
||||
|
||||
.i-annc__entry-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.i-annc__postdate-wrap {
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
|
||||
.i-annc__status {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Index-16
|
||||
.index-announcement-16 {
|
||||
td ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Announcement show
|
||||
.s-annc {
|
||||
.s-annc__show-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.s-annc__meta-wrap {
|
||||
border-bottom: 1px solid $theme-gray-light;
|
||||
|
||||
@include clearfix;
|
||||
|
||||
.s-annc__meta--item {
|
||||
font-size: 0.875rem;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0.6em;
|
||||
float: left;
|
||||
|
||||
i {
|
||||
color: darken($theme-gray-light, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.s-annc__tag-wrap {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
padding-left: 1.6em;
|
||||
clear: both;
|
||||
float: none;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.s-annc__tag-wrap {
|
||||
.s-annc__tag {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-annc__post-wrap {
|
||||
@include clearfix;
|
||||
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.s-annc__related-wrap {
|
||||
padding-top: 1em;
|
||||
border-top: 1px dotted $theme-gray-light;
|
||||
}
|
||||
|
||||
.s-annc__related-file {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.s-annc__related-file,
|
||||
.s-annc__related-link {
|
||||
padding-bottom: 6px;
|
||||
padding-left: 1.6em;
|
||||
|
||||
i {
|
||||
margin: 8px 0 0 -1.6em;
|
||||
float: left;
|
||||
color: darken($theme-gray-light, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.s-annc__related-link-list,
|
||||
.s-annc__related-file-list {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.s-annc__flie-title {
|
||||
max-width: 9.375rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.s-annc__social > * {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.s-annc__social .print-button {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
background-color: $theme-gray-light;
|
||||
}
|
||||
|
||||
.s-annc__social .print-button:hover {
|
||||
background-color: lighten($theme-gray-light, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
//
|
||||
// Widget
|
||||
//
|
||||
// Widget
|
||||
// ## gerenral styles
|
||||
.w-archive {
|
||||
.w-archive__widget-title {
|
||||
font-family: $main-font;
|
||||
font-size: $w-widget-title-font-size;
|
||||
color: $theme-gray;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 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: 1px dashed $w-border-color;
|
||||
padding: 0 0 0.5rem 0.4rem;
|
||||
}
|
||||
|
||||
.w-archive__link {
|
||||
font-size: $w-title-font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Archive index 1
|
||||
.index-archive-1 {
|
||||
font-family: $main-font;
|
||||
|
||||
.i-archive__archive-title {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.i-archive__status-wrap {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.i-archive__item {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.i-archive__category-list {}
|
||||
|
||||
.i-archive__category-title {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.i-archive__category-item {
|
||||
font-size: 13px;
|
||||
display: inline;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.i-archive__item-wrap {}
|
||||
|
||||
.i-archive__file-list {
|
||||
display: block;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.i-archive__file-wrap {
|
||||
margin: 0 0.625rem 15px 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid lighten($theme-gray-light, 10%);
|
||||
}
|
||||
|
||||
.i-archive__file-name {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.index-archive-2,
|
||||
.index-archive-4 {
|
||||
.panel {
|
||||
font-family: $main-font;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-family: $main-font;
|
||||
}
|
||||
|
||||
.i-archive-tags {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.i-archive-files-item {
|
||||
font-size: 13px;
|
||||
font-family: $main-font;
|
||||
}
|
||||
|
||||
.i-archive-files-list {
|
||||
dd {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.i-archive-tag-name {
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.9375rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-sm) {
|
||||
.dl-horizontal {
|
||||
dt {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 10px 12px;
|
||||
margin-right: 5px;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
|
||||
&: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: 25px;
|
||||
}
|
||||
|
||||
.i-archive__category-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.i-archive__category-title {
|
||||
font-family: $main-font;
|
||||
}
|
||||
|
||||
.i-archive__archive-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.i-archive__file-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.i-archive__file-wrap {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.i-archive__item-wrap {
|
||||
font-family: $main-font;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.w-calendar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.widget-title {
|
||||
text-align: center;
|
||||
border: 1px solid $theme-gray-subtle;
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
th {
|
||||
background: $theme-color-main;
|
||||
color: $theme-white;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px 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: 8px;
|
||||
left: 10px;
|
||||
color: $theme-color-main;
|
||||
}
|
||||
|
||||
.w-calendar-nav-next {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
// Faqs MODULES
|
||||
.widget-faqs {
|
||||
&.widget1 {
|
||||
.widget-content {
|
||||
padding-bottom: 10px;
|
||||
|
||||
& + .widget-content {
|
||||
border-top: 1px dotted $theme-gray-light;
|
||||
}
|
||||
|
||||
.widget-content-title {
|
||||
display: inline-block;
|
||||
padding: 5px 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: 1px dotted $theme-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
// Gallery MODULES
|
||||
.widget-gallery {
|
||||
.widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.widget-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.widget1 {
|
||||
.widget-content {
|
||||
overflow: hidden;
|
||||
|
||||
.widget-pic {
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
|
||||
@include size(33.3333%, auto);
|
||||
|
||||
img {
|
||||
@include size(100%, 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.widget2 {
|
||||
.widget-content {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
|
||||
.widget-pic {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
||||
img {
|
||||
@include size(100%, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-gallery {
|
||||
.index-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
&.index1 {
|
||||
.index-content {
|
||||
&:nth-child(4n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.index-part {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.index-content-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.index-content-title {
|
||||
font-family: $main-font;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.index-img-description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.index2 {
|
||||
.index-content {
|
||||
padding: 25px 15px;
|
||||
background: lighten($theme-gray, 60%);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
|
||||
@media screen and (max-width: $screen-sm) {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-content-inner {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.index-img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.index-content-title {
|
||||
font-family: $main-font;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.index-img-description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 2px;
|
||||
}
|
||||
|
||||
.show-content-inner {
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.show-description {
|
||||
font-family: $main-font;
|
||||
font-size: 13px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
//
|
||||
// Index
|
||||
//
|
||||
// Member Index
|
||||
// ## Gerneral styles for Index
|
||||
|
||||
// Index 1
|
||||
.index-member-1 {
|
||||
.i-member-tr-head {
|
||||
&:nth-child(1n+2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
th {
|
||||
background: lighten($theme-gray,20%);
|
||||
color: black;
|
||||
}
|
||||
td > a{
|
||||
color: $theme-gray-dark;
|
||||
&:hover{
|
||||
color: $theme-color-third;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Index 2
|
||||
.index-member-2 {
|
||||
.i-member-section {
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.i-member-status-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: none;
|
||||
border-radius: 0.25rem;
|
||||
padding: 24px 1rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.i-member-pic-wrap {
|
||||
height: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.i-member-pic {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.i-member-profile-list {
|
||||
@include list-reset;
|
||||
}
|
||||
|
||||
.i-member-profile-item {
|
||||
margin-bottom: 8px;
|
||||
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 {
|
||||
max-width: 500px;
|
||||
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: 5px;
|
||||
float: none;
|
||||
margin: 0 1% 30px;
|
||||
padding: 20px;
|
||||
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: 16px;
|
||||
}
|
||||
|
||||
.i-member-pic {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.i-member-profile-list {
|
||||
@include list-reset;
|
||||
}
|
||||
|
||||
.i-member-profile-item {
|
||||
margin-bottom: 8px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Index 4
|
||||
.index-member-4 {
|
||||
.i-member-section {
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.i-member-status-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
.i-member-item-inner {
|
||||
background: none;
|
||||
border-radius: 0.25rem;
|
||||
padding: 12px 1rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.i-member-profile-list {
|
||||
@include list-reset;
|
||||
}
|
||||
|
||||
.i-member-profile-item {
|
||||
margin-bottom: 8px;
|
||||
font-size: $font-13;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.i-member-item:nth-child(6n+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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show page
|
||||
.show-member {
|
||||
font-family: $sub-font;
|
||||
|
||||
th, td {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.member-plugins {
|
||||
margin: 20px 0;
|
||||
|
||||
a {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.modules-menu {
|
||||
overflow: hidden;
|
||||
font-family: $sub-font;
|
||||
font-size: $font-13;
|
||||
max-height: none;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
font-weight: 300;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
li {
|
||||
white-space: nowrap;
|
||||
|
||||
& > a,
|
||||
& > .fa {
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > a,
|
||||
& > .fa {
|
||||
color: $theme-white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modules-menu-level-0 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
float: none;
|
||||
|
||||
.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: -10px;
|
||||
right: -12px;
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
line-height: 40px;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// .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;
|
||||
padding: 0;
|
||||
float: none;
|
||||
margin: 1.5em 0;
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:hover > a {
|
||||
color: $theme-color-main;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
|
||||
.modules-menu-level-1 {
|
||||
top: 0;
|
||||
right: -120%;
|
||||
left: auto;
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
right: -90%;
|
||||
}
|
||||
|
||||
& > li {
|
||||
& > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modules-menu-level-2 {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
padding: 0;
|
||||
margin: .5em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > .fa {
|
||||
position: static;
|
||||
|
||||
@include size(auto, auto);
|
||||
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-size: 1em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > a {
|
||||
|
||||
}
|
||||
|
||||
.modules-menu-level-1 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modules-menu-level-1 {
|
||||
display: none;
|
||||
min-width: 100%;
|
||||
padding: 0;
|
||||
background-color: $theme-gray-dark;
|
||||
list-style: none;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 8px rgba(black,.6);
|
||||
|
||||
& > li {
|
||||
position: relative;
|
||||
padding: .8em 30px;
|
||||
|
||||
&:first-child{
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
@media(max-width:$screen-sm) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($theme-gray-darker, 5%);
|
||||
|
||||
& > a,
|
||||
& > .fa {
|
||||
color: $theme-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
margin-top: -0.5rem;
|
||||
|
||||
& > li {
|
||||
& > a {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
& > .fa {
|
||||
position: static;
|
||||
|
||||
@include size(auto, auto);
|
||||
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
line-height: 1;
|
||||
float: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.modules-menu-level-2 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
&:before {
|
||||
content: "\f105";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modules-menu-level-2 {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $theme-gray-darker;
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
& > a {
|
||||
display: block;
|
||||
padding: 15px 50px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($theme-gray-darker, 10%);
|
||||
|
||||
& > a {
|
||||
color: $theme-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: -6px;
|
||||
|
||||
@include arrow("right", 6px, 6px, $theme-gray-darker);
|
||||
}
|
||||
|
||||
& > li {
|
||||
padding-right: 15px;
|
||||
|
||||
& > a {
|
||||
padding-left: 15px;
|
||||
padding: 0.7em 0 0.7em 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
&:before {
|
||||
font-weight: 300;
|
||||
content: "\f105";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-mobile-dropdown {
|
||||
.modules-menu {
|
||||
.dropdown-toggle-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.plugin-show-table th {
|
||||
text-align: right;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
|
@ -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: 5px;
|
||||
font-size: 15px;
|
||||
list-style: outside none none;
|
||||
margin: 0 0 30px;
|
||||
min-height: 30px;
|
||||
overflow: hidden;
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
@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: 1px dotted $theme-gray-light;
|
||||
}
|
||||
|
||||
.widget-content-title {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// 在 layout-footer 下的樣式
|
||||
.layout-footer & {
|
||||
.widget-content {
|
||||
line-height: 2em;
|
||||
border-top-color: $theme-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link INDEX
|
||||
.index-link {
|
||||
.index-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
||||
&.index1 {
|
||||
.index-content {
|
||||
list-style-type: circle;
|
||||
list-style-position: inside;
|
||||
|
||||
& + .index-content {
|
||||
border-top: 1px dotted $theme-gray-light;
|
||||
}
|
||||
|
||||
.index-context {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
margin: 0 0 10px 2em;
|
||||
color: darken($theme-gray-light, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.index-content-title {
|
||||
font-family: $main-font;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// 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: 12pt;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#orbit-bar,
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
@import url("http://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/*";
|
||||
|
||||
.black-screen{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
top: -20000px;
|
||||
background: rgba(0,0,0,.7);
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
transition:opacity .3s ,top 0s .3s;
|
||||
&.active{
|
||||
opacity: 1;
|
||||
top:0;
|
||||
transition:opacity .3s;
|
||||
.content{
|
||||
transform:translate(-50%,-50%);
|
||||
opacity: 1;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
// box-shadow: #dcabff 0px 0px 150px;
|
||||
transition:opacity 1s .8s,top .5s .7s ;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background: #fff;
|
||||
color:#666;
|
||||
font-family: '微軟正黑體','sans-serif';
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left:-20000px;
|
||||
top:60%;
|
||||
transform:translate(-50%,-50%);
|
||||
transform-origin:center;
|
||||
width: 90%;
|
||||
font-weight: bold;
|
||||
transition:opacity .5s ,top .5s, left 0s .5s;
|
||||
padding: 2px;
|
||||
@media (min-width: 768px){
|
||||
width: 40%;
|
||||
padding: 30px;
|
||||
}
|
||||
.close-btn{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:-40px;
|
||||
padding: 5px 10px;
|
||||
background: $theme-color-main;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
transition:.3s;
|
||||
@media (min-width: 768px){
|
||||
top:0;
|
||||
}
|
||||
&:hover{
|
||||
background: $theme-color-second;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* <sm. orbit, ruling logo opacity:0 */
|
||||
@media (max-width: $screen-sm){
|
||||
#orbit-bar .orbit-bar-title{opacity: 0 !important;}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.widget-breadcrumb {
|
||||
&.widget1 {
|
||||
li {
|
||||
a {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
color: $theme-gray-dark;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
|
||||
.sitemenu-horizontal {
|
||||
padding: 10px 0;
|
||||
|
||||
@include clearfix;
|
||||
|
||||
.sitemenu-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sitemenu-item.level-1 {
|
||||
font-size: 0.8125rem;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 1%;
|
||||
margin-bottom: 12px;
|
||||
padding: 8px .8em;
|
||||
padding-bottom: 8px;
|
||||
color: $theme-white;
|
||||
border-radius: .2em;
|
||||
background: $theme-color-third;
|
||||
|
||||
&:hover {
|
||||
background: darken($theme-color-third, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.sitemenu-link.level-1 {
|
||||
margin-right: .25rem;
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
.sitemenu-dropdown-toggle {
|
||||
font-size: 0.75rem;
|
||||
padding: 2px .3125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// sitemenu dropdown
|
||||
.sitemenu-list.dropdown-menu {
|
||||
min-width: 100%;
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
border-radius: .2em;
|
||||
background: $theme-color-third;
|
||||
}
|
||||
|
||||
.sitemenu-link.level-2 {
|
||||
color: $theme-white;
|
||||
font-size: 0.8125rem;
|
||||
padding: 4px 0.625rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sitemenu-vertical {
|
||||
.sitemenu-list {
|
||||
background-color: $theme-color-third;
|
||||
}
|
||||
|
||||
.sitemenu-item.level-1 {
|
||||
border-bottom: 1px solid $theme-white;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
color: $theme-white;
|
||||
background-color: transparent;
|
||||
&:hover{
|
||||
background-color: darken($theme-color-third, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.sitemenu-link {
|
||||
font-size: 0.8125rem;
|
||||
color: $theme-white;
|
||||
}
|
||||
|
||||
.sitemenu-dropdown-toggle {
|
||||
font-size: 0.75rem;
|
||||
padding: 2px .3125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sitemenu-list.dropdown-menu {
|
||||
border: none;
|
||||
border-radius: .2em;
|
||||
background: $theme-color-main;
|
||||
}
|
||||
|
||||
.sitemenu-link.level-2 {
|
||||
color: $theme-white;
|
||||
font-size: 0.8125rem;
|
||||
padding: 4px 0.625rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<footer class="layout-footer no-print">
|
||||
<section class="layout-slide no-print single-child-datapp" data-pp="380"></section>
|
||||
<div class="layout-footer-inner">
|
||||
<div class="layout-footer-content">{{footer-data}}</div>
|
||||
<div class="footer-counter">{{site-counter}}</div>
|
||||
<div class="footer-updated-date">{{last-updated}}</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.0";
|
||||
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>
|
||||
|
||||
<header class="navbar layout-header collpse-nav no-print" role="navigation">
|
||||
|
||||
<div class="header-nav" >
|
||||
<a id="accesskey_top" accesskey="Q" href="/<%= "#{locale.to_s}" %>/accesskey" 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 class="collapse navbar-collapse modules-menu" id="layout-navigation">
|
||||
<a id="accesskey_menu" accesskey="M" href="/<%= "#{locale.to_s}" %>/accesskey" title="Main menu">:::</a>
|
||||
<%= render_menu %>
|
||||
<section class="underMenu" data-pp="20"></section>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<html lang="<%= I18n.locale.to_s %>" class="orbit">
|
||||
<head>
|
||||
<%= render_partial("head") %>
|
||||
</head>
|
||||
<body class="page-home">
|
||||
<%= render_orbit_bar %>
|
||||
<%= render_header %>
|
||||
|
||||
<div class="main-section">
|
||||
<div class="black-bg"></div>
|
||||
<div class="banner-top">
|
||||
<a id="accesskey_top" accesskey="Q" href="/<%= "#{locale.to_s}" %>/accesskey" title="Toolbar">:::</a>
|
||||
<a id="accesskey_menu" accesskey="M" href="/<%= "#{locale.to_s}" %>/accesskey" title="Main menu">:::</a>
|
||||
</div>
|
||||
<section class="layout-slide no-print single-child-datapp" data-pp="300"></section>
|
||||
<section class="layout-slide no-print single-child-datapp" data-pp="301"></section>
|
||||
<div class="layout-content">
|
||||
<a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
|
||||
<div class="layout-content-inner">
|
||||
<section class="layout-content-box" data-pp="1"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-8" data-pp="3"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="4"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="5"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="6"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="7"></section>
|
||||
<section class="layout-content-box col-sm-12" data-pp="8"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-8" data-pp="9"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="10"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="11"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="12"></section>
|
||||
<section class="layout-content-box col-sm-12 col-md-4" data-pp="13"></section>
|
||||
<div>
|
||||
<section class="layout-content-box" data-pp="14"></section>
|
||||
<section class="layout-content-box" data-pp="2"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="black-screen">
|
||||
<div class="content">
|
||||
<div data-pp='1000'></div>
|
||||
<a href='javascript:;' class="close-btn">
|
||||
<i class="fa fa-times"></i>
|
||||
</a >
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<%= render_footer %>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<ul id="main-nav" class="navbar-nav modules-menu-level-0 nav-level-0 no-print" data-menu-level="0">
|
||||
<li>
|
||||
<a href="" 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="" data-menu-link="true">{{link_name}}</a>
|
||||
<ul class="modules-menu-level-2 nav-level-2" data-menu-level="2">
|
||||
<li>
|
||||
<a href="" data-menu-link="true">{{link_name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<html lang="<%= I18n.locale.to_s %>" class="orbit">
|
||||
<head>
|
||||
<%= render_partial("head") %>
|
||||
</head>
|
||||
<body class="internal-page">
|
||||
<%= render_orbit_bar %>
|
||||
<%= render_header %>
|
||||
|
||||
<div class="main-section">
|
||||
<div class="black-bg"></div>
|
||||
<div class="banner-top">
|
||||
|
||||
</div>
|
||||
<section class="layout-slide no-print single-child-datapp" data-pp="300"></section>
|
||||
<div class="layout-content">
|
||||
<div class="layout-content-inner">
|
||||
<div class="breadcrumb-wrap" data-pp="500"></div>
|
||||
<div class="innerpage row">
|
||||
<aside class="layout-content-box aside right-column col-sm-3" data-pp="13"></aside>
|
||||
<section class="layout-content-box innerpage 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 %>
|
||||
<!-- line share button -->
|
||||
<div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja"></div>
|
||||
<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer"></script>
|
||||
<!-- we chat share button -->
|
||||
<a href="http://service.weibo.com/share/share.php?url=<%= "http://#{request.host_with_port}#{request.original_fullpath}" %>" target="_blank">
|
||||
<img style="border: 0;width: auto;" src="http://www.sinaimg.cn/blog/developer/wiki/LOGO_48x48.png" alt="sina-weibo" />
|
||||
</a>
|
||||
<div class="extra" data-pp="700"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<%= render_footer %>
|
||||
</div>
|
||||
</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,30 @@
|
|||
<div class="w-ba-banner ba-banner-widget-1">
|
||||
<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-overlay="[data-pager='#{{subpart-id}}']+.w-ba-banner__caption"
|
||||
data-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
data-cycle-timeout="{{timeout}}"
|
||||
data-cycle-fx="{{ad_fx}}"
|
||||
data-pager="#{{subpart-id}}"
|
||||
data-pager-template="<li><a href='#'></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
>
|
||||
<div class="w-ba-banner__slide {{class}}"
|
||||
data-link="{{link}}"
|
||||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-overlay-template="<h2>{{title}}</h2>{{desc}}"
|
||||
data-target="{{target}}"
|
||||
>
|
||||
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ba-banner__caption"></div>
|
||||
<ul id="{{subpart-id}}" class="w-ba-banner__pager-1 banner-pager"></ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<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-overlay="[data-subpart-id='{{subpart-id}}']+.w-ba-banner__caption"
|
||||
data-pager="[data-subpart-id='{{subpart-id}}']+.w-ba-banner__pager"
|
||||
data-pager-template="<li><a href='#'></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
data-cycle-youtube=true
|
||||
data-cycle-youtube-autostart=false
|
||||
data-subpart-id="{{subpart-id}}"
|
||||
>
|
||||
{{html}}
|
||||
</div>
|
||||
<ul class="w-ba-banner__pager"></ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<div class="w-ba-banner ba-banner-widget-2 ba-banner-widget-youtube">
|
||||
<div class="w-ba-banner__wrap cycle-slideshow"
|
||||
data-list="images"
|
||||
data-level="0"
|
||||
data-cycle-timeout="3000"
|
||||
data-cycle-slides=".w-ba-banner__slide"
|
||||
data-cycle-log="false"
|
||||
data-overlay="[data-subpart-id='{{subpart-id}}']+.w-ba-banner__caption"
|
||||
data-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
data-cycle-timeout="{{timeout}}"
|
||||
data-cycle-fx="{{ad_fx}}"
|
||||
data-pager="[data-subpart-id='{{subpart-id}}']+.w-ba-banner__pager-2"
|
||||
data-pager-template="<li><a href='#'></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
data-cycle-youtube="true"
|
||||
data-cycle-youtube-autostart="false"
|
||||
data-subpart-id="{{subpart-id}}">
|
||||
|
||||
{{html}}
|
||||
</div>
|
||||
<ul class="w-ba-banner__pager-2 banner-pager"></ul>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
if (typeof ad_banners_count === 'undefined'){
|
||||
var ad_banners_count = 0;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
$("document").ready(function(){
|
||||
$("*[data-yt-binded=0]").each(function(){
|
||||
$(this).attr("data-yt-binded","1");
|
||||
var obj = $(this).find("iframe");
|
||||
obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
|
||||
ad_banners_count++;
|
||||
})
|
||||
});
|
||||
|
||||
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
||||
function onYouTubeIframeAPIReady(){
|
||||
$(".w-ba-banner iframe[data-yt-api-binded=0]").each(function(){
|
||||
$(this).attr("data-yt-api-binded","1");
|
||||
new YT.Player($(this).attr("id"), {
|
||||
events: {
|
||||
'onStateChange': onPlayerStateChange
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function onPlayerStateChange(event){
|
||||
var iframe = $(event.target.getIframe()),
|
||||
cyclediv = iframe.parents("div.cycle-slideshow");
|
||||
if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
|
||||
cyclediv.cycle("pause");
|
||||
}else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
|
||||
cyclediv.cycle("resume");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<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-pager="#{{subpart-id}}"
|
||||
data-pager-template="<li><a href='#'></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
>
|
||||
<div class="w-ba-banner__slide {{class}}"
|
||||
data-link="{{link}}"
|
||||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-overlay-template="<h2>{{title}}</h2>{{desc}}"
|
||||
data-target="{{target}}"
|
||||
>
|
||||
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</div>
|
||||
</div>
|
||||
<ul id="{{subpart-id}}" class="w-ba-banner__pager-3 banner-pager"></ul>
|
||||
</div>
|
||||
|
|
@ -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}}">
|
||||
<img class="w-ba-banner__image" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div class="w-ba-banner ba-banner-widget-5">
|
||||
<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-overlay=".aa{{subpart-id}}"
|
||||
data-cycle-auto-height="{{base_image}}"
|
||||
data-cycle-speed="{{speed}}"
|
||||
data-cycle-timeout="{{timeout}}"
|
||||
data-cycle-fx="{{ad_fx}}"
|
||||
data-pager="#{{subpart-id}}"
|
||||
data-pager-template="<li><a href='#'></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
>
|
||||
<div class="w-ba-banner__slide {{class}}"
|
||||
data-link="{{link}}"
|
||||
data-cycle-title="{{title}}"
|
||||
data-cycle-desc="{{context}}"
|
||||
data-overlay-template="<h2>{{title}}</h2>{{desc}}"
|
||||
data-target="{{target}}"
|
||||
>
|
||||
<img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="aa{{subpart-id}} w-ba-banner__caption"></div>
|
||||
<ul id="{{subpart-id}}" class="w-ba-banner__pager-1 banner-pager"></ul>
|
||||
</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_widget3",
|
||||
"name" : {
|
||||
"zh_tw" : "2. 橫幅輪播 ( 圖片, 導航圖示 )",
|
||||
"en" : "2. Carousel ( image, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "ad_banner_widget4",
|
||||
"name" : {
|
||||
"zh_tw" : "3. 廣告輪播 ( 圖片 )",
|
||||
"en" : "3. 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"
|
||||
},
|
||||
{
|
||||
"filename" : "ad_banner_widget5",
|
||||
"name" : {
|
||||
"zh_tw" : "5. footer橫幅輪播 ( 圖片, 圖片說明文字, 導航圖示 )",
|
||||
"en" : "5. footer Carousel ( image, description, navigation )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<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">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}">Read more</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">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<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}}">Read more</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">
|
||||
<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}}">Read more</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}}">Read more</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}}">Read more</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-xs-4 bullseye">
|
||||
<img class="w-annc__img" src="{{main_picture}}" alt="{{main_picture_description}}" title="{{main_picture_description}}">
|
||||
</div>
|
||||
<ul class="w-annc__list col-xs-8" 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">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<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}}">Read more</a>
|
||||
</div>
|
||||
</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">
|
||||
<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 class="w-annc__more-wrap clearfix">
|
||||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}">Read more</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">
|
||||
<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>
|
||||
<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}}">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<div class="w-annc widget-announcement-4">
|
||||
<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 row col-md-4">
|
||||
<div class="w-annc__img-wrap bullseye col-xs-5 col-md-12">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__content-wrap col-xs-7 col-md-12">
|
||||
<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" href="{{more_url}}">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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">
|
||||
<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>
|
||||
<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}}">Read more</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">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<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">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<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}}">Read more</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">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<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">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<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}}">Read more</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}}">Read more</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}}">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="i-annc index-announcement-1 {{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--category">{{category-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__category">{{category}}</td>
|
||||
<td class="i-annc__content">
|
||||
<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"><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="i-annc index-announcement-10">
|
||||
<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__postdate-wrap col-sm-2" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</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__category-wrap col-sm-2">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="i-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="i-annc index-announcement-11">
|
||||
<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">
|
||||
<h4 class="i-annc__entry-title col-sm-9">
|
||||
<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-3" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="i-annc index-announcement-12">
|
||||
<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__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<h4 class="i-annc__entry-title col-sm-9">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<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">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__content">
|
||||
<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">{{postdate}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<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">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
<td class="i-annc__content">
|
||||
<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,25 @@
|
|||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category">{{view-count-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
<td class="i-annc__content">
|
||||
<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">{{view_count}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div class="i-annc index-announcement-16 {{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">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{link-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{file-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
<td class="i-annc__content">
|
||||
<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__links">
|
||||
<ul data-list="bulletin_links" data-level="1">
|
||||
<li>
|
||||
<a class="i-annc__title" href="{{link_url}}">{{link_title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="i-annc__files">
|
||||
<ul data-list="bulletin_files" data-level="1">
|
||||
<li>
|
||||
<a class="i-annc__title" href="{{file_url}}">{{file_title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="i-annc index-announcement-2 {{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--category">{{category-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category">{{view-count-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__category">{{category}}</td>
|
||||
<td class="i-annc__content">
|
||||
<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"><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||
<td class="i-annc__view-count">{{view_count}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="i-annc index-announcement-3 {{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">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category">{{category-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate"><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||
<td class="i-annc__content">
|
||||
<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">{{category}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="i-annc index-announcement-4 {{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">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category">{{category-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category">{{view-count-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-level="0" data-list="announcements">
|
||||
<tr>
|
||||
<td class="i-annc__postdate"><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||
<td class="i-annc__content">
|
||||
<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">{{category}}</td>
|
||||
<td class="i-annc__view-count">{{view_count}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div class="i-annc index-announcement-5">
|
||||
<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">
|
||||
<div class="i-annc__img-wrap col-sm-4">
|
||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<div class="i-annc__content-wrap col-sm-8">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="i-annc__category-wrap">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="i-annc__category">{{category}}</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>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div class="i-annc index-announcement-6">
|
||||
<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">
|
||||
<div class="i-annc__content-wrap col-sm-8">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="i-annc__category-wrap">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="i-annc__category">{{category}}</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>
|
||||
<div class="i-annc__img-wrap col-sm-4">
|
||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div class="i-annc index-announcement-7">
|
||||
<h3 class="i-annc__page-title">{{page-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__img-wrap bullseye">
|
||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="i-annc__content-wrap">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="i-annc__category-wrap">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="i-annc__category">{{category}}</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>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="i-annc index-announcement-8">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<ul class="i-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="i-annc__item">
|
||||
<div class="i-annc__content-wrap">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="i-annc__category-wrap">
|
||||
<i class="fa fa-tasks"></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>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="i-annc index-announcement-9">
|
||||
<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">
|
||||
<i class="fa fa-tasks"></i>
|
||||
<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">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue