www.aleph1.co.uk Git - yaffs-website/blob - web/themes/custom/yaffs/scss/component/_tabs.scss

   1 /**
   2  * Tabs and local action styles.
   3  */
   4 .local-actions {
   5   margin: 10px 0 10px -5px;
   6 }
   7 .tabs--secondary {
   8   margin: 10px 0 5px;
   9 }
  10
  11 /**
  12  * Missing Bootstrap 2 tab styling.
  13  * $see http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
  14  * $see http://bootply.com/74926
  15  */
  16 .tabbable {
  17   margin-bottom: 20px;
  18 }
  19 .tabs-below, .tabs-left, .tabs-right {
  20   > .nav-tabs {
  21     border-bottom: 0;
  22     .summary {
  23       color: $nav-disabled-link-color;
  24       font-size: $font-size-small;
  25     }
  26   }
  27 }
  28 .tab-pane > .panel-heading {
  29   display: none;
  30 }
  31 .tab-content > .active {
  32   display: block;
  33 }
  34
  35 // Below.
  36 .tabs-below {
  37   > .nav-tabs {
  38     border-top: 1px solid $nav-tabs-border-color;
  39     > li {
  40       margin-top: -1px;
  41       margin-bottom: 0;
  42       > a {
  43         border-radius: 0 0 $border-radius-base $border-radius-base;
  44         &:hover,
  45         &:focus {
  46           border-top-color: $nav-tabs-border-color;
  47           border-bottom-color: transparent;
  48         }
  49       }
  50     }
  51     > .active {
  52       > a,
  53       > a:hover,
  54       > a:focus {
  55         border-color: transparent $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color;
  56       }
  57     }
  58   }
  59 }
  60
  61 // Left and right tabs.
  62 .tabs-left,
  63 .tabs-right {
  64   > .nav-tabs {
  65     padding-bottom: 20px;
  66     width: 220px;
  67     > li {
  68       float: none;
  69       &:focus {
  70         outline: 0;
  71       }
  72       > a {
  73         margin-right: 0;
  74         margin-bottom: 3px;
  75         &:focus {
  76           outline: 0;
  77         }
  78       }
  79     }
  80   }
  81   > .tab-content {
  82     border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
  83     border: 1px solid $nav-tabs-border-color;
  84     box-shadow: 0 1px 1px rgba(0,0,0,.05);
  85     overflow: hidden;
  86     padding: 10px 15px;
  87   }
  88 }
  89
  90 // Left tabs.
  91 .tabs-left {
  92   > .nav-tabs {
  93     float: left;
  94     margin-right: -1px;
  95     > li > a {
  96       border-radius: $border-radius-base 0 0 $border-radius-base;
  97       &:hover,
  98       &:focus {
  99         border-color: $nav-tabs-link-hover-border-color $nav-tabs-border-color $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color;
 100       }
 101     }
 102     > .active > a,
 103     > .active > a:hover,
 104     > .active > a:focus {
 105       border-color: $nav-tabs-border-color transparent $nav-tabs-border-color $nav-tabs-border-color;
 106       box-shadow: -1px 1px 1px rgba(0,0,0,.05);
 107     }
 108   }
 109 }
 110
 111 // Right tabs.
 112 .tabs-right {
 113   > .nav-tabs {
 114     float: right;
 115     margin-left: -1px;
 116     > li > a {
 117       border-radius: 0 $border-radius-base $border-radius-base 0;
 118       &:hover,
 119       &:focus {
 120         border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
 121         box-shadow: 1px 1px 1px rgba(0,0,0,.05);
 122       }
 123     }
 124     > .active > a,
 125     > .active > a:hover,
 126     > .active > a:focus {
 127       border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color transparent;
 128     }
 129   }
 130 }