From 7f338b93fc33966b01975db02191b32ae546c3b7 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 14 Aug 2017 14:46:59 -0700 Subject: [PATCH] modifiers for kuiButton--link/--linkFlush --- ui_framework/dist/ui_framework_theme_dark.css | 80 +++++++++++++++++++ .../dist/ui_framework_theme_light.css | 80 +++++++++++++++++++ .../src/components/button/_button.scss | 24 ++++++ 3 files changed, 184 insertions(+) diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css index 7e76a5876e99bd..5344393e86582c 100644 --- a/ui_framework/dist/ui_framework_theme_dark.css +++ b/ui_framework/dist/ui_framework_theme_dark.css @@ -410,6 +410,22 @@ table { border-color: #4095b4; } .kuiButton--primary.kuiButton--fill .kuiButton__icon { fill: #F5F5F5; } + .kuiButton--primary.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--primary.kuiButton--link:focus { + background-color: rgba(77, 161, 192, 0.1); } + .kuiButton--primary.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--primary.kuiButton--linkFlush:focus { + background-color: rgba(77, 161, 192, 0.1); } .kuiButton--secondary { color: #00A69B; @@ -427,6 +443,22 @@ table { border-color: #008d83; } .kuiButton--secondary.kuiButton--fill .kuiButton__icon { fill: #F5F5F5; } + .kuiButton--secondary.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--secondary.kuiButton--link:focus { + background-color: rgba(0, 166, 155, 0.1); } + .kuiButton--secondary.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--secondary.kuiButton--linkFlush:focus { + background-color: rgba(0, 166, 155, 0.1); } .kuiButton--warning { color: #E5830E; @@ -444,6 +476,22 @@ table { border-color: #cd750d; } .kuiButton--warning.kuiButton--fill .kuiButton__icon { fill: #F5F5F5; } + .kuiButton--warning.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--warning.kuiButton--link:focus { + background-color: rgba(229, 131, 14, 0.1); } + .kuiButton--warning.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--warning.kuiButton--linkFlush:focus { + background-color: rgba(229, 131, 14, 0.1); } .kuiButton--danger { color: #bf4d4d; @@ -461,6 +509,22 @@ table { border-color: #b24040; } .kuiButton--danger.kuiButton--fill .kuiButton__icon { fill: #F5F5F5; } + .kuiButton--danger.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--danger.kuiButton--link:focus { + background-color: rgba(191, 77, 77, 0.1); } + .kuiButton--danger.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--danger.kuiButton--linkFlush:focus { + background-color: rgba(191, 77, 77, 0.1); } .kuiButton--disabled { color: #313131; @@ -479,6 +543,22 @@ table { border-color: #242424; } .kuiButton--disabled.kuiButton--fill .kuiButton__icon { fill: #F5F5F5; } + .kuiButton--disabled.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--disabled.kuiButton--link:focus { + background-color: rgba(49, 49, 49, 0.1); } + .kuiButton--disabled.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--disabled.kuiButton--linkFlush:focus { + background-color: rgba(49, 49, 49, 0.1); } @-webkit-keyframes kuiButtonFocus { 50% { diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css index 16ab59bd5a5ea5..4a10d780d2d36e 100644 --- a/ui_framework/dist/ui_framework_theme_light.css +++ b/ui_framework/dist/ui_framework_theme_light.css @@ -410,6 +410,22 @@ table { border-color: #00668c; } .kuiButton--primary.kuiButton--fill .kuiButton__icon { fill: #FFF; } + .kuiButton--primary.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--primary.kuiButton--link:focus { + background-color: rgba(0, 121, 165, 0.1); } + .kuiButton--primary.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--primary.kuiButton--linkFlush:focus { + background-color: rgba(0, 121, 165, 0.1); } .kuiButton--secondary { color: #00A69B; @@ -427,6 +443,22 @@ table { border-color: #008d83; } .kuiButton--secondary.kuiButton--fill .kuiButton__icon { fill: #FFF; } + .kuiButton--secondary.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--secondary.kuiButton--link:focus { + background-color: rgba(0, 166, 155, 0.1); } + .kuiButton--secondary.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--secondary.kuiButton--linkFlush:focus { + background-color: rgba(0, 166, 155, 0.1); } .kuiButton--warning { color: #E5830E; @@ -444,6 +476,22 @@ table { border-color: #cd750d; } .kuiButton--warning.kuiButton--fill .kuiButton__icon { fill: #FFF; } + .kuiButton--warning.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--warning.kuiButton--link:focus { + background-color: rgba(229, 131, 14, 0.1); } + .kuiButton--warning.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--warning.kuiButton--linkFlush:focus { + background-color: rgba(229, 131, 14, 0.1); } .kuiButton--danger { color: #A30000; @@ -461,6 +509,22 @@ table { border-color: #8a0000; } .kuiButton--danger.kuiButton--fill .kuiButton__icon { fill: #FFF; } + .kuiButton--danger.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--danger.kuiButton--link:focus { + background-color: rgba(163, 0, 0, 0.1); } + .kuiButton--danger.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--danger.kuiButton--linkFlush:focus { + background-color: rgba(163, 0, 0, 0.1); } .kuiButton--disabled { color: #c5c5c5; @@ -479,6 +543,22 @@ table { border-color: #b8b8b8; } .kuiButton--disabled.kuiButton--fill .kuiButton__icon { fill: #FFF; } + .kuiButton--disabled.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; } + .kuiButton--disabled.kuiButton--link:focus { + background-color: rgba(197, 197, 197, 0.1); } + .kuiButton--disabled.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; } + .kuiButton--disabled.kuiButton--linkFlush:focus { + background-color: rgba(197, 197, 197, 0.1); } @-webkit-keyframes kuiButtonFocus { 50% { diff --git a/ui_framework/src/components/button/_button.scss b/ui_framework/src/components/button/_button.scss index 73e0a157cea6eb..1eb16b307264bd 100644 --- a/ui_framework/src/components/button/_button.scss +++ b/ui_framework/src/components/button/_button.scss @@ -101,6 +101,30 @@ $buttonTypes: ( } } } + + &.kuiButton--link { + border-color: transparent; + background-color: transparent; + box-shadow: none; + + &:focus { + background-color: transparentize($color, .9); + } + } + + &.kuiButton--linkFlush { + border-color: transparent; + background-color: transparent; + border-right: none; + border-left: none; + padding-right: 0; + padding-left: 0; + box-shadow: none; + + &:focus { + background-color: transparentize($color, .9); + } + } } }