Curo Material Interface

Material design ui extracted from Curo CMS

Most of the ui elements are to Google`s Material Design concept.

Loading indicator

Javascript

Loading default

var loading = new CMI.LoadingIndicator();
$('#loading-indicator-2').append(loading.domElement());
loading.fadeIn();
// loading.fadeOut()
// loading.remove()

No background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id [redacted]tilius factum negabat. Itaque mihi non satis videmini considerare quod iter sit naturae quaeque progressio. Sedulo, inquam, faciam. Quamquam te quidem video minime esse deterritum. Quo igitur, inquit, modo? Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Duo Reges: constructio interrete. Equidem etiam Epicurum, in physicis quidem, Democriteum puto. An haec ab eo non dicuntur?

var loading = new CMI.LoadingIndicator();
$('#loading-indicator-3').append(loading.domElement());
loading.fadeIn();

Background light

var loading = new CMI.LoadingIndicator({ background: 'light' });
$('#loading-indicator-4').append(loading.domElement());
loading.fadeIn();

Background dark

var loading = new CMI.LoadingIndicator({ background: 'dark' });
$('#loading-indicator-5').append(loading.domElement());
loading.fadeIn();

Background custom

.cmi-loading-indicator.my-custom-background {
  background-color: rgba(#600, 0.8);
}
.cmi-loading-indicator.my-custom-background .path {
  stroke: #009
}

var loading = new CMI.LoadingIndicator({ background: 'my-custom-background' });
$('#loading-indicator-6').append(loading.domElement());
loading.fadeIn();

Ripples

Default (.cmi-ripples)

Button Button Button Button

$('#ripples-1').on('mousedown', 'a', function(event) {
  CMI.Ripples.animateClick($(this), event);
});

.cmi-ripples.cmi-ripples-dark

Button Button Button Button

$('#ripples-2').on('mouseup', 'a', function(event) {
  CMI.Ripples.animateClick($(this), event);
});

.cmi-ripples.cmi-ripples-primary

Button Button Button Button

$('#ripples-3').on('click', 'a', function(event) {
  CMI.Ripples.animateClick($(this), event);
});

Tabs

.cmi-tabs and .cmi-tabs-tab

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Si mala non sunt, iacet omnis ratio Peripateticorum. Hic ambiguo ludimur.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Si mala non sunt, iacet omnis ratio Peripateticorum. Hic ambiguo ludimur.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Si mala non sunt, iacet omnis ratio Peripateticorum. Hic ambiguo ludimur.

$('#tabs-1 li.cmi-tabs-active a').each(function() {
  CMI.Tabs.activate($(this));
});
$('#tabs-1').on('click', 'a', function(event) {
  event.preventDefault();
  CMI.Tabs.activate($(this));
});

Text inputs

Default

My field

Hints

My field

Some little notice as hint text.

My field

Some little notice as hint text.

My field

Some little notice as hint text.

Second text line.

My field

Some little notice as hint text.

$('#text-fields-1 input').each(function() {
  CMI.FormComponents.TextField.reset($(this));
});
$('#text-fields-1').on('change', 'input', function(){
  CMI.FormComponents.TextField.animateChange($(this))
});
$('#text-fields-1').on('focus', 'input', function(){
  CMI.FormComponents.TextField.animateFocus($(this))
});
$('#text-fields-1').on('blur', 'input', function(){
  CMI.FormComponents.TextField.animateBlur($(this))
});
$('#text-fields-1').on('reset', 'form', function(){
  CMI.FormComponents.TextField.formReset($(this))
});

Textareas

Default

My field

Hints

My field

Some little notice as hint text.

My field

Some little notice as hint text.

My field

Some little notice as hint text.

Second hint text.

My field

Some little notice as hint text.

$('#text-fields-2 textarea').each(function() {
  CMI.FormComponents.TextField.reset($(this));
});
$('#text-fields-2').on('change', 'textarea', function(){
  CMI.FormComponents.TextField.animateChange($(this))
});
$('#text-fields-2').on('focus', 'textarea', function(){
  CMI.FormComponents.TextField.animateFocus($(this))
});
$('#text-fields-2').on('blur', 'textarea', function(){
  CMI.FormComponents.TextField.animateBlur($(this))
});
$('#text-fields-2').on('reset', 'form', function(){
  CMI.FormComponents.TextField.formReset($(this))
});

Growing textareas

My field

$('#text-fields-2 textarea').each(function() {
  CMI.FormComponents.TextField.reset($(this));
});
$('#text-fields-2').on('change', 'textarea', function(){
  CMI.FormComponents.TextField.animateChange($(this))
});
$('#text-fields-2').on('focus', 'textarea', function(){
  CMI.FormComponents.TextField.animateFocus($(this))
});
$('#text-fields-2').on('blur', 'textarea', function(){
  CMI.FormComponents.TextField.animateBlur($(this))
});
$('#text-fields-2').on('reset', 'form', function(){
  CMI.FormComponents.TextField.formReset($(this))
});

$('#text-fields-3').on('keyup', 'textarea', function(){
  CMI.FormComponents.Textarea.animateHeight($('body'), $(this))
});
$('#text-fields-3').on('keydown', 'textarea', function(){
  CMI.FormComponents.Textarea.animateHeight($('body'), $(this))
});
$('#text-fields-3 textarea').each(function(){
  CMI.FormComponents.Textarea.animateHeight($('body'), $(this))
});

Checkboxes

Normal

My checkbox text

Hints

My checkbox text

Some little notice as hint text.

My checkbox text

Some little notice as hint text.

My checkbox text

Some little notice as hint text.

Second notice text.

My checkbox text

Some little notice as hint text.

$('#checkboxes-1').on('click', 'label', function() {
  CMI.FormComponents.Checkbox.click($(this));
});
$('#checkboxes-1 label').each(function() {
  CMI.FormComponents.Checkbox.reset($(this));
});

Selects

Default

My select field

No blank value

My select field

Selected

My select field

Hints

My select field

Some little notice as hint text.

My select field

Some little notice as hint text.

My select field

Some little notice as hint text.

Second notice text.

My select field

Some little notice as hint text.

$('#selects-1 .cmi-select-input').each(function() {
  CMI.FormComponents.Select.reset($(this));
});