MDL-55402 theme_noname: Convert bootstrapbase to bs4

All moodle less files are converted to sass with layouts etc
written as mustache templates.

Bootstrap 4 sass files are imported to scss/bootstrap.

Part of MDL-55071
This commit is contained in:
Damyon Wiese
2016-09-23 10:49:48 +01:00
committed by Dan Poltawski
parent 3ba0023871
commit 536f046033
131 changed files with 39940 additions and 122 deletions
+17 -1
View File
@@ -610,7 +610,7 @@ class core_renderer extends renderer_base {
*/
public function standard_top_of_body_html() {
global $CFG;
$output = $this->page->requires->get_top_of_body_code();
$output = $this->page->requires->get_top_of_body_code($this);
if ($this->page->pagelayout !== 'embedded' && !empty($CFG->additionalhtmltopofbody)) {
$output .= "\n".$CFG->additionalhtmltopofbody;
}
@@ -4245,6 +4245,22 @@ EOD;
return $this->render_context_header($contextheader);
}
/**
* Renders the skip links for the page.
*
* @param array $links List of skip links.
* @return string HTML for the skip links.
*/
public function render_skip_links($links) {
$context = [ 'links' => []];
foreach ($links as $url => $text) {
$context['links'][] = [ 'url' => $url, 'text' => $text];
}
return $this->render_from_template('core/skip_links', $context);
}
/**
* Renders the header bar.
*
+3 -8
View File
@@ -1531,17 +1531,12 @@ class page_requirements_manager {
* Normally, this method is called automatically by the code that prints the
* <head> tag. You should not normally need to call it in your own code.
*
* @param renderer_base $renderer
* @return string the HTML code to go at the start of the <body> tag.
*/
public function get_top_of_body_code() {
public function get_top_of_body_code(renderer_base $renderer) {
// First the skip links.
$links = '';
$attributes = array('class' => 'skip');
foreach ($this->skiplinks as $url => $text) {
$links .= html_writer::link('#'.$url, $text, $attributes);
}
$output = html_writer::tag('div', $links, array('class'=>'skiplinks')) . "\n";
$this->js_init_call('M.util.init_skiplink');
$output = $renderer->render_skip_links($this->skiplinks);
// YUI3 JS needs to be loaded early in the body. It should be cached well by the browser.
$output .= $this->get_yui3lib_headcode();
+10
View File
@@ -0,0 +1,10 @@
<div class="skiplinks">
{{#links}}
<a href="{{{url}}}" class="skip">{{{text}}}</a>
{{/links}}
</div>
{{#js}}
require(['core/yui'], function(Y) {
M.util.init_skiplink(Y);
});
{{/js}}
@@ -0,0 +1,260 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
namespace theme_noname\output;
use html_writer;
use tabobject;
use tabtree;
use custom_menu_item;
use custom_menu;
defined('MOODLE_INTERNAL') || die;
/**
* Renderers to align Moodle's HTML with that expected by Bootstrap
*
* @package theme_noname
* @copyright 2012 Bas Brands, www.basbrands.nl
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class core_renderer extends \core_renderer {
/** @var custom_menu_item language The language menu if created */
protected $language = null;
/**
* The standard tags that should be included in the <head> tag
* including a meta description for the front page
*
* @return string HTML fragment.
*/
public function standard_head_html() {
global $SITE, $PAGE;
$output = parent::standard_head_html();
if ($PAGE->pagelayout == 'frontpage') {
$summary = s(strip_tags(format_text($SITE->summary, FORMAT_HTML)));
if (!empty($summary)) {
$output .= "<meta name=\"description\" content=\"$summary\" />\n";
}
}
return $output;
}
/*
* This renders the navbar.
* Uses bootstrap compatible html.
*/
public function navbar() {
$items = $this->page->navbar->get_items();
if (empty($items)) {
return '';
}
$breadcrumbs = array();
foreach ($items as $item) {
$item->hideicon = true;
$breadcrumbs[] = $this->render($item);
}
$list_items = '<li>'.join(" </li><li>", $breadcrumbs).'</li>';
$title = '<span class="accesshide" id="navbar-label">'.get_string('pagepath').'</span>';
return $title . '<nav aria-labelledby="navbar-label"><ul class="breadcrumb">' .
$list_items . '</ul></nav>';
}
/*
* Overriding the custom_menu function ensures the custom menu is
* always shown, even if no menu items are configured in the global
* theme settings page.
*/
public function custom_menu($custommenuitems = '') {
global $CFG;
if (empty($custommenuitems) && !empty($CFG->custommenuitems)) {
$custommenuitems = $CFG->custommenuitems;
}
$custommenu = new custom_menu($custommenuitems, current_language());
return $this->render_custom_menu($custommenu);
}
/*
* This renders the bootstrap top menu.
*
* This renderer is needed to enable the Bootstrap style navigation.
*/
protected function render_custom_menu(custom_menu $menu) {
global $CFG;
$langs = get_string_manager()->get_list_of_translations();
$haslangmenu = $this->lang_menu() != '';
if (!$menu->has_children() && !$haslangmenu) {
return '';
}
if ($haslangmenu) {
$strlang = get_string('language');
$currentlang = current_language();
if (isset($langs[$currentlang])) {
$currentlang = $langs[$currentlang];
} else {
$currentlang = $strlang;
}
$this->language = $menu->add($currentlang, new moodle_url('#'), $strlang, 10000);
foreach ($langs as $langtype => $langname) {
$this->language->add($langname, new moodle_url($this->page->url, array('lang' => $langtype)), $langname);
}
}
$content = '<ul class="nav">';
foreach ($menu->get_children() as $item) {
$content .= $this->render_custom_menu_item($item, 1);
}
return $content.'</ul>';
}
/*
* This code renders the custom menu items for the
* bootstrap dropdown menu.
*/
protected function render_custom_menu_item(custom_menu_item $menunode, $level = 0 ) {
static $submenucount = 0;
$content = '';
if ($menunode->has_children()) {
if ($level == 1) {
$class = 'dropdown';
} else {
$class = 'dropdown-submenu';
}
if ($menunode === $this->language) {
$class .= ' langmenu';
}
$content = html_writer::start_tag('li', array('class' => $class));
// If the child has menus render it as a sub menu.
$submenucount++;
if ($menunode->get_url() !== null) {
$url = $menunode->get_url();
} else {
$url = '#cm_submenu_'.$submenucount;
}
$content .= html_writer::start_tag('a', array('href'=>$url, 'class'=>'dropdown-toggle', 'data-toggle'=>'dropdown', 'title'=>$menunode->get_title()));
$content .= $menunode->get_text();
if ($level == 1) {
$content .= '<b class="caret"></b>';
}
$content .= '</a>';
$content .= '<ul class="dropdown-menu">';
foreach ($menunode->get_children() as $menunode) {
$content .= $this->render_custom_menu_item($menunode, 0);
}
$content .= '</ul>';
} else {
// The node doesn't have children so produce a final menuitem.
// Also, if the node's text matches '####', add a class so we can treat it as a divider.
if (preg_match("/^#+$/", $menunode->get_text())) {
// This is a divider.
$content = '<li class="divider">&nbsp;</li>';
} else {
$content = '<li>';
if ($menunode->get_url() !== null) {
$url = $menunode->get_url();
} else {
$url = '#';
}
$content .= html_writer::link($url, $menunode->get_text(), array('title' => $menunode->get_title()));
$content .= '</li>';
}
}
return $content;
}
/**
* This code renders the navbar button to control the display of the custom menu
* on smaller screens.
*
* Do not display the button if the menu is empty.
*
* @return string HTML fragment
*/
public function navbar_button() {
global $CFG;
if (empty($CFG->custommenuitems) && $this->lang_menu() == '') {
return '';
}
$iconbar = html_writer::tag('span', '', array('class' => 'icon-bar'));
$button = html_writer::tag('a', $iconbar . "\n" . $iconbar. "\n" . $iconbar, array(
'class' => 'btn btn-navbar',
'data-toggle' => 'collapse',
'data-target' => '.nav-collapse'
));
return $button;
}
/**
* Renders tabtree
*
* @param tabtree $tabtree
* @return string
*/
protected function render_tabtree(tabtree $tabtree) {
if (empty($tabtree->subtree)) {
return '';
}
$firstrow = $secondrow = '';
foreach ($tabtree->subtree as $tab) {
$firstrow .= $this->render($tab);
if (($tab->selected || $tab->activated) && !empty($tab->subtree) && $tab->subtree !== array()) {
$secondrow = $this->tabtree($tab->subtree);
}
}
return html_writer::tag('ul', $firstrow, array('class' => 'nav nav-tabs')) . $secondrow;
}
/**
* Renders tabobject (part of tabtree)
*
* This function is called from {@link core_renderer::render_tabtree()}
* and also it calls itself when printing the $tabobject subtree recursively.
*
* @param tabobject $tabobject
* @return string HTML fragment
*/
protected function render_tabobject(tabobject $tab) {
if (($tab->selected and (!$tab->linkedwhenselected)) or $tab->activated) {
return html_writer::tag('li', html_writer::tag('a', $tab->text), array('class' => 'active'));
} else if ($tab->inactive) {
return html_writer::tag('li', html_writer::tag('a', $tab->text), array('class' => 'disabled'));
} else {
if (!($tab->link instanceof moodle_url)) {
// backward compartibility when link was passed as quoted string
$link = "<a href=\"$tab->link\" title=\"$tab->title\">$tab->text</a>";
} else {
$link = html_writer::link($tab->link, $tab->text, array('title' => $tab->title));
}
$params = $tab->selected ? array('class' => 'active') : null;
return html_writer::tag('li', $link, $params);
}
}
}
+107 -22
View File
@@ -29,29 +29,114 @@ $THEME->sheets = ['build'];
$THEME->editor_sheets = ['editor'];
$THEME->layouts = [
'standard' => [
'file' => 'default.php',
'regions' => ['side-pre', 'side-post'],
],
// Most backwards compatible layout without the blocks - this is the layout used by default.
'base' => array(
'file' => 'columns1.php',
'regions' => array(),
),
// Standard layout with blocks, this is recommended for most pages with general information.
'standard' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
// Main course page.
'course' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('langmenu' => true),
),
'coursecategory' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
// Part of course, typical for modules - default page layout if $cm specified in require_login().
'incourse' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
// The site home page.
'frontpage' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('nonavbar' => true),
),
// Server administration scripts.
'admin' => array(
'file' => 'columns2.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
// My dashboard page.
'mydashboard' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('langmenu' => true),
),
// My public page.
'mypublic' => array(
'file' => 'columns2.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
'login' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('langmenu' => true),
),
// 'course' => [],
// 'coursecategory' => [],
// 'incourse' => [],
// 'frontpage' => [],
// 'admin' => [],
// 'mydashboard' => [],
// 'mypublic' => [],
// 'report' => [],
// 'login' => [],
// General purpose.
// 'embedded' => [],
// 'frametop' => [],
// 'maintenance' => [],
// 'popup' => [],
// 'print' => [],
// 'redirect' => [],
// 'secure' => [],
// Pages that appear in pop-up windows - no navigation, no blocks, no header.
'popup' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('nofooter' => true, 'nonavbar' => true),
),
// No blocks and minimal footer - used for legacy frame layouts only!
'frametop' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('nofooter' => true, 'nocoursefooter' => true),
),
// Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.
'embedded' => array(
'file' => 'embedded.php',
'regions' => array()
),
// Used during upgrade and install, and for the 'This site is undergoing maintenance' message.
// This must not have any blocks, links, or API calls that would lead to database or cache interaction.
// Please be extremely careful if you are modifying this layout.
'maintenance' => array(
'file' => 'maintenance.php',
'regions' => array(),
),
// Should display the content and basic headers only.
'print' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('nofooter' => true, 'nonavbar' => false),
),
// The pagelayout used when a redirection is occuring.
'redirect' => array(
'file' => 'embedded.php',
'regions' => array(),
),
// The pagelayout used for reports.
'report' => array(
'file' => 'columns2.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
// The pagelayout used for safebrowser and securewindow.
'secure' => array(
'file' => 'secure.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre'
)
];
// $THEME->javascripts = array();
+29
View File
@@ -0,0 +1,29 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A one column layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT
];
echo $OUTPUT->render_from_template('theme_noname/columns1', $templatecontext);
+30
View File
@@ -0,0 +1,30 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A two column layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT,
'sidepreblocks' => $OUTPUT->blocks('side-pre', 'col-md-3 col-md-pull-9'),
];
echo $OUTPUT->render_from_template('theme_noname/columns2', $templatecontext);
+32
View File
@@ -0,0 +1,32 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A three column layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT,
'sidepreblocks' => $OUTPUT->blocks('side-pre', 'col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9'),
'sidepostblocks' => $OUTPUT->blocks('side-post', 'col-md-3')
];
echo $OUTPUT->render_from_template('theme_noname/columns3', $templatecontext);
-91
View File
@@ -1,91 +0,0 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Default layout.
*
* @package theme_noname
* @copyright 2016 Frédéric Massart - FMCorz.net
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$regionmain = 'span9 pull-right';
$sidepre = 'span3 desktop-first-column';
if (right_to_left()) {
$regionmain = 'span9';
$sidepre = 'span3 pull-right';
}
echo $OUTPUT->doctype() ?>
<html <?php echo $OUTPUT->htmlattributes(); ?>>
<head>
<title><?php echo $OUTPUT->page_title(); ?></title>
<link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); ?>" />
<?php echo $OUTPUT->standard_head_html() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body <?php echo $OUTPUT->body_attributes('two-column'); ?>>
<?php echo $OUTPUT->standard_top_of_body_html() ?>
<header role="banner" class="navbar navbar-fixed-top moodle-has-zindex">
<nav role="navigation" class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="<?php echo $CFG->wwwroot;?>"><?php
echo format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID)));
?></a>
<?php echo $OUTPUT->navbar_button(); ?>
<?php echo $OUTPUT->user_menu(); ?>
<?php echo $OUTPUT->search_box(); ?>
<div class="nav-collapse collapse">
<?php echo $OUTPUT->custom_menu(); ?>
<ul class="nav pull-right">
<li><?php echo $OUTPUT->page_heading_menu(); ?></li>
</ul>
</div>
</div>
</nav>
</header>
<div id="page" class="container-fluid">
<?php echo $OUTPUT->full_header(); ?>
<div id="page-content" class="row-fluid">
<section id="region-main" class="<?php echo $regionmain; ?>">
<?php
echo $OUTPUT->course_content_header();
echo $OUTPUT->main_content();
echo $OUTPUT->course_content_footer();
?>
</section>
<?php echo $OUTPUT->blocks('side-pre', $sidepre); ?>
</div>
<footer id="page-footer">
<div id="course-footer"><?php echo $OUTPUT->course_footer(); ?></div>
<p class="helplink"><?php echo $OUTPUT->page_doc_link(); ?></p>
<?php
echo $OUTPUT->login_info();
echo $OUTPUT->home_link();
echo $OUTPUT->standard_footer_html();
?>
</footer>
<?php echo $OUTPUT->standard_end_of_body_html() ?>
</div>
</body>
</html>
+29
View File
@@ -0,0 +1,29 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* An embedded layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT
];
echo $OUTPUT->render_from_template('theme_noname/embedded', $templatecontext);
+29
View File
@@ -0,0 +1,29 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A maintenance layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT
];
echo $OUTPUT->render_from_template('theme_noname/maintenance', $templatecontext);
+32
View File
@@ -0,0 +1,32 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A three column layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT,
'sidepreblocks' => $OUTPUT->blocks('side-pre', 'col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9'),
'sidepostblocks' => $OUTPUT->blocks('side-post', 'col-md-3')
];
echo $OUTPUT->render_from_template('theme_noname/secure', $templatecontext);
+14
View File
@@ -0,0 +1,14 @@
Description of Twitter bootstrap import into Moodle
Twitter bootstrap
-----------------
This theme uses the original unmodified version 4.0.0-alpha-3 Twitter bootstrap sass files.
The bootstrap repository is available on:
https://github.com/twitter/bootstrap.git
To update to the latest release of twitter bootstrap:
* remove all files from scss/bootstrap,
* download the new scss files and store them in scss/bootstrap
* update ./thirdpartylibs.xml
+22
View File
@@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2011-2016 Twitter, Inc.
Copyright (c) 2011-2016 The Bootstrap Authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
+56
View File
@@ -0,0 +1,56 @@
//
// Base styles
//
.alert {
padding: $alert-padding;
margin-bottom: $spacer-y;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
}
// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: ($alert-padding + 20px);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.alert-info {
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}
@@ -0,0 +1,27 @@
.fade {
opacity: 0;
transition: opacity .15s linear;
&.in {
opacity: 1;
}
}
.collapse {
display: none;
&.in {
display: block;
}
// tr&.in { display: table-row; }
// tbody&.in { display: table-row-group; }
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition-timing-function: ease;
transition-duration: .35s;
transition-property: height;
}
@@ -0,0 +1,38 @@
.breadcrumb {
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $spacer-y;
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($border-radius);
@include clearfix;
}
.breadcrumb-item {
float: left;
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}";
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}
}
@@ -0,0 +1,234 @@
// scss-lint:disable QualifyingElement
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:focus,
&:active,
&.active {
z-index: 2;
}
@include hover {
z-index: 2;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -$input-btn-border-width;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: -$btn-toolbar-margin; // Offset the first child's margin
@include clearfix();
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: $btn-toolbar-margin;
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
}
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
@include border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
//
// Split button dropdowns
//
.btn + .dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
&::after {
margin-left: 0;
}
}
.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
}
.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
@include box-shadow($btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
}
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: $caret-width-lg $caret-width-lg 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 $caret-width-lg $caret-width-lg;
}
//
// Vertical button groups
//
.btn-group-vertical {
> .btn,
> .btn-group,
> .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
@include clearfix();
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -$input-btn-border-width;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
@include border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
@include border-top-radius(0);
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"] {
> .btn,
> .btn-group > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}
}
}
+176
View File
@@ -0,0 +1,176 @@
// scss-lint:disable QualifyingElement
//
// Base styles
//
.btn {
display: inline-block;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@include transition(all .2s ease-in-out);
&,
&:active,
&.active {
&:focus,
&.focus {
@include tab-focus();
}
}
@include hover-focus {
text-decoration: none;
}
&.focus {
text-decoration: none;
}
&:active,
&.active {
background-image: none;
outline: 0;
@include box-shadow($btn-active-box-shadow);
}
&.disabled,
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
@include box-shadow(none);
}
}
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
//
// Alternate buttons
//
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-secondary {
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
}
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
// Remove all backgrounds
.btn-outline-primary {
@include button-outline-variant($btn-primary-bg);
}
.btn-outline-secondary {
@include button-outline-variant($btn-secondary-border);
}
.btn-outline-info {
@include button-outline-variant($btn-info-bg);
}
.btn-outline-success {
@include button-outline-variant($btn-success-bg);
}
.btn-outline-warning {
@include button-outline-variant($btn-warning-bg);
}
.btn-outline-danger {
@include button-outline-variant($btn-danger-bg);
}
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
font-weight: normal;
color: $link-color;
border-radius: 0;
&,
&:active,
&.active,
&:disabled {
background-color: transparent;
@include box-shadow(none);
}
&,
&:focus,
&:active {
border-color: transparent;
}
@include hover {
border-color: transparent;
}
@include hover-focus {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
background-color: transparent;
}
&:disabled {
@include hover-focus {
color: $btn-link-disabled-color;
text-decoration: none;
}
}
}
//
// Button Sizes
//
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
//
// Block button
//
.btn-block {
display: block;
width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: $btn-block-spacing-y;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}
+321
View File
@@ -0,0 +1,321 @@
//
// Base styles
//
.card {
position: relative;
display: block;
margin-bottom: $card-spacer-y;
background-color: $card-bg;
// border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
border: $card-border-width solid $card-border-color;
}
.card-block {
@include clearfix;
padding: $card-spacer-x;
}
.card-title {
margin-bottom: $card-spacer-y;
}
.card-subtitle {
margin-top: -($card-spacer-y / 2);
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
// .card-actions {
// padding: $card-spacer-y $card-spacer-x;
// .card-link + .card-link {
// margin-left: $card-spacer-x;
// }
// }
.card-link {
@include hover {
text-decoration: none;
}
+ .card-link {
margin-left: $card-spacer-x;
}
}
.card {
> .list-group:first-child {
.list-group-item:first-child {
@include border-top-radius($card-border-radius);
}
}
> .list-group:last-child {
.list-group-item:last-child {
@include border-bottom-radius($card-border-radius);
}
}
}
//
// Optional textual caps
//
.card-header {
@include clearfix;
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
}
}
.card-footer {
@include clearfix;
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
&:last-child {
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
}
}
//
// Header navs
//
.card-header-tabs {
margin-right: -($card-spacer-x / 2);
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x / 2);
border-bottom: 0;
}
.card-header-pills {
margin-right: -($card-spacer-x / 2);
margin-left: -($card-spacer-x / 2);
}
//
// Background variations
//
.card-primary {
@include card-variant($brand-primary, $brand-primary);
}
.card-success {
@include card-variant($brand-success, $brand-success);
}
.card-info {
@include card-variant($brand-info, $brand-info);
}
.card-warning {
@include card-variant($brand-warning, $brand-warning);
}
.card-danger {
@include card-variant($brand-danger, $brand-danger);
}
// Remove all backgrounds
.card-outline-primary {
@include card-outline-variant($btn-primary-bg);
}
.card-outline-secondary {
@include card-outline-variant($btn-secondary-border);
}
.card-outline-info {
@include card-outline-variant($btn-info-bg);
}
.card-outline-success {
@include card-outline-variant($btn-success-bg);
}
.card-outline-warning {
@include card-outline-variant($btn-warning-bg);
}
.card-outline-danger {
@include card-outline-variant($btn-danger-bg);
}
//
// Inverse text within a card for use with dark backgrounds
//
.card-inverse {
@include card-inverse;
}
//
// Blockquote
//
.card-blockquote {
padding: 0;
margin-bottom: 0;
border-left: 0;
}
// Card image
.card-img {
// margin: -1.325rem;
@include border-radius(.25rem);
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
}
// Card image caps
.card-img-top {
@include border-top-radius($card-border-radius-inner);
}
.card-img-bottom {
@include border-bottom-radius($card-border-radius-inner);
}
// Card set
//
// Heads up! We do some funky style resetting here for margins across our two
// variations (one flex, one table). Individual cards have margin-bottom by
// default, but they're ignored due to table styles. For a consistent design,
// we've done the same to the flex variation.
//
// Those changes are noted by `// Margin balancing`.
@if $enable-flex {
@include media-breakpoint-up(sm) {
.card-deck {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-bottom: $card-spacer-y; // Margin balancing
margin-left: -$card-deck-margin;
.card {
flex: 1 0 0;
margin-right: $card-deck-margin;
margin-bottom: 0; // Margin balancing
margin-left: $card-deck-margin;
}
}
}
} @else {
@include media-breakpoint-up(sm) {
$space-between-cards: (2 * $card-deck-margin);
.card-deck {
display: table;
width: 100%;
margin-bottom: $card-spacer-y; // Margin balancing
table-layout: fixed;
border-spacing: $space-between-cards 0;
.card {
display: table-cell;
margin-bottom: 0; // Margin balancing
vertical-align: top;
}
}
.card-deck-wrapper {
margin-right: (-$space-between-cards);
margin-left: (-$space-between-cards);
}
}
}
//
// Card groups
//
@include media-breakpoint-up(sm) {
.card-group {
@if $enable-flex {
display: flex;
flex-flow: row wrap;
} @else {
display: table;
width: 100%;
table-layout: fixed;
}
.card {
@if $enable-flex {
flex: 1 0 0;
} @else {
display: table-cell;
vertical-align: top;
}
+ .card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:first-child {
@include border-right-radius(0);
.card-img-top {
border-top-right-radius: 0;
}
.card-img-bottom {
border-bottom-right-radius: 0;
}
}
&:last-child {
@include border-left-radius(0);
.card-img-top {
border-top-left-radius: 0;
}
.card-img-bottom {
border-bottom-left-radius: 0;
}
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
.card-img-top,
.card-img-bottom {
border-radius: 0;
}
}
}
}
}
}
//
// Card
//
@include media-breakpoint-up(sm) {
.card-columns {
column-count: 3;
column-gap: $card-columns-sm-up-column-gap;
.card {
display: inline-block;
width: 100%; // Don't let them exceed the column width
}
}
}
+253
View File
@@ -0,0 +1,253 @@
// Wrapper for the slide container and indicators
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
> .carousel-item {
position: relative;
display: none;
transition: .6s ease-in-out left;
// Account for jankitude on images
> img,
> a > img {
@extend .img-fluid;
line-height: 1;
}
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out;
backface-visibility: hidden;
perspective: 1000px;
&.next,
&.active.right {
left: 0;
transform: translate3d(100%, 0, 0);
}
&.prev,
&.active.left {
left: 0;
transform: translate3d(-100%, 0, 0);
}
&.next.left,
&.prev.right,
&.active {
left: 0;
transform: translate3d(0, 0, 0);
}
}
}
> .active,
> .next,
> .prev {
display: block;
}
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
//
// Left/right controls for nav
//
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: $carousel-control-width;
font-size: $carousel-control-font-size;
color: $carousel-control-color;
text-align: center;
text-shadow: $carousel-text-shadow;
opacity: $carousel-control-opacity;
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
@include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
}
&.right {
right: 0;
left: auto;
@include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
}
// Hover/focus state
@include hover-focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
opacity: .9;
}
// Toggles
.icon-prev,
.icon-next {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
width: $carousel-icon-width;
height: $carousel-icon-width;
margin-top: -($carousel-icon-width / 2);
font-family: serif;
line-height: 1;
}
.icon-prev {
left: 50%;
margin-left: -($carousel-icon-width / 2);
}
.icon-next {
right: 50%;
margin-right: -($carousel-icon-width / 2);
}
.icon-prev {
&::before {
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&::before {
content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: $carousel-indicators-width;
padding-left: 0;
margin-left: -($carousel-indicators-width / 2);
text-align: center;
list-style: none;
li {
display: inline-block;
width: $carousel-indicator-size;
height: $carousel-indicator-size;
margin: 1px;
text-indent: -999px;
cursor: pointer;
// IE9 hack for event handling
//
// Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
// so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
background-color: rgba(0,0,0,0); // IE9
border: 1px solid $carousel-indicator-border-color;
border-radius: $carousel-indicator-size;
}
.active {
width: $carousel-indicator-active-size;
height: $carousel-indicator-active-size;
margin: 0;
background-color: $carousel-indicator-active-bg;
}
}
// Optional captions
//
// Hidden by default for smaller viewports.
.carousel-caption {
position: absolute;
right: ((100% - $carousel-caption-width) / 2);
bottom: 20px;
left: ((100% - $carousel-caption-width) / 2);
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: $carousel-caption-color;
text-align: center;
text-shadow: $carousel-text-shadow;
.btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
//
// Responsive variations
//
@include media-breakpoint-up(sm) {
// Scale up the controls a smidge
.carousel-control {
.icon-prev,
.icon-next {
width: $carousel-control-sm-up-size;
height: $carousel-control-sm-up-size;
margin-top: -($carousel-control-sm-up-size / 2);
font-size: $carousel-control-sm-up-size;
}
.icon-prev {
margin-left: -($carousel-control-sm-up-size / 2);
}
.icon-next {
margin-right: -($carousel-control-sm-up-size / 2);
}
}
// Show and left align the captions
.carousel-caption {
right: ((100% - $carousel-caption-sm-up-width) / 2);
left: ((100% - $carousel-caption-sm-up-width) / 2);
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
}
+31
View File
@@ -0,0 +1,31 @@
.close {
float: right;
font-size: ($font-size-base * 1.5);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .2;
@include hover-focus {
color: $close-color;
text-decoration: none;
cursor: pointer;
opacity: .5;
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// scss-lint:disable QualifyingElement
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
// scss-lint:enable QualifyingElement
+57
View File
@@ -0,0 +1,57 @@
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: $font-family-monospace;
}
// Inline code
code {
padding: $code-padding-y $code-padding-x;
font-size: $code-font-size;
color: $code-color;
background-color: $code-bg;
@include border-radius($border-radius);
}
// User input typically entered via keyboard
kbd {
padding: $code-padding-y $code-padding-x;
font-size: $code-font-size;
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@include box-shadow($kbd-box-shadow);
kbd {
padding: 0;
font-size: 100%;
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
}
// Blocks of code
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
font-size: $code-font-size;
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
background-color: transparent;
border-radius: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}
@@ -0,0 +1,265 @@
// scss-lint:disable PropertyCount
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// http://useiconic.com/open
// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.
.custom-control {
position: relative;
display: inline;
padding-left: $custom-control-gutter;
cursor: pointer;
+ .custom-control {
margin-left: $custom-control-spacer-x;
}
}
.custom-control-input {
position: absolute;
z-index: -1; // Put the input behind the label so it doesn't overlay text
opacity: 0;
&:checked ~ .custom-control-indicator {
color: $custom-control-checked-indicator-color;
background-color: $custom-control-checked-indicator-bg;
@include box-shadow($custom-control-checked-indicator-box-shadow);
}
&:focus ~ .custom-control-indicator {
// the mixin is not used here to make sure there is feedback
box-shadow: $custom-control-focus-indicator-box-shadow;
}
&:active ~ .custom-control-indicator {
color: $custom-control-active-indicator-color;
background-color: $custom-control-active-indicator-bg;
@include box-shadow($custom-control-active-indicator-box-shadow);
}
&:disabled {
~ .custom-control-indicator {
cursor: $custom-control-disabled-cursor;
background-color: $custom-control-disabled-indicator-bg;
}
~ .custom-control-description {
color: $custom-control-disabled-description-color;
cursor: $custom-control-disabled-cursor;
}
}
}
// Custom indicator
//
// Generates a shadow element to create our makeshift checkbox/radio background.
.custom-control-indicator {
position: absolute;
top: .0625rem;
left: 0;
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
user-select: none;
background-color: $custom-control-indicator-bg;
background-repeat: no-repeat;
background-position: center center;
background-size: $custom-control-indicator-bg-size;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Checkboxes
//
// Tweak just a few things for checkboxes.
.custom-checkbox {
.custom-control-indicator {
@include border-radius($custom-checkbox-radius);
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-checkbox-checked-icon;
}
.custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: $custom-checkbox-indeterminate-bg;
background-image: $custom-checkbox-indeterminate-icon;
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
}
}
// Radios
//
// Tweak just a few things for radios.
.custom-radio {
.custom-control-indicator {
border-radius: $custom-radio-radius;
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-radio-checked-icon;
}
}
// Layout options
//
// By default radios and checkboxes are `inline-block` with no additional spacing
// set. Use these optional classes to tweak the layout.
.custom-controls-stacked {
.custom-control {
display: inline;
&::after {
display: block;
margin-bottom: $custom-control-spacer-y;
content: "";
}
+ .custom-control {
margin-left: 0;
}
}
}
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// http://primercss.io.
//
// Includes IE9-specific hacks (noted by ` \9`).
.custom-select {
display: inline-block;
max-width: 100%;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
padding-right: $custom-select-padding-x \9;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
background-image: none \9;
background-size: $custom-select-bg-size;
border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius);
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
-moz-appearance: none;
-webkit-appearance: none;
&:focus {
border-color: $custom-select-focus-border-color;
outline: none;
@include box-shadow($custom-select-focus-box-shadow);
&::-ms-value {
// For visual consistency with other platforms/browsers,
// supress the default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
&:disabled {
color: $custom-select-disabled-color;
cursor: $cursor-disabled;
background-color: $custom-select-disabled-bg;
}
// Hides the default caret in IE11
&::-ms-expand {
opacity: 0;
}
}
.custom-select-sm {
padding-top: $custom-select-padding-y;
padding-bottom: $custom-select-padding-y;
font-size: $custom-select-sm-font-size;
// &:not([multiple]) {
// height: 26px;
// min-height: 26px;
// }
}
// File
//
// Custom file input.
.custom-file {
position: relative;
display: inline-block;
max-width: 100%;
height: $custom-file-height;
cursor: pointer;
}
.custom-file-input {
min-width: $custom-file-width;
max-width: 100%;
margin: 0;
filter: alpha(opacity = 0);
opacity: 0;
&:focus ~ .custom-file-control {
@include box-shadow($custom-file-focus-box-shadow);
}
}
.custom-file-control {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y;
line-height: $custom-file-line-height;
color: $custom-file-color;
user-select: none;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
@each $lang, $text in map-get($custom-file-text, placeholder) {
&:lang(#{$lang})::after {
content: $text;
}
}
&::before {
position: absolute;
top: -$custom-file-border-width;
right: -$custom-file-border-width;
bottom: -$custom-file-border-width;
z-index: 6;
display: block;
height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
background-color: $custom-file-button-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
@each $lang, $text in map-get($custom-file-text, button-label) {
&:lang(#{$lang})::before {
content: $text;
}
}
}
+4
View File
@@ -0,0 +1,4 @@
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
+179
View File
@@ -0,0 +1,179 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle {
// Generate the caret automatically
&::after {
display: inline-block;
width: 0;
height: 0;
margin-left: $caret-width;
vertical-align: middle;
content: "";
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-left: $caret-width solid transparent;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
&:focus {
outline: 0;
}
}
.dropup {
.dropdown-toggle {
&::after {
border-top: 0;
border-bottom: $caret-width solid;
}
}
}
// The dropdown menu
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: $dropdown-min-width;
padding: $dropdown-padding-y 0;
margin: $dropdown-margin-top 0 0; // override default ul
font-size: $font-size-base;
color: $body-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: $dropdown-bg;
background-clip: padding-box;
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($border-radius);
@include box-shadow($dropdown-box-shadow);
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
@include nav-divider($dropdown-divider-bg);
}
// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// For <button>s`
.dropdown-item {
display: block;
width: 100%; // For `<button>`s
padding: 3px $dropdown-item-padding-x;
clear: both;
font-weight: normal;
color: $dropdown-link-color;
text-align: inherit; // For `<button>`s
white-space: nowrap; // prevent links from randomly breaking onto new lines
background: none; // For `<button>`s
border: 0; // For `<button>`s
@include hover-focus {
color: $dropdown-link-hover-color;
text-decoration: none;
background-color: $dropdown-link-hover-bg;
}
// Active state
&.active {
@include plain-hover-focus {
color: $dropdown-link-active-color;
text-decoration: none;
background-color: $dropdown-link-active-bg;
outline: 0;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
&.disabled {
@include plain-hover-focus {
color: $dropdown-link-disabled-color;
}
// Nuke hover/focus effects
@include hover-focus {
text-decoration: none;
cursor: $cursor-disabled;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
}
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
.dropdown-menu-left {
right: auto;
left: 0;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x;
font-size: $font-size-sm;
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-dropdown-backdrop;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
content: "";
border-top: 0;
border-bottom: $caret-width solid;
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: $dropdown-margin-top;
}
}
+364
View File
@@ -0,0 +1,364 @@
// scss-lint:disable QualifyingElement
//
// Textual form controls
//
.form-control {
display: block;
width: 100%;
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
// height: $input-height;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
background-image: none;
background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius);
@include box-shadow($input-box-shadow);
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-color-placeholder;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly] {
background-color: $input-bg-disabled;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&:disabled {
cursor: $cursor-disabled;
}
}
select.form-control {
&:not([size]):not([multiple]) {
height: $input-height;
}
&:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
// match the appearance of the native widget.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
display: block;
}
//
// Labels
//
// For use with horizontal and inline forms, when you need the label text to
// align with the form controls.
.col-form-label {
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
margin-bottom: 0; // Override the `<label>` default
}
.col-form-label-lg {
padding-top: $input-padding-y-lg;
padding-bottom: $input-padding-y-lg;
font-size: $font-size-lg;
}
.col-form-label-sm {
padding-top: $input-padding-y-sm;
padding-bottom: $input-padding-y-sm;
font-size: $font-size-sm;
}
//
// Legends
//
// For use with horizontal and inline forms, when you need the legend text to
// be the same size as regular labels, and to align with the form controls.
.col-form-legend {
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
margin-bottom: 0;
font-size: $font-size-base;
}
// Static form control text
//
// Apply class to an element to make any string of text align with labels in a
// horizontal form layout.
.form-control-static {
min-height: $input-height;
// Size it appropriately next to real form controls
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
// Remove default margin from `p`
margin-bottom: 0;
&.form-control-sm,
&.form-control-lg {
padding-right: 0;
padding-left: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-sm {
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
@include border-radius($input-border-radius-sm);
}
select.form-control-sm {
&:not([size]):not([multiple]) {
height: $input-height-sm;
}
}
.form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
@include border-radius($input-border-radius-lg);
}
select.form-control-lg {
&:not([size]):not([multiple]) {
height: $input-height-lg;
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: $form-group-margin-bottom;
}
.form-text {
display: block;
margin-top: ($spacer * .25);
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.form-check {
position: relative;
display: block;
margin-bottom: ($spacer * .75);
// Move up sibling radios or checkboxes for tighter spacing
+ .form-check {
margin-top: -.25rem;
}
&.disabled {
.form-check-label {
color: $text-muted;
cursor: $cursor-disabled;
}
}
}
.form-check-label {
padding-left: 1.25rem;
margin-bottom: 0; // Override default `<label>` bottom margin
cursor: pointer;
}
.form-check-input {
position: absolute;
margin-top: .25rem;
margin-left: -1.25rem;
&:only-child {
position: static;
}
}
// Radios and checkboxes on same line
.form-check-inline {
position: relative;
display: inline-block;
padding-left: 1.25rem;
margin-bottom: 0; // Override default `<label>` bottom margin
vertical-align: middle;
cursor: pointer;
+ .form-check-inline {
margin-left: .75rem;
}
&.disabled {
cursor: $cursor-disabled;
}
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.form-control-feedback {
margin-top: ($spacer * .25);
}
.form-control-success,
.form-control-warning,
.form-control-danger {
padding-right: ($input-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height / 4);
background-size: ($input-height / 2) ($input-height / 2);
}
// Form validation states
.has-success {
@include form-control-validation($brand-success);
.form-control-success {
background-image: $form-icon-success;
}
}
.has-warning {
@include form-control-validation($brand-warning);
.form-control-warning {
background-image: $form-icon-warning;
}
}
.has-danger {
@include form-control-validation($brand-danger);
.form-control-danger {
background-image: $form-icon-danger;
}
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
.form-inline {
// Kick in the inline
@include media-breakpoint-up(sm) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// Allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Make static controls behave like regular ones
.form-control-static {
display: inline-block;
}
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
.form-control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form-check-label {
padding-left: 0;
}
.form-check-input {
position: relative;
margin-left: 0;
}
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
}
}
}
+39
View File
@@ -0,0 +1,39 @@
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
.container {
@include make-container();
@include make-container-max-widths();
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
@if $enable-grid-classes {
.container-fluid {
@include make-container();
}
}
// Row
//
// Rows contain and clear the floats of your columns.
@if $enable-grid-classes {
.row {
@include make-row();
}
}
// Columns
//
// Common styles for small and large grid columns
@if $enable-grid-classes {
@include make-grid-columns();
}
+52
View File
@@ -0,0 +1,52 @@
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid();
}
// Rounded corners
.img-rounded {
@include border-radius($border-radius-lg);
}
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
@include border-radius($thumbnail-border-radius);
transition: all .2s ease-in-out;
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid(inline-block);
}
// Perfect circle
.img-circle {
border-radius: 50%;
}
//
// Figures
//
.figure {
// Ensures the caption's text aligns with the image.
display: inline-block;
}
.figure-img {
margin-bottom: ($spacer-y / 2);
line-height: 1;
}
.figure-caption {
font-size: $figure-caption-font-size;
color: $gray-light;
}
@@ -0,0 +1,188 @@
//
// Base styles
//
.input-group {
position: relative;
width: 100%;
@if $enable-flex {
display: flex;
} @else {
display: table;
// Prevent input groups from inheriting border styles from table cells when
// placed within a table.
border-collapse: separate;
}
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
// Bring the "active" form control to the front
@include hover-focus-active {
z-index: 3;
}
@if $enable-flex {
flex: 1;
} @else {
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
}
margin-bottom: 0;
}
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
@if not $enable-flex {
display: table-cell;
}
&:not(:first-child):not(:last-child) {
@include border-radius(0);
}
}
.input-group-addon,
.input-group-btn {
@if not $enable-flex {
width: 1%;
}
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
@extend .form-control-lg;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
@extend .form-control-sm;
}
//
// Text input groups
//
.input-group-addon {
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base;
font-weight: normal;
line-height: $input-line-height;
color: $input-color;
text-align: center;
background-color: $input-group-addon-bg;
border: $input-btn-border-width solid $input-group-addon-border-color;
@include border-radius($border-radius);
// Sizing
&.form-control-sm {
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
@include border-radius($border-radius-sm);
}
&.form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
@include border-radius($border-radius-lg);
}
// scss-lint:disable QualifyingElement
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
// scss-lint:enable QualifyingElement
}
//
// Reset rounded corners
//
.input-group .form-control:not(:last-child),
.input-group-addon:not(:last-child),
.input-group-btn:not(:last-child) > .btn,
.input-group-btn:not(:last-child) > .btn-group > .btn,
.input-group-btn:not(:last-child) > .dropdown-toggle,
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}
.input-group-addon:not(:last-child) {
border-right: 0;
}
.input-group .form-control:not(:first-child),
.input-group-addon:not(:first-child),
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group > .btn,
.input-group-btn:not(:first-child) > .dropdown-toggle,
.input-group-btn:not(:last-child) > .btn:not(:first-child),
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
.form-control + .input-group-addon:not(:first-child) {
border-left: 0;
}
//
// Button input groups
//
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: (-$input-btn-border-width);
}
// Bring the "active" button to the front
@include hover-focus-active {
z-index: 3;
}
}
// Negative margin to only have a single, shared border between the two
&:not(:last-child) {
> .btn,
> .btn-group {
margin-right: (-$input-btn-border-width);
}
}
&:not(:first-child) {
> .btn,
> .btn-group {
z-index: 2;
margin-left: (-$input-btn-border-width);
// Because specificity
@include hover-focus-active {
z-index: 3;
}
}
}
}
@@ -0,0 +1,20 @@
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
background-color: $jumbotron-bg;
@include border-radius($border-radius-lg);
@include media-breakpoint-up(sm) {
padding: ($jumbotron-padding * 2) $jumbotron-padding;
}
}
.jumbotron-hr {
border-top-color: darken($jumbotron-bg, 10%);
}
.jumbotron-fluid {
padding-right: 0;
padding-left: 0;
@include border-radius(0);
}
@@ -0,0 +1,123 @@
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol
margin-bottom: 0;
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width;
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
&:first-child {
@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius);
}
&.disabled {
@include plain-hover-focus {
color: $list-group-disabled-color;
cursor: $cursor-disabled;
background-color: $list-group-disabled-bg;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: $list-group-disabled-text-color;
}
}
}
&.active {
@include plain-hover-focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
text-decoration: none; // Repeat here because it inherits global a:hover otherwise
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: $list-group-active-text-color;
}
}
}
}
.list-group-flush {
.list-group-item {
border-radius: 0;
}
}
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: $list-group-link-color;
text-align: inherit; // For `<button>`s (anchors inherit)
.list-group-item-heading {
color: $list-group-link-heading-color;
}
// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
margin-bottom: $list-group-item-heading-margin-bottom;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
+89
View File
@@ -0,0 +1,89 @@
@if $enable-flex {
.media {
display: flex;
margin-bottom: $spacer;
}
.media-body {
flex: 1;
}
.media-middle {
align-self: center;
}
.media-bottom {
align-self: flex-end;
}
} @else {
.media {
margin-top: $media-margin-top;
&:first-child {
margin-top: 0;
}
}
.media,
.media-body {
overflow: hidden;
}
.media-body {
width: 10000px;
}
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
}
//
// Images/elements as the media anchor
//
.media-object {
display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail {
max-width: none;
}
}
//
// Alignment
//
.media-right {
padding-left: $media-alignment-padding-x;
}
.media-left {
padding-right: $media-alignment-padding-x;
}
//
// Headings
//
.media-heading {
margin-top: 0;
margin-bottom: $media-heading-margin-bottom;
}
//
// Media list variation
//
.media-list {
padding-left: 0;
list-style: none;
}
+54
View File
@@ -0,0 +1,54 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}
@mixin transition($transition...) {
@if $enable-transitions {
transition: $transition;
}
}
// Utilities
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/image";
@import "mixins/tag";
@import "mixins/reset-filter";
@import "mixins/resize";
@import "mixins/screen-reader";
@import "mixins/size";
@import "mixins/tab-focus";
@import "mixins/reset-text";
@import "mixins/text-emphasis";
@import "mixins/text-hide";
@import "mixins/text-truncate";
// // Components
@import "mixins/alert";
@import "mixins/buttons";
@import "mixins/cards";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/list-group";
@import "mixins/nav-divider";
@import "mixins/forms";
@import "mixins/progress";
@import "mixins/table-row";
// // Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/gradients";
// // Layout
@import "mixins/clearfix";
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "mixins/pulls";
+132
View File
@@ -0,0 +1,132 @@
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal;
display: none;
overflow: hidden;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
-webkit-overflow-scrolling: touch;
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
transition: transform .3s ease-out;
transform: translate(0, -25%);
}
&.in .modal-dialog { transform: translate(0, 0); }
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: $modal-dialog-margin;
}
// Actual modal
.modal-content {
position: relative;
background-color: $modal-content-bg;
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg);
@include box-shadow($modal-content-xs-box-shadow);
// Remove focus outline from opened modal
outline: 0;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-bg;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.in { opacity: $modal-backdrop-opacity; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: $modal-title-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include clearfix;
}
// Close icon
.modal-header .close {
margin-top: -2px;
}
// Title text within header
.modal-title {
margin: 0;
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
padding: $modal-inner-padding;
text-align: right; // right align buttons
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
}
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
// Scale up the modal
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-dialog {
max-width: $modal-md;
margin: $modal-dialog-sm-up-margin-y auto;
}
.modal-content {
@include box-shadow($modal-content-sm-up-box-shadow);
}
.modal-sm { max-width: $modal-sm; }
}
@include media-breakpoint-up(lg) {
.modal-lg { max-width: $modal-lg; }
}
+157
View File
@@ -0,0 +1,157 @@
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s or `<ul>`s.
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: inline-block;
@include hover-focus {
text-decoration: none;
}
// Disabled state lightens text and removes hover/tab effects
&.disabled {
color: $nav-disabled-link-color;
@include plain-hover-focus {
color: $nav-disabled-link-hover-color;
cursor: $cursor-disabled;
background-color: $nav-disabled-link-hover-bg;
}
}
}
// Nav inline
.nav-inline {
.nav-item {
display: inline-block;
}
.nav-item + .nav-item,
.nav-link + .nav-link {
margin-left: $nav-item-inline-spacer;
}
}
//
// Tabs
//
.nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@include clearfix();
.nav-item {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -$nav-tabs-border-width;
+ .nav-item {
margin-left: $nav-item-margin;
}
}
.nav-link {
display: block;
padding: $nav-link-padding;
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
@include hover-focus {
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
}
&.disabled {
@include plain-hover-focus {
color: $nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
}
}
}
.nav-link.active,
.nav-item.open .nav-link {
@include plain-hover-focus {
color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg;
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
}
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
}
//
// Pills
//
.nav-pills {
@include clearfix();
.nav-item {
float: left;
+ .nav-item {
margin-left: $nav-item-margin;
}
}
.nav-link {
display: block;
padding: $nav-link-padding;
@include border-radius($nav-pills-border-radius);
}
.nav-link.active,
.nav-item.open .nav-link {
@include plain-hover-focus {
color: $nav-pills-active-link-color;
cursor: default;
background-color: $nav-pills-active-link-bg;
}
}
}
.nav-stacked {
.nav-item {
display: block;
float: none;
+ .nav-item {
margin-top: $nav-item-margin;
margin-left: 0;
}
}
}
//
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
+258
View File
@@ -0,0 +1,258 @@
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
padding: $navbar-padding-y $navbar-padding-x;
@include clearfix;
@include media-breakpoint-up(sm) {
@include border-radius($navbar-border-radius);
}
}
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// A static, full width modifier with no rounded corners.
.navbar-full {
z-index: $zindex-navbar;
@include media-breakpoint-up(sm) {
@include border-radius(0);
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
// Undo the rounded corners
@include media-breakpoint-up(sm) {
@include border-radius(0);
}
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar-sticky-top {
position: sticky;
top: 0;
z-index: $zindex-navbar-sticky;
width: 100%;
// Undo the rounded corners
@include media-breakpoint-up(sm) {
@include border-radius(0);
}
}
//
// Brand/project name
//
.navbar-brand {
float: left;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: 1rem;
font-size: $font-size-lg;
@include hover-focus {
text-decoration: none;
}
> img {
display: block;
}
}
.navbar-divider {
float: left;
width: $border-width;
padding-top: .425rem;
padding-bottom: .425rem;
margin-right: $navbar-padding-x;
margin-left: $navbar-padding-x;
overflow: hidden;
&::before {
content: "\00a0";
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// Bootstrap JavaScript plugin.
.navbar-toggler {
padding: .5rem .75rem;
font-size: $font-size-lg;
line-height: 1;
background: none;
border: $border-width solid transparent;
@include border-radius($btn-border-radius);
@include hover-focus {
text-decoration: none;
}
}
// Navigation
//
// Custom navbar navigation built on the base `.nav` styles.
.navbar-nav {
.nav-item {
float: left;
}
.nav-link {
display: block;
padding-top: .425rem;
padding-bottom: .425rem;
+ .nav-link {
margin-left: 1rem;
}
}
.nav-item + .nav-item {
margin-left: 1rem;
}
}
// Dark links against a light background
.navbar-light {
.navbar-brand {
color: $navbar-light-active-color;
@include hover-focus {
color: $navbar-light-active-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-light-color;
@include hover-focus {
color: $navbar-light-hover-color;
}
}
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-light-active-color;
}
}
}
.navbar-divider {
background-color: rgba(0,0,0,.075);
}
}
// White links against a dark background
.navbar-dark {
.navbar-brand {
color: $navbar-dark-active-color;
@include hover-focus {
color: $navbar-dark-active-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
}
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-dark-active-color;
}
}
}
.navbar-divider {
background-color: rgba(255,255,255,.075);
}
}
// Navbar toggleable
//
// Custom override for collapse plugin in navbar.
// scss-lint:disable ImportantRule
.navbar-toggleable {
&-xs {
@include clearfix;
@include media-breakpoint-down(xs) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(sm) {
display: block !important;
}
}
&-sm {
@include clearfix;
@include media-breakpoint-down(sm) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(md) {
display: block !important;
}
}
&-md {
@include clearfix;
@include media-breakpoint-down(md) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(lg) {
display: block !important;
}
}
}
// scss-lint:enable ImportantRule
+424
View File
@@ -0,0 +1,424 @@
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
//
// 1. Change the default font family in all browsers (opinionated).
// 2. Prevent adjustments of font size after orientation changes in IE and iOS.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
// Remove the margin in all browsers (opinionated).
//
body {
margin: 0;
}
// HTML5 display definitions
// ==========================================================================
//
// Add the correct display in IE 9-.
// 1. Add the correct display in Edge, IE, and Firefox.
// 2. Add the correct display in IE.
//
article,
aside,
details, // 1
figcaption,
figure,
footer,
header,
main, // 2
menu,
nav,
section,
summary { // 1
display: block;
}
//
// Add the correct display in IE 9-.
//
audio,
canvas,
progress,
video {
display: inline-block;
}
//
// Add the correct display in iOS 4-7.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
//
progress {
vertical-align: baseline;
}
//
// Add the correct display in IE 10-.
// 1. Add the correct display in IE.
//
template, // 2
[hidden] {
display: none;
}
// Links
// ==========================================================================
//
// Remove the gray background on active links in IE 10.
//
a {
background-color: transparent;
}
//
// Remove the outline on focused links when they are also active or hovered
// in all browsers (opinionated).
//
a:active,
a:hover {
outline-width: 0;
}
// Text-level semantics
// ==========================================================================
//
// 1. Remove the bottom border in Firefox 39-.
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
//
abbr[title] {
border-bottom: none; // 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
}
//
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
//
b,
strong {
font-weight: inherit;
}
//
// Add the correct font weight in Chrome, Edge, and Safari.
//
b,
strong {
font-weight: bolder;
}
//
// Add the correct font style in Android 4.3-.
//
dfn {
font-style: italic;
}
//
// Correct the font size and margin on `h1` elements within `section` and
// `article` contexts in Chrome, Firefox, and Safari.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Add the correct background and color in IE 9-.
//
mark {
background-color: #ff0;
color: #000;
}
//
// Add the correct font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
// Embedded content
// ==========================================================================
//
// Remove the border on images inside links in IE 10-.
//
img {
border-style: none;
}
//
// Hide the overflow in IE.
//
svg:not(:root) {
overflow: hidden;
}
// Grouping content
// ==========================================================================
//
// 1. Correct the inheritance and scaling of font size in all browsers.
// 2. Correct the odd `em` font sizing in all browsers.
//
code,
kbd,
pre,
samp {
font-family: monospace, monospace; // 1
font-size: 1em; // 2
}
//
// Add the correct margin in IE 8.
//
figure {
margin: 1em 40px;
}
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
//
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
}
// Forms
// ==========================================================================
//
// Change font properties to `inherit` in all browsers (opinionated).
//
button,
input,
select,
textarea {
font: inherit;
}
//
// Restore the font weight unset by the previous rule.
//
optgroup {
font-weight: bold;
}
//
// Show the overflow in IE.
// 1. Show the overflow in Edge.
// 2. Show the overflow in Edge, Firefox, and IE.
//
button,
input, // 1
select { // 2
overflow: visible;
}
//
// Remove the margin in Safari.
// 1. Remove the margin in Firefox and Safari.
//
button,
input,
select,
textarea { // 1
margin: 0;
}
//
// Remove the inheritence of text transform in Edge, Firefox, and IE.
// 1. Remove the inheritence of text transform in Firefox.
//
button,
select { // 1
text-transform: none;
}
//
// Change the cursor in all browsers (opinionated).
//
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
//
// Restore the default cursor to disabled elements unset by the previous rule.
//
[disabled] {
cursor: default;
}
//
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS.
//
button,
html [type="button"], // 1
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
}
//
// Remove the inner border and padding in Firefox.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// Restore the focus styles unset by the previous rule.
//
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
}
//
// Change the border, margin, and padding in all browsers (opinionated).
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
// 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers.
//
legend {
box-sizing: border-box; // 1
color: inherit; // 2
display: table; // 1
max-width: 100%; // 1
padding: 0; // 3
white-space: normal; // 1
}
//
// Remove the default vertical scrollbar in IE.
//
textarea {
overflow: auto;
}
//
// 1. Add the correct box sizing in IE 10-.
// 2. Remove the padding in IE 10-.
//
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// Correct the cursor style of increment and decrement buttons in Chrome.
//
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// Correct the odd appearance of search inputs in Chrome and Safari.
//
[type="search"] {
-webkit-appearance: textfield;
}
//
// Remove the inner padding and cancel buttons in Chrome on OS X and
// Safari on OS X.
//
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
@@ -0,0 +1,73 @@
.pagination {
display: inline-block;
padding-left: 0;
margin-top: $spacer-y;
margin-bottom: $spacer-y;
@include border-radius();
}
.page-item {
display: inline; // Remove list-style and block-level defaults
&:first-child {
.page-link {
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
}
&.active .page-link {
@include plain-hover-focus {
z-index: 2;
color: $pagination-active-color;
cursor: default;
background-color: $pagination-active-bg;
border-color: $pagination-active-border;
}
}
&.disabled .page-link {
@include plain-hover-focus {
color: $pagination-disabled-color;
pointer-events: none;
cursor: $cursor-disabled;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border;
}
}
}
.page-link {
position: relative;
float: left; // Collapse white-space
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -1px;
color: $pagination-color;
text-decoration: none;
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
@include hover-focus {
color: $pagination-hover-color;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
}
}
//
// Sizing
//
.pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
}
.pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
}
+147
View File
@@ -0,0 +1,147 @@
.popover {
position: absolute;
top: 0;
left: 0;
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
padding: $popover-inner-padding;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: $popover-bg;
background-clip: padding-box;
border: $popover-border-width solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow($popover-box-shadow);
// Popover directions
&.popover-top,
&.bs-tether-element-attached-bottom {
margin-top: -$popover-arrow-width;
.popover-arrow {
bottom: -$popover-arrow-outer-width;
left: 50%;
margin-left: -$popover-arrow-outer-width;
border-top-color: $popover-arrow-outer-color;
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-color: $popover-arrow-color;
border-bottom-width: 0;
}
}
}
&.popover-right,
&.bs-tether-element-attached-left {
margin-left: $popover-arrow-width;
.popover-arrow {
top: 50%;
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
border-left-width: 0;
&::after {
bottom: -$popover-arrow-width;
left: 1px;
content: "";
border-right-color: $popover-arrow-color;
border-left-width: 0;
}
}
}
&.popover-bottom,
&.bs-tether-element-attached-top {
margin-top: $popover-arrow-width;
.popover-arrow {
top: -$popover-arrow-outer-width;
left: 50%;
margin-left: -$popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: $popover-arrow-outer-color;
&::after {
top: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-width: 0;
border-bottom-color: $popover-arrow-color;
}
}
}
&.popover-left,
&.bs-tether-element-attached-right {
margin-left: -$popover-arrow-width;
.popover-arrow {
top: 50%;
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-width: 0;
border-left-color: $popover-arrow-outer-color;
&::after {
right: 1px;
bottom: -$popover-arrow-width;
content: "";
border-right-width: 0;
border-left-color: $popover-arrow-color;
}
}
}
}
// Offset the popover to account for the popover arrow
.popover-title {
padding: $popover-title-padding-y $popover-title-padding-x;
margin: 0; // reset heading margin
font-size: $font-size-base;
background-color: $popover-title-bg;
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
$offset-border-width: ($border-width / $font-size-root);
@include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0);
&:empty {
display: none;
}
}
.popover-content {
padding: $popover-content-padding-y $popover-content-padding-x;
}
// Arrows
//
// .popover-arrow is outer, .popover-arrow::after is inner
.popover-arrow {
&,
&::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover-arrow {
border-width: $popover-arrow-outer-width;
}
.popover-arrow::after {
content: "";
border-width: $popover-arrow-width;
}
+116
View File
@@ -0,0 +1,116 @@
// scss-lint:disable ImportantRule, QualifyingElement
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request:
// http://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================
@if $enable-print-styles {
@media print {
*,
*::before,
*::after,
*::first-letter,
*::first-line {
// Bootstrap specific; comment out `color` and `background`
//color: #000 !important; // Black prints faster:
// http://www.sanbeiji.com/archives/953
text-shadow: none !important;
//background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
// Bootstrap specific; comment the following selector out
//a[href]::after {
// content: " (" attr(href) ")";
//}
abbr[title]::after {
content: " (" attr(title) ")";
}
// Bootstrap specific; comment the following selector out
//
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
//
//a[href^="#"]::after,
//a[href^="javascript:"]::after {
// content: "";
//}
pre,
blockquote {
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px
page-break-inside: avoid;
}
//
// Printing Tables:
// http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap specific changes start
// Bootstrap components
.navbar {
display: none;
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.tag {
border: $border-width solid #000;
}
.table {
border-collapse: collapse !important;
td,
th {
background-color: #fff !important;
}
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
// Bootstrap specific changes end
}
}
+145
View File
@@ -0,0 +1,145 @@
//
// Progress animations
//
@keyframes progress-bar-stripes {
from { background-position: $spacer-y 0; }
to { background-position: 0 0; }
}
//
// Basic progress bar
//
.progress {
display: block;
width: 100%;
height: $spacer-y; // todo: make a new var for this
margin-bottom: $spacer-y;
}
.progress[value] {
// Set overall background
background-color: $progress-bg;
// Remove Firefox and Opera border
border: 0;
// Reset the default appearance
appearance: none;
// Set overall border radius
@include border-radius($border-radius);
}
// Filled-in portion of the bar
.progress[value]::-ms-fill {
background-color: $progress-bar-color;
// Remove right-hand border of value bar from IE10+/Edge
border: 0;
}
.progress[value]::-moz-progress-bar {
background-color: $progress-bar-color;
@include border-left-radius($border-radius);
}
.progress[value]::-webkit-progress-value {
background-color: $progress-bar-color;
@include border-left-radius($border-radius);
}
// Tweaks for full progress bar
.progress[value="100"]::-moz-progress-bar {
@include border-right-radius($border-radius);
}
.progress[value="100"]::-webkit-progress-value {
@include border-right-radius($border-radius);
}
// Unfilled portion of the bar
.progress[value]::-webkit-progress-bar {
background-color: $progress-bg;
@include border-radius($border-radius);
@include box-shadow($progress-box-shadow);
}
base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
.progress[value] {
background-color: $progress-bg;
@include border-radius($border-radius);
@include box-shadow($progress-box-shadow);
}
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@media screen and (min-width:0\0) {
.progress {
background-color: $progress-bg;
@include border-radius($border-radius);
@include box-shadow($progress-box-shadow);
}
.progress-bar {
display: inline-block;
height: $spacer-y;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: $progress-bar-color;
@include border-left-radius($border-radius);
}
.progress[width="100%"] {
@include border-right-radius($border-radius);
}
}
//
// Striped
//
.progress-striped[value]::-webkit-progress-value {
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
.progress-striped[value]::-moz-progress-bar {
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
.progress-striped[value]::-ms-fill {
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
// IE9
@media screen and (min-width:0\0) {
.progress-bar-striped {
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
}
//
// Animated
//
.progress-animated[value]::-webkit-progress-value {
animation: progress-bar-stripes 2s linear infinite;
}
.progress-animated[value]::-moz-progress-bar {
animation: progress-bar-stripes 2s linear infinite;
}
// IE9
@media screen and (min-width:0\0) {
.progress-animated .progress-bar-striped {
animation: progress-bar-stripes 2s linear infinite;
}
}
//
// Variations
//
.progress-success {
@include progress-variant($progress-bar-success-bg);
}
.progress-info {
@include progress-variant($progress-bar-info-bg);
}
.progress-warning {
@include progress-variant($progress-bar-warning-bg);
}
.progress-danger {
@include progress-variant($progress-bar-danger-bg);
}
+393
View File
@@ -0,0 +1,393 @@
// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
// Reboot
//
// Global resets to common HTML elements and more for easier usage by Bootstrap.
// Adds additional rules on top of Normalize.css, including several overrides.
// Reset the box-sizing
//
// Change from `box-sizing: content-box` to `border-box` so that when you add
// `padding` or `border`s to an element, the overall declared `width` does not
// change. For example, `width: 100px;` will always be `100px` despite the
// `border: 10px solid red;` and `padding: 20px;`.
//
// Heads up! This reset may cause conflicts with some third-party widgets. For
// recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing.
//
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
// Make viewport responsive
//
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
// Eventually @viewport will replace <meta name="viewport">.
//
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
// and the fix for that involves a snippet of JavaScript to sniff the user agent
// and apply some conditional CSS.
//
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
//
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
// `.class-name { @import "bootstrap"; }`).
@at-root {
@-ms-viewport { width: device-width; }
}
//
// Reset HTML, body, and more
//
html {
// Sets a specific default `font-size` for user with `rem` type scales.
font-size: $font-size-root;
// As a side-effect of setting the @viewport above,
// IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
// Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
// thus making it hard to click on stuff near the right edge of the page.
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
// See https://github.com/twbs/bootstrap/issues/18543
-ms-overflow-style: scrollbar;
// Changes the default tap highlight to be completely transparent in iOS.
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
// Make the `body` use the `font-size-root`
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
// Go easy on the eyes and use something other than `#000` for text
color: $body-color;
// By default, `<body>` has no `background-color` so we set one as a best practice.
background-color: $body-bg;
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
outline: none !important;
}
//
// Typography
//
// Remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}
// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
margin-top: 0;
margin-bottom: 1rem;
}
// Abbreviations and acronyms
abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted $abbr-border-color;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: $dt-font-weight;
}
dd {
margin-bottom: .5rem;
margin-left: 0; // Undo browser default
}
blockquote {
margin: 0 0 1rem;
}
//
// Links
//
a {
color: $link-color;
text-decoration: $link-decoration;
@include hover-focus {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus {
@include tab-focus();
}
}
// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
@include hover-focus {
color: inherit;
text-decoration: none;
}
&:focus {
outline: none;
}
}
//
// Code
//
pre {
// Remove browser default top margin
margin-top: 0;
// Reset browser default of `1em` to use `rem`s
margin-bottom: 1rem;
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
overflow: auto;
}
//
// Figures
//
figure {
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
// We reset that to create a better flow in-page.
margin: 0 0 1rem;
}
//
// Images
//
img {
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
// centers them. This won't apply should you reset them to `block` level.
vertical-align: middle;
// Note: `<img>`s are deliberately not made responsive by default.
// For the rationale behind this, see the comments on the `.img-fluid` class.
}
// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role="button"] {
cursor: pointer;
}
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
//
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support removing the click delay via `touch-action: manipulation`.
// See:
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
touch-action: manipulation;
}
//
// Tables
//
table {
// No longer part of Normalize since v4
border-collapse: collapse;
// Reset for nesting within parents with `background-color`.
background-color: $table-bg;
}
caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $text-muted;
text-align: left;
caption-side: bottom;
}
th {
// Centered by default, but left-align-ed to match the `td`s below.
text-align: left;
}
//
// Forms
//
label {
// Allow labels to use `margin` for spacing.
display: inline-block;
margin-bottom: .5rem;
}
// Work around a Firefox/IE bug where the transparent `button` background
// results in a loss of the default `button` focus styles.
//
// Credit: https://github.com/suitcss/base/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
textarea {
// Remove all `margin`s so our classes don't have to do it themselves.
margin: 0;
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
// properly inherited. However, `line-height` isn't addressed there. Using this
// ensures we don't need to unnecessarily redeclare the global font stack.
line-height: inherit;
// iOS adds rounded borders by default
border-radius: 0;
}
input[type="radio"],
input[type="checkbox"] {
// Apply a disabled cursor for radios and checkboxes.
//
// Note: Neither radios nor checkboxes can be readonly.
&:disabled {
cursor: $cursor-disabled;
}
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
//
// Bug report: https://github.com/twbs/bootstrap/issues/11266
-webkit-appearance: listbox;
}
textarea {
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical;
}
fieldset {
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0;
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0;
margin: 0;
border: 0;
}
legend {
// Reset the entire legend element to match the `fieldset`
display: block;
width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
}
input[type="search"] {
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
-webkit-appearance: none;
}
// todo: needed?
output {
display: inline-block;
// font-size: $font-size-base;
// line-height: $line-height;
// color: $input-color;
}
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
[hidden] {
display: none !important;
}
@@ -0,0 +1,39 @@
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
.embed-responsive-21by9 {
padding-bottom: percentage(9 / 21);
}
.embed-responsive-16by9 {
padding-bottom: percentage(9 / 16);
}
.embed-responsive-4by3 {
padding-bottom: percentage(3 / 4);
}
.embed-responsive-1by1 {
padding-bottom: percentage(1 / 1);
}
+198
View File
@@ -0,0 +1,198 @@
//
// Basic Bootstrap table
//
.table {
width: 100%;
max-width: 100%;
margin-bottom: $spacer;
th,
td {
padding: $table-cell-padding;
vertical-align: top;
border-top: $table-border-width solid $table-border-color;
}
thead th {
vertical-align: bottom;
border-bottom: (2 * $table-border-width) solid $table-border-color;
}
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
}
.table {
background-color: $body-bg;
}
}
//
// Condensed table w/ half padding
//
.table-sm {
th,
td {
padding: $table-sm-cell-padding;
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: $table-border-width solid $table-border-color;
th,
td {
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
border-bottom-width: (2 * $table-border-width);
}
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-bg-accent;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
@include hover {
background-color: $table-bg-hover;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// Generate the contextual variants
@include table-row-variant(active, $table-bg-active);
@include table-row-variant(success, $state-success-bg);
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@include table-row-variant(danger, $state-danger-bg);
// Inverse styles
//
// Same table markup, but inverted color scheme—dark background and light text.
.thead-inverse {
th {
color: #fff;
background-color: $gray-dark;
}
}
.thead-default {
th {
color: $gray;
background-color: $gray-lighter;
}
}
.table-inverse {
color: $gray-lighter;
background-color: $gray-dark;
th,
td,
thead th {
border-color: $gray;
}
&.table-bordered {
border: 0;
}
}
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
.table-responsive {
display: block;
width: 100%;
min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
overflow-x: auto;
// TODO: find out if we need this still.
//
// border: $table-border-width solid $table-border-color;
// -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
}
.table-reflow {
thead {
float: left;
}
tbody {
display: block;
white-space: nowrap;
}
th,
td {
border-top: $table-border-width solid $table-border-color;
border-left: $table-border-width solid $table-border-color;
&:last-child {
border-right: $table-border-width solid $table-border-color;
}
}
thead,
tbody,
tfoot {
&:last-child {
tr:last-child th,
tr:last-child td {
border-bottom: $table-border-width solid $table-border-color;
}
}
}
// scss-lint:disable ImportantRule
tr {
float: left;
th,
td {
display: block !important;
border: $table-border-width solid $table-border-color;
}
}
// scss-lint:enable ImportantRule
}
+77
View File
@@ -0,0 +1,77 @@
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
.tag {
display: inline-block;
padding: $tag-padding-y $tag-padding-x;
font-size: $tag-font-size;
font-weight: $tag-font-weight;
line-height: 1;
color: $tag-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius();
// Empty tags collapse automatically
&:empty {
display: none;
}
}
// Quick fix for tags in buttons
.btn .tag {
position: relative;
top: -1px;
}
// scss-lint:disable QualifyingElement
// Add hover effects, but only for links
a.tag {
@include hover-focus {
color: $tag-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// scss-lint:enable QualifyingElement
// Pill tags
//
// Make them extra rounded with a modifier to replace v3's badges.
.tag-pill {
padding-right: $tag-pill-padding-x;
padding-left: $tag-pill-padding-x;
@include border-radius($tag-pill-border-radius);
}
// Colors
//
// Contextual variations (linked tags get darker on :hover).
.tag-default {
@include tag-variant($tag-default-bg);
}
.tag-primary {
@include tag-variant($tag-primary-bg);
}
.tag-success {
@include tag-variant($tag-success-bg);
}
.tag-info {
@include tag-variant($tag-info-bg);
}
.tag-warning {
@include tag-variant($tag-warning-bg);
}
.tag-danger {
@include tag-variant($tag-danger-bg);
}
+87
View File
@@ -0,0 +1,87 @@
// Base class
.tooltip {
position: absolute;
z-index: $zindex-tooltip;
display: block;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
&.in { opacity: $tooltip-opacity; }
&.tooltip-top,
&.bs-tether-element-attached-bottom {
padding: $tooltip-arrow-width 0;
margin-top: -$tooltip-margin;
.tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
}
&.tooltip-right,
&.bs-tether-element-attached-left {
padding: 0 $tooltip-arrow-width;
margin-left: $tooltip-margin;
.tooltip-arrow {
top: 50%;
left: 0;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
}
}
&.tooltip-bottom,
&.bs-tether-element-attached-top {
padding: $tooltip-arrow-width 0;
margin-top: $tooltip-margin;
.tooltip-arrow {
top: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
}
&.tooltip-left,
&.bs-tether-element-attached-right {
padding: 0 $tooltip-arrow-width;
margin-left: -$tooltip-margin;
.tooltip-arrow {
top: 50%;
right: 0;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
}
}
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: $tooltip-max-width;
padding: $tooltip-padding-y $tooltip-padding-x;
color: $tooltip-color;
text-align: center;
background-color: $tooltip-bg;
@include border-radius($border-radius);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
+150
View File
@@ -0,0 +1,150 @@
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}
h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }
.lead {
font-size: $lead-font-size;
font-weight: $lead-font-weight;
}
// Type display classes
.display-1 {
font-size: $display1-size;
font-weight: $display1-weight;
}
.display-2 {
font-size: $display2-size;
font-weight: $display2-weight;
}
.display-3 {
font-size: $display3-size;
font-weight: $display3-weight;
}
.display-4 {
font-size: $display4-size;
font-weight: $display4-weight;
}
//
// Horizontal rules
//
hr {
margin-top: $spacer-y;
margin-bottom: $spacer-y;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
}
//
// Emphasis
//
small,
.small {
font-size: $small-font-size;
font-weight: normal;
}
mark,
.mark {
padding: $mark-padding;
background-color: $mark-bg;
}
//
// Lists
//
.list-unstyled {
@include list-unstyled;
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled;
}
.list-inline-item {
display: inline-block;
&:not(:last-child) {
margin-right: $list-inline-padding;
}
}
//
// Misc
//
// Builds on `abbr`
.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
.blockquote {
padding: ($spacer / 2) $spacer;
margin-bottom: $spacer;
font-size: $blockquote-font-size;
border-left: $blockquote-border-width solid $blockquote-border-color;
}
.blockquote-footer {
display: block;
font-size: 80%; // back to default font-size
color: $blockquote-small-color;
&::before {
content: "\2014 \00A0"; // em dash, nbsp
}
}
// Opposite alignment of blockquote
.blockquote-reverse {
padding-right: $spacer;
padding-left: 0;
text-align: right;
border-right: $blockquote-border-width solid $blockquote-border-color;
border-left: 0;
}
.blockquote-reverse .blockquote-footer {
&::before {
content: "";
}
&::after {
content: "\00A0 \2014"; // nbsp, em dash
}
}
@if not $enable-flex {
// Clean up some horizontal `<dl>`s built with grids
// scss-lint:disable QualifyingElement
dl.row {
> dd + dt {
clear: left;
}
}
// scss-lint:enable QualifyingElement
}
@@ -0,0 +1,9 @@
@import "utilities/background";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/pulls";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";
+829
View File
@@ -0,0 +1,829 @@
// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.
// Colors
//
// Grayscale and brand colors for use across Bootstrap.
$gray-dark: #373a3c !default;
$gray: #55595c !default;
$gray-light: #818a91 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$brand-primary: #0275d8 !default;
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
$brand-inverse: $gray-dark !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-flex: false !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: $spacer-x,
y: $spacer-y
),
2: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
3: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
$border-width: 1px !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: #fff !default;
$body-color: $gray-dark !default;
// Links
//
// Style anchor elements.
$link-color: $brand-primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: 0,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$line-height-base: 1.5 !default;
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
$lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$text-muted: $gray-light !default;
$abbr-border-color: $gray-light !default;
$blockquote-small-color: $gray-light !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
$blockquote-border-width: .25rem !default;
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
$mark-padding: .2em !default;
$dt-font-weight: bold !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
$nested-kbd-font-weight: bold !default;
$list-inline-padding: 5px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
$caret-width: .3em !default;
$caret-width-lg: $caret-width !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default;
$table-bg: transparent !default;
$table-bg-accent: rgba(0,0,0,.05) !default;
$table-bg-hover: rgba(0,0,0,.075) !default;
$table-bg-active: $table-bg-hover !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
$btn-padding-x: 1rem !default;
$btn-padding-y: .5rem !default;
$btn-line-height: 1.25 !default;
$btn-font-weight: normal !default;
$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-primary-bg !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: #fff !default;
$btn-secondary-border: #ccc !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-info-bg !default;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-warning-bg !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .5rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-block-spacing-y: .5rem !default;
$btn-toolbar-margin: .5rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .5rem !default;
$input-line-height: 1.25 !default;
$input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-border-color: rgba(0,0,0,.15) !default;
$input-btn-border-width: $border-width !default; // For form controls and buttons
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-bg-focus: $input-bg;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-focus: $input-color;
$input-color-placeholder: #999 !default;
$input-padding-x-sm: .5rem !default;
$input-padding-y-sm: .25rem !default;
$input-padding-x-lg: 1.5rem !default;
$input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$form-group-margin-bottom: $spacer-y !default;
$input-group-addon-bg: $gray-lighter !default;
$input-group-addon-border-color: $input-border-color !default;
$cursor-disabled: not-allowed !default;
$custom-control-gutter: 1.5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-spacer-y: .25rem !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: #ddd !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default;
$custom-control-disabled-cursor: $cursor-disabled !default;
$custom-control-disabled-indicator-bg: #eee !default;
$custom-control-disabled-description-color: #767676 !default;
$custom-control-checked-indicator-color: #fff !default;
$custom-control-checked-indicator-bg: #0074d9 !default;
$custom-control-checked-indicator-box-shadow: none !default;
$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
$custom-control-active-indicator-color: #fff !default;
$custom-control-active-indicator-bg: #84c6ff !default;
$custom-control-active-indicator-box-shadow: none !default;
$custom-checkbox-radius: $border-radius !default;
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
$custom-checkbox-indeterminate-bg: #0074d9 !default;
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
$custom-checkbox-indeterminate-box-shadow: none !default;
$custom-radio-radius: 50% !default;
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
$custom-select-padding-x: .75rem !default;
$custom-select-padding-y: .375rem !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-color: $input-color !default;
$custom-select-disabled-color: $gray-light !default;
$custom-select-bg: #fff !default;
$custom-select-disabled-bg: $gray-lighter !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
$custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: #51a7e8 !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
$custom-select-sm-padding-y: .2rem !default;
$custom-select-sm-font-size: 75% !default;
$custom-file-height: 2.5rem !default;
$custom-file-width: 14rem !default;
$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
$custom-file-padding-x: .5rem !default;
$custom-file-padding-y: 1rem !default;
$custom-file-line-height: 1.5 !default;
$custom-file-color: #555 !default;
$custom-file-bg: #fff !default;
$custom-file-border-width: $border-width !default;
$custom-file-border-color: #ddd !default;
$custom-file-border-radius: $border-radius !default;
$custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: #eee !default;
$custom-file-text: (
placeholder: (
en: "Choose file..."
),
button-label: (
en: "Browse"
)
) !default;
// Form validation icons
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 160px !default;
$dropdown-padding-y: 5px !default;
$dropdown-margin-top: 2px !default;
$dropdown-bg: #fff !default;
$dropdown-border-color: rgba(0,0,0,.15) !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: #e5e5e5 !default;
$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default;
$dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
$dropdown-link-hover-bg: #f5f5f5 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default;
$dropdown-item-padding-x: 20px !default;
$dropdown-header-color: $gray-light !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.
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-navbar-sticky: 1030 !default;
$zindex-modal-bg: 1040 !default;
$zindex-modal: 1050 !default;
// Navbar
$navbar-border-radius: $border-radius !default;
$navbar-padding-x: $spacer !default;
$navbar-padding-y: ($spacer / 2) !default;
$navbar-brand-padding-y: .25rem !default;
$navbar-dark-color: rgba(255,255,255,.5) !default;
$navbar-dark-hover-color: rgba(255,255,255,.75) !default;
$navbar-dark-active-color: rgba(255,255,255,1) !default;
$navbar-dark-disabled-color: rgba(255,255,255,.25) !default;
$navbar-light-color: rgba(0,0,0,.3) !default;
$navbar-light-hover-color: rgba(0,0,0,.6) !default;
$navbar-light-active-color: rgba(0,0,0,.8) !default;
$navbar-light-disabled-color: rgba(0,0,0,.15) !default;
// Navs
$nav-item-margin: .2rem !default;
$nav-item-inline-spacer: 1rem !default;
$nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-disabled-link-hover-bg: transparent !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-bg: $body-bg !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;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-bg: $component-active-bg !default;
// Pagination
$pagination-padding-x: .75rem !default;
$pagination-padding-y: .5rem !default;
$pagination-padding-x-sm: .75rem !default;
$pagination-padding-y-sm: .275rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-color: $link-color !default;
$pagination-bg: #fff !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: #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;
// Jumbotron
$jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-lighter !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($state-success-bg, 5%) !default;
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken($state-info-bg, 7%) !default;
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$mark-bg: $state-warning-bg !default;
$state-warning-border: darken($state-warning-bg, 5%) !default;
$state-danger-text: #a94442 !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken($state-danger-bg, 5%) !default;
// Cards
$card-spacer-x: 1.25rem !default;
$card-spacer-y: .75rem !default;
$card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba(0,0,0,.125) !default;
$card-border-radius-inner: $card-border-radius !default;
$card-cap-bg: #f5f5f5 !default;
$card-bg: #fff !default;
$card-link-hover-color: #fff !default;
$card-img-overlay-padding: 1.25rem !default;
$card-deck-margin: .625rem !default;
$card-columns-sm-up-column-gap: 1.25rem !default;
// Tooltips
$tooltip-max-width: 200px !default;
$tooltip-color: #fff !default;
$tooltip-bg: #000 !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: 3px !default;
$tooltip-padding-x: 8px !default;
$tooltip-margin: 3px !default;
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
// Popovers
$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba(0,0,0,.2) !default;
$popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default;
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;
$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;
$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
// Tags
$tag-default-bg: $gray-light !default;
$tag-primary-bg: $brand-primary !default;
$tag-success-bg: $brand-success !default;
$tag-info-bg: $brand-info !default;
$tag-warning-bg: $brand-warning !default;
$tag-danger-bg: $brand-danger !default;
$tag-color: #fff !default;
$tag-link-hover-color: #fff !default;
$tag-font-size: 75% !default;
$tag-font-weight: bold !default;
$tag-padding-x: .4em !default;
$tag-padding-y: .25em !default;
$tag-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$tag-pill-border-radius: 10rem !default;
// Modals
// Padding applied to the modal body
$modal-inner-padding: 15px !default;
$modal-dialog-margin: 10px !default;
$modal-dialog-sm-up-margin-y: 30px !default;
$modal-title-padding: 15px !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: #fff !default;
$modal-content-border-color: rgba(0,0,0,.2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default;
$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default;
$modal-backdrop-bg: #000 !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: #e5e5e5 !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !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 !default;
$alert-link-font-weight: bold !default;
$alert-border-width: $border-width !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
$progress-bg: #eee !default;
$progress-bar-color: #0074d9 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
$progress-bar-bg: $brand-primary !default;
$progress-bar-success-bg: $brand-success !default;
$progress-bar-warning-bg: $brand-warning !default;
$progress-bar-danger-bg: $brand-danger !default;
$progress-bar-info-bg: $brand-info !default;
// List group
$list-group-bg: #fff !default;
$list-group-border-color: #ddd !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-hover-bg: #f5f5f5 !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border: $list-group-active-bg !default;
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
$list-group-disabled-color: $gray-light !default;
$list-group-disabled-bg: $gray-lighter !default;
$list-group-disabled-text-color: $list-group-disabled-color !default;
$list-group-link-color: #555 !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-link-heading-color: #333 !default;
$list-group-item-padding-x: 1.25rem !default;
$list-group-item-padding-y: .75rem !default;
$list-group-item-heading-margin-bottom: 5px !default;
// Image thumbnails
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: #ddd !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default;
// Figures
$figure-caption-font-size: 90% !default;
// Breadcrumbs
$breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default;
$breadcrumb-bg: $gray-lighter !default;
$breadcrumb-divider-color: $gray-light !default;
$breadcrumb-active-color: $gray-light !default;
$breadcrumb-divider: "/" !default;
// Media objects
$media-margin-top: 15px !default;
$media-heading-margin-bottom: 5px !default;
$media-alignment-padding-x: 10px !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-sm-up-size: 30px !default;
$carousel-control-opacity: .5 !default;
$carousel-control-font-size: 20px !default;
$carousel-indicators-width: 60% !default;
$carousel-indicator-size: 10px !default;
$carousel-indicator-active-size: 12px !default;
$carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-width: 70% !default;
$carousel-caption-sm-up-width: 60% !default;
$carousel-caption-color: #fff !default;
$carousel-icon-width: 20px !default;
// Close
$close-font-weight: bold !default;
$close-color: #000 !default;
$close-text-shadow: 0 1px 0 #fff !default;
// Code
$code-font-size: 90% !default;
$code-padding-x: .4rem !default;
$code-padding-y: .2rem !default;
$code-color: #bd4147 !default;
$code-bg: #f7f7f9 !default;
$kbd-color: #fff !default;
$kbd-bg: #333 !default;
$pre-bg: #f7f7f9 !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;
+8
View File
@@ -0,0 +1,8 @@
// Bootstrap with Flexbox enabled
//
// Includes all the imports from the standard Bootstrap project, but enables
// the flexbox variable.
$enable-flex: true;
@import "bootstrap";
+23
View File
@@ -0,0 +1,23 @@
// Bootstrap Grid only
//
// Includes relevant variables and mixins for the regular (non-flexbox) grid
// system, as well as the generated predefined classes (e.g., `.col-4-sm`).
//
// Variables
//
@import "custom";
@import "variables";
//
// Grid mixins
//
@import "mixins/clearfix";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
+11
View File
@@ -0,0 +1,11 @@
// Bootstrap Reboot only
//
// Includes only Normalize and our custom Reboot reset.
@import "custom";
@import "variables";
@import "mixins/hover";
@import "mixins/tab-focus";
@import "normalize";
@import "reboot";
+54
View File
@@ -0,0 +1,54 @@
/*!
* Bootstrap v4.0.0-alpha.3 (http://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "custom";
@import "variables";
@import "mixins";
// Reset and dependencies
@import "normalize";
@import "print";
// Core CSS
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// Components
@import "animation";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "tags";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";
// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
// Utility classes
@import "utilities";
@@ -0,0 +1,14 @@
// Alerts
@mixin alert-variant($background, $border, $body-color) {
background-color: $background;
border-color: $border;
color: $body-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($body-color, 10%);
}
}
@@ -0,0 +1,13 @@
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
#{$parent} {
color: #fff !important;
background-color: $color !important;
}
a#{$parent} {
@include hover-focus {
background-color: darken($color, 10%) !important;
}
}
}
@@ -0,0 +1,35 @@
// Single side border-radius
@mixin border-radius($radius: $border-radius) {
@if $enable-rounded {
border-radius: $radius;
}
}
@mixin border-top-radius($radius) {
@if $enable-rounded {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
}
@mixin border-right-radius($radius) {
@if $enable-rounded {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
}
@mixin border-bottom-radius($radius) {
@if $enable-rounded {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
}
@mixin border-left-radius($radius) {
@if $enable-rounded {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
}
@@ -0,0 +1,86 @@
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 544px, md: 768px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
// 544px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
//
// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
// 767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-up($name, $breakpoints) {
@include media-breakpoint-down($name, $breakpoints) {
@content;
}
}
}
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-up($lower, $breakpoints) {
@include media-breakpoint-down($upper, $breakpoints) {
@content;
}
}
}
@@ -0,0 +1,113 @@
// 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) {
$active-background: darken($background, 10%);
$active-border: darken($border, 12%);
color: $color;
background-color: $background;
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
color: $color;
background-color: $active-background;
border-color: $active-border;
}
&:focus,
&.focus {
color: $color;
background-color: $active-background;
border-color: $active-border;
}
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: $active-background;
border-color: $active-border;
// Remove the gradient for the pressed/active state
background-image: none;
@include box-shadow($btn-active-box-shadow);
&:hover,
&:focus,
&.focus {
color: $color;
background-color: darken($background, 17%);
border-color: darken($border, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
background-color: $background;
border-color: $border;
}
@include hover {
background-color: $background;
border-color: $border;
}
}
}
@mixin button-outline-variant($color) {
color: $color;
background-image: none;
background-color: transparent;
border-color: $color;
@include hover {
color: #fff;
background-color: $color;
border-color: $color;
}
&:focus,
&.focus {
color: #fff;
background-color: $color;
border-color: $color;
}
&:active,
&.active,
.open > &.dropdown-toggle {
color: #fff;
background-color: $color;
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
background-color: darken($color, 17%);
border-color: darken($color, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
}
@include hover {
border-color: lighten($color, 20%);
}
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
@include border-radius($border-radius);
}
@@ -0,0 +1,44 @@
// Card variants
@mixin card-variant($background, $border) {
background-color: $background;
border-color: $border;
.card-header,
.card-footer {
background-color: transparent;
}
}
@mixin card-outline-variant($color) {
background-color: transparent;
border-color: $color;
}
//
// Inverse text within a card for use with dark backgrounds
//
@mixin card-inverse {
.card-header,
.card-footer {
border-color: rgba(255,255,255,.2);
}
.card-header,
.card-footer,
.card-title,
.card-blockquote {
color: #fff;
}
.card-link,
.card-text,
.card-subtitle,
.card-blockquote .blockquote-footer {
color: rgba(255,255,255,.65);
}
.card-link {
@include hover-focus {
color: $card-link-hover-color;
}
}
}
@@ -0,0 +1,7 @@
@mixin clearfix() {
&::after {
content: "";
display: table;
clear: both;
}
}
@@ -0,0 +1,92 @@
// Form validation states
//
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
// and successes.
@mixin form-control-validation($color) {
// Color the label and help text
.form-control-feedback,
.form-control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label,
.custom-control {
color: $color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: $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: $color;
border-color: $color;
background-color: lighten($color, 40%);
}
// Optional feedback icon
.form-control-feedback {
color: $color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-focus` 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() {
&:focus {
color: $input-color-focus;
background-color: $input-bg-focus;
border-color: $input-border-focus;
outline: none;
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
@include box-shadow($shadow);
}
}
// 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!
@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
#{$parent} {
height: $input-height;
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
}
select#{$parent} {
height: $input-height;
line-height: $input-height;
}
textarea#{$parent},
select[multiple]#{$parent} {
height: auto;
}
}
@@ -0,0 +1,43 @@
// 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.
@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9
}
// 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.
@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9
}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
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 gets no color-stop at all for proper fallback
}
@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
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 gets no color-stop at all for proper fallback
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
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: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
@@ -0,0 +1,70 @@
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
@if $enable-flex {
width: 100%;
}
}
$breakpoint-counter: 0;
@each $breakpoint in map-keys($breakpoints) {
$breakpoint-counter: ($breakpoint-counter + 1);
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
@if $enable-flex {
.col-#{$breakpoint} {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns, $gutter);
}
}
@each $modifier in (pull, push) {
@for $i from 0 through $columns {
.#{$modifier}-#{$breakpoint}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
.offset-#{$breakpoint}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
}
}
}
}
}
@@ -0,0 +1,84 @@
/// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) {
margin-left: auto;
margin-right: auto;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@if not $enable-flex {
@include clearfix();
}
}
// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
@mixin make-row($gutter: $grid-gutter-width) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
} @else {
@include clearfix();
}
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
}
@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
@if $enable-flex {
width: 100%;
}
}
@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
@if $enable-flex {
flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns);
} @else {
float: left;
width: percentage($size / $columns);
}
}
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns);
}
@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-modifier($type, $size, $columns) {
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
@if $type == push {
@include make-col-push($size, $columns);
} @else if $type == pull {
@include make-col-pull($size, $columns);
} @else if $type == offset {
@include make-col-offset($size, $columns);
}
}
@@ -0,0 +1,60 @@
@mixin hover {
// TODO: re-enable along with mq4-hover-shim
// @if $enable-hover-media-query {
// // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// // Currently shimmed by https://github.com/twbs/mq4-hover-shim
// @media (hover: hover) {
// &:hover { @content }
// }
// }
// @else {
&:hover { @content }
// }
}
@mixin hover-focus {
@if $enable-hover-media-query {
&:focus { @content }
@include hover { @content }
}
@else {
&:focus,
&:hover {
@content
}
}
}
@mixin plain-hover-focus {
@if $enable-hover-media-query {
&,
&:focus {
@content
}
@include hover { @content }
}
@else {
&,
&:focus,
&:hover {
@content
}
}
}
@mixin hover-focus-active {
@if $enable-hover-media-query {
&:focus,
&:active {
@content
}
@include hover { @content }
}
@else {
&:focus,
&:active,
&:hover {
@content
}
}
}
@@ -0,0 +1,34 @@
// Image Mixins
// - Responsive image
// - Retina image
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@mixin img-fluid($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
}
// Retina image
//
// Short retina mixin for setting background-image and -size.
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url($file-1x);
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
// but doesn't convert dppx=>dpi.
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
// Compatibility info: http://caniuse.com/#feat=css-media-resolution
@media
only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
only screen and (min-resolution: 2dppx) { // Standardized
background-image: url($file-2x);
background-size: $width-1x $height-1x;
}
}
@@ -0,0 +1,30 @@
// List Groups
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
}
a.list-group-item-#{$state},
button.list-group-item-#{$state} {
color: $color;
.list-group-item-heading {
color: inherit;
}
@include hover-focus {
color: $color;
background-color: darken($background, 5%);
}
&.active {
@include plain-hover-focus {
color: #fff;
background-color: $color;
border-color: $color;
}
}
}
}
@@ -0,0 +1,7 @@
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
padding-left: 0;
list-style: none;
}
@@ -0,0 +1,10 @@
// Horizontal dividers
//
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: #e5e5e5) {
height: 1px;
margin: ($spacer-y / 2) 0;
overflow: hidden;
background-color: $color;
}
@@ -0,0 +1,9 @@
// 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);
// }
@@ -0,0 +1,21 @@
// Pagination
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
.page-link {
padding: $padding-y $padding-x;
font-size: $font-size;
}
.page-item {
&:first-child {
.page-link {
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
}
}
}
@@ -0,0 +1,23 @@
// Progress bars
@mixin progress-variant($color) {
&[value]::-webkit-progress-value {
background-color: $color;
}
&[value]::-moz-progress-bar {
background-color: $color;
}
// IE10+, Microsoft Edge
&[value]::-ms-fill {
background-color: $color;
}
// IE9
@media screen and (min-width:0\0) {
.progress-bar {
background-color: $color;
}
}
}
@@ -0,0 +1,6 @@
@mixin pull-left {
float: left !important;
}
@mixin pull-right {
float: right !important;
}
@@ -0,0 +1,8 @@
// 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.
@mixin reset-filter() {
filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
}
@@ -0,0 +1,17 @@
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or word-wrap.
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
}
@@ -0,0 +1,6 @@
// Resize anything
@mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
}
@@ -0,0 +1,32 @@
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content
@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}
@@ -0,0 +1,6 @@
// Sizing shortcuts
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
@@ -0,0 +1,9 @@
// WebKit-style focus
@mixin tab-focus() {
// WebKit-specific. Other browsers will keep their default outline style.
// (Initially tried to also force default via `outline: initial`,
// but that seems to erroneously remove the outline in Firefox altogether.)
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -0,0 +1,30 @@
// Tables
@mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table-#{$state} {
&,
> th,
> td {
background-color: $background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover {
$hover-background: darken($background, 5%);
.table-#{$state} {
@include hover {
background-color: $hover-background;
> td,
> th {
background-color: $hover-background;
}
}
}
}
}
@@ -0,0 +1,11 @@
// Tags
@mixin tag-variant($color) {
background-color: $color;
&[href] {
@include hover-focus {
background-color: darken($color, 10%);
}
}
}
@@ -0,0 +1,12 @@
// Typography
@mixin text-emphasis-variant($parent, $color) {
#{$parent} {
color: $color !important;
}
a#{$parent} {
@include hover-focus {
color: darken($color, 10%);
}
}
}
@@ -0,0 +1,8 @@
// CSS image replacement
@mixin text-hide() {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
@@ -0,0 +1,8 @@
// Text truncate
// Requires inline-block or block for proper styling
@mixin text-truncate() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -0,0 +1,21 @@
//
// Contextual backgrounds
//
.bg-inverse {
background-color: $brand-inverse;
}
.bg-faded {
background-color: $gray-lightest;
}
@include bg-variant('.bg-primary', $brand-primary);
@include bg-variant('.bg-success', $brand-success);
@include bg-variant('.bg-info', $brand-info);
@include bg-variant('.bg-warning', $brand-warning);
@include bg-variant('.bg-danger', $brand-danger);
@@ -0,0 +1,3 @@
.clearfix {
@include clearfix();
}
@@ -0,0 +1,13 @@
//
// Display utilities
//
.d-block {
display: block !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-inline {
display: inline !important;
}
@@ -0,0 +1,37 @@
// Flex variation
//
// Custom styles for additional flex alignment options.
@if $enable-flex {
@each $breakpoint in map-keys($grid-breakpoints) {
// Flex column reordering
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
}
// Alignment for every item
@include media-breakpoint-up($breakpoint) {
.flex-items-#{$breakpoint}-top { align-items: flex-start; }
.flex-items-#{$breakpoint}-middle { align-items: center; }
.flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
}
// Alignment per item
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-top { align-self: flex-start; }
.flex-#{$breakpoint}-middle { align-self: center; }
.flex-#{$breakpoint}-bottom { align-self: flex-end; }
}
// Horizontal alignment of item
@include media-breakpoint-up($breakpoint) {
.flex-items-#{$breakpoint}-left { justify-content: flex-start; }
.flex-items-#{$breakpoint}-center { justify-content: center; }
.flex-items-#{$breakpoint}-right { justify-content: flex-end; }
.flex-items-#{$breakpoint}-around { justify-content: space-around; }
.flex-items-#{$breakpoint}-between { justify-content: space-between; }
}
}
}
@@ -0,0 +1,13 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.pull-#{$breakpoint}-left {
@include pull-left();
}
.pull-#{$breakpoint}-right {
@include pull-right();
}
.pull-#{$breakpoint}-none {
float: none !important;
}
}
}
@@ -0,0 +1,11 @@
//
// Screenreaders
//
.sr-only {
@include sr-only();
}
.sr-only-focusable {
@include sr-only-focusable();
}
@@ -0,0 +1,43 @@
// Width
.w-100 { width: 100% !important; }
// Margin and Padding
.m-x-auto {
margin-right: auto !important;
margin-left: auto !important;
}
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $lengths in $spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
.#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; }
// Axes
.#{$abbrev}-x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}-y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
// Positioning
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}
@@ -0,0 +1,51 @@
//
// Text
//
// Alignment
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }
// Responsive alignment
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.text-#{$breakpoint}-left { text-align: left !important; }
.text-#{$breakpoint}-right { text-align: right !important; }
.text-#{$breakpoint}-center { text-align: center !important; }
}
}
// Transformation
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
// Weight and italics
.font-weight-normal { font-weight: normal; }
.font-weight-bold { font-weight: bold; }
.font-italic { font-style: italic; }
// Contextual colors
@include text-emphasis-variant('.text-muted', $text-muted);
@include text-emphasis-variant('.text-primary', $brand-primary);
@include text-emphasis-variant('.text-success', $brand-success);
@include text-emphasis-variant('.text-info', $brand-info);
@include text-emphasis-variant('.text-warning', $brand-warning);
@include text-emphasis-variant('.text-danger', $brand-danger);
// Misc
.text-hide {
@include text-hide();
}
@@ -0,0 +1,57 @@
// scss-lint:disable ImportantRule
//
// Visibility utilities
//
.invisible {
visibility: hidden !important;
}
// Responsive visibility utilities
@each $bp in map-keys($grid-breakpoints) {
.hidden-#{$bp}-up {
@include media-breakpoint-up($bp) {
display: none !important;
}
}
.hidden-#{$bp}-down {
@include media-breakpoint-down($bp) {
display: none !important;
}
}
}
// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.
.visible-print-block {
display: none !important;
@media print {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
@media print {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
@media print {
display: inline-block !important;
}
}
.hidden-print {
@media print {
display: none !important;
}
}
+34
View File
@@ -0,0 +1,34 @@
// Set image location.
$iconSpritePath: "[[pix:theme|glyphicons-halflings]]";
$iconWhiteSpritePath: "[[pix:theme|glyphicons-halflings-white]]";
$breadcrumb-divider: "";
// Import the bootstrap variables.
@import "bootstrap/bootstrap";
// Old Moodle stuff from base theme.
// Massive, needs broken up.
@import "moodle/core";
@import "moodle/admin";
@import "moodle/calendar";
@import "moodle/course";
@import "moodle/filemanager";
@import "moodle/message";
@import "moodle/question";
@import "moodle/user";
@import "moodle/search";
@import "moodle/blocks";
@import "moodle/forms";
@import "moodle/modules";
@import "moodle/chat";
@import "moodle/reports";
@import "moodle/backup-restore";
@import "moodle/tables";
@import "moodle/buttons";
@import "moodle/dock";
@import "moodle/grade";
@import "moodle/templates";
@import "moodle/undo";
@import "moodle/debug";
@import "moodle/expendable";
+787
View File
@@ -0,0 +1,787 @@
/* admin.less */
.formtable tbody th {
font-weight: normal;
text-align: right;
}
.path-admin #assignrole {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.path-admin .admintable .leftalign {
text-align: left;
}
.environmenttable {
.warn {
@extend .table-warning;
}
.error {
@extend .table-danger;
}
.ok {
@extend .table-success;
}
}
.path-admin .admintable.environmenttable .name,
.path-admin .admintable.environmenttable .info,
.path-admin #assignrole .admintable .role,
.path-admin #assignrole .admintable .userrole,
.path-admin #assignrole .admintable .roleholder {
white-space: nowrap;
}
.path-admin .incompatibleblockstable td.c0 {
font-weight: bold;
}
#page-admin-course-category .addcategory {
padding: 10px;
}
#page-admin-course-index .editcourse {
margin: 20px auto;
}
#page-admin-course-index .editcourse th,
#page-admin-course-index .editcourse td {
padding-left: 10px;
padding-right: 10px;
}
.timewarninghidden {
display: none;
}
.statusok {
@extend .label-success;
}
.statuswarning {
@extend .label-warning;
}
.statusserious,
.statuscritical {
@extend .label-danger;
}
#page-admin-report-capability-index #capabilitysearch {
width: 30em;
}
#page-admin-report-backups-index .backup-error,
#page-admin-report-backups-index .backup-unfinished {
@extend .label-danger;
}
#page-admin-report-backups-index .backup-skipped,
#page-admin-report-backups-index .backup-ok,
#page-admin-report-backups-index .backup-notyetrun {
@extend .label-success;
}
#page-admin-report-backups-index .backup-warning {
@extend .label-warning;
}
#page-admin-qtypes .disabled,
#page-admin-qbehaviours .disabled {
@extend .text-muted;
}
#page-admin-qtypes #qtypes div,
#page-admin-qtypes #qtypes form,
#page-admin-qbehaviours #qbehaviours div,
#page-admin-qbehaviours #qbehaviours form {
display: inline;
}
#page-admin-qtypes #qtypes img.spacer,
#page-admin-qbehaviours #qbehaviours img.spacer {
width: 16px;
}
// Make them more finger friendly.
img.iconsmall {
margin: 0;
padding: 0.3em;
}
#page-admin-qbehaviours .cell.c3,
#page-admin-qtypes .cell.c3 {
font-size: $font-size-sm;
}
#page-admin-lang .generalbox,
#page-admin-course-index .singlebutton,
#page-admin-course-index .addcategory,
#page-course-index .buttons,
#page-course-index-category .buttons,
#page-admin-course-category .addcategory,
#page-admin-stickyblocks .generalbox,
#page-admin-maintenance .buttons,
#page-admin-course-index .buttons,
#page-admin-course-category .buttons,
#page-admin-index .copyright,
#page-admin-index .copyrightnotice,
#page-admin-index .adminerror .singlebutton,
#page-admin-index .adminwarning .singlebutton,
#page-admin-index #layout-table .singlebutton {
text-align: center;
margin-bottom: 1em;
}
.path-admin-roles .capabilitysearchui {
text-align: left;
margin-left: auto;
margin-right: auto;
}
#page-admin-roles-define .topfields {
margin: 1em 0 2em;
}
#page-admin-roles-define .capdefault {
@extend .table-hover;
}
#page-filter-manage .backlink,
.path-admin-roles .backlink {
margin-top: 1em;
}
#page-admin-roles-explain #chooseuser h3,
#page-admin-roles-usersroles .contextname {
margin-top: 0;
}
#page-admin-roles-explain #chooseusersubmit {
margin-top: 0;
text-align: center;
}
#page-admin-roles-usersroles p {
margin: 0;
}
#page-admin-roles-override .cell.c1,
#page-admin-roles-assign .cell.c3,
#page-admin-roles-assign .cell.c1 {
padding-top: 0.75em;
}
#page-admin-roles-override .overridenotice,
#page-admin-roles-define .definenotice {
margin: 1em 10% 2em 10%;
text-align: left;
}
#notice {
// Would like the use the alert stuff below for this,
// but the way buttons are used makes it tricky.
width: 60%;
min-width: 220px;
margin: auto;
}
#page-admin-index .releasenoteslink,
#page-admin-index .adminwarning,
#page-admin-index .adminerror {
margin: auto;
@extend .alert;
@extend .alert-warning;
width: 60%;
min-width: 220px;
}
#page-admin-index .adminerror {
@extend .alert-danger;
}
#page-admin-index .releasenoteslink {
@extend .alert-info;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo span {
display: block;
}
#page-admin-index .updateplugin div {
margin-bottom: 0.5em;
}
#page-admin-index .updateplugin .updatepluginconfirmexternal {
@extend .label-warning;
}
#page-admin-user-user_bulk #users .fgroup {
white-space: nowrap;
}
#page-admin-report-stats-index .graph {
text-align: center;
margin-bottom: 1em;
}
#page-admin-report-courseoverview-index .graph {
text-align: center;
margin-bottom: 1em;
}
#page-admin-lang .translator {
border-width: 1px;
border-style: solid;
}
// This is the CSS for the role assignment control.
.path-admin .roleassigntable {
width: 100%;
}
.path-admin .roleassigntable td {
vertical-align: top;
padding: 0.2em 0.3em
}
.path-admin .roleassigntable p {
text-align: left;
margin: 0.2em 0;
}
.path-admin .roleassigntable #existingcell,
.path-admin .roleassigntable #potentialcell {
width: 42%;
}
// Targetting the label at the top.
.path-admin .roleassigntable #existingcell p > label:first-child,
.path-admin .roleassigntable #potentialcell p > label:first-child {
font-weight: bold;
}
.path-admin .roleassigntable #buttonscell {
width: 16%;
}
.path-admin .roleassigntable #buttonscell #assignoptions {
font-size: $font-size-sm;
}
.path-admin .roleassigntable #removeselect_wrapper,
.path-admin .roleassigntable #addselect_wrapper {
width: 100%;
}
.path-admin table.rolecap tr.rolecap th {
text-align: left;
font-weight: normal;
}
.path-admin .rolecap .hiddenrow {
display: none;
}
.path-admin #defineroletable {
.rolecap {
.inherit,
.allow,
.prevent,
.prohibit {
text-align: center;
padding: 0;
min-width: 3.5em;
}
}
}
.path-admin .rolecap .cap-name,
.path-admin .rolecap .note {
display: block;
font-size: $font-size-sm;
white-space: nowrap;
font-weight: normal;
}
.path-admin .rolecap label {
display: block;
text-align: center;
padding: 0.5em;
margin: 0;
}
.plugincheckwrapper {
width: 100%;
}
.environmentbox {
margin-top: 1em;
}
#mnetconfig table {
margin-left: auto;
margin-right: auto;
}
.environmenttable .cell {
padding: .15em .5em;
}
.environmenttable img.iconhelp {
padding-right: .3em;
}
#trustedhosts .generaltable {
margin-left: auto;
margin-right: auto;
width: 500px;
}
#trustedhosts .standard {
width: auto;
}
// This usage of legend is a bit weird,
// seems to be using them as error text
// that's only sometimes visible. Should
// look into sorting it.
#adminsettings legend {
display: none;
}
#adminsettings fieldset.error {
margin: .2em 0 .5em 0;
}
#adminsettings fieldset.error legend {
display: block;
}
#admin-spelllanguagelist textarea,
#page-admin-setting-editorsettingstinymce .form-textarea textarea {
/* rtl:ignore */
text-align: left;
/* rtl:ignore */
direction: ltr;
}
/* Styles for flags on admin settings */
.adminsettingsflags {
float: right;
}
.adminsettingsflags label {
margin-right: 7px;
}
.form-description {
clear: right;
}
.form-item .form-setting .form-htmlarea {
display: inline;
}
.form-item .form-setting .form-htmlarea .htmlarea {
width: 640px;
display: block;
}
.form-item .form-setting .form-multicheckbox ul {
list-style: none;
padding: 0;
margin: 7px 0 0 0;
}
.form-item .form-setting .defaultsnext {
margin-right: 0.5em;
display: inline;
}
.form-item .form-setting .locked-checkbox {
margin-right: 0.2em;
margin-left: 0.5em;
display: inline;
}
.form-item .form-setting .form-password .unmask,
.form-item .form-setting .form-defaultinfo {
display: inline-block;
}
.form-item .pathok,
.form-item .patherror {
margin-left: 0.5em;
}
#admin-emoticons td input {
width: 8em;
}
#admin-emoticons td.c0 input {
width: 4em;
}
#adminthemeselector .selectedtheme td.c0 {
border: 1px solid $state-info-border;
border-right-width: 0;
}
#adminthemeselector .selectedtheme td.c1 {
border: 1px solid $state-info-border;
border-left-width: 0;
}
.admin_colourpicker,
.admin_colourpicker_preview {
display: none;
}
.jsenabled .admin_colourpicker_preview {
display: inline;
}
.jsenabled .admin_colourpicker {
display: block;
height: 102px;
width: 410px;
margin-bottom: 10px;
}
.admin_colourpicker .loadingicon {
vertical-align: middle;
margin-left: auto;
}
.admin_colourpicker .colourdialogue {
float: left;
border: 1px solid $state-info-border;
}
.admin_colourpicker .previewcolour {
border: 1px solid $state-info-border;
margin-left: 301px;
}
.admin_colourpicker .currentcolour {
border: 1px solid $state-info-border;
margin-left: 301px;
border-top-width: 0;
}
#page-admin-index #notice .checkforupdates {
text-align: center;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity200 .info.release {
@extend .label-info;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity100 .info.release,
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity150 .info.release {
@extend .label-warning;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo.maturity50 .info.release {
@extend .label-danger;
}
// Plugins overview page at admin/plugins.php
#page-admin-plugins {
#plugins-overview-panel {
.info {
display: inline-block;
margin-right: 1em;
}
}
.checkforupdates {
margin: 10px 0;
.singlebutton {
margin: 5px 0;
padding: 0;
div, input {
margin: 0 3px 0 0;
}
}
}
.updateavailableinstallall {
margin: 5px 0;
padding: 0;
div, input {
margin: 0 3px 5px 0;
}
}
#plugins-control-panel {
.status-missing td {
@extend .table-warning;
}
.pluginname {
.displayname img.icon {
padding-top: 0;
padding-bottom: 0;
}
.componentname {
font-size: $font-size-sm;
@extend .text-muted;
margin-left: 22px;
}
}
.version {
.versionnumber {
font-size: $font-size-sm;
@extend .text-muted;
}
.release {
}
}
.availability {
}
.settings {
}
.uninstall {
a {
@extend .label-warning;
}
}
.notes {
.label {
margin-right: 3px;
}
.requiredby {
font-size: $font-size-sm;
@extend .text-muted;
}
}
}
}
// Plugins check page displayed during upgrade.
#plugins-check-page {
.page-description {
@extend .text-muted;
}
// Check for updates.
.checkforupdates {
.singlebutton {
margin: 5px 0;
padding: 0;
div, input {
margin: 0 3px 0 0;
}
}
}
// Section before the plugins check table.
#plugins-check-info {
.actions {
> div {
display: inline-block;
margin-right: 1em;
}
.singlebutton {
margin: 5px 0;
padding: 0;
div, input {
margin: 0 3px 0 0;
}
}
}
}
// Plugins check table.
#plugins-check {
.requires-ok {
@extend .text-muted;
}
.status-missing, .status-downgrade {
td {
@extend .table-danger;
}
}
.displayname {
.pluginicon {
margin-right: 5px;
width: 16px;
}
.plugindir {
@extend .text-muted;
font-size: $font-size-sm;
}
}
.requires ul {
margin-left: 13px; // To undo the default 25px, does not look that great inside a table cell;
}
.status {
.actionbutton {
margin: 5px 0px;
padding: 0;
input {
margin: 0;
}
}
}
}
.plugins-check-dependencies-actions {
> div {
display: inline-block;
margin-right: 1em;
}
.singlebutton {
margin: 5px 0;
padding: 0;
div, input {
margin: 0 3px 0 0;
}
}
}
// List of available dependencies on the plugins check page.
#plugins-check-available-dependencies {
.displayname .component {
font-size: $font-size-sm;
@extend .text-muted;
}
.info .actions {
> div {
display: inline-block;
margin-right: 1em;
}
.dependencyinstall {
display: block;
margin: 5px 0;
padding: 0;
input {
margin: 0;
}
}
}
}
}
// Available plugin update notification.
#plugins-check-page, #plugins-control-panel {
.pluginupdateinfo {
@extend .table-info;
&.maturity50 {
@extend .table-danger;
}
&.maturity100, &.maturity150 {
@extend .table-warning;
}
padding: 5px;
margin: 10px 0;
@include border-radius(5px);
.info {
display: inline-block;
}
.separator:after {
content: " | ";
}
.singlebutton {
margin: 5px 0;
padding: 0;
div, input {
margin: 0 3px 0 0;
}
}
}
}
.plugins-management-confirm-buttons {
> div {
display: inline-block;
margin: 1em 1em 1em 0;
}
.continue {
padding: 0;
div, input {
margin: 0;
}
}
}
.uninstalldeleteconfirmexternal {
@extend .alert-warning;
padding: 0.5em 1em;
margin: 5px 0 10px 0;
}
#page-admin-index .upgradepluginsinfo {
text-align: center;
}
#page-admin-index .adminwarning.availableupdatesinfo .moodleupdateinfo .separator:after {
content: " | ";
}
/** MNet networking */
#page-admin-mnet-peers .box.deletedhosts {
margin-bottom: 1em;
font-size: $font-size-sm;
}
#page-admin-mnet-peers .mform .deletedhostinfo {
@extend .form-control-danger;
padding: 4px;
margin-bottom: 5px;
}
#core-cache-plugin-summaries table,
#core-cache-store-summaries table {
width: 100%;
}
#core-cache-lock-summary table,
#core-cache-definition-summaries table,
#core-cache-mode-mappings table {
margin: 0 auto;
}
#core-cache-store-summaries .default-store td {
font-style: italic;
}
#core-cache-rescan-definitions,
#core-cache-mode-mappings .edit-link,
#core-cache-lock-summary .new-instance {
margin-top: 0.5em;
text-align: center;
}
.tinymcesubplugins img.icon {
padding-top: 0;
padding-bottom: 0;
}
.maintenancewarning {
padding: 3px 1em;
text-align: center;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
z-index: 1;
&.error {
@extend .form-control-danger;
}
&.warning {
@extend .form-control-warning;
}
}
#adminsettings .form-overridden {
@extend .form-control-feedback;
}
@@ -0,0 +1,233 @@
.path-backup .mform .grouped_settings.section_level {
@extend .card;
padding: 10px 0 0 0;
clear: both;
}
.path-backup .mform .grouped_settings {
clear: both;
overflow: hidden;
}
.path-backup .include_setting,
.path-backup .grouped_settings .normal_setting {
display: inline-block;
}
.path-backup .include_setting.section_level label {
font-weight: bold;
}
.path-backup .mform .fitem .fitemtitle {
width: 260px;
}
.path-backup .mform .fitem .felement {
margin-left: 280px;
}
.path-backup .notification.dependencies_enforced {
text-align: center;
color: $state-danger-text;
font-weight: bold;
}
.path-backup .backup_progress {
text-align: center;
}
.path-backup .backup_progress .backup_stage {
@extend .text-muted;
}
.path-backup .backup_progress .backup_stage.backup_stage_current {
font-weight: bold;
color: inherit;
}
.path-backup .backup_progress .backup_stage.backup_stage_next {
}
.path-backup .backup_progress span.backup_stage.backup_stage_complete {
color: inherit;
}
#page-backup-restore .filealiasesfailures {
background-color: $state-danger-bg;
}
#page-backup-restore .filealiasesfailures .aliaseslist {
width: 90%;
margin: 0.8em auto;
background-color: $body-bg;
border: 1px dotted #666;
}
.path-backup .fitem .smallicon {
vertical-align: text-bottom;
}
.backup-restore .backup-section > h2.header,
.backup-restore .backup-section .backup-sub-section h3 {
// Copied from bootstrap/forms.less tag legend
display: block;
width: 100%;
padding: 0;
margin-bottom: $line-height;
font-size: $font-size-base * 1.5;
line-height: $line-height * 2;
color: $gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
.backup-restore .backup-section .noticebox {
margin: 1em auto;
width: 60%;
text-align: center;
}
.backup-restore .backup-section.settings-section .detail-pair {
width: 50%;
display: inline-block;
}
.backup-restore .backup-section.settings-section .detail-pair-label {
width: 65%;
}
.backup-restore .backup-section.settings-section .detail-pair-value {
width: 25%;
}
.backup-restore .activitytable {
min-width: 500px;
}
.backup-restore .activitytable .modulename {
width: 100px;
}
.backup-restore .activitytable .moduleincluded {
width: 50px;
}
.backup-restore .activitytable .userinfoincluded {
width: 50px;
}
.backup-restore .detail-pair-label {
display: inline-block;
width: 25%;
padding: 8px;
margin: 0;
text-align: right;
font-weight: bold;
vertical-align: top;
}
.backup-restore .detail-pair-value {
display: inline-block;
width: 65%;
padding: 8px;
margin: 0;
}
.backup-restore .detail-pair-value > .sub-detail {
display: block;
font-size: $font-size-sm;
@extend .text-muted;
}
.backup-restore > .singlebutton {
text-align: right;
}
.path-backup .mform .fgroup {
.proceedbutton {
float: right;
margin-right: 5%;
}
.oneclickbackup {
float: right;
}
}
.restore-course-search .rcs-results {
width: 70%;
min-width: 400px;
}
.restore-course-search .rcs-results table {
width: 100%;
margin: 0;
border-width: 0;
}
.restore-course-search .rcs-results table .no-overflow {
max-width: 600px;
}
.restore-course-search .rcs-results .paging {
text-align: left;
margin: 0;
background-color: #eee;
padding: 3px;
}
.restore-course-category .rcs-results {
width: 70%;
min-width: 400px;
border: 1px solid #ddd;
margin: 5px 0;
}
.restore-course-category .rcs-results table {
width: 100%;
margin: 0;
border-width: 0;
}
.restore-course-category .rcs-results table .no-overflow {
max-width: 600px;
}
.restore-course-category .rcs-results .paging {
text-align: left;
margin: 0;
background-color: #eee;
padding: 3px;
}
.path-backup .wibbler {
width: 500px;
margin: 0 auto 10px;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
position: relative;
min-height: 4px;
}
.path-backup .wibbler .wibble {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
}
.path-backup .wibbler .state0 {
background: #eee;
}
.path-backup .wibbler .state1 {
background: #ddd;
}
.path-backup .wibbler .state2 {
background: #ccc;
}
.path-backup .wibbler .state3 {
background: #bbb;
}
.path-backup .wibbler .state4 {
background: #aaa;
}
.path-backup .wibbler .state5 {
background: #999;
}
.path-backup .wibbler .state6 {
background: #888;
}
.path-backup .wibbler .state7 {
background: #777;
}
.path-backup .wibbler .state8 {
background: #666;
}
.path-backup .wibbler .state9 {
background: #555;
}
.path-backup .wibbler .state10 {
background: #444;
}
.path-backup .wibbler .state11 {
background: #333;
}
.path-backup .wibbler .state12 {
background: #222;
}
.path-backup .backup_log {
margin-top: 2em;
}
.path-backup .backup_log h2 {
font-size: 1em;
}
.path-backup .backup_log_contents {
border: 1px solid #ddd;
padding: 10px;
height: 300px;
overflow-y: scroll;
}
+240
View File
@@ -0,0 +1,240 @@
// General block styles.
.block {
@extend .card;
padding: 8px 0;
.header {
h2 {
font-size: $font-size-sm;
@extend .p-x-1;
@extend .p-t-1;
@extend .font-weight-bold;
word-wrap: break-word;
margin: 0;
}
.block_action {
padding: 3px 15px;
float: right;
> * {
margin-left:3px;
}
.block-hider-show,
.block-hider-hide {
cursor: pointer;
}
.block-hider-show {
display: none;
}
}
}
.content {
padding: 4px 14px;
word-wrap: break-word;
h3 {
font-size: 1.1em;
}
hr {
margin: 5px 0;
}
.userpicture {
width: 16px;
height: 16px;
margin-right: 6px;
}
.list {
li.listentry {
clear: both;
}
.c0 {
display: inline;
}
.c1 {
margin-left: 5px;
display: inline;
}
}
}
.footer {
margin-bottom: 4px;
display: block;
padding: 3px 5px;
}
&.beingmoved {
border-width: 2px;
border-style: dashed;
}
&.invisible {
.header h2 {
opacity: 0.5;
}
}
&.hidden .header .block_action {
.block-hider-hide {
display: none;
}
.block-hider-show {
display: inline;
}
}
&.list_block .unlist > li > .column {
display: inline-block;
}
}
.editing {
.block {
.header {
.commands {
clear: both;
text-align: right;
display: block;
padding: 3px 15px;
> a {
margin: 0 3px;
}
.icon img {
width: 12px;
height: 12px;
}
img.actionmenu {
width: auto;
}
}
}
}
}
// Hide the block content when the block has been minimised.
.jsenabled .block.hidden .content {
display: none;
}
// Style the div used as a move target for non-drag+drop block moves.
.blockmovetarget {
border-width: 2px;
border-style: dashed;
display: block;
height: 1em;
margin-bottom: 20px;
}
// Style the div that contains the cancel link for moving a block with JS disabled.
.blockannotation {
// Blocks have a bottom margin of 20px, to associate this link with the block being moved
// we move it up 10px, and then give it a bottom margin of 10px giving it a better visual association
position: relative;
top: -10px;
margin-bottom: 10px;
}
// Styles for the blog menu block.
.block_blog_menu #blogsearchquery {
max-width: 92%;
}
// Styles for the admin block.
.block_settings {
#adminsearchquery {
max-width: 92%;
}
}
// Styles for the search forums block.
.block_search_forums {
#searchform_search {
width: auto;
max-width: 92%;
}
}
// Styles for the Calendar Upcoming block.
.block_calendar_upcoming {
.content {
.date {
padding-left: 22px;
}
.footer {
margin-top: .5em;
padding-top: 10px;
padding-left: 0px;
}
}
}
// Styles for the RSS client block.
.block_rss_client {
.content li {
margin-bottom: 10px;
padding: 5px;
border: 1px solid $table-border-color;
@include border-radius($border-radius);
.link {
font-weight: inherit;
}
}
.list li:first-child {
border-top-width: 1px; // undo the style provided by the block's styles.css
}
}
// Styles for the news items block.
.block_news_items .content {
.newlink {
padding-bottom: 10px;
}
ul li {
border-top: 1px rgba(0,0,0,0.05) solid;
padding: 2px;
display: table;
width: 100%;
.info {
display: table-header-group;
}
.date {
font-size: $font-size-sm;
display: inline;
}
.name {
font-size: $font-size-sm;
padding-left: 1ex;
display: inline;
}
}
.footer {
padding-top: 10px;
padding-left: 0px;
}
}
.block_navigation .block_tree ul {
margin: 0px;
}
// Overide for login block.
.block_login {
input#login_username,
input#login_password {
width: 95%;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 280px;
}
input[type="submit"] {
margin: 10px 0;
}
}
// Styles for the special "Add block" block shown while editing.
.block_adminblock {
.content {
display: block;
padding: 3px 5px;
}
select {
max-width: 92%;
}
}
+114
View File
@@ -0,0 +1,114 @@
.singlebutton {
div {
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
}
// Two singlebuttons side by side for ok/cancel.
#notice {
.buttons {
.singlebutton {
display: inline-block;
}
}
}
.continuebutton {
text-align: center;
}
p.arrow_button {
margin-top: 5em;
text-align: center;
#remove {
margin: 3em auto 5em;
}
input {
@extend .btn-block;
}
}
#addcontrols {
// The margin top is equal the combination of the line-height and margin of a <p>,
// because the visual parent is a <p>.
margin-top: $line-height + ($line-height / 2);
text-align: center;
margin-bottom: 3em;
label {
display: inline;
}
}
#addcontrols,
#removecontrols {
input {
@extend .btn-block;
margin: auto;
}
}
.btn-lineup {
margin: 0 0 10px 5px;
}
input[name="searchwikicontent"] + input[type="submit"],
select + input[type="submit"],
input[type="text"] + input[type="button"],
input[type="password"] + input[type="submit"],
input[type="text"] + button,
input[type="text"] + input[type="submit"] {
@extend .btn-lineup;
}
button,
input.form-submit,
input[type="button"],
input[type="submit"],
input[type="reset"] {
@extend .btn;
}
button,
input.form-submit,
input[type="button"],
input[type="submit"],
input[type="reset"] {
@extend .btn-lineup;
}
button {
&.yui3-button {
&.closebutton {
background-position: 0 0;
&:hover {
background-position: 0 0;
// Because we assign the button look to every button tag
// above, we need to remove some styles from non-standard
// looking buttons. Correct fix, assign .btn class to every
// actual button in Moodle so we don't need to carpet bomb the
// bare button tag.
}
}
}
}
input {
&.fp-btn-choose {
@extend .btn-sm;
}
}
.user-enroller-panel {
.uep-search-results {
.user,
.cohort {
.options {
.enrol {
@extend .btn-sm;
}
}
}
}
}
+385
View File
@@ -0,0 +1,385 @@
/* calendar.less */
// Calendar colour variables defined.
$calendarEventCourseColor: #ffd3bd; // Pale red.
$calendarEventGlobalColor: #d6f8cd; // Pale green.
$calendarEventGroupColor: #fee7ae; // Pale yellow.
$calendarEventUserColor: #dce7ec; // Pale blue.
// Calendar event background colours defined.
.calendar_event_course {
background-color: $calendarEventCourseColor;
}
.calendar_event_global {
background-color: $calendarEventGlobalColor;
}
.calendar_event_group {
background-color: $calendarEventGroupColor;
}
.calendar_event_user {
background-color: $calendarEventUserColor;
}
// Calendar restyling.
.path-calendar {
.calendartable {
width: 100%;
th, td {
width: 14%;
vertical-align: top;
text-align: center;
border: 0;
}
}
.calendar-controls {
.previous,
.next,
.current {
display: block;
float: left;
width: 12%;
}
.previous {
text-align: left;
}
.current {
text-align: center;
width: 76%;
}
.next {
text-align: right;
}
}
.filters {
table {
border-collapse: separate;
border-spacing: 2px;
width: 100%;
}
}
.cal_courses_flt {
float: left;
label {
margin-right: .45em;
}
}
.maincalendar {
vertical-align: top;
padding: 0;
.bottom {
text-align: center;
padding: 5px 0 0 0;
}
.heightcontainer {
height: 100%;
position: relative;
}
.calendarmonth {
width: 98%;
margin: 10px auto;
}
.calendarmonth {
ul {
margin: 0;
li {
list-style-type: none;
margin-top: 4px;
}
}
td {
height: 5em;
}
}
.calendar-controls {
.previous,
.next {
width: 30%;
}
.current {
width: 39.95%;
}
}
.controls {
width: 98%;
margin: 10px auto;
}
.calendar_event_course,
.calendar_event_global,
.calendar_event_group,
.calendar_event_user {
border-width: 1px 1px 1px 12px;
border-style: solid;
}
.calendar_event_course {
border-color: $calendarEventCourseColor;
}
.calendar_event_global {
border-color: $calendarEventGlobalColor;
}
.calendar_event_group {
border-color: $calendarEventGroupColor;
}
.calendar_event_user {
border-color: $calendarEventUserColor;
}
//.calendar-event-panel {
// background-color: $grayLighter;
// border: 2px solid $grayLighter;
// .yui3-overlay-content {
// padding: 19px;
// background-color: lighten($wellBackground, 3%);
// border: 1px solid darken($wellBackground, 7%);
// @include border-radius($baseBorderRadius);
// @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
// }
//}
.calendar-event-panel {
@extend .card;
}
.calendar-controls {
.current {
@extend .h2;
}
}
.calendartable {
td, li {
padding: 5px;
}
li {
padding-left: 10px;
text-align: left;
}
}
.header {
overflow: hidden;
.buttons {
float: right;
}
}
.eventlist {
margin: 0;
.event {
//width: 92%;
//border-spacing: 0;
//border-collapse: separate;
//position: relative;
//padding: 20px 4%;
//margin-bottom: 20px;
//background-color: lighten($wellBackground, 3%);
//border: 1px solid darken($wellBackground, 7%);
//@include border-radius($baseBorderRadius);
//@include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
@extend .card;
list-style-type: none;
> img {
padding-top: 3px;
float: left;
}
.name {
//font-size: $fontSizeLarge;
//font-weight: 200;
//line-height: 24px;
@extend .h2;
float: left;
//margin: 0;
}
.name,
.course {
margin-bottom: 5px;
}
.date {
float: right;
}
.course,
.subscription {
float: left;
clear: left;
}
.side {
width: 22px;
}
.description {
background-color: $body-bg;
padding: 5px;
clear: both;
.commands {
position: absolute;
right: 0;
top: 0;
margin: 3px;
}
}
.commands {
position: absolute;
top: 2px;
right: 2px;
a {
margin: 0 3px;
}
}
}
}
}
}
// Calendar export.
#page-calendar-export {
.indent {
padding-left: 20px;
}
}
// Block minicalendar.
.block {
.minicalendar {
max-width: 280px;
margin: 0 auto;
width: 100%;
th, td {
padding: 2px;
font-size: 0.8em;
text-align: center;
}
td {
&.weekend {
@extend .text-muted;
}
a {
width: 100%;
height: 100%;
display: block;
}
&.duration_global {
border-top: 1px solid $calendarEventGlobalColor;
border-bottom: 1px solid $calendarEventGlobalColor;
&.duration_finish {
background-color: $calendarEventGlobalColor;
}
}
&.duration_course {
border-top: 1px solid $calendarEventCourseColor;
border-bottom: 1px solid $calendarEventCourseColor;
&.duration_finish {
background-color: $calendarEventCourseColor;
}
}
&.duration_group {
border-top: 1px solid $calendarEventGroupColor;
border-bottom: 1px solid $calendarEventGroupColor;
&.duration_finish {
background-color: $calendarEventGroupColor;
}
}
&.duration_user {
border-top: 1px solid $calendarEventUserColor;
border-bottom: 1px solid $calendarEventUserColor;
&.duration_finish {
background-color: $calendarEventUserColor;
}
}
}
caption {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: center;
}
}
.calendar-event-panel {
//background-color: $grayLighter;
//border: 1px solid $grayLighter;
.yui3-overlay-content {
@extend .card;
// padding: 19px;
// background-color: lighten($wellBackground, 3%);
// border: 1px solid darken($wellBackground, 7%);
// @include border-radius($baseBorderRadius);
// @include box-shadow(inset 0 1px 1px rgba(0 ,0 ,0 , .05));
h2 {
&.eventtitle {
line-height: 1.2;
font-size: 18px;
}
}
.eventcontent {
img {
padding-right: 5px;
}
}
}
}
.calendar-controls {
.previous,
.current,
.next {
display: block;
float: left;
}
.previous {
text-align: left;
width: 12%;
}
.current {
text-align: center;
width: 76%;
}
.next {
text-align: right;
width: 12%;
}
}
.calendar_filters {
ul {
list-style: none;
margin: 0;
}
li {
margin-bottom: 0.2em;
span {
img {
padding: 0 0.2em;
}
}
}
.eventname {
padding-left: 0.2em;
}
}
.content {
h3 {
&.eventskey {
margin-top: 0.5em;
}
}
}
}
.ical-link {
font-size: 10px;
font-weight: bold;
background-color: #f60;
padding: 0px 5px;
color: #fff;
border-top: 1px solid #f93;
border-left: 1px solid #f93;
border-bottom: 1px solid #013;
border-right: 1px solid #013;
}
.ical-link:hover,
.ical-link:active,
.ical-link:focus,
.ical-link:visited {
color: #fff;
text-decoration: none;
}
@media (min-width: 768px) {
#page-calender-view {
.container-fluid {
min-width: 1024px;
}
}
}

Some files were not shown because too many files have changed in this diff Show More