Skip to content

Commit

Permalink
Merge pull request #16815 from storybookjs/16545-preface-sb-preparing…
Browse files Browse the repository at this point in the history 
…-styles

UI: Ensure all classes+animations for our loaders are prefixed
  • Loading branch information
@shilman
shilman committed Dec 1, 2021
2 parents fad647e + 32e3bb6 commit 1f70c6f
Showing 1 changed file with 65 additions and 68 deletions.
133 changes: 65 additions & 68 deletions lib/core-common/src/templates/base-preview-body.html
View file
@@ -1,21 +1,21 @@
<style>
@-webkit-keyframes rotate360 {
@-webkit-keyframes sb-rotate360 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate360 {
@keyframes sb-rotate360 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes glow {
@-webkit-keyframes sb-glow {
0%,
100% {
opacity: 1;
Expand All @@ -24,7 +24,7 @@
opacity: 0.4;
}
}
@keyframes glow {
@keyframes sb-glow {
0%,
100% {
opacity: 1;
Expand All @@ -33,13 +33,10 @@
opacity: 0.4;
}
}
.isLoading {
cursor: progress;
}

.loader {
-webkit-animation: rotate360 0.7s linear infinite;
animation: rotate360 0.7s linear infinite;
.sb-loader {
-webkit-animation: sb-rotate360 0.7s linear infinite;
animation: sb-rotate360 0.7s linear infinite;
border-color: rgba(97, 97, 97, 0.29);
border-radius: 50%;
border-style: solid;
Expand All @@ -60,7 +57,7 @@
z-index: 4;
}

.previewBlock {
.sb-previewBlock {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
Expand All @@ -69,7 +66,7 @@
max-width: 600px;
}

.previewBlock_header {
.sb-previewBlock_header {
align-items: center;
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
display: flex;
Expand All @@ -78,25 +75,25 @@
padding: 0 12px;
}

.previewBlock_icon {
-webkit-animation: glow 1.5s ease-in-out infinite;
animation: glow 1.5s ease-in-out infinite;
.sb-previewBlock_icon {
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
animation: sb-glow 1.5s ease-in-out infinite;
background: #e6e6e6;
height: 14px;
width: 14px;
}
.previewBlock_icon:last-child {
.sb-previewBlock_icon:last-child {
margin-left: auto;
}

.previewBlock_body {
-webkit-animation: glow 1.5s ease-in-out infinite;
animation: glow 1.5s ease-in-out infinite;
.sb-previewBlock_body {
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
animation: sb-glow 1.5s ease-in-out infinite;
height: 182px;
position: relative;
}

.argstableBlock {
.sb-argstableBlock {
border-collapse: collapse;
border-spacing: 0;
font-size: 13px;
Expand All @@ -106,72 +103,72 @@
text-align: left;
width: 100%;
}
.argstableBlock th:first-of-type,
.argstableBlock td:first-of-type {
.sb-argstableBlock th:first-of-type,
.sb-argstableBlock td:first-of-type {
padding-left: 20px;
}
.argstableBlock th:nth-of-type(2),
.argstableBlock td:nth-of-type(2) {
.sb-argstableBlock th:nth-of-type(2),
.sb-argstableBlock td:nth-of-type(2) {
width: 35%;
}
.argstableBlock th:nth-of-type(3),
.argstableBlock td:nth-of-type(3) {
.sb-argstableBlock th:nth-of-type(3),
.sb-argstableBlock td:nth-of-type(3) {
width: 15%;
}
.argstableBlock th:laste-of-type,
.argstableBlock td:laste-of-type {
.sb-argstableBlock th:laste-of-type,
.sb-argstableBlock td:laste-of-type {
width: 25%;
padding-right: 20px;
}
.argstableBlock th span,
.argstableBlock td span {
-webkit-animation: glow 1.5s ease-in-out infinite;
animation: glow 1.5s ease-in-out infinite;
.sb-argstableBlock th span,
.sb-argstableBlock td span {
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
animation: sb-glow 1.5s ease-in-out infinite;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0;
box-shadow: none;
color: transparent;
}
.argstableBlock th {
.sb-argstableBlock th {
padding: 10px 15px;
}

.argstableBlock-body {
.sb-argstableBlock-body {
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
}
.argstableBlock-body tr {
.sb-argstableBlock-body tr {
background: transparent;
overflow: hidden;
}
.argstableBlock-body tr:not(:first-child) {
.sb-argstableBlock-body tr:not(:first-child) {
border-top: 1px solid #e6e6e6;
}
.argstableBlock-body tr:first-child td:first-child {
.sb-argstableBlock-body tr:first-child td:first-child {
border-top-left-radius: 4px;
}
.argstableBlock-body tr:first-child td:last-child {
.sb-argstableBlock-body tr:first-child td:last-child {
border-top-right-radius: 4px;
}
.argstableBlock-body tr:last-child td:first-child {
.sb-argstableBlock-body tr:last-child td:first-child {
border-bottom-left-radius: 4px;
}
.argstableBlock-body tr:last-child td:last-child {
.sb-argstableBlock-body tr:last-child td:last-child {
border-bottom-right-radius: 4px;
}
.argstableBlock-body td {
.sb-argstableBlock-body td {
background: #fff;
padding-bottom: 10px;
padding-top: 10px;
vertical-align: top;
}
.argstableBlock-body td:not(:first-of-type) {
.sb-argstableBlock-body td:not(:first-of-type) {
padding-left: 15px;
padding-right: 15px;
}
.argstableBlock-body button {
-webkit-animation: glow 1.5s ease-in-out infinite;
animation: glow 1.5s ease-in-out infinite;
.sb-argstableBlock-body button {
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
animation: sb-glow 1.5s ease-in-out infinite;
background-color: rgba(0, 0, 0, 0.1);
border: 0;
border-radius: 0;
Expand All @@ -183,79 +180,79 @@
padding: 10px 16px;
}

.argstableBlock-summary {
.sb-argstableBlock-summary {
margin-top: 4px;
}

.argstableBlock-code {
.sb-argstableBlock-code {
margin-right: 4px;
margin-bottom: 4px;
padding: 2px 5px;
}
</style>

<div class="sb-preparing-story sb-wrapper">
<div class="loader"></div>
<div class="sb-loader"></div>
</div>

<div class="sb-preparing-docs sb-wrapper">
<div class="previewBlock">
<div class="previewBlock_header">
<div class="previewBlock_icon"></div>
<div class="previewBlock_icon"></div>
<div class="previewBlock_icon"></div>
<div class="previewBlock_icon"></div>
<div class="sb-previewBlock">
<div class="sb-previewBlock_header">
<div class="sb-previewBlock_icon"></div>
<div class="sb-previewBlock_icon"></div>
<div class="sb-previewBlock_icon"></div>
<div class="sb-previewBlock_icon"></div>
</div>
<div class="previewBlock_body">
<div class="loader"></div>
<div class="sb-previewBlock_body">
<div class="sb-loader"></div>
</div>
</div>
<table aria-hidden="true" class="argstableBlock">
<thead class="argstableBlock-head">
<table aria-hidden="true" class="sb-argstableBlock">
<thead class="sb-argstableBlock-head">
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
<th><span>Default</span></th>
<th><span>Control </span></th>
</tr>
</thead>
<tbody class="argstableBlock-body">
<tbody class="sb-argstableBlock-body">
<tr>
<td><span>propertyName</span><span title="Required">*</span></td>
<td>
<div><span>This is a short description</span></div>
<div class="argstableBlock-summary">
<div><span class="argstableBlock-code">summary</span></div>
<div class="sb-argstableBlock-summary">
<div><span class="sb-argstableBlock-code">summary</span></div>
</div>
</td>
<td>
<div><span class="argstableBlock-code">defaultValue</span></div>
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
</td>
<td><button>Set string</button></td>
</tr>
<tr>
<td><span>propertyName</span><span>*</span></td>
<td>
<div><span>This is a short description</span></div>
<div class="argstableBlock-summary">
<div><span class="argstableBlock-code">summary</span></div>
<div class="sb-argstableBlock-summary">
<div><span class="sb-argstableBlock-code">summary</span></div>
</div>
</td>
<td>
<div><span class="argstableBlock-code">defaultValue</span></div>
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
</td>
<td><button>Set string</button></td>
</tr>
<tr>
<td><span>propertyName</span><span>*</span></td>
<td>
<div><span>This is a short description</span></div>
<div class="argstableBlock-summary">
<div><span class="argstableBlock-code">summary</span></div>
<div class="sb-argstableBlock-summary">
<div><span class="sb-argstableBlock-code">summary</span></div>
</div>
</td>
<td>
<div><span class="argstableBlock-code">defaultValue</span></div>
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
</td>
<td><button>Set string</button></td>
</tr>
Expand Down

0 comments on commit 1f70c6f

Please sign in to comment.