notion-enhancer/mods/property-layout/styles.css
Ryo Hilmawan f1dd72cf11
Property Layout Modification (#201)
* Update mod.js

* Update styles.css
2020-11-03 22:51:47 +11:00

49 lines
1.1 KiB
CSS

/*
* property layout
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 alexander-kazakov
* under the MIT license
*/
.propertylayout-enhanced {
overflow: hidden;
transition: max-height 200ms ease-in, opacity 200ms ease-in;
}
.propertylayout-hidden {
max-height: 0 !important;
opacity: 0;
}
.propertylayout-toggle {
width: 100%;
text-align: left;
font-size: 0.85em;
font-weight: 600;
padding: 0.25em;
background: transparent;
color: var(--theme--text_ui);
border: none;
border-radius: 2px;
transition: background 200ms, margin-bottom 200ms ease-in;
}
.notion-scroller.vertical > div > :first-child .propertylayout-toggle {
margin-top: 1em;
}
.propertylayout-toggle[data-action='show'] {
margin-bottom: 1em;
}
.propertylayout-toggle:hover {
background: var(--theme--interactive_hover);
}
.propertylayout-toggle .triangle {
width: 0.6875em;
height: 0.6875em;
margin: 0 0.75em 0 0.5em;
transition: transform 200ms ease-out 0s;
transform: rotateZ(90deg);
}
.propertylayout-toggle[data-action="hide"] .triangle {
transform: rotateZ(180deg);
}