modules/frontend/app/primitives/btn/index.scss - ignite-web-console - Git at Google

 /*
  * 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-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%)
     );
 }
	/*
	* 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-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%)
	);
	}