| /* |
| * 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. |
| */ |
| |
| @import "./../../../public/stylesheets/variables.scss"; |
| |
| $btn-content-padding: 10px 12px; |
| $btn-content-padding-with-border: 9px 11px; |
| |
| @mixin active-focus-shadows( |
| $focus: (0 0 5px #095d9a, 0 0 5px #095d9a), |
| $active: (inset 0 1px 3px 0 rgba(0, 0, 0, 0.5)) |
| ) { |
| &.focus, &:focus { |
| box-shadow: $focus; |
| } |
| |
| &.active, &:active { |
| box-shadow: $active; |
| } |
| |
| &:active, &.active { |
| &:focus, &.focus { |
| &:not([disabled]) { |
| box-shadow: $focus, $active; |
| } |
| } |
| } |
| } |
| |
| .btn-ignite { |
| $icon-margin: 8px; |
| |
| display: inline-flex; |
| flex-direction: row; |
| justify-content: center; |
| align-items: center; |
| box-sizing: border-box; |
| margin: 0; |
| padding: $btn-content-padding; |
| |
| border: none; |
| border-radius: $ignite-button-border-radius; |
| text-align: center; |
| outline: none; |
| font-family: Roboto, sans-serif; |
| font-size: 14px; |
| line-height: 16px; |
| text-decoration: none; |
| cursor: pointer; |
| |
| .icon { |
| &, &-right, &-left { |
| height: 16px; |
| } |
| |
| &-right { |
| margin-left: $icon-margin; |
| } |
| |
| &-left { |
| margin-right: $icon-margin; |
| } |
| } |
| |
| // Icon tweaks |
| .icon.fa-caret-down { |
| margin: 0 -3px; |
| } |
| |
| .fa { |
| line-height: inherit !important; |
| font-size: 16px; |
| } |
| |
| &[disabled] { |
| -webkit-pointer-events: none; |
| pointer-events: none; |
| } |
| |
| [ignite-icon='plus'] { |
| height: 12px; |
| width: 12px; |
| } |
| } |
| |
| .btn-ignite--primary { |
| $accent-color: $ignite-brand-primary; |
| $text-color: white; |
| |
| background-color: $accent-color; |
| color: white; |
| |
| &:hover, &.hover, |
| &:active, &.active { |
| &:not([disabled]) { |
| color: white !important; |
| background-color: change-color($accent-color, $lightness: 41%); |
| text-decoration: none !important; |
| } |
| } |
| |
| // Override <a> styles |
| &:focus { |
| color: white !important; |
| text-decoration: none !important; |
| } |
| |
| @include active-focus-shadows(); |
| |
| &[disabled] { |
| color: transparentize($text-color, 0.5); |
| background-color: change-color($accent-color, $lightness: 77%); |
| } |
| } |
| |
| .btn-ignite--primary-outline { |
| $accent-color: $ignite-brand-primary; |
| $hover-color: change-color($accent-color, $lightness: 36%); |
| $disabled-color: #c5c5c5; |
| |
| border: 1px solid $accent-color; |
| background: white; |
| color: $accent-color; |
| padding: $btn-content-padding-with-border; |
| |
| &:hover, &.hover, |
| &:active, &.active { |
| &:not([disabled]) { |
| color: $hover-color; |
| border-color: $hover-color; |
| } |
| } |
| |
| @include active-focus-shadows($active: inset 0 1px 3px 0 $hover-color); |
| |
| &[disabled] { |
| color: $disabled-color; |
| border-color: $disabled-color; |
| } |
| } |
| |
| .btn-ignite--success { |
| $accent-color: $ignite-brand-success; |
| $text-color: white; |
| |
| background-color: $accent-color; |
| color: white; |
| |
| &:hover, &.hover, &:focus, |
| &:active, &.active { |
| &:not([disabled]) { |
| color: white; |
| background-color: change-color($accent-color, $lightness: 26%); |
| } |
| } |
| |
| @include active-focus-shadows(); |
| |
| &[disabled] { |
| color: transparentize($text-color, 0.5); |
| background-color: change-color($accent-color, $saturation: 57%, $lightness: 68%); |
| } |
| } |
| |
| .btn-ignite--link-success { |
| $accent-color: $ignite-brand-success; |
| |
| background: transparent; |
| color: $accent-color; |
| text-decoration: underline; |
| |
| &:hover, &.hover, |
| &:active, &.active { |
| &:not([disabled]) { |
| color: change-color($accent-color, $lightness: 26%); |
| } |
| } |
| |
| &[disabled] { |
| color: change-color($accent-color, $saturation: 57%, $lightness: 68%); |
| } |
| |
| } |
| |
| @mixin btn-ignite--link-dashed( |
| $color, |
| $activeHover, |
| $disabled |
| ) { |
| background: transparent; |
| color: $color; |
| |
| span { |
| background: |
| linear-gradient(to right, $color, transparent), |
| linear-gradient(to right, $color 70%, transparent 0%) repeat-x left bottom; |
| background-size: 0, 8px 1px, 0, 0; |
| } |
| |
| &:hover, &.hover, |
| &:active, &.active { |
| &:not([disabled]) { |
| color: $activeHover; |
| |
| span { |
| background: |
| linear-gradient(to right, $activeHover, transparent), |
| linear-gradient(to right, $activeHover 70%, transparent 0%) repeat-x left bottom; |
| background-size: 0, 8px 1px, 0, 0; |
| } |
| } |
| } |
| |
| &[disabled] { |
| color: $disabled; |
| |
| span { |
| background: |
| linear-gradient(to right, $disabled, transparent), |
| linear-gradient(to right, $disabled 70%, transparent 0%) repeat-x left bottom; |
| background-size: 0, 8px 1px, 0, 0; |
| } |
| } |
| |
| @include active-focus-shadows($active: ()); |
| } |
| |
| .btn-ignite--link-dashed-success { |
| $color: $ignite-brand-success; |
| $activeHover: change-color($color, $lightness: 26%); |
| $disabled: change-color($color, $saturation: 57%, $lightness: 68%); |
| |
| @include btn-ignite--link-dashed($color, $activeHover, $disabled); |
| } |
| |
| .btn-ignite--link-dashed-primary { |
| $color: $ignite-brand-primary; |
| $activeHover: change-color($color, $lightness: 26%); |
| $disabled: change-color($color, $saturation: 57%, $lightness: 68%); |
| |
| @include btn-ignite--link-dashed($color, $activeHover, $disabled); |
| } |
| |
| .btn-ignite--link-dashed-primary { |
| $color: $ignite-brand-primary; |
| $activeHover: change-color($color, $lightness: 26%); |
| $disabled: change-color($color, $saturation: 57%, $lightness: 68%); |
| |
| @include btn-ignite--link-dashed($color, $activeHover, $disabled); |
| } |
| |
| .btn-ignite--link-dashed-secondary { |
| $activeHover: change-color($ignite-brand-success, $lightness: 26%); |
| @include btn-ignite--link-dashed($text-color, $activeHover, $gray-light); |
| } |
| |
| .btn-ignite--secondary { |
| background-color: white; |
| color: #424242; |
| border: 1px solid #c5c5c5; |
| padding: $btn-content-padding-with-border; |
| |
| &:hover, &.hover, |
| &:active, &.active { |
| &:not([disabled]) { |
| border-color: #c5c5c5; |
| background-color: #eeeeee; |
| } |
| } |
| |
| @include active-focus-shadows(); |
| |
| &[disabled] { |
| opacity: 0.5; |
| } |
| } |
| |
| .btn-ignite-group { |
| display: inline-flex; |
| |
| .btn-ignite:not(:first-of-type):not(:last-of-type) { |
| border-radius: 0; |
| } |
| |
| .btn-ignite:not(:last-of-type) { |
| border-right-width: 1px; |
| border-right-style: solid; |
| } |
| |
| .btn-ignite:first-of-type:not(:only-child) { |
| border-top-right-radius: 0; |
| border-bottom-right-radius: 0; |
| } |
| |
| .btn-ignite:last-of-type:not(:only-child) { |
| border-top-left-radius: 0; |
| border-bottom-left-radius: 0; |
| } |
| |
| .btn-ignite.btn-ignite--primary { |
| $line-color: $ignite-brand-primary; |
| border-right-color: change-color($line-color, $lightness: 41%); |
| } |
| .btn-ignite.btn-ignite--success { |
| $line-color: $ignite-brand-success; |
| border-right-color: change-color($line-color, $saturation: 63%, $lightness: 33%); |
| } |
| .btn-ignite.btn-ignite--secondary + .btn-ignite.btn-ignite--secondary { |
| border-left: 0; |
| } |
| |
| &[disabled] .btn-ignite.btn-ignite--primary { |
| border-right-color: change-color($ignite-brand-primary, $lightness: 83%); |
| } |
| |
| &[disabled] .btn-ignite.btn-ignite--success { |
| border-right-color: change-color($ignite-brand-success, $lightness: 83%); |
| } |
| } |
| |
| @mixin ignite-link($color, $color-hover) { |
| color: $color; |
| text-decoration: none; |
| |
| &:hover, &.hover, |
| &:focus, &.focus { |
| color: $color-hover; |
| text-decoration: none; |
| } |
| } |
| |
| .link-primary { |
| @include ignite-link( |
| $color: $ignite-brand-primary, |
| $color-hover: change-color($ignite-brand-primary, $lightness: 41%) |
| ); |
| } |
| |
| .link-success { |
| @include ignite-link( |
| $color: $ignite-brand-success, |
| $color-hover: change-color($ignite-brand-success, $lightness: 26%) |
| ); |
| } |
| |
| .btn-ignite--link { |
| background: transparent; |
| |
| @include ignite-link( |
| $color: $ignite-brand-success, |
| $color-hover: change-color($ignite-brand-success, $lightness: 26%) |
| ); |
| } |
| |
| .btn-ignite--link { |
| background: transparent; |
| |
| @include ignite-link( |
| $color: $ignite-brand-success, |
| $color-hover: change-color($ignite-brand-success, $lightness: 26%) |
| ); |
| } |