Skip to content

Commit

Permalink
Fix scss
Browse files Browse the repository at this point in the history
  • Loading branch information
@sudhirverma
sudhirverma committed Jun 14, 2020
1 parent f386759 commit 7897813
Show file tree
Hide file tree
Showing 3 changed files with 424 additions and 209 deletions.
265 changes: 243 additions & 22 deletions src/view/pipeline/app/_modals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@
@import '~@patternfly/patternfly/sass-utilities/scss-variables';
@import '~patternfly/dist/sass/patternfly/color-variables';

$font-size-base: 14px;


.co-overlay {
background: rgba(0, 0, 0, 0.5);
bottom: 0;
Expand Down Expand Up @@ -77,7 +80,6 @@
background-repeat: no-repeat;
background-size: 100% 12px;
}


.modal-body {
display: flex;
Expand All @@ -90,6 +92,26 @@
-webkit-overflow-scrolling: touch;
}

form.pf-c-form {
--pf-c-form__helper-text--Color: var(--pf-global--Color--200);
}

:root {
--pf-chart-global--FontFamily: $font-family-base; // so charts get the correct font-family
--pf-global--FontSize--md: $font-size-base;
--pf-global--FontSize--sm: 13px;
}

.pf-c-form__helper-text {
font-size: 13px;
color: #525151;
}

.pf-c-form__label-text {
font-size: 13px;
color: #0a0a0acf;;
}

.modal-body-border {
border-top: 1px solid $pf-color-black-300;
}
Expand All @@ -108,6 +130,8 @@
// so that input, textarea, button, and input-group-addon don't mask the inner scroll shadows
input, textarea {
&.pf-c-form-control {
font-size: 14px;
height: auto;
background-color: transparent;
&[disabled],
&[readonly] {
Expand All @@ -126,6 +150,11 @@
flex-direction: column;
height: 100%;
position: relative;
// margin: auto;
// max-width: 768px;
margin: 0 auto;
width: 78%;
top: 44px;
@media(min-width: $screen-sm-min) {
// Desktop only responsive max-height allows modal to adjust to content height and enable scroll shadows if needed.
max-height: calc(100vh - 60px);
Expand All @@ -139,7 +168,7 @@
overflow-y: visible !important;
}
.modal-body-content {
background-color: brown;
background-color: var(--pf-global--BackgroundColor--100);
}
.modal-body-inner-shadow-covers {
padding-bottom: var(--pf-global--spacer--lg);
Expand All @@ -164,36 +193,17 @@
}
}

.pf-c-select__menu {
position: absolute;
top: var(--pf-c-select__menu--Top);
z-index: var(--pf-c-select__menu--ZIndex);
min-width: 100%;
padding-top: var(--pf-c-select__menu--PaddingTop);
padding-bottom: var(--pf-c-select__menu--PaddingBottom);
background-color: var(--pf-c-select__menu--BackgroundColor);
background-clip: padding-box;
border: var(--pf-c-select__menu--BorderWidth) solid transparent;
box-shadow: var(--pf-c-select__menu--BoxShadow);
}

.modal-footer {
background-color: var(--pf-global--BackgroundColor--100);
margin-top: 0;
padding: var(--pf-global--spacer--md) var(--pf-global--spacer--xl) var(--pf-global--spacer--xl) var(--pf-global--spacer--xl);
}

.modal-header {
background-color: #fff;
background-color:var(--pf-global--BackgroundColor--100);
padding: var(--pf-global--spacer--xl) var(--pf-global--spacer--xl) var(--pf-global--spacer--lg);
}

.title-size {
font-size: 1.5rem;
font-weight: 400;
line-height: 1.3
}

.toleration-modal__field, .taint-modal__field {
padding-right: 0;
}
Expand All @@ -215,3 +225,214 @@
margin-bottom: 24px;
}
}

.pf-c-form__actions--right {
justify-content: flex-end;
}

.pf-c-form__group--no-top-margin {
margin-top: 0 !important;
}

.pf-m-redhat-font .pf-c-button {
--pf-c-button--FontWeight: var(--pf-global--FontWeight--normal);
}

.pf-c-button.pf-m-secondary {
color: var(--pf-c-button--m-secondary--Color);
background-color: var(--pf-c-button--m-secondary--BackgroundColor);
}

$headings-font-family: var(--pf-global--FontFamily--heading--sans-serif);

h2 {
font-size: 20px;
}

h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
// reset headings font family back to correct value
// bug caused by PF4 _shield-inheritable.scss
.pf-l-split {
font-family: $headings-font-family;
}
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--pf-global--FontFamily--heading--sans-serif);
font-weight: var(--pf-global--FontWeight--normal);
line-height: 1.1;
color: inherit;
}

label {
font-weight: 600;
}

.pf-c-select__toggle {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-width: var(--pf-c-select__toggle--MinWidth);
padding: var(--pf-c-select__toggle--PaddingTop) var(--pf-c-select__toggle--PaddingRight) var(--pf-c-select__toggle--PaddingBottom) var(--pf-c-select__toggle--PaddingLeft);
font-size: var(--pf-c-select__toggle--FontSize);
font-weight: var(--pf-c-select__toggle--FontWeight);
line-height: var(--pf-c-select__toggle--LineHeight);
color: var(--pf-c-select__toggle--Color);
white-space: nowrap;
cursor: pointer;
background-color: var(--pf-c-select__toggle--BackgroundColor);
border: none;
}

