CodyFrame - Fixed-Size Buttons/Inputs

codyframe-fixed-size-buttons-inputs.markdown

CodyFrame - Fixed-Size Buttons/Inputs

A Pen by Matt Daniel Brown on CodePen.

License.

index.html

 <div class="padding-lg">
  <div class="margin-bottom-lg">
   <h4 class="margin-bottom-sm">Buttons with fixed height</h4>
   <ul class="flex flex-wrap gap-xxs">
    <li>
     <button class="btn btn--subtle btn--icon height-40 width-40">
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Add to favorites</title><g><path d="M14.682,2.318c-1.757-1.757-4.607-1.757-6.364,0C8.197,2.439,8.104,2.577,8,2.707 C7.896,2.577,7.803,2.439,7.682,2.318c-1.757-1.757-4.607-1.757-6.364,0c-1.757,1.757-1.757,4.607,0,6.364L8,15l6.682-6.318 C16.439,6.925,16.439,4.075,14.682,2.318z"></path></g></svg>
     </button>
    </li>
    
    <li>
     <button class="btn btn--primary height-40">
      <svg class="icon margin-right-xxxs" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm2.629,11.618L8,10.236,5.371,11.618l.5-2.927L3.747,6.618l2.939-.427L8,3.528,9.314,6.191l2.939.427L10.127,8.691Z"></path></svg>
      <span>Button</span>
     </button>
    </li>
   </ul>
  </div>
  
  <div>
   <h4 class="margin-bottom-sm">Input with fixed height and width</h4>
   <div class="flex flex-column items-start">
    <label class="form-label margin-bottom-xxs" for="input-name">Name:</label>
    <input class="form-control height-40 width-180" type="text" name="input-name" id="input-name" required>
   </div>
  </div>
 </div>

style.scss

// --------------------------------

// Fixed-Sized Buttons/Inputs | 🐞CodyFrame https://codyhouse.co/ds/get-started
// 👇 example - not included in the framework - of how you can create buttons/inputs with fixed height/width

// --------------------------------

.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.height-30 { --height: 30px; }
.height-40 { --height: 40px; }
.height-50 { --height: 50px; }

// 👇 example: custom width utility classes
.width-40, .width-180 {
  width: var(--width);

  &.btn {
    padding-left: 0;
    padding-right: 0;
  }
}

.width-40  { --width: 40px; }
.width-180 { --width: 180px; }

styles

<link href="https://assets.codepen.io/148866/codyframe-2-7-6-all-but-buttons.css" rel="stylesheet" />
<link href="https://codepen.io/codyhouse/pen/oNxLjqp" rel="stylesheet" />
<link href="https://codepen.io/codyhouse/pen/ZdzWPm" rel="stylesheet" />
<link href="https://codepen.io/codyhouse/pen/YoKMrv" rel="stylesheet" />