Build/Resources/Public/Sass/typo3/_element_panel.scss

   1 //
   2 // Variables
   3 //
   4 $panel-lg-padding: 35px;
   5
   6 //
   7 // Panel
   8 //
   9 .panel {
  10     @include box-shadow(0 2px 0 rgba(0, 0, 0, 0.1));
  11
  12     &.ui-sortable-helper {
  13         border-style: dashed;
  14     }
  15
  16     .panel-heading {
  17         font-weight: bold;
  18     }
  19 }
  20
  21 //
  22 // Panel carousel
  23 //
  24 .panel-carousel {
  25     padding: $panel-body-padding;
  26 }
  27
  28 //
  29 // Panel heading
  30 //
  31 .panel-heading {
  32     position: relative;
  33
  34     &[data-toggle="formengine-flex"],
  35     &[data-toggle="formengine-inline"] {
  36         cursor: pointer;
  37     }
  38 }
  39
  40 //
  41 // Panel condensed
  42 //
  43 .panel-condensed {
  44     .panel-heading {
  45         padding: 5px;
  46     }
  47 }
  48
  49 //
  50 // Panel collapse
  51 //
  52 .panel-heading-collapse-indicator {
  53     position: absolute;
  54     left: 2px;
  55     margin-top: -2px;
  56     top: 50%;
  57 }
  58
  59 .panel-collapsed {
  60     .panel-collapse {
  61         display: none;
  62         visibility: hidden;
  63     }
  64 }
  65
  66 .panel-collapsed {
  67     .caret {
  68         @include transition(all 0.25s ease-in-out);
  69         @include rotate(-90deg);
  70     }
  71 }
  72
  73 .panel,
  74 .panel-collapse {
  75     .panel-heading {
  76         .caret {
  77             @include transition(all 0.25s ease-in-out);
  78         }
  79
  80         .collapsed {
  81             .caret {
  82                 @include rotate(-90deg);
  83             }
  84         }
  85     }
  86
  87     > .alert {
  88         border: none;
  89         border-top: 1px solid $panel-default-border;
  90         margin: 0;
  91         padding: 9px 12px;
  92     }
  93
  94     > .form-section,
  95     > .tab-content > .form-section,
  96     > .tab-content > .tab-pane > .form-section {
  97         border-left: 0;
  98         border-right: 0;
  99         border-bottom: 0;
 100     }
 101
 102     > .nav-tabs {
 103         border-top: 1px solid $panel-default-border;
 104         padding-top: 8px;
 105
 106         > li {
 107             margin-left: -1px;
 108         }
 109     }
 110
 111     > .table,
 112     > .table-fit {
 113         border: 0;
 114         margin: 0;
 115     }
 116 }
 117
 118 .recordlist {
 119     .table-fit {
 120         margin-bottom: 0;
 121     }
 122 }
 123
 124 //
 125 // Panel hover
 126 //
 127 .panel-hover {
 128     .panel-default:hover > .panel-heading {
 129         background-color: lighten($panel-default-heading-bg, 3%);
 130     }
 131 }
 132
 133 //
 134 // Panel space
 135 //
 136 .panel-space {
 137     margin: 3em 0;
 138 }
 139
 140 //
 141 // Panel Tab
 142 //
 143 .panel-tab {
 144     border-radius: 0;
 145     border: 1px solid $nav-tabs-active-link-hover-border-color;
 146     background-color: $nav-tabs-active-link-bg;
 147 }
 148
 149 .panel-tab + .panel-tab,
 150 .panel-tab + .form-section {
 151     margin-top: -($line-height-computed+1);
 152 }
 153
 154 .tab-pane {
 155     > .panel-tab:first-child {
 156         border-top: none;
 157     }
 158 }
 159
 160 //
 161 // Panel large
 162 //
 163 .panel-lg {
 164     .panel-body {
 165         padding: $panel-lg-padding;
 166     }
 167
 168     .panel-heading,
 169     .panel-footer {
 170         padding: ceil($panel-lg-padding * 0.5) $panel-lg-padding;
 171     }
 172
 173     .panel-carousel {
 174         padding: $panel-lg-padding;
 175     }
 176 }