.pf-c-select__toggle-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
font-style: normal;
color: #1d1b1bd9;
}

.pf-c-select__menu {
position: absolute;
top: var(--pf-c-select__menu--Top);
z-index: var(--pf-c-select__menu--ZIndex);
min-width: 100%;
padding-top: var(--pf-c-select__menu--PaddingTop);
padding-bottom: var(--pf-c-select__menu--PaddingBottom);
background-color: var(--pf-c-select__menu--BackgroundColor);
background-clip: padding-box;
border: var(--pf-c-select__menu--BorderWidth) solid transparent;
box-shadow: var(--pf-c-select__menu--BoxShadow);
}

.pf-c-select__menu-item {
position: relative;
width: 100%;
padding: var(--pf-c-select__menu-item--PaddingTop) var(--pf-c-select__menu-item--PaddingRight) var(--pf-c-select__menu-item--PaddingBottom) var(--pf-c-select__menu-item--PaddingLeft);
font-size: var(--pf-c-select__menu-item--FontSize);
font-weight: var(--pf-c-select__menu-item--FontWeight);
line-height: var(--pf-c-select__menu-item--LineHeight);
color: #1d1b1bd9;
text-align: left;
white-space: nowrap;
background-color: transparent;
border: none;
}

.pf-c-button {
--pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
--pf-c-button--PaddingRight: var(--pf-global--spacer--md);
--pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element);
--pf-c-button--PaddingLeft: var(--pf-global--spacer--md);
--pf-c-button--LineHeight: var(--pf-global--LineHeight--md);
--pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
--pf-c-button--FontSize: var(--pf-global--FontSize--md);
--pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm);
--pf-c-button--BorderColor: transparent;
--pf-c-button--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-button--hover--BorderWidth: var(--pf-global--BorderWidth--md);
--pf-c-button--focus--BorderWidth: var(--pf-global--BorderWidth--md);
--pf-c-button--active--BorderWidth: var(--pf-global--BorderWidth--md);
--pf-c-button--disabled--Color: var(--pf-global--disabled-color--100);
--pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
--pf-c-button--disabled--BorderColor: transparent;
--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-secondary--BackgroundColor: transparent;
--pf-c-button--m-secondary--BorderColor: var(--pf-global--primary-color--100);
--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
--pf-c-button--m-secondary--hover--BackgroundColor: transparent;
--pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--primary-color--100);
--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
--pf-c-button--m-secondary--focus--BackgroundColor: transparent;
--pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--primary-color--100);
--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
--pf-c-button--m-secondary--active--BackgroundColor: transparent;
--pf-c-button--m-secondary--active--BorderColor: var(--pf-global--primary-color--100);
--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
--pf-c-button--m-tertiary--BackgroundColor: transparent;
--pf-c-button--m-tertiary--BorderColor: var(--pf-global--Color--100);
--pf-c-button--m-tertiary--Color: var(--pf-global--Color--100);
--pf-c-button--m-tertiary--hover--BackgroundColor: transparent;
--pf-c-button--m-tertiary--hover--BorderColor: var(--pf-global--Color--100);
--pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100);
--pf-c-button--m-tertiary--focus--BackgroundColor: transparent;
--pf-c-button--m-tertiary--focus--BorderColor: var(--pf-global--Color--100);
--pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100);
--pf-c-button--m-tertiary--active--BackgroundColor: transparent;
--pf-c-button--m-tertiary--active--BorderColor: var(--pf-global--Color--100);
--pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100);
--pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
--pf-c-button--m-danger--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200);
--pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200);
--pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200);
--pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100);
--pf-c-button--m-link--Color: var(--pf-global--link--Color);
--pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover);
--pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover);
--pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover);
--pf-c-button--m-link--disabled--BackgroundColor: transparent;
--pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
--pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
--pf-c-button--m-plain--Color: var(--pf-global--Color--200);
--pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100);
--pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100);
--pf-c-button--m-plain--active--Color: var(--pf-global--Color--100);
--pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
--pf-c-button--m-plain--disabled--BackgroundColor: transparent;
--pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300);
--pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300);
--pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200);
--pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300);
--pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-button--m-control--disabled--after--BorderBottomColor: var(--pf-global--BorderColor--300);
--pf-c-button--m-control--disabled--BackgroundColor: transparent;
--pf-c-button__icon--MarginRight: var(--pf-global--spacer--xs);
--pf-c-button__text--icon--MarginLeft: var(--pf-global--spacer--xs);
position: relative;
display: inline-block;
padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
font-size: var(--pf-c-button--FontSize);
font-weight: var(--pf-c-button--FontWeight);
line-height: var(--pf-c-button--LineHeight);
text-align: center;
white-space: nowrap;
user-select: none;
border: 0;
border-radius: var(--pf-c-button--BorderRadius);
}
8 changes: 1 addition & 7 deletions src/view/pipeline/app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,6 @@
}
</script>
<style>
html,
body {
padding: 0;
overflow: visible;
}

.box {
display: flex;
flex-flow: column;
Expand All @@ -39,7 +33,7 @@
}
</style>
</head>
<body>
<body class="pf-m-redhat-font">
<div class='box' id='root'></div>
</body>
</html>
Loading

0 comments on commit 7897813

Please sign in to comment.