First push.

This commit is contained in:
BoHung Chiu 2021-09-13 10:47:54 +08:00
commit e5f141ce0f
332 changed files with 12881 additions and 0 deletions

0
README.md Normal file
View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/images/arr.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/images/left-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
assets/images/next.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
assets/images/prev.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
assets/images/right-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
assets/images/site-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

650
assets/javascripts/app.js Normal file
View File

@ -0,0 +1,650 @@
;(function($, win, undefined) {
// ECMAScript 5 嚴格模式
'use strict';
// 初始函數: 把所有的程式碼都包在init裡面方便在之後的jQuery ready 函數裡一次呼叫
function init() {
// 快取一些常用的變數
var doc = document;
var lang = doc.documentElement.lang;
var pageModule = doc.body.getAttribute('data-module');
var resizeTimer = -1;
// 把所有的函數都包在orbit這個物件裡並按模組做簡單的分類
var orbit = {
// 工具函數,裡面包含可以重覆使用的函數
utils: {
// 字數限制函數, 因為系統預設沒有所以使用JS來做
// els = 元素, maxLen = 限制長度
truncateText: function(els, maxLen) {
var els = doc.querySelectorAll(els);
var newTitle = '';
var i = -1;
var elsLen = els.length;
for (i = 0; i < elsLen; i++) {
if (els[i].firstChild !== null) {
if (els[i].firstChild.length > maxLen) {
newTitle = els[i].firstChild.textContent;
els[i].textContent = newTitle.substring(0, maxLen) + '...';
}
}
}
}
},
// 外掛,所有的外掛都可以放到這個物件裡
plugins: {
// 自適應圖片裁切Ray的外掛
bullEye: function() {
$('.bullseye').bullseye({
fadeEffect: false
});
}
},
// nav: {
// 自適應使用的下拉選單
// setDropdown: function() {
// var $caret1 = $('<i class="dropdown-toggle-icon level-1 fa fa-chevron-down"></i>');
// var $caret2 = $('<i class="dropdown-toggle-icon level-2 fa fa-chevron-down"></i>');
// var $li = null;
// var $this = null;
// var cls = 'active';
// var iconDown = 'fa-chevron-down';
// var iconUp = 'fa-chevron-up';
// // 如果有第二層選單新增對應的類別到parent元素上
// $('.nav-level-1')
// .parent('li')
// .addClass('has-dropdown level-1');
// // 檢查是否已經有dropdown-toggle-icon這個元素才不會在resize事件中重覆新增
// if ($('.has-dropdown.level-1 > .dropdown-toggle-icon').length < 1) {
// $caret1.appendTo('.has-dropdown.level-1');
// // 如果有第三層選單新增對應的類別到parent元素上
// $('.nav-level-2')
// .parent('li')
// .addClass('has-dropdown level-2');
// $caret2.appendTo('.has-dropdown.level-2');
// }
// // 綁定事件到第二、三層下拉選單的按鈕上
// $('.dropdown-toggle-icon.level-1, .dropdown-toggle-icon.level-2').on('vclick', function(e) {
// e.preventDefault();
// $this = $(this);
// $li = $this.parent('li');
// // 拿掉所有選項除了目前點選的選項的 active class 並把icon換成預設的
// $li
// .siblings('li')
// .removeClass(cls)
// .find('.' + iconUp)
// .removeClass(iconUp)
// .addClass(iconDown);
// // 換掉目前選項的icon
// $li
// .find('> i')
// .removeClass(iconDown)
// .addClass(iconUp);
// // 折疊已打開的選項
// if ( $li.hasClass(cls) ){
// $li.removeClass(cls);
// $this.removeClass(iconUp).addClass(iconDown);
// }
// else{
// $li.addClass(cls)
// $this.removeClass(iconDown).addClass(iconUp);
// }
// });
// },
// 移除行動版下拉選單
// removeDropdown: function() {
// var $nav = $('#main-nav');
// $nav
// .find('.dropdown-toggle-icon')
// .remove();
// $nav
// .find('.active')
// .removeClass('active');
// }
// },
member: {
// 欄位相同高度,小心這個函數沒有計算到圖片高度,所以可能要搭配 jQuery load函數使用或是之後使用更好的方式例如 CSS3 flexbox
equalHeight: function(el) {
var bigbrother = -1;
var $el = $(el);
$el.each(function(i) {
bigbrother = bigbrother > $el.eq(i).height() ? bigbrother : $el.eq(i).height();
});
$el.height(bigbrother);
},
// 把沒有完成資料的表格列藏起來, 因為後台不管有沒有資料都會輸出項目,所以需要在前台藏起來…
removeEmptyRow: function() {
// index 頁面項目
$('.i-member-profile-item .i-member-value').each(function() {
if ($(this).text().trim() === '' || $(this).text().trim() === ':') {
$(this).parent().addClass('hide');
}
});
// show 頁面項目
$('.show-member .member-data th, .show-member .member-data td').each(function() {
if ($(this).text().trim() === '') {
$(this).parent('tr').addClass('hide');
}
});
},
},
archives: {
// 把沒有文字內容的標題藏起來因為就算是標題裡沒有文字系統仍然會輸出這樣會造成一些多餘的CSS margins, paddings或許之後也可以使用 CSS3 :empty selector 處理
// el = 要移除的元素
removeEmptyTitle: function(el) {
var $el = $(el);
var $els = $el.children();
$.each($els, function(i, val) {
if ($els.eq(i).text().trim() === '') {
$els.eq(i).addClass('hide');
}
});
$.each($el, function(i, val) {
if ($el.eq(i).children('.hide').length >= 2) {
$el.eq(i).addClass('hide');
}
});
},
// bootstarp panel 功能擴充因為原本的功能不支援多個panel
extendPanel: function() {
var len = $('.i-archive .panel-title').length;
var i = -1;
if (len > 0) {
// 新增數字到要對應的panel按鈕id及href上面
for (i = 0; i < len; i++) {
$('.panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
$('.panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
}
}
}
},
adBanner: {
// 讓AD banner 的圖片可以點選,因為系統預設輸出的圖片是沒有連結的
// els = 要可以點選的元素(需要配合有data-link這個參數及data-targe才能使用)
addLinkOnADBanner: function(els) {
$.each(els, function() {
if ($(this).data('link') !== '' && !$(this).hasClass('youtube')) {
$(this).on('click', function() {
var target = $(this).data('target');
var link = $(this).data('link');
// 設定頁面打開的方式記得要加上data-target在HTML裡面
if (target === '_blank') {
window.open(link, target);
} else {
window.location.href = link;
}
}).addClass('cursor'); // cursor類別樣式定義在CSS裡面
}
});
},
},
// 移除行動版下拉選單
removeDropdown: function() {
var $nav = $('#main-nav');
$nav
.find('.menu-drop')
.remove();
$nav
.find('.opened')
.removeClass('opened');
},
// 網站次選單設定如果次選單有第三層就新增下拉選單的圖示及加上bootstrap class
// els = 選單元素
sitemenuDropdown: function(els) {
var els = doc.querySelectorAll('.sitemenu-list.level-2');
var len = els.length;
var i = -1;
var caret = null;
for (i = 0; i < len; i++) {
if (els[i].children.length) {
caret = doc.createElement('span');
caret.className = 'sitemenu-dropdown-toggle fa fa-caret-down';
caret.setAttribute('data-toggle', 'dropdown');
els[i].parentNode.insertBefore(caret, els[i]);
els[i].className += ' dropdown-menu';
}
}
},
// 回到頁面最頂端動態產生DOM
// txt = 按鈕的文字, speed = 捲動時的速度
goBackTop: function(txt, speed) {
var top = document.createElement('div');
top.className = 'go-back-top no-print';
top.textContent = txt || 'top';
doc.body.appendChild(top);
// 判斷是否顯示按鈕
$(window).scroll(function() {
if ($(this).scrollTop() !== 0) {
$('.go-back-top').fadeIn();
} else {
$('.go-back-top').fadeOut();
}
});
// 捲動效果
$('.go-back-top').on('click', function() {
$('body, html').animate({
scrollTop: 0
}, speed || 300);
return false;
});
},
// Multi-column layout, passing ID or class string as parameters and a
// Bootstrap col class for full width, eg: col-md-12
setColumn: function(leftCol, rightCol, columnCls) {
var $leftCol = $(leftCol);
var $rightCol = $(rightCol);
var columnCls = columnCls || 'col-sm-12';
if ($leftCol.length && $rightCol.length) {
$.each([$leftCol, $rightCol], function() {
if ($(this).is(':empty')) {
$(this)
.addClass('empty-column')
.siblings()
.removeClass(function(index, css) {
return (css.match(/(^|\s)col-\S+/g) || []).join(' ');
})
.addClass(columnCls);
}
});
}
},
MobileMenu: function() {
var $menu = $('[data-menu-level="0"]');
$menu.find('ul[data-menu-level="1"]').parent().addClass('mobile-menu1');
$menu.find('ul[data-menu-level="2"]').parent().addClass('mobile-menu2');
var $caret1 = $('<span class="menu-drop"><i class="dropdown-toggle-icon level-1 fa fa-chevron-down"></i></span>');
var $caret2 = $('<span class="menu-drop"><i class="dropdown-toggle-icon level-2 fa fa-chevron-down"></i></span>');
// 如果有第二層選單新增對應的類別到parent元素上
$('.nav-level-1')
.parent('li')
.addClass('has-dropdown level-1');
// 檢查是否已經有dropdown-toggle-icon這個元素才不會在resize事件中重覆新增
if ($('.has-dropdown.level-1 .menu-drop').length < 1) {
$('.mobile-menu1').append($caret1);
// 如果有第三層選單新增對應的類別到parent元素上
$('.nav-level-2')
.parent('li')
.addClass('has-dropdown level-2');
$caret2.appendTo('.has-dropdown.level-2');
}
},
ClickMenuHandler: function() {
$('.navbar-toggle').click(function(e){
e.preventDefault();
$('.mobile-menu').toggleClass('active');
$('body').toggleClass('noscroll');
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
// $menu.slideToggle();
$('.mobile-menu1 > ul').slideUp(500);
$('.mobile-menu1 > .menu-drop').removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
})
$('.mobile-menu1 > .menu-drop').click(function(){
var $that = $(this);
var opencheck1 = $that.hasClass('opened');
if ( opencheck1 == 0 ) {
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck1 == 1) {
$that.siblings('ul').slideUp(500);
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.removeClass('opened');
}
})
$('.mobile-menu2 > .menu-drop').click(function(){
var $that = $(this);
var opencheck2 = $that.hasClass('opened');
if ( opencheck2 == 0 ) {
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck2 == 1) {
$that.siblings('ul').slideUp(500);
$that.removeClass('opened');
}
})
}
};
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會
win.ORBITFRONT = orbit;
// 在switch裡測試頁面模組後執行對應的函數
switch (pageModule) {
case 'home':
break;
case 'member':
orbit.member.removeEmptyRow();
$('.index-member-3 .member-data-title-email').empty();
break;
case 'archive':
orbit.archives.removeEmptyTitle('.i-archive__category-item');
orbit.archives.extendPanel();
break;
case 'gallery':
orbit.utils.truncateText('.show-description', 15);
break;
default:
break;
}
// 在所有的頁面(包含首頁)執行下面這幾個函數
orbit.sitemenuDropdown();
orbit.goBackTop('top', 800);
orbit.plugins.bullEye();
orbit.setColumn('.left-column', '.right-column');
// 自適應網頁使用當網頁載入時如果視窗寬度小於768就執行orbit.nav.setDropdown函數
if ($(window).width() < 768) {
// orbit.nav.setDropdown();
orbit.MobileMenu();
$('.mobile-menu').append($('.modules-menu'));
orbit.ClickMenuHandler();
}
// 自適應網頁使用當使用者改變瀏覽器寬度時呼叫orbit.nav.setDropdown函數
$(window).resize(function() {
if ($(window).width() < 768) {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ( $('.modules-menu i').length == 0 ) {
orbit.MobileMenu();
}
if( $('.mobile-menu .modules-menu').length == 0 ) {
$('.mobile-menu').append($('.modules-menu'));
$('.navbar-toggle').bind(orbit.ClickMenuHandler());
}
},500 )} else {
resizeTimer = setTimeout(function(){
if( $('.mobile-menu .modules-menu').length > 0 ) {
$('.layout-header .container').append($('.modules-menu'));
}
orbit.removeDropdown();
}, 500);
}
});
function forFreeGo() {
// 幫有連結目的之所有a標籤加上title
for(var i=0;i<$('a').length;i++){
if($('a').eq(i).attr("href") != "" || $('a').eq(i).attr("href") != undefined ){
var titlestr="";
if($('a').eq(i).attr('target')=='_self')
titlestr += '在本視窗開啟 ';
else if($('a').eq(i).attr('target') == '_blank')
titlestr += '在新視窗開啟 ';
if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title')==undefined && $('a').eq(i).html().search('</') == -1)
titlestr += $('a').eq(i).html().trim();
else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined && $('a').eq(i).find('>span').length==1)
titlestr += $('a').eq(i).find('>span').html().trim();
else if($('a').eq(i).attr('title') == "" || $('a').eq(i).attr('title') == undefined){
try{
if($('a').eq(i).html().trim().split('>').length==2)
titlestr += $('a').eq(i).html().trim().split('>')[1].trim();
else if($('a').eq(i).html().trim().split('>').length==3)
titlestr += $('a').eq(i).html().trim().split('>')[2].trim();
}catch(e){};
}
else
titlestr += $('a').eq(i).attr('title');
if(titlestr.search('<img') != -1)
titlestr = "這是一張照片";
if(titlestr != "")
$('a').eq(i).attr('title',titlestr);
};
};
// 刪除banner-slide的空連結和空連結目標
for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
$('.w-ba-banner__slide a').eq(i).removeAttr('href');
if($('.w-ba-banner__slide a').eq(i).attr('target') == "")
$('.w-ba-banner__slide a').eq(i).removeAttr('target');
};
// 幫無標題之iframe加上title
for(var i=0;i<$('iframe').length;i++)
if($('iframe').eq(i).attr('title')=="" || $('iframe').eq(i).attr('title')== undefined ){
if($('iframe').eq(i).attr('src').search('facebook') != -1 )
$('iframe').eq(i).attr('title','facebook');
else if($('iframe').eq(i).attr('src').search('google') != -1 )
$('iframe').eq(i).attr('title','google');
else if($('iframe').eq(i).attr('src').search('youtube') != -1 )
$('iframe').eq(i).attr('title','youtube');
else if($('iframe').eq(i).attr('src').search('twitframe') != -1 )
$('iframe').eq(i).attr('title','twitter');
else
$('iframe').eq(i).attr('title','unknown');
};
// 刪除空的檔案室
var archievelen = $('dd a.i-archive-files-item').length;
for(i=archievelen-1;i>=0;i--)
if($('dd a.i-archive-files-item').eq(i).html().trim()=="")
$('dd a.i-archive-files-item').eq(i).parent('dd').remove();
// 刪除具有空連結欄位的橫列
for(var i = 0;i < $('*[data-list] tr td a').length ; i++)
if($('*[data-list] tr td a').eq(i).html().trim()=="")
$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
$('.nav-level-0>li>a').focus(function(e) {
e.stopPropagation();
$(this).parent().focus();
if ($(this).parent().find('.nav-level-1').hasClass('show')) {
} else {
$('.nav-level-1').removeClass('show');
$(this).parent().find('.nav-level-1').addClass('show');
}
});
$('.nav-level-1>li>a').focus(function(e) {
e.stopPropagation();
if ($(this).parent().find('.nav-level-2').hasClass('show')) {
}else{
$('.nav-level-2').removeClass('show');
$(this).parent().find('.nav-level-2').addClass('show');
}
});
$('show').parent('li').focus();
}
forFreeGo();
//背景widget設定
if ( location.href.search('editmode=on') != -1 ) {
$('.background').css('z-index','0');
} else {
$('.background').css('z-index','-1');
};
//header banner setting
if ( location.href.search('editmode=on') != -1 ) {
$('.header-banner').css('z-index','2');
} else {
$('.header-banner').css({
'position': 'absolute',
'top': '0',
'z-index': '-2',
});
};
//公告頁籤
function annc_widget_nav() {
$('.tab_nav').nextAll().addClass('tab_content');
$('.tab_content').css("display","none");
$('.tab_content').eq(0).css('display', 'block');
var num = $('.tab_nav li').length;
$('.tab_content').eq(num).css('display', 'block');
$('.tab_content').eq(num).nextAll().css('display', 'block');
$('.tab_nav li').off('click').on('click',function() {
$('.tab_nav li').removeClass('active');
$(this).addClass('active');
var fa = $(this).index();
$('.tab_content').attr('style','');
$('.tab_content').css("display","none");
$('.tab_content').eq(fa).css('display','block');
var num = $('.tab_nav li').length;
$('.tab_content').eq(num).css('display', 'block');
$('.tab_content').eq(num).nextAll().css('display', 'block');
});
var url = window.location.search;
if (url == "?editmode=on") {
$('.tab_content').css({'position': 'relative','display':'block'});
}
}
annc_widget_nav();
//切換語言停留在同一頁
if(window.location.pathname!="/")
$("#en").attr("href",window.location.pathname.replace("zh_tw","en"))
//檔案室 下載檔案 hover 彈出備註訊息
$('[data-toggle="tooltip"]').tooltip()
//下載檔案格式dot pdf分色
$(".i-archive .label.label-primary").each(function() {
var downloadType = $(this).text();
$(this).addClass(downloadType);
})
//檔案室模組 Widget 手風琴
function extendPanelWidget() {
var len = $('.panel-title').length;
var i = -1;
if (len > 0) {
// 新增數字到要對應的panel按鈕id及href上面
for (i = 0; i < len; i++) {
$('.panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
$('.panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
}
}
}
extendPanelWidget();
// member show tab scroll
$('.nav-pills').scrollingTabs({
scrollToTabEdge: true,
enableSwiping: true,
leftArrowContent: [
'<div class="scrtabs-tab-scroll-arrow custom-scroll-arrow"><i class="fa fa-caret-left" aria-hidden="true"></i>',
'</div>'
].join(''),
rightArrowContent: [
'<div class="scrtabs-tab-scroll-arrow custom-scroll-arrow"><i class="fa fa-caret-right" aria-hidden="true"></i>',
'</div>'
].join('')
});
}
// $(document).ready(function(){
//
// var box=$(".w-annc__widget-title span").txt();
//
// if(box==null||box==""){
//
//
//
// $('.w-annc__widget-title span').css('border-left','0');
//
// }
//
// });
// $(document).ready(function(){
// $(".w-annc__widget-title span").each(function(){
// if($(this).find("span:eq(0)").text()==""){
// $(this).css('border-left','0');
// }else{
// $(this).css("border-left","4px solid #288e8e");
// }
// });
// });
// 當文件物件模型(DOM)載入後執行init函數
$(document).ready(function() {
// if ($(".w-annc__widget-title span").length==$0) {
// }
// $('.w-annc__widget-title span').css('border-left','0');
//
// }
//RWD 自動縮放headerbannner
function headerH() {
if ($(window).width() < 768) {
const navH = $('.layout-header .navbar-header').outerHeight();
}
}
headerH();
$(window).resize(function() {
headerH();
})
init();
});
$(window).load(function(){
$("iframe[src*='google']").attr('title','googleOauth');
});
// 執行 member等高計算目前改用flexbox故mark掉 by ika 20160105
// $(window).load(function() {
// if ($('.index-member-3').length && $(window).width() > 992) {
// ORBITFRONT.member.equalHeight('.i-member-item-inner');
// }
// });
}(jQuery, window));

View File

@ -0,0 +1 @@
!function($){"use strict";var t={fadeEffect:!0,effectTime:.5},i=$(window),e=function(t,i){var e=document.createElement("img"),s;t.data("bullseyeImage")?(t.html('<img src="'+t.data("bullseyeImage")+'">'),s=t.data("bullseyeImage")):(s=t.find("img").first().attr("src"),t.data("bullseyeImage",s)),i.fadeEffect&&t.find("img").first().css({opacity:0}),e.src=s,e.onload=function(){n(t,i)}},n=function(t,i){var e=t.find("img").first(),n={position:"relative",overflow:"hidden"},o={position:"absolute",top:0,right:0,bottom:0,left:0,margin:"auto",width:"100%",height:"auto"},a={start:{opacity:1,"-webkit-transition":"opacity "+i.effectTime+"s ease-in-out","-moz-transition":"opacity "+i.effectTime+"s ease-in-out","-o-transition":"opacity "+i.effectTime+"s ease-in-out",transition:"opacity "+i.effectTime+"s ease-in-out"},end:{opacity:"","-webkit-transition":"","-moz-transition":"","-o-transition":"",transition:""}};t.css(n),e.css(o),s(t),i.fadeEffect&&e.css(a.start).on("transitionend",function(){$(this).css(a.end)})},s=function(t){var i=t.find("img").first(),e=t.innerHeight(),n,s;n=i.height(),e>n?(s=e/n,i.css({"-webkit-transform":"scale("+s+")","-moz-transform":"scale("+s+")","-o-transform":"scale("+s+")",transform:"scale("+s+")"})):i.css({"-webkit-transform":"","-moz-transform":"","-o-transform":"",transform:""})},o=function(t,n){e(t,n),i.on("resize",function(){s(t)})};$.fn.bullseye=function(i){var e=$.extend({},t,i);return this.each(function(){var t=$(this);o(t,e)})}}(window.jQuery);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,959 @@
//
// Mixins
// --------------------------------------------------
// Utilities
// -------------------------
// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// WebKit-style focus
@mixin tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
@mixin size($width, $height) {
width: $width;
height: $height;
}
@mixin square($size) {
@include size($size, $size);
}
// Placeholder text
@mixin placeholder($color: $input-color-placeholder) {
&::-moz-placeholder { color: $color; // Firefox
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
}
// Text overflow
// Requires inline-block or block for proper styling
@mixin text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
@mixin hide-text() {
font: #{0/0} a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
@mixin text-hide() {
@include hide-text();
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support the
// standard `box-shadow` property.
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
// Transitions
@mixin transition($transition...) {
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-property($transition-property...) {
-webkit-transition-property: $transition-property;
transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration...) {
-webkit-transition-duration: $transition-duration;
transition-duration: $transition-duration;
}
@mixin transition-transform($transition...) {
-webkit-transition: -webkit-transform $transition;
-moz-transition: -moz-transform $transition;
-o-transition: -o-transform $transition;
transition: transform $transition;
}
// Transformations
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees); // IE9 only
transform: rotate($degrees);
}
@mixin scale($scale-args...) {
-webkit-transform: scale($scale-args);
-ms-transform: scale($scale-args); // IE9 only
transform: scale($scale-args);
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y); // IE9 only
transform: translate($x, $y);
}
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}
@mixin rotateX($degrees) {
-webkit-transform: rotateX($degrees);
-ms-transform: rotateX($degrees); // IE9 only
transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
-webkit-transform: rotateY($degrees);
-ms-transform: rotateY($degrees); // IE9 only
transform: rotateY($degrees);
}
@mixin perspective($perspective) {
-webkit-perspective: $perspective;
-moz-perspective: $perspective;
perspective: $perspective;
}
@mixin perspective-origin($perspective) {
-webkit-perspective-origin: $perspective;
-moz-perspective-origin: $perspective;
perspective-origin: $perspective;
}
@mixin transform-origin($origin) {
-webkit-transform-origin: $origin;
-moz-transform-origin: $origin;
-ms-transform-origin: $origin; // IE9 only
transform-origin: $origin;
}
// Animations
@mixin animation($animation) {
-webkit-animation: $animation;
animation: $animation;
}
@mixin animation-name($name) {
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-timing-function($timing-function) {
-webkit-animation-timing-function: $timing-function;
animation-timing-function: $timing-function;
}
@mixin animation-delay($delay) {
-webkit-animation-delay: $delay;
animation-delay: $delay;
}
@mixin animation-iteration-count($iteration-count) {
-webkit-animation-iteration-count: $iteration-count;
animation-iteration-count: $iteration-count;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
@mixin backface-visibility($visibility){
-webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
backface-visibility: $visibility;
}
// Box sizing
@mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
box-sizing: $boxmodel;
}
// User select
// For selecting text on the page
@mixin user-select($select) {
-webkit-user-select: $select;
-moz-user-select: $select;
-ms-user-select: $select; // IE10+
user-select: $select;
}
// Resize anything
@mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
-webkit-column-count: $column-count;
-moz-column-count: $column-count;
column-count: $column-count;
-webkit-column-gap: $column-gap;
-moz-column-gap: $column-gap;
column-gap: $column-gap;
}
// Optional hyphenation
@mixin hyphens($mode: auto) {
word-wrap: break-word;
-webkit-hyphens: $mode;
-moz-hyphens: $mode;
-ms-hyphens: $mode; // IE10+
-o-hyphens: $mode;
hyphens: $mode;
}
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}
// GRADIENTS
// --------------------------------------------------
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-pie-background: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-pie-background: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-pie-background: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
-pie-background: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
-pie-background: linear-gradient($start-color, $mid-color $color-stop, $end-color);
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-pie-background: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
// Reset filters for IE
//
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.
@mixin reset-filter() {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
// Retina images
//
// Short retina mixin for setting background-image and -size
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
background-size: $width-1x $height-1x;
}
}
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: #e5e5e5) {
height: 1px;
margin: (($line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: $color;
}
// Panels
// -------------------------
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
border-color: $border;
& > .panel-heading {
color: $heading-text-color;
background-color: $heading-bg-color;
border-color: $heading-border;
+ .panel-collapse .panel-body {
border-top-color: $border;
}
}
& > .panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: $border;
}
}
}
// Alerts
// -------------------------
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($text-color, 10%);
}
}
// Tables
// -------------------------
@mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.#{$state},
> th.#{$state},
&.#{$state} > td,
&.#{$state} > th {
background-color: $background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
> td.#{$state}:hover,
> th.#{$state}:hover,
&.#{$state}:hover > td,
&.#{$state}:hover > th {
background-color: darken($background, 5%);
}
}
}
// List Groups
// -------------------------
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
// [converter] extracted a& to a.list-group-item-#{$state}
}
a.list-group-item-#{$state} {
color: $color;
.list-group-item-heading { color: inherit; }
&:hover,
&:focus {
color: $color;
background-color: darken($background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: $color;
border-color: $color;
}
}
}
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
&:hover,
&:focus,
&:active,
&.active {
color: $color;
background-color: darken($background, 8%);
border-color: darken($border, 12%);
}
.open & { &.dropdown-toggle {
color: $color;
background-color: darken($background, 8%);
border-color: darken($border, 12%);
} }
&:active,
&.active {
background-image: none;
}
.open & { &.dropdown-toggle {
background-image: none;
} }
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: $background;
border-color: $border;
}
}
.badge {
color: $background;
background-color: $color;
}
}
// Button sizes
// -------------------------
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
}
// Pagination
// -------------------------
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
> li {
> a,
> span {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
}
&:first-child {
> a,
> span {
@include border-left-radius($border-radius);
}
}
&:last-child {
> a,
> span {
@include border-right-radius($border-radius);
}
}
}
}
// Labels
// -------------------------
@mixin label-variant($color) {
background-color: $color;
&[href] {
&:hover,
&:focus {
background-color: darken($color, 10%);
}
}
}
// Contextual backgrounds
// -------------------------
// [converter] $parent hack
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color;
}
a#{$parent}:hover {
background-color: darken($color, 10%);
}
}
// Typography
// -------------------------
// [converter] $parent hack
@mixin text-emphasis-variant($parent, $color) {
#{$parent} {
color: $color;
}
a#{$parent}:hover {
color: darken($color, 10%);
}
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
@mixin navbar-vertical-align($element-height) {
margin-top: (($navbar-height - $element-height) / 2);
margin-bottom: (($navbar-height - $element-height) / 2);
}
// Progress bars
// -------------------------
@mixin progress-bar-variant($color) {
background-color: $color;
.progress-striped & {
@include gradient-striped();
}
}
// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
// [converter] $parent hack
@mixin responsive-visibility($parent) {
#{$parent} {
display: block !important;
}
table#{$parent} { display: table; }
tr#{$parent} { display: table-row !important; }
th#{$parent},
td#{$parent} { display: table-cell !important; }
}
// [converter] $parent hack