shoehorn-bootstrap.less

// 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/>.

// Shoehorn theme with the underlying Bootstrap theme.
// @package    theme
// @subpackage shoehorn
// @copyright  &copy; 2014-onwards G J Barnard in respect to modifications of the Bootstrap theme.
// @author     G J Barnard - gjbarnard at gmail dot com and {@link http://moodle.org/user/profile.php?id=442195}
// @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

/* shoehorn-bootstrap.less */
// Bootstrap 3 overrides.

// breadcrumbs.less.
.breadcrumb-button > a {
  background-color: rgba(red(@breadcrumb-bg), green(@breadcrumb-bg), blue(@breadcrumb-bg), 0.5);
  padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
  border-radius: @btn-border-radius-base;
}

.breadcrumb {
  .panel;
  .panel-default;
  > li {
    + li:before {
      content: none;
      padding: 0;
    }
  }
}


.dir-rtl {
  .breadcrumb-nav {
      float: right;
  }
}

// buttons.less.
button, input.form-submit, input[type="button"], input[type="submit"], input[type="reset"] {
  padding: 4px 8px;
}

// Carousel.less.
// Centre the image.
.carousel-inner {
  > .item {
    height: 160px;
    .carousel-image-container {
      text-align: center;
      width: 100%;
      padding-left: 27px;
      padding-right: 27px;
      line-height: 160px; // See: http://www.vanseodesign.com/css/vertical-centering/.
    }
    img {
       margin: 0 auto;
       padding: 0;
       vertical-align: middle; // See: http://www.vanseodesign.com/css/vertical-centering/.
       max-width: 100%;
    }
  }
  a {
    &:hover, &:focus {
       // Turn off background colour.
       background-color: transparent;
    }
  }
}

// Only resize on the frontpage.
#frontpageslider .carousel-inner {
  > .item {
    img {
       width: auto;
       height: auto;
    }
  }
}

@media(min-width: @screen-xs-min) {
  .carousel-inner {
    > .item {
      height: 200px;
      .carousel-image-container {
        line-height: 200px; // See: http://www.vanseodesign.com/css/vertical-centering/.
      }
      img {
         max-height: 200px;
      }
    }
  }
}

@media(min-width: @screen-sm-min) {
  .carousel-inner {
    > .item {
      height: 280px;
      .carousel-image-container {
        line-height: 280px; // See: http://www.vanseodesign.com/css/vertical-centering/.
      }
      img {
         max-height: 280px;
      }
    }
  }
}

@media(min-width: @screen-md-min) {
  .carousel-inner {
    > .item {
      height: 400px;
      .carousel-image-container {
        line-height: 400px; // See: http://www.vanseodesign.com/css/vertical-centering/.
        padding-left: 54px;
        padding-right: 54px;
      }
      img {
         max-height: 400px;
      }
    }
  }
}

@media(min-width: @screen-lg-min) {
  .carousel-inner {
    > .item {
      height: 500px;
      .carousel-image-container {
        line-height: 500px; // See: http://www.vanseodesign.com/css/vertical-centering/.
      }
      img {
         max-height: 500px;
      }
    }
  }
}

// Left/right controls for nav.
.carousel-control {
  background: none;  // Removes background that was used to surround original control.
  border: none; // No border required.
  width: 26px;
  height: 26px;

  top: 40%;
  margin-top: -20px;
  font-size: 26px;
  font-weight: 100;
  line-height: 30px;

  &.left,
  &.right {
    background-image: none;
    background-repeat: no-repeat;
  }

  .icon-prev {
    left: auto;
  }

  .icon-next {
    right: auto;
  }

  .glyphicon-chevron-left,
  .glyphicon-chevron-right {
    margin-top: -19px;
  }
  .glyphicon-chevron-left {
    margin-left: -17px;
  }
  .glyphicon-chevron-right {
    margin-right: -17px;
  }

  // Hover/focus state.
  &:hover,
  &:focus {
    color: lighten(@carousel-control-color, 5%);
  }
}

// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {
  .carousel-control {
    .glyphicon-chevron-left,
    .glyphicon-chevron-right {
      margin-top: (-(@carousel-control-font-size / 4) * 3);
    }
    .glyphicon-chevron-left {
      margin-left: (-(@carousel-control-font-size / 4) * 3);
    }
    .glyphicon-chevron-right {
      margin-right: (-(@carousel-control-font-size / 4) * 3);
    }
  }
}


@media(min-width: @screen-xs-min) {
    .carousel-control {
        width: 36px;
        height: 36px;
        font-size: 36px;
    }
}

@media(min-width: @screen-sm-min) {
    .carousel-control {
        width: 40px;
        height: 40px;
        font-size: 40px;
    }
}

@media(min-width: @screen-md-min) {
    .carousel-control {
        width: 52px;
        height: 52px;
        font-size: 52px;
    }
}

@media(min-width: @screen-lg-min) {
    .carousel-control {
        width: 60px;
        height: 60px;
        font-size: 60px;
    }
}

.carouselslider a.carousel-control {
    display: none;
}
body {
    .carouselslider:hover, &.mobiledevice .carouselslider, &.tabletdevice .carouselslider {
        a.carousel-control {
            display: block;
        }
    }
}

// Carousel indicator pips.
.carousel-indicators {
  li {
    background: ~"[[setting:textcolour]]";
    background: ~"[[setting:textcolour75rgba]]";
  }
}

// Caption for text.
.carousel-caption {
  background: @carousel-control-color;
  background: rgba(red(@carousel-control-color),green(@carousel-control-color),blue(@carousel-control-color),.7);
  border-radius: @border-radius-large;
  border: 1px solid ~"[[setting:pagebottombackground65rgba]]";
}

