richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Begin examples

pull/2034/head
jlukic 9 years ago
parent
8da0ff7eb1
commit
d8c300de37
18 changed files with 119 additions and 11 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      dist/components/menu.css
  2. 2
      dist/components/menu.min.css
  3. 7
      dist/semantic.css
  4. 2
      dist/semantic.min.css
  5. 52
      examples/fixed-menu.html
  6. 0
      examples/old/feed.css
  7. 0
      examples/old/feed.html
  8. 0
      examples/old/feed.js
  9. 0
      examples/old/grid.css
  10. 0
      examples/old/grid.html
  11. 0
      examples/old/homepage.css
  12. 0
      examples/old/homepage.html
  13. 0
      examples/old/homepage.js
  14. 0
      examples/old/kitchensink.css
  15. 0
      examples/old/kitchensink.html
  16. 52
      examples/starter.html
  17. 3
      src/definitions/collections/menu.less
  18. 6
      src/themes/default/collections/menu.variables

6
dist/components/menu.css
View File

@ -1294,8 +1294,10 @@ Floated Menu / Item
/*--- Border ---*/
.ui.inverted.menu .item:before {
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: rgba(255, 255, 255, 0.08);
}
.ui.inverted.menu .item:hover:before {
background: none;
}
.ui.vertical.inverted.menu .item:before {
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);

2
dist/components/menu.min.css
File diff suppressed because it is too large
View File

7
dist/semantic.css
View File

@ -18332,8 +18332,11 @@ Floated Menu / Item
/*--- Border ---*/
.ui.inverted.menu .item:before {
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: linear-gradient(rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
background: rgba(255, 255, 255, 0.08);
}
.ui.inverted.menu .item:hover:before {
background: none;
}
.ui.vertical.inverted.menu .item:before {

2
dist/semantic.min.css
File diff suppressed because it is too large
View File

52
examples/fixed-menu.html
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Fixed Menu Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<style type="text/css">
body > .container {
padding-top: 7em;
}
.wireframe {
margin-top: 2em;
}
</style>
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="#" class="item">Project Name</a>
<a href="#" class="item">Home</a>
<a href="#" class="item">Features</a>
<a href="#" class="item">Contact</a>
</div>
</div>
<div class="ui center aligned container">
<h1 class="ui header">Semantic UI starter template</h1>
<p>Use this document as a way to quickly start any new project.</p>
<p>All you get is this text and a mostly barebones HTML document.</p>
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
</div>
</body>
</html>

examples/feed.css → examples/old/feed.css
View File

examples/feed.html → examples/old/feed.html
View File

examples/feed.js → examples/old/feed.js
View File

examples/grid.css → examples/old/grid.css
View File

examples/grid.html → examples/old/grid.html
View File

examples/homepage.css → examples/old/homepage.css
View File

examples/homepage.html → examples/old/homepage.html
View File

examples/homepage.js → examples/old/homepage.js
View File

examples/kitchensink.css → examples/old/kitchensink.css
View File

examples/kitchensink.html → examples/old/kitchensink.html
View File

52
examples/starter.html
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Starter Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<style type="text/css">
body > .container {
padding-top: 7em;
}
.wireframe {
margin-top: 2em;
}
</style>
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="#" class="item">Project Name</a>
<a href="#" class="item">Home</a>
<a href="#" class="item">Features</a>
<a href="#" class="item">Contact</a>
</div>
</div>
<div class="ui center aligned container">
<h1 class="ui header">Semantic UI starter template</h1>
<p>Use this document as a way to quickly start any new project.</p>
<p>All you get is this text and a mostly barebones HTML document.</p>
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
</div>
</body>
</html>

3
src/definitions/collections/menu.less
View File

@ -1275,6 +1275,9 @@ Floated Menu / Item
.ui.inverted.menu .item:before {
background: @invertedDividerBackground;
}
.ui.inverted.menu .item:hover:before {
background: none;
}
.ui.vertical.inverted.menu .item:before {
background: @invertedVerticalDividerBackground;
}

6
src/themes/default/collections/menu.variables
View File

@ -396,11 +396,7 @@
@secondaryInvertedHoverColor: @invertedSelectedTextColor;
/* Inverted Menu Divider */
@invertedDividerBackground: linear-gradient(
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.06) 100%)
;
@invertedDividerBackground: rgba(255, 255, 255, 0.08);
@invertedVerticalDividerBackground: linear-gradient(to right,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.1) 50%,

Write Preview
Loading…
Cancel
Save