// Licensed to the Apache Software Foundation (ASF) under one // or more contributor license agreements. See the NOTICE file // distributed with this work for additional information // regarding copyright ownership. The ASF licenses this file // to you under the Apache License, Version 2.0 (the // "License"); you may not use this file except in compliance // with the License. You may obtain a copy of the License at // http://www.apache.org/licenses/LICENSE-2.0 // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. /* tab.scss */ .atlast-tabbable { margin: 25px 0; .nav-tabs { border-bottom: 1px solid $color_mystic_approx; >li { >a { padding: 15px 30px; text-transform: uppercase; letter-spacing: 1px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) border-radius: 2px 2px 0 0; } &.active>a { border: 1px solid $color_mystic_approx; border-bottom-color: transparent; &:focus { border: 1px solid $color_mystic_approx; border-bottom-color: transparent; } &:hover { border: 1px solid $color_mystic_approx; border-bottom-color: transparent; } } } } .tab-content { background-color: $white; padding: 35px; border: 1px solid $color_mystic_approx; border-top: none; } } ul.tabs li.tab { padding: 0; } .tab-content>.tab-pane { display: block; opacity: 0; height: 0; padding: 0px; overflow: hidden; &.active { padding: 15px 20px; opacity: 1; height: auto; overflow: auto; } } .tagsList .atlast-tabbable { margin: 0; .tab-content { padding: 10px 22px; } .nav-tabs>li>a { padding: 10px 20px; } } // NEW theme style .tabs { position: relative; height: 42px; width: 100%; white-space: nowrap; padding: 0; transition: color 0.28s ease; .indicator { position: absolute; bottom: 0; height: 2px; background-color: $color_keppel_approx; will-change: left, right; } li.tab { display: block; float: left; text-align: center; line-height: 42px; height: 42px; padding: 0 20px; margin: 0; text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid $color_mirage_approx; a { font-size: 14px; font-weight: 600; color: $white; display: block; text-decoration: none; width: 100%; height: 100%; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) transition: color 0.28s ease; /* color: $color_manatee_approx; */ /* &:hover { color: $color_keppel_approx; } &.active { color: $color_keppel_approx; } */ } } } .atlast-tabbable { margin: 25px 0; .nav-tabs { border-bottom: 1px solid $color_mystic_approx; >li { >a { padding: 15px 30px; text-transform: uppercase; letter-spacing: 1px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) border-radius: 2px 2px 0 0; } &.active>a { border: 1px solid $color_mystic_approx; border-bottom-color: transparent; &:focus { border: 1px solid $color_mystic_approx; border-bottom-color: transparent; } &:hover { border: 1px solid $color_mystic_approx; border-bottom-color: transparent; } } } } .tab-content { background-color: $white; padding: 35px; border: 1px solid $color_mystic_approx; border-top: none; } } .default-tab { .nav-tabs { >li { &.active { >a { color: $color_jungle_green_approx; // background: $color_white_lilac_approx; } } >a { color: $black; } } } }