Skip to content

Instantly share code, notes, and snippets.

@nbkoteshpi

nbkoteshpi/_form.scss

Created January 20, 2017 15:14
Show Gist options
  • Save nbkoteshpi/c8a1d12713418d39a4d398540cad165c to your computer and use it in GitHub Desktop.
Save nbkoteshpi/c8a1d12713418d39a4d398540cad165c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_form.scss
h3{
a:link { color: #ed6b15; }
}
h3{
a:visited { color:#dd16d0; }
}
h3{a:hover { color: green; }
}
h3{
a:active { color: #0dc499; }
}
@mixin linx ($link, $visit, $hover, $active) {
h3{
a {
color: $link;
&:visited {
color: $visit;
}
&:hover {
color: $hover;
}
&:active {
color: $active;
}
}
}
}
h3{
a{@include linx(white, blue, green, red);}
}
h3{
a {
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
color:#f28d13;
}
}
}
.background{background-color:#e5cff7;}
.container{
.jumbotron{
@extend .background;
}
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Introduction to Sass</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="sample.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> User</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container buttons-inline">
<button type="button" class="btn btn-default">Home</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-default">Submit</button>
<button type="button" class="btn btn-success">Find</button>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Danger</button>
</div>
<article>
<h1>Hello World</h1>
<div class="input-box">
<input type="textbox" name="input" placeholder="Type the text here.." class="form-control input-box">
</div>
<p class="sample-paragraph-1">Cat ipsum dolor sit amet, stand in front of the computer screen, so chase imaginary bugs has closed eyes but still sees you caticus cuteicus.</p>
<p class="sample-paragraph-2"><a href="#">Drink water out of the faucet chew on cable or if it fits, i sits roll on the floor purring your whiskers off.</a></p>
</article>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Gallery</a></li>
<li><a data-toggle="tab" href="#Table">Tables </a></li>
<li><a data-toggle="tab" href="#Forms">Forms</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<div class="jumbotron">
<h1>SASS Example</h1>
<p>Sometimes you’ll write styles for a class that you only ever want to @extend, and never want to use directly in your HTML. This is especially true when writing a Sass library, where you may provide styles for users to @extend if they need and ignore if they don’t.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Gallery</h3>
<div class="row">
<div class="col-xs-12 col-md-3 ">
<div class="thumbnail">
<a href="">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Beautiful birds</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="thumbnail">
<a href="">
<img src="https://s-media-cache-ak0.pinimg.com/originals/85/41/4f/85414f220b38d473eda19b7292567661.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Beautiful birds</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="thumbnail">
<a href="">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Single bird.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="thumbnail">
<a href="">
<img src="http://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Nature</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="Table" class="tab-pane fade">
<h3>Table</h3>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
<div id="Forms" class="tab-pane fade">
<h3>Form</h3>
<form class="inline-block">
<div class="form-group">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label for="inputPassword">Disabled</label>
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
</div>
</div>
</div>
<div class="division-1">
<button class="button">Button width 100px</button>
<button type="button" class="btn btn-custom">Danger</button>
</div>
<div class="container">
<div class="row sample-paragraphs">
<h3><a href="#">This is a LINK</a></h3>
<div class="col-xs-12 col-lg-4">
<div class="paragraph-1">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse proident</p>
<span>this is a span</span>
<a href="">this is a link</a>
<div class="inner-div">
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess proidentan</p>
<a href="#">Hai, this is a link for you </a>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="paragraph-2">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse proident</p>
<span>this is a span</span>
<a href="">this is a link</a>
<div class="inner-div">
<p class="sassExample">Duis aute irure dolor in reprehenderit in voluptate velit ess proidentan</p>
<a href="#">Hai, this is a link for you </a>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-4">
<div class="paragraph-3">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse proident</p>
<span>this is a span</span>
<a href="">this is a link</a>
<div class="inner-div">
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess proidentan</p>
<a href="#">Hai, this is a link for you </a>
</div>
<button class="button-extend">Button </button>
</div>
</div>
</div>
<div class="row well text-center">
<a class="text-center">Copyright@ 2017 all rights reserved</a>
</div>
</div>
</body>
</html>
Raw
sample.scss
@import 'form';
body {
padding: 30px;
$width: 550px !global;
$container-width: 100%;
navbar-default{
navbar-default{
container-fluid{
background-color:red;
}
}
}
.input-box{
.form-control{
background-color:#93dcea;
}
}
.navbar-default{
background-color:#2facc3;
border-color:#2facc3;
font-weight:bold;
color:#080808;
}
$color:white;
.thumbnail{
background-color:#bed4f4;
&:hover{
color:$color;
}
}
//nested
article {
h2 {
font-family: Arial;
color: blue;
}
.sample-paragraph-1 {
color: #2a51bf;
cursor: pointer;
font-size: 30px;
}
.sample-paragraph-2 {
color: #55db91;
$name: "sassExample";
.inner-div.#{$name}{
color:white;
}
font: {
family: fantasy;
size: 30px;
weight: bold;
};
&:hover {
@extend .sample-paragraph-1;
}
}
//variables
p {
background-color: white;
color: #010203 + #040506;
}
}
//container
.buttons-inline {
.btn-default {
background-color: #ea8920;
color: white;
border: 0px;
border-radius: 3px;
padding-left: 20px;
padding-right: 20px;
}
}
.sample-paragraphs{
background-color:#bed4f4;
border-radius:8px;
padding:10px;
.col-lg-4{ //mixin
@mixin firefox-message($header) {
.firefox #{$header}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
$color:#98119b;
@mixin para{
line-height:20px;
letter-space:2;
color:red;
font:{
weight:bold;
size:17px;
family:sarif;
style: italic;
}
}
.paragraph-1{
color:$color;
@mixin my-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
&:hover{
@content;
}
}
p{ @include my-border(#efe570, 5px);
background-color:#e73fea;
color:#1258d1;
}
}
.paragraph-2{
color:#12325a;
@include para;
*{
color:#108e39;
&:hover{color:#10397f;
}
@include para;
color:#cf38e0;
font-family:normal;
}
&:hover{background-color:#97b4e5;
border-radius:5px;
padding:10px;}
}
.paragraph-3{
span,p{
color:#108e39;
&:hover{color:#efe637;}
@include para;
color:green;
}
&:hover{background-color:#97b4e5;
border-radius:5px;
padding:10px;}
.button-extend{
@extend .button;
}
}
}
}
.division-1 {
$width: 150px;
margin: 20px;
.button {
width: $width;
&:hover {
background-color: #59bde5;
color: white;
border-color: #30b2c9;
}
}
}
.well{
background-color:#e0c7ec;
margin-top:10px;
font-weight:bold;
color:black;
cursor:pointer;
&:hover{
color:#2b033e;
}
}
.container-fluid{
.jumbotron{
background-color:#2FACC3;
}
}
}/*body closed*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment