Skip to content

Instantly share code, notes, and snippets.

@shankcode

shankcode/Style.scss

Last active September 1, 2020 12:18
Show Gist options
  • Save shankcode/c1120b67db7025fe8eeb4aa49a8adcab to your computer and use it in GitHub Desktop.
Save shankcode/c1120b67db7025fe8eeb4aa49a8adcab to your computer and use it in GitHub Desktop.
Download ZIP
Custom Checkbox, Radio, Floating input, rounded and circular buttons, text buttons
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Components</title>
</head>
<body>
<!-- Green Rounded Button -->
<button class="primary-accent-rounded-button">Add New</button>
<!-- Grey Rounded Button -->
<button class="primary-grey-rounded-button">Add New</button>
<!-- Green Circular Button -->
<button class="primary-accent-circle-button"><i class="fa fa-paper-plane"></i></button>
<!-- Grey Circular Button -->
<button class="primary-grey-circle-button"><i class="fa fa-paper-plane"></i></button>
<br>
<!-- Green Selected Radio -->
<div class="radio">
<input id="radio-1" name="radio" type="radio" checked>
<label for="radio-1" class="radio-label"></label>
</div>
<!-- Unselected Radio -->
<div class="radio">
<input id="radio-2" name="radio" type="radio">
<label for="radio-2" class="radio-label"></label>
</div>
<!-- Disabled Radio -->
<div class="radio">
<input id="radio-2" name="radio" type="radio" disabled>
<label for="radio-2" class="radio-label"></label>
</div>
<!-- Floating Input Field -->
<div class="user-input-wrp">
<input type="number" class="inputText" max='0' min='100' placeholder=" " value="" required />
<span class="floating-label">Number</span>
</div>
<br />
<div class="user-input-wrp">
<input type="text" class="inputText" placeholder=" " required />
<span class="floating-label">Text</span>
</div>
<br />
<div class="user-input-wrp">
<input type="password" class="inputText" placeholder=" " required />
<span class="floating-label">Password</span>
</div>
<br />
<div class="user-input-wrp">
<input type="date" class="inputText" required />
</div>
<br />
<div class="user-input-wrp">
<input type="time" class="inputText" required />
</div>
<br />
<div class="user-input-wrp">
<input type="datetime-local" class="inputText" required />
</div>
<!-- <div class="floating">
<input id="input__username" class="floating__input" name="username" type="number" min='0' max='100'
placeholder="Username" />
<label for="input__username" class="floating__label" data-content="Number"></label>
</div> -->
<br>
<!-- Dropdown button -->
<div class="btn-group">
<button type="button" class="btn custom-dropdown-btn dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"> Action</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Duplicate</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Duplicate</a>
</div>
</div>
<!-- Green Checkbox -->
<div>
<input class="styled-checkbox" id="id1" type="checkbox" onclick="">
<label for="id1"></label>
</div>
</body>
</html>
Raw
Style.scss
.primary-accent-rounded-button{
@include roundedBtn($accentPrimary, $white);
}
.primary-grey-rounded-button{
@include roundedBtn($greyLight, $greyDarkest);
}
.primary-accent-circle-button{
@include circularBtn($accentPrimary, $white);
}
.primary-grey-circle-button{
@include circularBtn($greyLight, $greyDarkest);
}
.accent-primary-text-button{
border-radius: 0.39rem 0.39rem;
letter-spacing: -12;
font-size: .8rem;
font-weight: 300;
color: $accentPrimary;
background-color: transparent;
border: none;
cursor: pointer;
&:focus{
outline: none;
}
}
.radio {
margin: 0.5rem;
input[type="radio"] {
position: absolute;
opacity: 0;
+ .radio-label {
&:before {
content: '';
// background: $greyDark;
border-radius: 100%;
border: 1px solid $greyDark;
display: inline-block;
width: 1rem;
height: 1rem;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
}
&:checked {
+ .radio-label {
&:before {
background-color: $accentPrimary;
}
}
}
&:focus {
+ .radio-label {
&:before {
outline: none;
border-color: $accentPrimary;
}
}
}
&:disabled {
+ .radio-label {
&:before {
box-shadow: inset 0 0 0 4px lighten($greyDark, 15%);
border-color: darken($greyDark, 25%);
background: darken($greyDark, 25%);
}
}
}
+ .radio-label {
&:empty {
&:before {
margin-right: 0;
}
}
}
}
}
.btn-group{
.btn{
border: 1px solid #acacac;
color: #acacac;
background-color: #fff;
padding: .187rem 1rem;
font-weight: 300;
&:not(:disabled):not(.disabled):active{
color: #acacac;
border-color: #acacac;
}
&:focus{
box-shadow: none;
}
&:hover{
color: #acacac;
}
}
.dropdown-menu {
min-width: 6rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: $greyDark;
background-color: $white;
border: 1px solid $greyDark;
.dropdown-item{
padding: .2rem .7rem;
color: $greyDark;
font-weight: 300;
font-size: .95rem;
cursor: pointer;
&:active {
color: #fff;
text-decoration: none;
background-color: darken($greyDark, .2%);
}
}
}
}
// Style-1 (Input)
.user-input-wrp {
position: relative;
width: 100%;
.inputText{
width: 100%;
outline: none;
font-size: .85rem;
border:none;
border: 1px solid $greyDark;
color: $greyDarkest;
box-shadow: none !important;
border-radius: 7px;
padding: .9rem .7rem .3rem .7rem;
&:focus{
background-color: #3CD17F0F;
}
&::-webkit-inner-spin-button{
display: none;
}
}
.inputText:placeholder-shown{
padding: .6rem .7rem .6rem .7rem;
}
.inputText[type='date'],
.inputText[type='time'],
.inputText[type='datetime-local']{
padding: .55rem .7rem .55rem .7rem;
}
.floating-label {
position: absolute;
pointer-events: none;
top: 7px;
left: 10px;
transition: 0.2s ease all;
color: $greyDark;
font-size: .95rem;
}
}
// .user-input-wrp input:focus ~ .floating-label,
// .user-input-wrp input:not(:focus):valid ~ .floating-label,
// .user-input-wrp input:not(:focus)[type='number'][value] ~ .floating-label{
// top: 0px;
// left: 10px;
// margin-bottom: .5rem;
// font-size: .75rem;
// opacity: 1;
// }
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:placeholder-shown) ~ .floating-label {
top: 0px;
left: 12px;
margin-bottom: .5rem;
font-size: .75rem;
opacity: 1;
}
//Checkbox
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
display: none;
& + label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
& + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: white;
border: 1px solid $greyDark;
border-radius: 3px;
}
// Box hover
&:hover + label:before {
background: $accentPrimary;
}
// Box focus
&:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
// Box checked
&:checked + label:before {
background: $accentPrimary;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow:
2px 0 0 white,
4px 0 0 white,
4px -2px 0 white,
4px -4px 0 white,
4px -6px 0 white,
4px -8px 0 white;
transform: rotate(45deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment