16 margin-top: $-xxl*1.4;
17 @include smaller-than($screen-lg) {
23 margin-bottom: $-xxl*1.4;
24 @include smaller-than($screen-lg) {
29 .screenshot-container-parent {
32 perspective-origin: 50% 50%;
35 @keyframes slow-rotate {
37 transform: rotateY(-10deg);
40 transform: rotateY(0deg);
44 .screenshot-container {
45 animation: slow-rotate ease-in-out 1s;
47 display: inline-block;
49 box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.2);
50 border: 3px solid #DDD;
52 transform: rotateY(0) translateX(0);
53 transform-style: preserve-3d;
54 transition: all ease-in-out 280ms;
55 transform-origin: 50% 50%;
58 transform: rotateY(-10deg) translateX(20px);
59 box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
63 background-color: #DDD;
66 display: inline-block;
67 background-color: red;
74 @include smaller-than($screen-lg) {
90 justify-content: center;
99 header .menu, footer .menu {
102 display: inline-block;
110 display: inline-block;
128 text-decoration: underline;
131 header #menu-button {
133 background-color: transparent;
139 @include smaller-than($xl) {
141 padding-top: $-xxl*1.7;
143 header .row.fix-mobile {
146 background-color: $primary;
149 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
151 header #menu-button {
152 display: inline-block;
154 header .menu .inner {
160 background-color: #FFF;
163 box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
171 border-bottom: 1px solid #EEE;
182 background-color: #FFF;
183 transform: rotate(45deg);
204 footer, .shaded-border {
205 border-top: 1px solid #DDD;
221 display: inline-block;
229 padding: $-xs*1.2 $-s;
232 border: 1px solid #DDD;
237 display: inline-block;
239 border: 1px solid #DDD;
246 border: 1px solid #DDD;
248 box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
249 transform: translate3d(0, 0, 0);
250 transition: all cubic-bezier(.62, .28, .23, .99) 160ms;
252 transform: translate3d(0, -6px, 0);
253 box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
257 margin-bottom: .5rem;
266 padding-bottom: $-xxl;
269 display: inline-block;
274 border: 2px solid #DDD;
276 transition: all ease-in-out 120ms;
282 transition: all ease-in-out 120ms;
289 border-color: $primary;
291 text-decoration: none;
297 border: 1px solid $primary;
308 .docs-section-title {
313 .sidebar, .docs-index {
340 justify-content: left;
344 border-right: 2px dotted #E5E5E5;
350 .sidebar-inner.mobile {
355 @include larger-than($l) {
363 .sidebar-inner.mobile {
391 background-color: #FFF;
394 box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
400 background-size: cover;
408 box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
420 input[type="text"].doc-search-input {
421 background-color: transparent;
422 border: 2px solid #FFF;
424 background-color: $primary;
429 &::-webkit-input-placeholder { /* Chrome */
430 color: rgba(255, 255, 255, 0.7);
432 &:-ms-input-placeholder { /* IE 10+ */
433 color: rgba(255, 255, 255, 0.7);
435 &::-moz-placeholder { /* Firefox 19+ */
436 color: rgba(255, 255, 255, 0.7);
439 &:-moz-placeholder { /* Firefox 4 - 18 */
440 color: rgba(255, 255, 255, 0.7);
448 iframe[src^="https://www.youtube-nocookie.com"] {
454 box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
455 background-color: #222;
458 input[type="text"].blog-search-input {
459 border: 2px solid #BBB;
467 .meilisearch-autocomplete .docs-searchbar-footer-logo,
468 .meilisearch-autocomplete .docs-searchbar-footer {
469 vertical-align: top !important;
472 .meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
473 color: #53555a !important;