open-vault/ui/app/styles/core/buttons.scss

240 lines
4.6 KiB
SCSS
Raw Normal View History

2018-04-03 14:16:57 +00:00
$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
.button {
2018-07-06 22:42:09 +00:00
background-color: $grey-lightest;
2018-04-03 14:16:57 +00:00
border: 1px solid $grey-light;
2018-05-24 17:09:50 +00:00
box-shadow: $box-shadow-low;
2018-07-06 22:42:09 +00:00
color: $ui-gray-800;
2018-04-03 14:16:57 +00:00
display: inline-block;
font-size: $size-small;
2018-07-10 14:30:39 +00:00
font-weight: $font-weight-semibold;
2018-04-03 14:16:57 +00:00
height: 2.5rem;
line-height: 1.6;
min-width: 6rem;
padding: $size-10 $size-8;
text-decoration: none;
transition: background-color $speed, border-color $speed, box-shadow $speed, color $speed;
2018-04-03 14:16:57 +00:00
vertical-align: middle;
&.is-icon {
padding: 0.25rem $size-3;
}
&:active,
&.is-active,
&:focus,
&.is-focused {
border-color: darken($grey-light, 10%);
box-shadow: $button-box-shadow-standard;
color: darken($grey-dark, 10%);
}
&.is-inverted.is-outlined {
box-shadow: none;
}
&.is-transparent {
color: currentColor;
background: none;
border: none;
box-shadow: none;
min-width: auto;
padding: 0;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
@if $name == 'primary' {
2018-04-03 14:16:57 +00:00
$color: $blue;
}
$color-invert: nth($pair, 2);
&.is-#{$name} {
2018-07-10 14:30:39 +00:00
border-color: darken($color, 2%);
2018-04-03 14:16:57 +00:00
background-color: $color;
color: $color-invert;
&:hover,
&.is-hovered {
background-color: darken($color, 5%);
border-color: darken($color, 5%);
2018-05-24 17:09:50 +00:00
box-shadow: $box-shadow-middle;
2018-04-03 14:16:57 +00:00
}
&:active,
&.is-active {
background-color: darken($color, 10%);
border-color: darken($color, 10%);
2018-05-24 17:09:50 +00:00
box-shadow: $box-shadow-middle;
2018-04-03 14:16:57 +00:00
}
&:focus,
&.is-focused {
border-color: darken($color, 10%);
box-shadow: $button-box-shadow-standard;
}
&.is-outlined {
border-color: $color;
color: $color;
background-color: transparent;
&.is-important {
border-color: $color;
}
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
background-color: transparent;
border-color: darken($color, 10%);
color: $color;
}
&:active,
&.is-active {
background-color: transparent;
border-color: darken($color, 10%);
color: darken($color, 10%);
}
}
&.is-inverted.is-outlined {
border-color: rgba($color-invert, 0.5);
color: rgba($color-invert, 0.9);
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
background-color: transparent;
border-color: $color-invert;
color: $color-invert;
}
&:active,
&.is-active {
background-color: rgba($color-invert, 0.2);
border-color: $color-invert;
color: $color-invert;
box-shadow: none;
}
}
}
}
2018-07-10 14:30:39 +00:00
&.is-primary {
font-weight: $font-weight-bold;
text-shadow: 0 1px 1px rgba($black, 0.25);
}
&.is-link {
color: $link;
text-decoration: none;
font-weight: $font-weight-semibold;
box-shadow: none;
min-width: 4rem;
}
2018-04-03 14:16:57 +00:00
&.is-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
color: $blue;
&:hover {
2018-07-06 00:06:34 +00:00
background-color: $grey-lightest;
2018-04-03 14:16:57 +00:00
}
}
&.is-orange {
background-color: $orange;
border-color: $orange;
color: $white;
&:hover,
&.is-hovered {
background-color: darken($orange, 5%);
border-color: darken($orange, 5%);
}
}
2018-04-03 14:16:57 +00:00
&.is-compact {
height: 2rem;
padding: $size-11 $size-8;
}
.has-text-info & {
font-weight: $font-weight-semibold;
}
&.tool-tip-trigger {
color: $grey-dark;
2018-04-03 14:16:57 +00:00
min-width: auto;
padding: 0;
2018-04-03 14:16:57 +00:00
}
&.has-icon-left,
&.has-icon-right {
.hs-icon {
2018-04-03 14:16:57 +00:00
height: 16px;
min-width: auto;
width: 16px;
}
}
&.has-icon-left {
.hs-icon {
2018-04-03 14:16:57 +00:00
&,
&:first-child:last-child {
position: relative;
left: -$size-10;
2018-04-03 14:16:57 +00:00
}
}
}
&.has-icon-right {
.hs-icon {
2018-04-03 14:16:57 +00:00
&,
&:first-child:last-child {
2019-02-14 16:04:46 +00:00
margin-left: $spacing-xxs;
margin-right: -$spacing-xxs;
2018-04-03 14:16:57 +00:00
}
}
}
}
UI namespaces (#5119) * add namespace sidebar item * depend on ember-inflector directly * list-view and list-item components * fill out components and render empty namespaces page * list namespaces in access * add menu contextual component to list item * popup contextual component * full crud for namespaces * add namespaces service and picker component * split application and vault.cluster templates and controllers, add namespace query param, add namespace-picker to vault.namespace template * remove usage of href-to * remove ember-href-to from deps * add ember-responsive * start styling the picker and link to appropriate namespaces, use ember-responsive to render picker in different places based on the breakpoint * get query param working and save ns to authdata when authenticating, feed through ns in application adapter * move to observer on the controller for setting state on the service * set state in the beforeModel hook and clear the ember data model cache * nav to secrets on change and make error handling more resilient utilizing the method that atlas does to eagerly update URLs * add a list of sys endpoints in a helper * hide header elements if not in the root namespace * debounce namespace input on auth, fix 404 for auth method fetch, move auth method fetch to a task on the auth-form component and refretch on namespace change * fix display of supported engines and exclusion of sys and identity engines * don't fetch replication status if you're in a non-root namespace * hide seal sub-menu if not in the root namespace * don't autocomplete auth form inputs * always send some requests to the root namespace * use methodType and engineType instead of type in case there it is ns_ prefixed * use sys/internal/ui/namespaces to fetch the list in the dropdown * don't use model for namespace picker and always make the request to the token namespace * fix header handling for fetch calls * use namespace-reminder component on creation and edit forms throughout the application * add namespace-reminder to the console * add flat * add deepmerge for creating the tree in the menu * delayed rendering for animation timing * design and code feedback on the first round * white text in the namespace picker * fix namespace picker issues with root keys * separate path-to-tree * add tests for path-to-tree util * hide picker if you're in the root ns and you can't access other namespaces * show error message if you enter invalid characters for namespace path * return a different model if we dont have the namespaces feature and show upgrade page * if a token has a namespace_path, use that as the root user namespace and transition them there on login * use token namespace for user, but use specified namespace to log in * always renew tokens in the token namespace * fix edition-badge test
2018-08-16 17:48:24 +00:00
.button.icon {
box-sizing: border-box;
padding: 0 $size-11;
height: 24px;
width: 24px;
&,
& .icon {
min-width: 0;
}
}
.button.auto-width,
2018-04-03 14:16:57 +00:00
.button .icon.auto-width {
width: auto;
min-width: auto;
2018-04-03 14:16:57 +00:00
margin: 0 !important;
}
2018-08-28 05:03:55 +00:00
.button.next-feature-step {
background: $white;
border: 1px solid $grey-light;
border-radius: $radius;
box-shadow: none;
color: $blue;
display: flex;
2018-08-28 05:03:55 +00:00
height: auto;
line-height: 1.2;
justify-content: space-between;
text-align: left;
white-space: normal;
2018-08-28 05:03:55 +00:00
padding: $size-8;
width: 100%;
2018-08-28 05:03:55 +00:00
}