vault/ui/app/styles/components/info-table-row.scss
claire bontempo 7f03393630
UI: Increase base font size (#23994)
* fix button padding

* rename spacing variables using numerical values

* fix toggle aligment

* remove unused toggle classes

* replace margin and padding with spacing vars

* increase base font size

* remove switch css, use toggle consistently

* remaining margin/padding size vars to spacing pixels

* add deprecated note, rever changes to size vars

* decrease console size

* remove function

* adjust card size for small selectable cards

* fix select to fit to content width

* fix toolbar-scroller height

* add changelog;

* fix checkbox styling
2023-11-13 21:29:39 +00:00

116 lines
1.7 KiB
SCSS

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.info-table-row {
box-shadow: 0 1px 0 $grey-light;
margin: 0;
&.has-no-shadow {
box-shadow: none;
}
@include from($mobile) {
display: flex;
}
&.thead {
box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light;
margin: 0;
padding: 0 $spacing-14 0 0;
.column {
padding: 0.5rem 0.75rem;
}
}
.column {
align-self: center;
padding: $spacing-16;
&.info-table-row-edit {
padding-bottom: 0.3rem;
padding-top: 0.3rem;
}
textarea {
min-height: 35px;
}
.helper-text {
font-weight: normal;
}
&.justify-right {
display: flex;
justify-content: right;
}
}
.hs-icon {
margin-right: $spacing-4;
}
.icon-true {
color: $green-500;
}
.icon-false {
color: $ui-gray-300;
}
a {
text-decoration: none;
}
}
.info-table-row:not(.is-mobile) .column {
@include until($mobile) {
padding: 0;
}
&:first-child {
padding-left: 0;
@include until($mobile) {
padding: $spacing-12 0 0;
}
}
&:last-child {
padding-right: 0;
@include until($mobile) {
padding: 0 0 $spacing-12;
}
}
}
.info-table-row-header {
margin: 0;
font-size: $size-8;
color: $grey;
font-weight: $font-weight-semibold;
@include until($mobile) {
display: none;
}
.info-table-row:not(.is-mobile) .column:last-child {
padding-left: 0;
}
}
.label-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// inline display necessary for nested elements so ellipsis shows
> div {
display: inline;
}
> div > span {
display: inline;
}
}