Skip to content

Commit

Permalink
K7 UI framework modifiers for kuiButton--link/--linkFlush (#13504)
Browse files Browse the repository at this point in the history
  • Loading branch information
@snide
snide authored Aug 15, 2017
1 parent fab8ce1 commit d6b1d14
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 0 deletions.
80 changes: 80 additions & 0 deletions ui_framework/dist/ui_framework_theme_dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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% {
Expand Down
80 changes: 80 additions & 0 deletions ui_framework/dist/ui_framework_theme_light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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% {
Expand Down
24 changes: 24 additions & 0 deletions ui_framework/src/components/button/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
}

Expand Down

0 comments on commit d6b1d14

Please sign in to comment.