oficiodesign / initial-css

MIT License
4 stars 1 forks source link

`[data-size]` #107

Open robsonsobral opened 3 years ago

robsonsobral commented 3 years ago

@evyperez and @Eduruiz , maybe you'll find this useful.

What do you think?

robsonsobral commented 2 years ago

Ops! The missing sample:

/* paragraphs inside forms
---------------------------------------------------------------------------- */
fieldset,
form p {
  position: relative;

  flex-basis: 100%;
  flex-grow: 1;

  max-width: none;

  margin-bottom: $gutter;

  &:last-child {
    margin-bottom: 0;
  }

  &[data-size] {
    display: flex;

    align-content: flex-start;
    flex-wrap: wrap;

    min-width: $max-width * 0.2; /* 256px */
  }

  &[data-size='20'] {
    flex-basis: calc(20% - #{$gutter});

    min-width: $max-width * 0.125; /* 160px */
  }

  &[data-size='25'] {
    flex-basis: calc(25% - #{$gutter});

    min-width: $max-width * 0.15; /* 192px */
  }

  &[data-size='33'] {
    flex-basis: calc(33% - #{$gutter});

    min-width: $max-width * 0.175; /* 224px */
  }

  &[data-size='40'] {
    flex-basis: calc(40% - #{$gutter});
  }

  &[data-size='50'] {
    flex-basis: calc(50% - #{$gutter});
  }

  &[data-size='60'] {
    flex-basis: calc(60% - #{$gutter});
  }

  &[data-size='75'] {
    flex-basis: calc(75% - #{$gutter});
  }

  &[data-size='80'] {
    flex-basis: calc(80% - #{$gutter});
  }
}

However, I guess we should change it to helper classes, right?