New design for the widgets section in the docs (#866)

* Initial commit for the new widgets section

* Placing all the widgets and refining the CSS and Hugo logic

* Initial commit for the new widgets section

* Placing all the widgets and refining the CSS and Hugo logic

* Rebased and updated the info according to @verythorough contribution

* Fixing the yaml codes for the relation and select widget sections

* Merging with widgets.md and app.j

* Fixing some silly mistakes (sorry!)

* Following @verythorough contributions :)

* Adding the markdown widget and fixing the widgets container background

* Adding the URL functionality and myself as a contributor :)

* Adding myself as a contributor :)
This commit is contained in:
Henrique Cavalieri
2018-01-03 20:14:15 -02:00
committed by Caleb
parent 4515eddbc4
commit 1167f27939
25 changed files with 567 additions and 312 deletions

View File

@ -0,0 +1,71 @@
.widgets {
margin: 2rem 0;
}
.widgets__cloud {
margin: $micro calc(-$micro / 2);
}
.widgets__item {
color: $darkGrey;
border: 2px solid $darkGreen;
border-radius: $borderRadius;
padding: calc($micro /2) $micro;
margin: calc($micro / 2);
cursor: pointer;
transition: color .2s ease, background .2s ease;
display: inline-block;
font-weight: normal;
}
.widgets__item:hover, .widgets__item_active {
background: $darkGreen;
color: white !important;
}
.widgets__container {
margin: 1em 0;
background: $lightGrey;
border-radius: $borderRadius;
transition: height .15s ease;
}
.widget {
padding: .5em 1em;
display: none;
}
.widget_open {
display: block;
}
.widget_closing {
display: block;
animation: widgetOpacity .15s ease forwards reverse;
}
.widget_opening {
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: widgetOpacity .15s .05s ease forwards;
}
@keyframes widgetOpacity {
from {
opacity: 0
}
to {
opacity: 1
}
}
.widget pre {
background: #eee !important; /* making sure the pre has proper background contrast */
}
.widget h3 {
margin-top: 0 !important;
}

View File

@ -7,4 +7,5 @@
@import "imports/community.css";
@import "imports/collab.css";
@import "imports/docs.css";
@import "imports/widgets.css";
@import "imports/footer.css";

View File

@ -121,4 +121,4 @@ var eventInfoLoad = function() {
}
}
eventInfoLoad();
eventInfoLoad();