extum / material Goto Github PK
View Code? Open in Web Editor NEWπ¨ Materialize your forum with this Flarum extension that uses the latest guidelines.
Home Page: https://materialtheme.freeflarum.com/
License: MIT License
π¨ Materialize your forum with this Flarum extension that uses the latest guidelines.
Home Page: https://materialtheme.freeflarum.com/
License: MIT License
Standard browser dialogs to be replaced with Material ones.
Dialog CSS style and documentation is below.
.mdl-dialog {
border: none;
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
width: 280px; }
.mdl-dialog__title {
padding: 24px 24px 0;
margin: 0;
font-size: 2.5rem; }
.mdl-dialog__actions {
padding: 8px 8px 8px 24px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.mdl-dialog__actions > * {
margin-right: 8px;
height: 36px; }
.mdl-dialog__actions > *:first-child {
margin-right: 0; }
.mdl-dialog__actions--full-width {
padding: 0 0 8px 0; }
.mdl-dialog__actions--full-width > * {
height: 48px;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
padding-right: 16px;
margin-right: 0;
text-align: right; }
.mdl-dialog__content {
padding: 20px 24px 24px 24px;
color: rgba(0,0,0, 0.54); }
Documentation: https://getmdl.io/components/index.html#dialog-section
Describe the bug
With dark mode enabled, the admin dashboard colors look a bit messed up.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The sidebar background color should be darker.
Environment (please complete the following information):
Not focused & not expanded ---> normal shadow
Focused & expanded ---> a bit more shadow
Even if we applied switch styles from getmdl.io, switches are not working.
It is possible that .Checkbox-display
is not valid, because we also saw only .Checkbox
while browsing the css file but both didn't work for the theme.
Describe the bug
The notification badge when there is a notification stays inside the button area instead of expanding and overlapping the outline button.
Expected behavior
The badge should not stay inside the button.
Environment (please complete the following information):
Tooltips should be used to give users information about which button does what instead of the regular-white-rectangle thing.
Tooltip CSS style is below.
.mdl-tooltip {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: top center;
transform-origin: top center;
z-index: 999;
background: rgba(97,97,97, 0.9);
border-radius: 2px;
color: rgb(255,255,255);
display: inline-block;
font-size: 10px;
font-weight: 500;
line-height: 14px;
max-width: 170px;
position: fixed;
top: -500px;
left: -500px;
padding: 8px;
text-align: center; }
.mdl-tooltip.is-active {
-webkit-animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards; }
.mdl-tooltip--large {
line-height: 14px;
font-size: 14px;
padding: 16px; }
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
50% {
-webkit-transform: scale(0.99);
transform: scale(0.99); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
visibility: visible; } }
@keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
50% {
-webkit-transform: scale(0.99);
transform: scale(0.99); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
visibility: visible; } }
Documentation: https://getmdl.io/components/index.html#tooltips-section
Standard tag design with sharp corners should replaced with round chips.
MDL code and documentation below.
.mdl-chip {
height: 32px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
line-height: 32px;
padding: 0 12px;
border: 0;
border-radius: 16px;
background-color: #dedede;
display: inline-block;
color: rgba(0,0,0, 0.87);
margin: 2px 0;
font-size: 0;
white-space: nowrap; }
.mdl-chip__text {
font-size: 13px;
vertical-align: middle;
display: inline-block; }
.mdl-chip__action {
height: 24px;
width: 24px;
background: transparent;
opacity: 0.54;
display: inline-block;
cursor: pointer;
text-align: center;
vertical-align: middle;
padding: 0;
margin: 0 0 0 4px;
font-size: 13px;
text-decoration: none;
color: rgba(0,0,0, 0.87);
border: none;
outline: none;
overflow: hidden; }
.mdl-chip__contact {
height: 32px;
width: 32px;
border-radius: 16px;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
overflow: hidden;
text-align: center;
font-size: 18px;
line-height: 32px; }
.mdl-chip:focus {
outline: 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.mdl-chip:active {
background-color: #d6d6d6; }
.mdl-chip--deletable {
padding-right: 4px; }
.mdl-chip--contact {
padding-left: 0; }
Documentation: https://getmdl.io/components/index.html#chips-section
Separator disappears when arrives to titles with icons.
Is your feature request related to a problem? Please describe.
Material elements need ripple effects that can be achieved using JavaScript and as we're converting this to an extension, I'm pretty sure this is possible now.
Describe the solution you'd like
Elements should have ripple effects via the js folder.
Describe the bug
Separator between navigators and tags should be made darker to fit with the Material guidelines.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The separator should be grayish to fit with the guidelines.
Screenshots
Environment (please complete the following information):
Regular badges at the notification button with a white border should be replaced with Material ones.
Badge CSS styles and documentation are below.
.mdl-badge {
position: relative;
white-space: nowrap;
margin-right: 24px; }
.mdl-badge:not([data-badge]) {
margin-right: auto; }
.mdl-badge[data-badge]:after {
content: attr(data-badge);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: -11px;
right: -24px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 600;
font-size: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgb(255,64,129);
color: rgb(255,255,255); }
.mdl-button .mdl-badge[data-badge]:after {
top: -10px;
right: -5px; }
.mdl-badge.mdl-badge--no-background[data-badge]:after {
color: rgb(255,64,129);
background: rgba(255,255,255,0.2);
box-shadow: 0 0 1px gray; }
.mdl-badge.mdl-badge--overlap {
margin-right: 10px; }
.mdl-badge.mdl-badge--overlap:after {
right: -10px; }
Documentation: https://getmdl.io/components/index.html#badges-section
Integrate any application or build custom notifiers using Airbrake's public
APIs: https://airbrake.io/docs/api/
Airbrake has many community maintained notifers for capturing exceptions in your applications.
We also offer a couple of addons/plugins with 3rd parties. Below is a list of our favorites:
Are we missing something? If so, please get in touch with [email protected] and we'll be happy to help get Airbrake integrated into your app.
For official list of supported languages please visit https://airbrake.io/languages.
Describe the bug
Extension icons inside the admin/extensions page look so small because of the Material icon change.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Small icons should be shown small but icons on the extensions page should be shown big.
Current behavior
Small icons are OK, but big icons are not working.
Environment (please complete the following information):
The current dropdowns should be replaced with Material ones. I'm placing the css code from mdl below that include all animations without the need of js.
.mdl-menu__container {
display: block;
margin: 0;
padding: 0;
border: none;
position: absolute;
overflow: visible;
height: 0;
width: 0;
visibility: hidden;
z-index: -1; }
.mdl-menu__container.is-visible, .mdl-menu__container.is-animating {
z-index: 999;
visibility: visible; }
.mdl-menu__outline {
display: block;
background: rgb(255,255,255);
margin: 0;
padding: 0;
border: none;
border-radius: 2px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
will-change: transform;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1; }
.mdl-menu__container.is-visible .mdl-menu__outline {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
z-index: 999; }
.mdl-menu__outline.mdl-menu--bottom-right {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0; }
.mdl-menu__outline.mdl-menu--top-left {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%; }
.mdl-menu__outline.mdl-menu--top-right {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
.mdl-menu {
position: absolute;
list-style: none;
top: 0;
left: 0;
height: auto;
width: auto;
min-width: 124px;
padding: 8px 0;
margin: 0;
opacity: 0;
clip: rect(0 0 0 0);
z-index: -1; }
.mdl-menu__container.is-visible .mdl-menu {
opacity: 1;
z-index: 999; }
.mdl-menu.is-animating {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.mdl-menu.mdl-menu--bottom-right {
left: auto;
right: 0; }
.mdl-menu.mdl-menu--top-left {
top: auto;
bottom: 0; }
.mdl-menu.mdl-menu--top-right {
top: auto;
left: auto;
bottom: 0;
right: 0; }
.mdl-menu.mdl-menu--unaligned {
top: auto;
left: auto; }
.mdl-menu__item {
display: block;
border: none;
color: rgba(0,0,0, 0.87);
background-color: transparent;
text-align: left;
margin: 0;
padding: 0 16px;
outline-color: rgb(189,189,189);
position: relative;
overflow: hidden;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
text-decoration: none;
cursor: pointer;
height: 48px;
line-height: 48px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.mdl-menu__container.is-visible .mdl-menu__item {
opacity: 1; }
.mdl-menu__item::-moz-focus-inner {
border: 0; }
.mdl-menu__item--full-bleed-divider {
border-bottom: 1px solid rgba(0,0,0, 0.12); }
.mdl-menu__item[disabled], .mdl-menu__item[data-mdl-disabled] {
color: rgb(189,189,189);
background-color: transparent;
cursor: auto; }
.mdl-menu__item[disabled]:hover, .mdl-menu__item[data-mdl-disabled]:hover {
background-color: transparent; }
.mdl-menu__item[disabled]:focus, .mdl-menu__item[data-mdl-disabled]:focus {
background-color: transparent; }
.mdl-menu__item[disabled] .mdl-ripple, .mdl-menu__item[data-mdl-disabled] .mdl-ripple {
background: transparent; }
.mdl-menu__item:hover {
background-color: rgb(238,238,238); }
.mdl-menu__item:focus {
outline: none;
background-color: rgb(238,238,238); }
.mdl-menu__item:active {
background-color: rgb(224,224,224); }
.mdl-menu__item--ripple-container {
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
overflow: hidden; }
Documentation: https://getmdl.io/components/index.html#menus-section
In the Settings there is an issue with the "X" to not receive updates about the given Item to the left.
Describe the bug
The minimize (-) icon is not showing correctly on mobile devices
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A minimize (-) icon needs to appear.
Environment (please complete the following information):
Additional context
Appears on Chromium "emulator" and on Android too
Describe the bug
Top flags and notifications buttons alignements are messed up.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Environment (please complete the following information):
The current loader uses an icon from Font Awesome and it makes it a bit harder to replace it with the loader from mdl.
We should do some research and make this possible anyways. I'm leaving the spinner (includes horizontal and round but we need to use the round and the single color one) style from mdl below:
.mdl-spinner {
display: inline-block;
position: relative;
width: 28px;
height: 28px; }
.mdl-spinner:not(.is-upgraded).is-active:after {
content: "Loading..."; }
.mdl-spinner.is-upgraded.is-active {
-webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; }
@-webkit-keyframes mdl-spinner__container-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes mdl-spinner__container-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.mdl-spinner__layer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0; }
.mdl-spinner__layer-1 {
border-color: rgb(66,165,245); }
.mdl-spinner--single-color .mdl-spinner__layer-1 {
border-color: rgb(63,81,181); }
.mdl-spinner.is-active .mdl-spinner__layer-1 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.mdl-spinner__layer-2 {
border-color: rgb(244,67,54); }
.mdl-spinner--single-color .mdl-spinner__layer-2 {
border-color: rgb(63,81,181); }
.mdl-spinner.is-active .mdl-spinner__layer-2 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.mdl-spinner__layer-3 {
border-color: rgb(253,216,53); }
.mdl-spinner--single-color .mdl-spinner__layer-3 {
border-color: rgb(63,81,181); }
.mdl-spinner.is-active .mdl-spinner__layer-3 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.mdl-spinner__layer-4 {
border-color: rgb(76,175,80); }
.mdl-spinner--single-color .mdl-spinner__layer-4 {
border-color: rgb(63,81,181); }
.mdl-spinner.is-active .mdl-spinner__layer-4 {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg); }
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg); }
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg); }
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg); }
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg); }
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg); } }
@keyframes mdl-spinner__fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg); }
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg); }
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg); }
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg); }
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg); }
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg); } }
/**
* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
* to do proper subpixel rendering for the elements being animated. This is
* especially visible in Chrome 39 on Ubuntu 14.04. See:
*
* - https://github.com/Polymer/paper-spinner/issues/9
* - https://code.google.com/p/chromium/issues/detail?id=436255
*/
@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
from {
opacity: 0.99; }
25% {
opacity: 0.99; }
26% {
opacity: 0; }
89% {
opacity: 0; }
90% {
opacity: 0.99; }
100% {
opacity: 0.99; } }
@keyframes mdl-spinner__layer-1-fade-in-out {
from {
opacity: 0.99; }
25% {
opacity: 0.99; }
26% {
opacity: 0; }
89% {
opacity: 0; }
90% {
opacity: 0.99; }
100% {
opacity: 0.99; } }
@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
from {
opacity: 0; }
15% {
opacity: 0; }
25% {
opacity: 0.99; }
50% {
opacity: 0.99; }
51% {
opacity: 0; } }
@keyframes mdl-spinner__layer-2-fade-in-out {
from {
opacity: 0; }
15% {
opacity: 0; }
25% {
opacity: 0.99; }
50% {
opacity: 0.99; }
51% {
opacity: 0; } }
@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
from {
opacity: 0; }
40% {
opacity: 0; }
50% {
opacity: 0.99; }
75% {
opacity: 0.99; }
76% {
opacity: 0; } }
@keyframes mdl-spinner__layer-3-fade-in-out {
from {
opacity: 0; }
40% {
opacity: 0; }
50% {
opacity: 0.99; }
75% {
opacity: 0.99; }
76% {
opacity: 0; } }
@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
from {
opacity: 0; }
65% {
opacity: 0; }
75% {
opacity: 0.99; }
90% {
opacity: 0.99; }
100% {
opacity: 0; } }
@keyframes mdl-spinner__layer-4-fade-in-out {
from {
opacity: 0; }
65% {
opacity: 0; }
75% {
opacity: 0.99; }
90% {
opacity: 0.99; }
100% {
opacity: 0; } }
/**
* Patch the gap that appear between the two adjacent
* div.mdl-spinner__circle-clipper while the spinner is rotating
* (appears on Chrome 38, Safari 7.1, and IE 11).
*
* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
* opacity is 0.99, but still does on Safari and IE.
*/
.mdl-spinner__gap-patch {
position: absolute;
box-sizing: border-box;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit; }
.mdl-spinner__gap-patch .mdl-spinner__circle {
width: 1000%;
left: -450%; }
.mdl-spinner__circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit; }
.mdl-spinner__circle-clipper.mdl-spinner__left {
float: left; }
.mdl-spinner__circle-clipper.mdl-spinner__right {
float: right; }
.mdl-spinner__circle-clipper .mdl-spinner__circle {
width: 200%; }
.mdl-spinner__circle {
box-sizing: border-box;
height: 100%;
border-width: 3px;
border-style: solid;
border-color: inherit;
border-bottom-color: transparent !important;
border-radius: 50%;
-webkit-animation: none;
animation: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.mdl-spinner__left .mdl-spinner__circle {
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);
transform: rotate(129deg); }
.mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
-webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.mdl-spinner__right .mdl-spinner__circle {
left: -100%;
border-left-color: transparent !important;
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg); }
.mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
-webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
@-webkit-keyframes mdl-spinner__left-spin {
from {
-webkit-transform: rotate(130deg);
transform: rotate(130deg); }
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg); }
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg); } }
@keyframes mdl-spinner__left-spin {
from {
-webkit-transform: rotate(130deg);
transform: rotate(130deg); }
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg); }
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg); } }
@-webkit-keyframes mdl-spinner__right-spin {
from {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg); }
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg); }
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg); } }
@keyframes mdl-spinner__right-spin {
from {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg); }
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg); }
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg); } }
Checkboxes at user profile settings should be materialized with the code and documentation from MDL below.
.mdl-checkbox {
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 24px;
margin: 0;
padding: 0; }
.mdl-checkbox.is-upgraded {
padding-left: 24px; }
.mdl-checkbox__input {
line-height: 24px; }
.mdl-checkbox.is-upgraded .mdl-checkbox__input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none; }
.mdl-checkbox__box-outline {
position: absolute;
top: 3px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
overflow: hidden;
border: 2px solid rgba(0,0,0, 0.54);
border-radius: 2px;
z-index: 2; }
.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
border: 2px solid rgb(63,81,181); }
fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
.mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
border: 2px solid rgba(0,0,0, 0.26);
cursor: auto; }
.mdl-checkbox__focus-helper {
position: absolute;
top: 3px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: transparent; }
.mdl-checkbox.is-focused .mdl-checkbox__focus-helper {
box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1); }
.mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
box-shadow: 0 0 0px 8px rgba(63,81,181, 0.26);
background-color: rgba(63,81,181, 0.26); }
.mdl-checkbox__tick-outline {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
background: transparent;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background; }
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
background: rgb(63,81,181) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K"); }
fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
.mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
background: rgba(0,0,0, 0.26) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K"); }
.mdl-checkbox__label {
position: relative;
cursor: pointer;
font-size: 16px;
line-height: 24px;
margin: 0; }
fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
.mdl-checkbox.is-disabled .mdl-checkbox__label {
color: rgba(0,0,0, 0.26);
cursor: auto; }
.mdl-checkbox__ripple-container {
position: absolute;
z-index: 2;
top: -6px;
left: -10px;
box-sizing: border-box;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
.mdl-checkbox__ripple-container .mdl-ripple {
background: rgb(63,81,181); }
fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container,
.mdl-checkbox.is-disabled .mdl-checkbox__ripple-container {
cursor: auto; }
fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,
.mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {
background: transparent; }
Documentation: https://getmdl.io/components/index.html#toggles-section/checkbox
Describe the bug
There is no icon on the more button located on the user card that appears on hover to Author pics.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The more button should have an icon that represents the action. In this case, a menu button.
Note: Screenshot above is not the full-screen user profile, it's a user card!
Environment (please complete the following information):
When you attempt clicking to a topic link from the discussion list, nothing will happen (including shadows changes, color changes etc.)
Other links such as settings, profile are not working strangely. Although this needs confirmation, can someone else confirm this too?
Describe the bug
Author profile image shadow colors invert to white while on dark mode.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The shadow color should stay gray/black, but still be visible.
Environment (please complete the following information):
Additional context
This does need discussion as it may have changes in the future.
Admin panel doesn't load CSS, probably because of one of your PRs @NATHAN2023.
Describe the bug
Material icons currently active are not sized well as Font Awesome icons.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
All icons should be resized depending on their location and required size.
Environment (please complete the following information):
Below are the styles for radio buttons from mdl:
.mdl-radio {
position: relative;
font-size: 16px;
line-height: 24px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
height: 24px;
margin: 0;
padding-left: 0; }
.mdl-radio.is-upgraded {
padding-left: 24px; }
.mdl-radio__button {
line-height: 24px; }
.mdl-radio.is-upgraded .mdl-radio__button {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none; }
.mdl-radio__outer-circle {
position: absolute;
top: 4px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
border: 2px solid rgba(0,0,0, 0.54);
border-radius: 50%;
z-index: 2; }
.mdl-radio.is-checked .mdl-radio__outer-circle {
border: 2px solid rgb(63,81,181); }
.mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
.mdl-radio.is-disabled .mdl-radio__outer-circle {
border: 2px solid rgba(0,0,0, 0.26);
cursor: auto; }
.mdl-radio__inner-circle {
position: absolute;
z-index: 1;
margin: 0;
top: 8px;
left: 4px;
box-sizing: border-box;
width: 8px;
height: 8px;
cursor: pointer;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
border-radius: 50%;
background: rgb(63,81,181); }
.mdl-radio.is-checked .mdl-radio__inner-circle {
-webkit-transform: scale(1, 1);
transform: scale(1, 1); }
fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
.mdl-radio.is-disabled .mdl-radio__inner-circle {
background: rgba(0,0,0, 0.26);
cursor: auto; }
.mdl-radio.is-focused .mdl-radio__inner-circle {
box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1); }
.mdl-radio__label {
cursor: pointer; }
fieldset[disabled] .mdl-radio .mdl-radio__label,
.mdl-radio.is-disabled .mdl-radio__label {
color: rgba(0,0,0, 0.26);
cursor: auto; }
.mdl-radio__ripple-container {
position: absolute;
z-index: 2;
top: -9px;
left: -13px;
box-sizing: border-box;
width: 42px;
height: 42px;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
.mdl-radio__ripple-container .mdl-ripple {
background: rgb(63,81,181); }
fieldset[disabled] .mdl-radio .mdl-radio__ripple-container,
.mdl-radio.is-disabled .mdl-radio__ripple-container {
cursor: auto; }
fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,
.mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {
background: transparent; }
e2cbb3c caused an issue that on some screens, the shadow looking good on the main screen doesn't look good on colored areas such as user profiles or colored tag pages.
A solution is necessary for this without the removal of the shadow from the app bar as it's necessary according to Material guidelines.
Describe the bug
The temporary loader resulted in an issue at the notification settings table that it appears something square.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The standard temporary loader should appear. (Click on a switch below to see the standard temporary loader.)
Environment (please complete the following information):
On small screens like iPad, the search bar becomes a button as part of the core, can we make this a Material Button?
Reguar warning/info dialogs that appear at the bottom left should be replaced with snakbars/toasts.
MDL style and documentation below.
.mdl-snackbar {
position: fixed;
bottom: 0;
left: 50%;
cursor: default;
background-color: #323232;
z-index: 3;
display: block;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
will-change: transform;
-webkit-transform: translate(0, 80px);
transform: translate(0, 80px);
transition: -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
pointer-events: none; }
@media (max-width: 479px) {
.mdl-snackbar {
width: 100%;
left: 0;
min-height: 48px;
max-height: 80px; } }
@media (min-width: 480px) {
.mdl-snackbar {
min-width: 288px;
max-width: 568px;
border-radius: 2px;
-webkit-transform: translate(-50%, 80px);
transform: translate(-50%, 80px); } }
.mdl-snackbar--active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
pointer-events: auto;
transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1); }
@media (min-width: 480px) {
.mdl-snackbar--active {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0); } }
.mdl-snackbar__text {
padding: 14px 12px 14px 24px;
vertical-align: middle;
color: white;
float: left; }
.mdl-snackbar__action {
background: transparent;
border: none;
color: rgb(255,64,129);
float: right;
text-transform: uppercase;
padding: 14px 24px 14px 12px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0;
overflow: hidden;
outline: none;
opacity: 0;
pointer-events: none;
cursor: pointer;
text-decoration: none;
text-align: center;
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; }
.mdl-snackbar__action::-moz-focus-inner {
border: 0; }
.mdl-snackbar__action:not([aria-hidden]) {
opacity: 1;
pointer-events: auto; }
Documentation: https://getmdl.io/components/index.html#snackbar-section
Instead of just clicking and changing, a support for holding & then dragging slowly and releasing to change the value on switches.
If you need an example to this (desktop):
Current color (whitesmoke) is not visible as well.
When trying to use the icon unicode code, e8b6
, it doesn't display...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.