PHP Classes

File: resources/sass/field.scss

Recommend this page to a friend!
  Classes of Naif Alshaye   Laravel Nova Toggle Switch   resources/sass/field.scss   Download  
File: resources/sass/field.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova Toggle Switch
Provides a toggle control to use in Laravel Nova
Author: By
Last change:
Date: 5 years ago
Size: 4,034 bytes
 

Contents

Class file image Download
// Nova Tool CSS .dot_off { height: 20px; width: 20px; background-color: #bbb; border-radius: 50%; display: inline-block; } .dot_on { height: 20px; width: 20px; background-color: #58AC04; border-radius: 50%; display: inline-block; } input.green { position: relative; appearance: none; outline: none; width: 50px; height: 30px; background-color: #ffffff; border: 1px solid #D9DADC; border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff; transition-duration: 200ms; } input.green:after { content: ""; position: absolute; top: 1px; left: 1px; width: 26px; height: 26px; background-color: transparent; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2); } input.green:checked { border-color: #4ED164; box-shadow: inset 20px 0 0 0 #4ED164; } input.green:checked:after { left: 20px; box-shadow: -2px 4px 3px rgba(0,0,0,0.05); } input.blue { position: relative; appearance: none; outline: none; width: 50px; height: 30px; background-color: #ffffff; border: 1px solid #D9DADC; border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff; transition-duration: 200ms; } input.blue:after { content: ""; position: absolute; top: 1px; left: 1px; width: 26px; height: 26px; background-color: transparent; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2); } input.blue:checked { border-color: #2C9FFF; box-shadow: inset 20px 0 0 0 #2C9FFF; } input.blue:checked:after { left: 20px; box-shadow: -2px 4px 3px rgba(0,0,0,0.05); } input.orange { position: relative; appearance: none; outline: none; width: 50px; height: 30px; background-color: #ffffff; border: 1px solid #D9DADC; border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff; transition-duration: 200ms; } input.orange:after { content: ""; position: absolute; top: 1px; left: 1px; width: 26px; height: 26px; background-color: transparent; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2); } input.orange:checked { border-color: #FF5B2E; box-shadow: inset 20px 0 0 0 #FF5B2E; } input.orange:checked:after { left: 20px; box-shadow: -2px 4px 3px rgba(0,0,0,0.05); } input.cyan { position: relative; appearance: none; outline: none; width: 50px; height: 30px; background-color: #ffffff; border: 1px solid #D9DADC; border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff; transition-duration: 200ms; } input.cyan:after { content: ""; position: absolute; top: 1px; left: 1px; width: 26px; height: 26px; background-color: transparent; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2); } input.cyan:checked { border-color: #52b7d7; box-shadow: inset 20px 0 0 0 #52b7d7; } input.cyan:checked:after { left: 20px; box-shadow: -2px 4px 3px rgba(0,0,0,0.05); } input.red { position: relative; appearance: none; outline: none; width: 50px; height: 30px; background-color: #ffffff; border: 1px solid #D9DADC; border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff; transition-duration: 200ms; } input.red:after { content: ""; position: absolute; top: 1px; left: 1px; width: 26px; height: 26px; background-color: transparent; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2); } input.red:checked { border-color: #CE4646; box-shadow: inset 20px 0 0 0 #CE4646; } input.red:checked:after { left: 20px; box-shadow: -2px 4px 3px rgba(0,0,0,0.05); } input.custom-color { position: relative; appearance: none; outline: none; width: 50px; height: 30px; background-color: #ffffff; border: 1px solid #D9DADC; border-radius: 50px; box-shadow: inset -20px 0 0 0 #fff; transition-duration: 200ms; } input.custom-color:after { content: ""; position: absolute; top: 1px; left: 1px; width: 26px; height: 26px; background-color: transparent; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2); } input.custom-color:checked { box-shadow: inset 20px 0 0 0; } input.custom-color:checked:after { left: 20px; box-shadow: -2px 4px 3px rgba(0,0,0,0.05); }