mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 22:21:27 +08:00
Dark theme QA and cleanup
This commit is contained in:
domyen
parent
9f74a9b95c
commit
9a50e803e3
@ -177,10 +177,10 @@ export default class KnobPanel extends PureComponent {
|
||||
<Link
|
||||
href="https://github.com/storybooks/storybook/tree/master/addons/knobs"
|
||||
target="_blank"
|
||||
withArrow
|
||||
>
|
||||
dynamically interact with components
|
||||
</Link>{' '}
|
||||
using knobs.
|
||||
</Link>
|
||||
</Fragment>
|
||||
</Placeholder>
|
||||
);
|
||||
|
||||
@ -2173,9 +2173,9 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2187,9 +2187,9 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2217,9 +2217,9 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2231,9 +2231,9 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2261,9 +2261,9 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2275,9 +2275,9 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2306,9 +2306,9 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2328,9 +2328,9 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2415,9 +2415,9 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -2437,9 +2437,9 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -4178,13 +4178,15 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
|
||||
|
||||
.emotion-16 {
|
||||
min-width: 180px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -4204,16 +4206,12 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-5 + .emotion-5 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-5 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-5:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-5:hover svg {
|
||||
@ -4250,7 +4248,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
|
||||
}
|
||||
|
||||
.emotion-3 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.emotion-6 {
|
||||
@ -4267,13 +4265,15 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
|
||||
|
||||
.emotion-16 {
|
||||
min-width: 180px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -4293,16 +4293,12 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-5 + .emotion-5 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-5 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-5:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-5:hover svg {
|
||||
@ -4339,7 +4335,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
|
||||
}
|
||||
|
||||
.emotion-3 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.emotion-6 {
|
||||
@ -4484,9 +4480,9 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -4654,9 +4650,8 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
@ -4907,9 +4902,9 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -5077,9 +5072,8 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
@ -5724,9 +5718,9 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -5894,9 +5888,8 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-14 {
|
||||
@ -6028,7 +6021,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@ -6070,7 +6063,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
|
||||
.emotion-19:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-16 {
|
||||
@ -6128,6 +6121,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-21 {
|
||||
@ -6187,7 +6181,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
|
||||
.emotion-29:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-28 {
|
||||
@ -6269,9 +6263,9 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background-color: rgba(50,53,71,0.97);
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
|
||||
color: #FFFFFF;
|
||||
color: #333333;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -6439,9 +6433,8 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-14 {
|
||||
@ -6573,7 +6566,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@ -6615,7 +6608,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
|
||||
.emotion-19:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-16 {
|
||||
@ -6673,6 +6666,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-21 {
|
||||
@ -6732,7 +6726,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
|
||||
.emotion-29:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-28 {
|
||||
@ -7215,9 +7209,8 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
|
||||
}
|
||||
|
||||
.emotion-3:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
@ -7343,9 +7336,8 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
|
||||
}
|
||||
|
||||
.emotion-3:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
@ -7602,9 +7594,8 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-5:after {
|
||||
@ -7771,9 +7762,8 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-5:after {
|
||||
@ -8000,9 +7990,8 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
@ -8158,9 +8147,8 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
@ -8284,7 +8272,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
@ -8346,7 +8334,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
@ -8434,7 +8422,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
@ -8499,7 +8487,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
@ -8590,7 +8578,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
@ -8652,7 +8640,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
@ -8980,7 +8968,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
@ -9055,7 +9043,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-11:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-18 {
|
||||
@ -9128,7 +9116,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-15:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-19 {
|
||||
@ -9158,7 +9146,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-19:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
@ -9192,7 +9180,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
@ -9267,7 +9255,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-11:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-18 {
|
||||
@ -9340,7 +9328,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-15:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-19 {
|
||||
@ -9370,7 +9358,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
|
||||
|
||||
.emotion-19:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
<div
|
||||
@ -9508,7 +9496,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
@ -9571,7 +9559,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
@ -9687,6 +9675,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
@ -9747,6 +9736,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
<div
|
||||
@ -9806,7 +9796,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
@ -9868,7 +9858,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
|
||||
|
||||
.emotion-3:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
@ -11904,7 +11894,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
|
||||
.emotion-10:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
@ -11995,7 +11985,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
|
||||
.emotion-15:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-14 {
|
||||
@ -12068,7 +12058,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
|
||||
.emotion-30:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-41 > * {
|
||||
@ -12103,6 +12093,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
@ -12275,7 +12266,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
|
||||
.emotion-10:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
@ -12366,7 +12357,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
|
||||
.emotion-15:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-14 {
|
||||
@ -12439,7 +12430,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
|
||||
.emotion-30:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-41 > * {
|
||||
@ -12474,6 +12465,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
<div
|
||||
@ -12834,7 +12826,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@ -12876,7 +12868,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
|
||||
.emotion-11:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
@ -12934,6 +12926,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-13 {
|
||||
@ -12993,7 +12986,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
|
||||
.emotion-21:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-20 {
|
||||
@ -13188,7 +13181,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@ -13230,7 +13223,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
|
||||
.emotion-11:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
@ -13288,6 +13281,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
cursor: default;
|
||||
background: #1EA7FD;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-13 {
|
||||
@ -13347,7 +13341,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
|
||||
|
||||
.emotion-21:hover {
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-20 {
|
||||
|
||||
@ -8,12 +8,17 @@ const BadgeWrapper = styled.div`
|
||||
line-height: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 3em;
|
||||
font-weight: ${props => props.theme.typography.weight.bold};
|
||||
|
||||
svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 4px;
|
||||
margin-top: -2px;
|
||||
|
||||
path {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
${props =>
|
||||
@ -21,9 +26,6 @@ const BadgeWrapper = styled.div`
|
||||
css`
|
||||
color: ${props.theme.color.positive};
|
||||
background: ${props.theme.background.positive};
|
||||
svg path {
|
||||
fill: ${props.theme.color.positive};
|
||||
}
|
||||
`};
|
||||
|
||||
${props =>
|
||||
@ -31,9 +33,6 @@ const BadgeWrapper = styled.div`
|
||||
css`
|
||||
color: ${props.theme.color.negative};
|
||||
background: ${props.theme.background.negative};
|
||||
svg path {
|
||||
fill: ${props.theme.color.negative};
|
||||
}
|
||||
`};
|
||||
|
||||
${props =>
|
||||
@ -41,9 +40,6 @@ const BadgeWrapper = styled.div`
|
||||
css`
|
||||
color: ${props.theme.color.dark};
|
||||
background: ${props.theme.color.mediumlight};
|
||||
svg path {
|
||||
fill: ${props.theme.color.dark};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
|
||||
line-height: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 3em;
|
||||
font-weight: 700;
|
||||
color: #66BF3C;
|
||||
background: #E1FFD4;
|
||||
}
|
||||
@ -20,7 +21,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
|
||||
}
|
||||
|
||||
.emotion-0 svg path {
|
||||
fill: #66BF3C;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
@ -30,6 +31,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
|
||||
line-height: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 3em;
|
||||
font-weight: 700;
|
||||
color: #FF4400;
|
||||
background: #FEDED2;
|
||||
}
|
||||
@ -42,7 +44,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
|
||||
}
|
||||
|
||||
.emotion-1 svg path {
|
||||
fill: #FF4400;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
@ -52,6 +54,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
|
||||
line-height: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 3em;
|
||||
font-weight: 700;
|
||||
color: #666666;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
@ -64,7 +67,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
|
||||
}
|
||||
|
||||
.emotion-2 svg path {
|
||||
fill: #666666;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
<div>
|
||||
|
||||
@ -173,9 +173,8 @@ const ButtonWrapper = styled.button`
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: ${props.theme.color.defaultText};
|
||||
box-shadow: none;
|
||||
color: ${props.theme.color.inverseText};
|
||||
box-shadow: ${transparentize(0.5, props.theme.color.defaultText)} 0 0 0 2px inset;
|
||||
color: ${transparentize(0, props.theme.color.defaultText)};
|
||||
}
|
||||
|
||||
${props.primary &&
|
||||
|
||||
@ -413,9 +413,8 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
|
||||
}
|
||||
|
||||
.emotion-4:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
@ -508,9 +507,8 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
|
||||
}
|
||||
|
||||
.emotion-5:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-5 svg path {
|
||||
@ -626,9 +624,8 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
|
||||
}
|
||||
|
||||
.emotion-6:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-6:hover {
|
||||
@ -1047,9 +1044,8 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
|
||||
}
|
||||
|
||||
.emotion-11:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emotion-12 {
|
||||
@ -1216,9 +1212,8 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
|
||||
}
|
||||
|
||||
.emotion-15:active {
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
color: #333333;
|
||||
box-shadow: rgba(255,255,255,0.5) 0 0 0 2px inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
<div>
|
||||
|
||||
@ -2,17 +2,18 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
import memoize from 'memoizerific';
|
||||
import { transparentize } from 'polished';
|
||||
|
||||
const Title = styled.span(
|
||||
({ theme }) => ({
|
||||
color: theme.color.darker,
|
||||
color: theme.color.defaultText,
|
||||
fontWeight: theme.typography.weight.normal,
|
||||
}),
|
||||
({ active, theme }) =>
|
||||
active
|
||||
? {
|
||||
color: theme.color.primary,
|
||||
fontWeight: theme.typography.weight.extrabold,
|
||||
fontWeight: theme.typography.weight.bold,
|
||||
}
|
||||
: {},
|
||||
({ loading, theme }) =>
|
||||
@ -26,7 +27,7 @@ const Title = styled.span(
|
||||
({ disabled, theme }) =>
|
||||
disabled
|
||||
? {
|
||||
color: theme.color.mediumdark,
|
||||
color: transparentize(0.7, theme.color.defaultText),
|
||||
}
|
||||
: {}
|
||||
);
|
||||
@ -104,7 +105,7 @@ const Item = styled.a(
|
||||
({ theme }) => ({
|
||||
fontSize: theme.typography.size.s1,
|
||||
transition: 'all 150ms ease-out',
|
||||
color: theme.color.mediumdark,
|
||||
color: transparentize(0.5, theme.color.defaultText),
|
||||
textDecoration: 'none',
|
||||
cursor: 'pointer',
|
||||
justifyContent: 'space-between',
|
||||
@ -114,10 +115,6 @@ const Item = styled.a(
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
'& + &': {
|
||||
borderTop: `1px solid ${theme.appBorderColor}`,
|
||||
},
|
||||
|
||||
'& > * + *': {
|
||||
paddingLeft: 10,
|
||||
},
|
||||
|
||||
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import memoize from 'memoizerific';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
import { rgba, lighten, darken } from 'polished';
|
||||
|
||||
const match = memoize(1000)((requestes, actual, value, fallback = 0) =>
|
||||
actual.split('-')[0] === requestes ? value : fallback
|
||||
@ -34,25 +35,33 @@ const Arrow = styled.div(
|
||||
borderTopColor: match(
|
||||
'top',
|
||||
placement,
|
||||
theme.color[color] || color || theme.color.lightest,
|
||||
theme.color[color] || color || theme.base === 'light'
|
||||
? rgba(`${lighten(1, theme.background.app)}`, 0.95)
|
||||
: rgba(`${darken(1, theme.background.app)}`, 0.95),
|
||||
'transparent'
|
||||
),
|
||||
borderBottomColor: match(
|
||||
'bottom',
|
||||
placement,
|
||||
theme.color[color] || color || theme.color.lightest,
|
||||
theme.color[color] || color || theme.base === 'light'
|
||||
? rgba(`${lighten(1, theme.background.app)}`, 0.95)
|
||||
: rgba(`${darken(1, theme.background.app)}`, 0.95),
|
||||
'transparent'
|
||||
),
|
||||
borderLeftColor: match(
|
||||
'left',
|
||||
placement,
|
||||
theme.color[color] || color || theme.color.lightest,
|
||||
theme.color[color] || color || theme.base === 'light'
|
||||
? rgba(`${lighten(1, theme.background.app)}`, 0.95)
|
||||
: rgba(`${darken(1, theme.background.app)}`, 0.95),
|
||||
'transparent'
|
||||
),
|
||||
borderRightColor: match(
|
||||
'right',
|
||||
placement,
|
||||
theme.color[color] || color || theme.color.lightest,
|
||||
theme.color[color] || color || theme.base === 'light'
|
||||
? rgba(`${lighten(1, theme.background.app)}`, 0.95)
|
||||
: rgba(`${darken(1, theme.background.app)}`, 0.95),
|
||||
'transparent'
|
||||
),
|
||||
})
|
||||
@ -72,18 +81,14 @@ const Wrapper = styled.div(
|
||||
marginRight: `${match('left', placement, ArrowSpacing + 2, 0)}px`,
|
||||
|
||||
background:
|
||||
theme.color[color] ||
|
||||
color ||
|
||||
`linear-gradient(
|
||||
-1deg,
|
||||
rgba(248, 248, 248, 0.97) 0%,
|
||||
rgba(255, 255, 255, 0.97) 100%
|
||||
)`,
|
||||
theme.color[color] || color || theme.base === 'light'
|
||||
? rgba(`${lighten(1, theme.background.app)}`, 0.95)
|
||||
: rgba(`${darken(1, theme.background.app)}`, 0.95),
|
||||
filter: `
|
||||
drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
|
||||
drop-shadow(0 1px 3px rgba(0,0,0,0.1))
|
||||
`,
|
||||
borderRadius: theme.appBorderRadius,
|
||||
borderRadius: theme.appBorderRadius * 2,
|
||||
fontSize: theme.typography.size.s1,
|
||||
}
|
||||
: {
|
||||
|
||||
@ -4,9 +4,15 @@ import { styled } from '@storybook/theming';
|
||||
|
||||
import ListItem from './ListItem';
|
||||
|
||||
const List = styled.div({
|
||||
minWidth: 180,
|
||||
});
|
||||
const List = styled.div(
|
||||
{
|
||||
minWidth: 180,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
({ theme }) => ({
|
||||
borderRadius: theme.appBorderRadius * 2,
|
||||
})
|
||||
);
|
||||
|
||||
const TooltipLinkList = ({ links, LinkWrapper }) => (
|
||||
<List>
|
||||
|
||||
@ -17,7 +17,7 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -37,16 +37,12 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-5 + .emotion-5 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-5 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-5:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-5:hover svg {
|
||||
@ -69,8 +65,9 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
color: #FF4785;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-4 svg {
|
||||
@ -190,7 +187,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -210,16 +207,12 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-2 + .emotion-2 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-2 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-2:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-2:hover svg {
|
||||
@ -242,11 +235,11 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
|
||||
}
|
||||
|
||||
.emotion-3 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
-webkit-animation: animation-0 1.5s ease-in-out infinite;
|
||||
animation: animation-0 1.5s ease-in-out infinite;
|
||||
background: rgba(0,0,0,.1);
|
||||
@ -284,8 +277,9 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
|
||||
}
|
||||
|
||||
.emotion-19 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
color: #FF4785;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-20 {
|
||||
@ -322,7 +316,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -343,16 +337,12 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.emotion-37 + .emotion-37 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-37 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-37:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-37:hover svg {
|
||||
@ -360,8 +350,8 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
|
||||
}
|
||||
|
||||
.emotion-33 {
|
||||
color: #444444;
|
||||
color: #999999;
|
||||
color: #FFFFFF;
|
||||
color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.emotion-34 {
|
||||
@ -560,7 +550,7 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -580,16 +570,12 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-2 + .emotion-2 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-2 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-2:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-2:hover svg {
|
||||
@ -612,7 +598,7 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
<a
|
||||
@ -647,7 +633,7 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -667,16 +653,12 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-5 + .emotion-5 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-5 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-5:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-5:hover svg {
|
||||
@ -699,7 +681,7 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.emotion-4 svg {
|
||||
@ -778,7 +760,7 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -799,16 +781,12 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.emotion-5 + .emotion-5 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-5 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-5:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-5:hover svg {
|
||||
@ -816,8 +794,8 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
color: #444444;
|
||||
color: #999999;
|
||||
color: #FFFFFF;
|
||||
color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
@ -918,7 +896,7 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -938,16 +916,12 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-2 + .emotion-2 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-2 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-2:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-2:hover svg {
|
||||
@ -970,7 +944,7 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
-webkit-animation: animation-0 1.5s ease-in-out infinite;
|
||||
animation: animation-0 1.5s ease-in-out infinite;
|
||||
background: rgba(0,0,0,.1);
|
||||
@ -1000,7 +974,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -1020,16 +994,12 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-5 + .emotion-5 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-5 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-5:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-5:hover svg {
|
||||
@ -1052,7 +1022,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.emotion-4 svg {
|
||||
@ -1111,7 +1081,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
color: #999999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -1131,16 +1101,12 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emotion-5 + .emotion-5 {
|
||||
border-top: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.emotion-5 > * + * {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.emotion-5:hover {
|
||||
background: rgba(0,0,0,.05);
|
||||
background: rgba(250,250,252,.1);
|
||||
}
|
||||
|
||||
.emotion-5:hover svg {
|
||||
@ -1171,8 +1137,9 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
color: #444444;
|
||||
color: #FFFFFF;
|
||||
color: #FF4785;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
|
||||
@ -8,10 +8,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: #DDDDDD;
|
||||
background: rgba(255,255,255,0.95);
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #DDDDDD;
|
||||
border-top-color: rgba(255,255,255,0.95);
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
@ -77,10 +77,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
|
||||
margin-top: 10px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
background: rgba(0,0,0,0.95);
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #FFFFFF;
|
||||
border-bottom-color: rgba(0,0,0,0.95);
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
@ -136,10 +136,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 10px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
background: rgba(0,0,0,0.95);
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -160,7 +160,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
|
||||
border-left-width: 8px;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: #FFFFFF;
|
||||
border-left-color: rgba(0,0,0,0.95);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
@ -195,10 +195,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
|
||||
margin-top: 0px;
|
||||
margin-left: 10px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
background: rgba(0,0,0,0.95);
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -220,7 +220,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: #FFFFFF;
|
||||
border-right-color: rgba(0,0,0,0.95);
|
||||
}
|
||||
|
||||
<div
|
||||
|
||||
@ -189,10 +189,10 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
|
||||
background: rgba(0,0,0,0.95);
|
||||
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -211,7 +211,7 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
|
||||
border-top-width: 8px;
|
||||
border-right-width: 8px;
|
||||
border-left-width: 8px;
|
||||
border-top-color: #FFFFFF;
|
||||
border-top-color: rgba(0,0,0,0.95);
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
|
||||
@ -115,7 +115,7 @@ export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
|
||||
background: {
|
||||
app: vars.appBg || background.app,
|
||||
content: vars.appContentBg || color.lightest,
|
||||
hoverable: background.hoverable, // TODO: change so it responds to whether appColor is light or dark
|
||||
hoverable: vars.base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
|
||||
|
||||
positive: background.positive,
|
||||
negative: background.negative,
|
||||
|
||||
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Link } from '@storybook/router';
|
||||
import { rgba, lighten, darken } from 'polished';
|
||||
|
||||
const NotificationText = styled.div();
|
||||
|
||||
@ -12,9 +13,12 @@ const baseStyle = ({ theme }) => ({
|
||||
fontSize: theme.typography.size.s1,
|
||||
fontWeight: theme.typography.weight.bold,
|
||||
lineHeight: `16px`,
|
||||
backgroundColor: 'rgba(50, 53, 71, 0.97)',
|
||||
boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.05)',
|
||||
color: `${theme.color.lightest}`,
|
||||
color: theme.color.inverseText,
|
||||
backgroundColor:
|
||||
theme.base === 'light'
|
||||
? rgba(`${darken(1, theme.background.app)}`, 0.95)
|
||||
: rgba(`${lighten(1, theme.background.app)}`, 0.95),
|
||||
textDecoration: 'none',
|
||||
});
|
||||
|
||||
|
||||
@ -13,7 +13,6 @@ const Expander = styled.span(
|
||||
marginRight: 6,
|
||||
borderTop: '3.5px solid transparent',
|
||||
borderBottom: '3.5px solid transparent',
|
||||
// this needs to be inverted for the dark theme
|
||||
borderLeft: `3.5px solid ${opacify(0.2, theme.appBorderColor)}`,
|
||||
transition: 'transform .1s ease-out',
|
||||
}),
|
||||
@ -73,6 +72,7 @@ export const Item = styled.div(
|
||||
cursor: 'default',
|
||||
background: theme.color.secondary,
|
||||
color: theme.color.lightest,
|
||||
fontWeight: theme.typography.weight.bold,
|
||||
}
|
||||
: {
|
||||
cursor: 'pointer',
|
||||
@ -82,7 +82,7 @@ export const Item = styled.div(
|
||||
: transparentize(0.2, theme.color.defaultText),
|
||||
'&:hover': {
|
||||
color: theme.color.defaultText,
|
||||
background: 'rgba(0,0,0,.05)',
|
||||
background: theme.background.hoverable,
|
||||
},
|
||||
}),
|
||||
({ theme, loading }) =>
|
||||
|
||||
@ -8,7 +8,7 @@ const Heading = styled.div(({ theme }) => ({
|
||||
fontWeight: theme.typography.weight.black,
|
||||
fontSize: theme.typography.size.s1 - 1,
|
||||
lineHeight: '24px',
|
||||
color: transparentize(0.4, theme.color.defaultText),
|
||||
color: transparentize(0.5, theme.color.defaultText),
|
||||
}));
|
||||
|
||||
const Subheading = props => <Heading {...props} />;
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`Storyshots UI|Sidebar/SidebarSubheading default 1`] = `
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user