MaxMilton/ekscss

/**
* XCSS Addon: Styled Native Elements
*
* Style native elements by default. We keep opinionated styles like this out of
* levels 1 and 2 to give developers more freedom in how things look and to
* reduce unexpected results. But, for times when you want everything to look
* great without needing to explicitly set CSS classes this package is for you.
*/

${null}

/* Typography */
table {
  #apply: .table;

  & > thead { #apply: .table>thead; }
  & > tbody { #apply: .table>tbody; }

  th,
  td { #apply: .table td; }
  th { #apply: .table th; }
}
blockquote { #apply: .blockquote; }
code { #apply: .code; }

/* Forms */

label { #apply: .label; }
input { #apply: .input; }
select { #apply: .select; }
textarea { #apply: .textarea; }

input,
select,
textarea {
  &:hover { #apply: '.input:hover'; }

  &:focus,
  &:active { #apply: '.input:focus'; }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &:disabled { #apply: .input[disabled]; }
}

input[type='checkbox'] {
  #apply: .checkbox;

  &:checked { #apply: '.checkbox:checked'; }
  &:hover { #apply: '.checkbox:hover'; }

  &:focus,
  &:active { #apply: '.checkbox:focus'; }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &:disabled { #apply: .checkbox[disabled]; }
  & + label { #apply: '.checkbox+.label'; }
}
// TODO: Add .radio styles
// input[type='radio'] {}
// TODO: Add .file input styles
// input[type='file'] {}
// TODO: Add .range input styles
// input[type='range'] {}

/* Buttons */

button {
  #apply: .button;

  &:hover { #apply: '.button:hover'; }

  &:focus,
  &:active { #apply: '.button:focus'; }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &:disabled { #apply: .button[disabled]; }
}