-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #139 from i-VRESSE/78-node-button-styles
Remove css-in-js button styles from core
- Loading branch information
Showing
19 changed files
with
652 additions
and
245 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,120 @@ | ||
/* | ||
Customise workflow builder components | ||
*/ | ||
|
||
.page { | ||
padding: 1em; | ||
display: grid; | ||
width: 100%; | ||
height: 100vh; | ||
grid-template-areas: "head head head" | ||
"catalog workflow node" | ||
"catalog workflow-actions node-actions"; | ||
grid-template-columns: 1fr 1fr 2fr; | ||
grid-template-rows: auto 1fr auto; | ||
column-gap: 0.5rem; | ||
padding: 1em; | ||
display: grid; | ||
width: 100%; | ||
height: 100vh; | ||
grid-template-areas: "head head head" | ||
"catalog workflow node" | ||
"catalog workflow-actions node-actions"; | ||
grid-template-columns: min-content minmax(12rem,1fr) minmax(20rem,2fr); | ||
grid-template-rows: auto 1fr auto; | ||
column-gap: 1rem; | ||
} | ||
|
||
/* Style workflow area section */ | ||
.workflow-area { | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
|
||
/* Style various form buttons */ | ||
.btn { | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
gap: 1rem; | ||
} | ||
|
||
.btn-visual-panel, | ||
.btn-catalog-node { | ||
width: 100%; | ||
} | ||
|
||
.btn-group { | ||
display: flex; | ||
gap: 0.5rem; | ||
} | ||
|
||
/* remove gap from dropdown group */ | ||
.dropdown.btn-group { | ||
gap: 0rem; | ||
} | ||
|
||
/* center + icon in the button */ | ||
.array-item-add{ | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.no-wrap{ | ||
text-wrap: nowrap; | ||
} | ||
|
||
ul{ | ||
padding: 0.25rem 0.25rem 0.25rem 1.25rem; | ||
} | ||
|
||
.page > div { | ||
overflow: auto; | ||
li{ | ||
list-style-type: none; | ||
} | ||
|
||
.action-row { | ||
padding: 0.25rem | ||
li > ul{ | ||
padding: 0rem; | ||
} | ||
|
||
div[role="button"], | ||
.btn-catalog-node{ | ||
margin: 0.5rem 0rem; | ||
cursor: pointer; | ||
} | ||
|
||
/* Format actions section at the bottom */ | ||
.action-row, | ||
.action-row>.nav { | ||
display: flex; | ||
gap: 1rem; | ||
padding: 0.25rem; | ||
} | ||
|
||
.action-row>.nav { | ||
flex: 1; | ||
justify-content: flex-end; | ||
} | ||
|
||
|
||
.btn-toolbar{ | ||
display: flex; | ||
gap: 1rem; | ||
padding: 1rem 0rem; | ||
} | ||
|
||
/* Show panel section is clickable */ | ||
h5[id^="expander4"]{ | ||
cursor: pointer; | ||
} | ||
/* Allow scrollbars in the card when content is too large */ | ||
.card-body{ | ||
overflow: auto; | ||
} | ||
|
||
/* Alow scrollbars on tables which exceed card width */ | ||
.form-group > fieldset { | ||
overflow: auto; | ||
} | ||
|
||
/* hide commands by default */ | ||
.btn-catalog-node .grip, | ||
.btn-visual-node .btn-group{ | ||
visibility: hidden; | ||
} | ||
|
||
/* show commands on hover */ | ||
.btn-catalog-node:hover .grip, | ||
.btn-visual-node:hover .btn-group { | ||
visibility: visible; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,122 @@ | ||
/* | ||
Customise workflow builder components | ||
NOTE! copy of apps/haddock3-download/src/App.css | ||
*/ | ||
|
||
.page { | ||
padding: 1em; | ||
display: grid; | ||
width: 100%; | ||
height: 100vh; | ||
grid-template-areas: "head head head" | ||
"catalog workflow node" | ||
"catalog workflow-actions node-actions"; | ||
grid-template-columns: 1fr 1fr 2fr; | ||
"catalog workflow node" | ||
"catalog workflow-actions node-actions"; | ||
grid-template-columns: min-content minmax(12rem, 1fr) minmax(20rem, 2fr); | ||
grid-template-rows: auto 1fr auto; | ||
column-gap: 0.5rem; | ||
column-gap: 1rem; | ||
} | ||
|
||
.page > div { | ||
overflow: auto; | ||
/* Style workflow area section */ | ||
.workflow-area { | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
|
||
/* Style various form buttons */ | ||
.btn { | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
gap: 1rem; | ||
} | ||
|
||
.btn-visual-panel, | ||
.btn-catalog-node { | ||
width: 100%; | ||
} | ||
|
||
.btn-group { | ||
display: flex; | ||
gap: 0.5rem; | ||
} | ||
|
||
/* remove gap from dropdown group */ | ||
.dropdown.btn-group { | ||
gap: 0rem; | ||
} | ||
|
||
/* center + icon in the button */ | ||
.array-item-add { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.no-wrap { | ||
text-wrap: nowrap; | ||
} | ||
|
||
.page > .action-row { | ||
ul { | ||
padding: 0.25rem 0.25rem 0.25rem 1.25rem; | ||
} | ||
|
||
li { | ||
list-style-type: none; | ||
} | ||
|
||
li>ul { | ||
padding: 0rem; | ||
} | ||
|
||
div[role="button"], | ||
.btn-catalog-node { | ||
margin: 0.5rem 0rem; | ||
cursor: pointer; | ||
} | ||
|
||
/* Format actions section at the bottom */ | ||
.action-row, | ||
.action-row>.nav { | ||
display: flex; | ||
gap: 1rem; | ||
padding: 0.25rem; | ||
overflow: unset; | ||
} | ||
|
||
.action-row>.nav { | ||
flex: 1; | ||
justify-content: flex-end; | ||
} | ||
|
||
|
||
.btn-toolbar { | ||
display: flex; | ||
gap: 1rem; | ||
padding: 1rem 0rem; | ||
} | ||
|
||
/* Show panel section is clickable */ | ||
h5[id^="expander4"] { | ||
cursor: pointer; | ||
} | ||
|
||
/* Allow scrollbars in the card when content is too large */ | ||
.card-body { | ||
overflow: auto; | ||
} | ||
|
||
/* Alow scrollbars on tables which exceed card width */ | ||
.form-group>fieldset { | ||
overflow: auto; | ||
} | ||
|
||
/* hide commands by default */ | ||
.btn-catalog-node .grip, | ||
.btn-visual-node .btn-group { | ||
visibility: hidden; | ||
} | ||
|
||
/* show commands on hover */ | ||
.btn-catalog-node:hover .grip, | ||
.btn-visual-node:hover .btn-group { | ||
visibility: visible; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.