Skip to content
This repository has been archived by the owner on Jun 29, 2023. It is now read-only.

Flow item demo and panel styling #412

Merged
merged 4 commits into from
Oct 21, 2019
Merged

Flow item demo and panel styling #412

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f23a4a0
stuffz
kat10140 Oct 21, 2019
e2d65fc
fix(panel): moved position:relative to :host
asangma Oct 21, 2019
cca813e
Merge branch 'master' into kat10140/flow-item-demo
kat10140 Oct 21, 2019
e03b7eb
Merge branch 'master' into kat1010/flow-item-demo-and-panel-styling
kat10140 Oct 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/calcite-panel/calcite-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
display: flex;
height: 100%;
font-size: var(--calcite-app-base-font-size);
position: relative;
}

.container {
Expand All @@ -11,7 +12,6 @@
margin: 0;
display: flex;
flex-flow: column;
position: relative;
}

.container[hidden] {
Expand Down
39 changes: 37 additions & 2 deletions src/demos/calcite-flow-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@
<!-- Loads the link and script tags-->
<script src="head.js"></script>
</head>

<style>
.demo-block {
width: 100%;
height: 240px;
margin-bottom: 8px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 0 #e0e0e0;
}
</style>
<body>
<nav>
<calcite-demo-nav page-id="calcite-flow-item"></calcite-demo-nav>
Expand All @@ -30,8 +39,25 @@ <h1>calcite-flow-item</h1>
width: 350px;
height: 800px;
}
.demo-btn {
background-color: transparent;
border: 1px solid #007ac2;
color: #007ac2;
font-size: 1rem;
font-family: inherit;
padding: 0.7rem;
border-radius: 3px;
margin: 1rem 0.2rem;
min-width: 5rem;
}
.toggles {
margin: 1rem 0;
}
</style>

<div class="toggles">
<calcite-button onclick="toggleProperty('loading')">Toggle loading</calcite-button>
<calcite-button onclick="toggleProperty('disabled')">Toggle disabled</calcite-button>
</div>
<div class="flow-container">
<calcite-flow-item heading="First Panel">
<div slot="menu-actions">
Expand All @@ -47,5 +73,14 @@ <h1>calcite-flow-item</h1>
</div>
</section>
</main>
<script>
function toggleProperty(property) {
const blocks = document.getElementsByTagName("calcite-flow-item");

for (i = 0; i < blocks.length; i++) {
blocks[i].toggleAttribute(property);
}
}
</script>
</body>
</html>