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:
committed by
Caleb
parent
4515eddbc4
commit
1167f27939
71
website/src/css/imports/widgets.css
Normal file
71
website/src/css/imports/widgets.css
Normal 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;
|
||||
}
|
@ -7,4 +7,5 @@
|
||||
@import "imports/community.css";
|
||||
@import "imports/collab.css";
|
||||
@import "imports/docs.css";
|
||||
@import "imports/widgets.css";
|
||||
@import "imports/footer.css";
|
||||
|
@ -121,4 +121,4 @@ var eventInfoLoad = function() {
|
||||
}
|
||||
}
|
||||
|
||||
eventInfoLoad();
|
||||
eventInfoLoad();
|
||||
|
Reference in New Issue
Block a user