@media(max-width: @screen-sm-max) {
  .carousel-caption {
    padding-top: 5px;
    h4 {
        font-size: 14px;
    }
    p {
        font-size: 12px;
    }
  }
}

// Technically dropdowns.less.
.dropdown-menu {
  padding-top: 0;
  padding-bottom: 0;
  > li > a {
    &:hover,
    &:focus {
      span:first-child, i:first-child {
        padding: 2px;
        margin-left: -2px;
        margin-right: 3px;
      }
    }
  }
}

.navbar-inverse .dropdown-menu {
    background-color: rgba(red(@navbar-inverse-bg), green(@navbar-inverse-bg), blue(@navbar-inverse-bg), 0.75);
    li > a {
        color: @navbar-inverse-color;
        &:hover,
        &:focus {
            span:first-child, i:first-child {
                //background-color: rgba(red(@navbar-inverse-link-active-color), green(@navbar-inverse-link-active-color), blue(@navbar-inverse-link-active-color), 0.5);
            }
        }
    }
}

// Fix dropdown menu.  From: https://gist.github.com/JumpLink/7140006 via https://moodle.org/mod/forum/discuss.php?d=256770#p1113784 to http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/.
.dropdown-submenu{
    position:relative;
}
 
.dropdown-submenu > .dropdown-menu {
    top:0;
    left:100%;
    //margin-top: -6px;
    margin-top: 0;
    margin-left: -1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}

@media (max-width: @screen-sm-min) {
    .dropdown-submenu > .dropdown-menu {
        margin-left: 10px;
    }
}

.dropdown-submenu:hover > .dropdown-menu {
    display:block;
}

.dropdown-submenu > a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: ~"[[setting:navbardefaultcolour]]";
    margin-top: 5px;
    margin-right: -10px;
}

.navbar-inverse .dropdown-submenu > a:after {
    border-left-color: @navbar-inverse-color;
}

.dropdown-submenu:hover > a:after {
    border-left-color: lighten(@navbar-default-color, 16%);
}

.navbar-inverse .dropdown-submenu:hover > a:after {
    border-left-color: darken(@navbar-inverse-color, 16%);
}

.dropdown-submenu .pull-left{
    float:none;
}

.dropdown-submenu.pull-left > .dropdown-menu{
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
// See more at: http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/#sthash.Vz3blFqP.dpuf.

// forms.less.
label {
    margin-left: 4px;
    margin-right: 4px;
}

form select, form input[type="text"], form input[type="password"], form.atto_form input[type="url"], select.singleselect {
    margin: 0;
    padding: 4px 8px;
    height: 30px;
}

// Technically grid.less.
// I think the nested grid is broken in BS 3.1.1.
.row .row {
  margin-left: 0;
  margin-right: 0;
}

// labels.less.
.label {
  text-align: left;
}

// navbar.less.
.navbar-default {
  #shoehorn > .background-opacity(~"[[setting:navbardefaultbackground]]"; ~"[[setting:navbardefaultbackgroundrgba]]");
  #shoehorn > .border-opacity(~"[[setting:navbardefaultborder]]"; ~"[[setting:navbardefaultborderrgba]]");

  .navbar-text {
    color: ~"[[setting:navbardefaultcolour]]";
  }

  .navbar-brand, .navbar-nav > li > a, .navbar-nav > .open > a {
    color: ~"[[setting:navbardefaultcolour]]";
    background-color: inherit;
    &:hover,
    &:focus,
    &:active {
      color: ~"[[setting:navbardefaultcolourlight]]";
      #shoehorn > .background-opacity(~"[[setting:navbardefaulthover]]"; ~"[[setting:navbardefaulthoverrgba]]");
    }
  }

  .navbar-collapse,
  .navbar-form {
    #shoehorn > .border-opacity(~"[[setting:navbardefaultborder]]"; ~"[[setting:navbardefaultborderrgba]]");
  }
}
.navbar {
  z-index: 200;
}

@media(min-width: @screen-sm-min) {
  .dir-rtl {
    .navbar-header, .navbar-brand, .navbar-nav > li {
      float: right;
    }
  }
}

@media(min-width: @screen-sm-min) {
  body.ie.compactnavbar .navbar-collapse.collapse {
    display: inline-block !important;  // IE.
  }
  body.compactnavbar .navbar-right {
    margin-right: 0;
    .dropdown-menu {
      left: 0;
      right: auto;
    }
  }
}

// normalize.less.
td, th {
  padding: 10px;
}

// panels.less.
.panel-primary {
  background-color: @panel-primary-border;
  .panel-body {
    color: @panel-primary-text;
  }
}
.panel-success {
  background-color: @panel-success-border;
  .panel-body {
    color: @panel-success-text;
  }
}
.panel-info {
  background-color: @panel-info-border;
  .panel-body {
    color: @panel-info-text;
  }
}
.panel-warning {
  background-color: @panel-warning-border;
  .panel-body {
    color: @panel-warning-text;
  }
}
.panel-danger {
  background-color: @panel-danger-border;
  .panel-body {
    color: @panel-danger-text;
  }
}

.form-defaultinfo, .form-label .form-shortname {
    color: ~"[[setting:textcolour]]";
}

// scaffolding.less.
a {
  &:hover,
  &:focus {
    text-decoration: none;
    background-color: rgba(red(@page-bottom-bg), green(@page-bottom-bg), blue(@page-bottom-bg), 0.7);
    border-radius: @border-radius-base;
  }
}