/* * 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; } .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; } */ } } } .tab-pane { padding: 25px; } .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; } }