mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
Add kui-prefixed form and page components. (#9453)
Backports PR #8910
**Commit 1:**
Add form and page components.
- Third party overrides.
- kuiList
- kuiListItem
- kuiPage
- kuiPageView
- kuiSubHeader
- kuiNotice
- kuiNoticeTitle
- kuiNoticeText
- kuiCard
- kuiCardGroup
- kuiButton
- kuiIcon
- kuiTitle
- kuiBadge
- kuiFormSection
- kuiFormSubSection
- kuiColumn
- kuiFormLabel
- kuiFormSubLabel
- kuiTextArea
- kuiInput
- kuiStaticInput
- kuiOptionLabel
- kuiCheckbox
- kuiFormPanel
- kuiFormPanelLayout
- kuiMenuItem
- kuiInputNote
- kuiTableControls
- kuiTableControlAction
- fullWidth
- noPadding
* Original sha: 39b014609d
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-10-24T18:09:53Z
This commit is contained in:
jasper
CJ Cenizal
parent
f9690a6cbc
commit
e721805c67
2 changed files with 451 additions and 1 deletions
|
|
@ -19,6 +19,10 @@ kbn-management-objects-view {
|
|||
min-height: 70px; /* 1 */
|
||||
}
|
||||
|
||||
.tab-account {
|
||||
background-color: @kibanaGray6;
|
||||
}
|
||||
|
||||
.tab-management {
|
||||
background-color: @kibanaGray6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -594,6 +594,8 @@ fieldset {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: Extract these styles into the UI Framework.
|
||||
|
||||
.page-row {
|
||||
padding: 0 10px;
|
||||
margin: 10px 0;
|
||||
|
|
@ -604,12 +606,406 @@ fieldset {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kuiPage {
|
||||
padding: 20px 30px 28px;
|
||||
margin: 20px;
|
||||
background-color: white;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Center content.
|
||||
* 2. Expand to fill container.
|
||||
*/
|
||||
.kuiPageView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; // 1
|
||||
justify-content: center; // 1
|
||||
flex-grow: 1; // 2
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.kuiPageView__content {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.kuiSubHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.kuiNotice {
|
||||
padding: 40px 60px 48px;
|
||||
margin: 20px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.kuiNotice__header {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Override h1 styles.
|
||||
*/
|
||||
.kuiNoticeTitle {
|
||||
font-size: 22px;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 0; // 1
|
||||
}
|
||||
|
||||
.kuiNoticeText {
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.kuiCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kuiCard__description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.kuiCard__descriptionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
max-width: ~"calc(100% - 48px)";
|
||||
}
|
||||
|
||||
.kuiCard__descriptionText {
|
||||
font-size: 14px;
|
||||
max-width: ~"calc(100% - 48px)";
|
||||
}
|
||||
|
||||
.kuiCard__footer {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
padding: 0 15px 20px;
|
||||
}
|
||||
|
||||
.kuiCard--fixedWidth {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.kuiCardGroup {
|
||||
display: flex;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.kuiCardGroup__card {
|
||||
flex: 1 1 0%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
& + & {
|
||||
border-left: 1px solid #E0E0E0;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiCardGroup__cardDescription {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Disable for Angular.
|
||||
*/
|
||||
.kuiButton {
|
||||
display: inline-block;
|
||||
padding: 4px 24px;
|
||||
color: #00a9e5;
|
||||
border: 1px solid;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
background-color: transparent;
|
||||
|
||||
&[disabled] {
|
||||
pointer-events: none; // 1
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--default,
|
||||
.kuiButton--default:focus {
|
||||
color: #2D2D2D;
|
||||
border-color: #D4D4D4;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #111111;
|
||||
background-color: #FAFAFA;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--primary,
|
||||
.kuiButton--primary:focus {
|
||||
color: #00a9e5;
|
||||
border-color: #00a9e5;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #00a9e5;
|
||||
background-color: #ECF9FF;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiButton--danger,
|
||||
.kuiButton--danger:focus {
|
||||
color: #d76051;
|
||||
border-color: #d76051;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #d76051;
|
||||
background-color: #ffe4e1;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiIcon--success {
|
||||
color: #80c383;
|
||||
}
|
||||
|
||||
.kuiIcon--danger {
|
||||
color: #d76051;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Override h1.
|
||||
*/
|
||||
.kuiTitle {
|
||||
margin: 0; // 1
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.kuiBadge {
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
padding: 0.1em 0.7em;
|
||||
vertical-align: middle;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.kuiBadge--default {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.kuiFormSection {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.kuiFormSubSection {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.kuiFormLabel {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.kuiFormSubLabel {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.kuiFormSubLabel__note {
|
||||
opacity: 0.5;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.kuiTextArea,
|
||||
.kuiInput,
|
||||
.kuiStaticInput {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #2d2d2d;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.kuiStaticInput {
|
||||
padding: 5px 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.kuiInput,
|
||||
.kuiTextArea {
|
||||
padding: 5px 15px;
|
||||
border-color: #D4D4D4;
|
||||
}
|
||||
|
||||
.kuiTextArea--nonResizable {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.kuiInputNote {
|
||||
margin: 5px 0 10px;
|
||||
}
|
||||
|
||||
.kuiInputNote--danger {
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.kuiInputNote--warning {
|
||||
color: #F39C12;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Override Bootstrap ui-select component styles. If side padding is > 5px, the component breaks.
|
||||
*/
|
||||
.ui-select-multiple.ui-select-bootstrap {
|
||||
padding: 3px 5px 2px !important; // 1
|
||||
border: 1px solid #D4D4D4; // 1
|
||||
background-color: #ffffff !important; // 1
|
||||
|
||||
&.kuiInputError {
|
||||
border-color: #E74C3C; // 1
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Override label styles.
|
||||
*/
|
||||
.kuiOptionLabel {
|
||||
font-weight: normal; // 1
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Override checkbox styles.
|
||||
*/
|
||||
.kuiCheckbox {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.kuiFormPanel {
|
||||
border: 1px solid #D4D4D4;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Stack title and content children. Necessary for scrollable content;
|
||||
*/
|
||||
.kiuFormPanel--scrollable {
|
||||
display: flex; // 1
|
||||
flex-direction: column; // 1
|
||||
}
|
||||
|
||||
.kuiFormPanel--verticalLayout {
|
||||
& + & {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiFormPanel--horizontalLayout {
|
||||
flex: 1 1 auto;
|
||||
|
||||
& + & {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiFormPanel__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
font-weight: 300;
|
||||
color: #2d2d2d;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
|
||||
.kuiFormPanel__label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.kuiFormPanel__content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.kuiFormPanelLayout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.kuiList {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kuiListItem {
|
||||
padding: 12px 0;
|
||||
|
||||
& + & {
|
||||
border-top: 2px dashed rgba(212, 212, 212, 0.5);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiMenuItem {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #2d2d2d;
|
||||
border-bottom: 1px solid #efefef;
|
||||
|
||||
&.kuiMenuItem-isSelected {
|
||||
background-color: #e4e4e4;
|
||||
|
||||
&:hover {
|
||||
background-color: #e4e4e4;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @list-group-menu-item-active-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility class.
|
||||
* TODO: Move to UI Framework.
|
||||
*/
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility class.
|
||||
* TODO: Move to UI Framework.
|
||||
*/
|
||||
.noPadding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -624,4 +1020,54 @@ fieldset {
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.kuiTableControls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kuiTableControls__input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.kuiTableControls__actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.kuiTableControlAction {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.kuiColumn + .kuiColumn {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Use inline-block instead of flexbox so that content doesn't overflow.
|
||||
* 2. Content can be aligned by offsetting from the top.
|
||||
*/
|
||||
// $numColumns: 12;
|
||||
// @for $i from 1 through $numColumns {
|
||||
// .kiuColumn--#{$i} {
|
||||
// display: inline-block; /* 1 */
|
||||
// vertical-align: top; /* 2 */
|
||||
// width: $i / $numColumns * 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
.makeKuiColumns(12);
|
||||
|
||||
.makeKuiColumns(@n, @i: 1) when (@i =< @n) {
|
||||
.kuiColumn--@{i} {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
width: (@i * 100% / @n);
|
||||
}
|
||||
.makeKuiColumns(@n, (@i + 1));
|
||||
}
|
||||
|
||||
@import "~dragula/dist/dragula.css";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue