Skip to content
This repository was archived by the owner on Dec 3, 2019. It is now read-only.

modified css file into sass #25

Open
brook-code wants to merge 2 commits into
base: master
Choose a base branch
from
Open

modified css file into sass #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f72918b
modified css file into sass
brook-code Apr 18, 2018
c64aa7c
form and select added
brook-code Apr 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 64 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<title>CSS skin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="skin.css">
<link type="text/css" rel="stylesheet" href="skin.min.css">
</head>
<body>
<div>
Expand All @@ -12,14 +12,40 @@ <h2 id="intro_heading">CSS Components</h2>
<section id="button">
<h2 id="button_heading">Button</h2>
<p>A button is most typically used to trigger a custom JavaScript action (e.g. fetch new results, open a dialog or expand a menu).</p>
<p>A button may also be used, without JavaScript, to submit or reset a form.</p>
<p>A button may<html lang="en_US">
<head>
<title>Bikes for Refugees | Scotland</title>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//maxcdn.bootstrapcdn.com">
<link rel="dns-prefetch" href="//code.jquery.com">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body> als<html lang="en_US">
<head>
<title>Bikes for Refugees | Scotland</title>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//maxcdn.bootstrapcdn.com">
<link rel="dns-prefetch" href="//code.jquery.com">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>o be used, without JavaScript, to submit or reset a form.</p>

<h3>Default Button</h3>
<p>Use the <span class="highlight">btn</span> class on a button element to create the default button.</p>
<p>On hover, the text in the button should <strong>not</strong> be underlined.</p>
<div class="demo">
<p>It currently looks like this: </p>
<button class="btn">Button</button>
<button class="btn--default">Button</button>
</div>
<div class="expected">
<p>It should eventually look like this: </p>
Expand Down Expand Up @@ -66,15 +92,48 @@ <h3>Extra-Large Button</h3>
<p>Use the <span class="highlight">btn--extra-large</span> size modifier to create an extra large button.</p>
<p>This means that you will use both <span class="highlight">btn</span> and <span class="highlight">btn--extra-large</span> classes.</p>
<div class="demo">
<p>It currently looks like this: </p>
<<ul>
<li class="btn--info"><a href="#">Info</a></li>
<li class="btn--more"><a href="#">more</a></li>
<p>It currently looks like this: </p>
<button class="btn btn--extra-large">Button</button>
</div>
<div class="expected">
<p>It should eventually look like this: </p>
<img src="./img/extra-large-button.png" />
</div>
<div>
<form>
Firstname:<input type="text" name="fname">
<button type="submit" class="btn--full-width">submit</button>
</form>


<select name="menulist" form="menulist">

<!-- <li class="btn--menu-home">
<a href="#">home</a>
<ul class="btn--list">-->
<option>
<li class="btn--menu-contact">
</li>
<a href="#">contact</a>
</option>
<option><li class="btn--menu-about">
<a href="#">About Us
</a>
</li>
</option>
</select>
<br>
<br>
<br>


</div>

</section>
</div>
</body>

</body>
</html>
168 changes: 155 additions & 13 deletions skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,155 @@
.highlight {
background-color: #ddd;
}

button.btn {
border-radius: 3px;
border-style: solid;
border-width: 1px;
font-weight: normal;
line-height: 1.15;
text-align: center;
vertical-align: middle;
}
.highlight {
background-color: #565656;
}

button.btn--default {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--primary {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #0025F5;
color: #fff;
border-radius: 3px;
font-size: 20px;
}

button.btn--secondary {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--large {
padding: 16px 100px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--extra-large {
padding: 22px 150px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

.highlight {
background-color: #565656;
}

button.btn--default {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

.highlight {
background-color: #565656;
}

button.btn--default {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--primary {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #0025F5;
color: #fff;
border-radius: 3px;
font-size: 20px;
}

button.btn--secondary {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--large {
padding: 16px 100px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--extra-large {
padding: 22px 150px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--primary {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #0025F5;
color: #fff;
border-radius: 3px;
font-size: 20px;
}

button.btn--secondary {
padding: 16px 62px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--large {
padding: 16px 100px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--extra-large {
padding: 22px 150px;
border: 1px solid #cbcbcb;
background: #fff;
color: #0025F5;
border-radius: 3px;
font-size: 20px;
}

button.btn--full-width {
padding: 6px 100px;
border: 1px solid #cbcbcb;
background: #0025F5;
color: #fff;
border-radius: 3px;
font-size: 20px;
}
1 change: 1 addition & 0 deletions skin.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

115 changes: 115 additions & 0 deletions skin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
.highlight {
background-color: #565656;
}


$bright-blue: #0025F5;
$white: #fff;
$grey: #cbcbcb;

@mixin btn($color, $background-color,$padding) {
padding: $padding;
border: 1px solid $grey ;
background:$background-color;
color:$color;
border-radius: 3px;
font-size: 20px;

}


button.btn--default {
@include btn($bright-blue,$white,16px 62px) ;
}

button.btn--primary {
@include btn($white,$bright-blue,16px 62px);
}
button.btn--secondary {
@include btn($bright-blue,$white,16px 62px);
}
button.btn--large {
@include btn($bright-blue,$white,16px 100px);
}
button.btn--extra-large {
@include btn($bright-blue,$white,22px 150px);
}

.highlight {
background-color: #565656;
}


$bright-blue: #0025F5;
$white: #fff;
$grey: #cbcbcb;

@mixin btn($color, $background-color,$padding) {
padding: $padding;
border: 1px solid $grey ;
background:$background-color;
color:$color;
border-radius: 3px;
font-size: 20px;

}


button.btn--default {
@include btn($bright-blue,$white,16px 62px) ;
}.highlight {
background-color: #565656;
}


$bright-blue: #0025F5;
$white: #fff;
$grey: #cbcbcb;

@mixin btn($color, $background-color,$padding) {
padding: $padding;
border: 1px solid $grey ;
background:$background-color;
color:$color;
border-radius: 3px;
font-size: 20px;

}


button.btn--default {
@include btn($bright-blue,$white,16px 62px) ;
}

button.btn--primary {
@include btn($white,$bright-blue,16px 62px);
}
button.btn--secondary {
@include btn($bright-blue,$white,16px 62px);
}
button.btn--large {
@include btn($bright-blue,$white,16px 100px);
}
button.btn--extra-large {
@include btn($bright-blue,$white,22px 150px);
}



button.btn--primary {
@include btn($white,$bright-blue,16px 62px);
}
button.btn--secondary {
@include btn($bright-blue,$white,16px 62px);
}
button.btn--large {
@include btn($bright-blue,$white,16px 100px);
}
button.btn--extra-large {
@include btn($bright-blue,$white,22px 150px);
}
button.btn--full-width {
@include btn($white,$bright-blue,6px 100px);
}