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

fixes to responsive layouts 

Former-commit-id: 57944fd329
Former-commit-id: 316e9effe3
pull/258/head
Jack Lukic 12 years ago
parent
29420f42c8
commit
d4adba8e7d
11 changed files with 86 additions and 30 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/collections/grid.min.css
  2. 2
      build/minified/elements/header.min.css
  3. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  4. 15
      build/uncompressed/collections/grid.css
  5. 10
      build/uncompressed/elements/header.css
  6. 15
      node/src/files/components/semantic/collections/grid.css
  7. 10
      node/src/files/components/semantic/elements/header.css
  8. 33
      node/src/files/stylesheets/semantic.css
  9. 2
      node/src/layouts/default.html.eco
  10. 15
      src/collections/grid.less
  11. 10
      src/elements/header.less

2
build/minified/collections/grid.min.css
File diff suppressed because it is too large
View File

2
build/minified/elements/header.min.css
View File

@ -1 +1 @@
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{border-bottom:.2em solid #6ECFF5}.ui.black.block.header{border-bottom:.2em solid #5C6166}.ui.green.block.header{border-bottom:.2em solid #A1CF64}.ui.red.block.header{border-bottom:.2em solid #EF4D6D}.ui.purple.block.header{border-bottom:.2em solid #564F8A}.ui.teal.block.header{border-bottom:.2em solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;margin:0 auto .2em}
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{border-bottom:.2em solid #6ECFF5}.ui.black.block.header{border-bottom:.2em solid #5C6166}.ui.green.block.header{border-bottom:.2em solid #A1CF64}.ui.red.block.header{border-bottom:.2em solid #EF4D6D}.ui.purple.block.header{border-bottom:.2em solid #564F8A}.ui.teal.block.header{border-bottom:.2em solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:inline-block;text-align:center}.ui.icon.header .icon{display:block;font-size:4em;margin:0 auto .2em}.ui.block.icon.header .icon{margin-bottom:0}

2
build/packaged/semantic.min.css.REMOVED.git-id
View File

@ -1 +1 @@
61d5df6293abdd0f9e68d09cd9d2e2ca46103abe
3f25c943a23ef2a59a58c829f1f805c972c2eb67

15
build/uncompressed/collections/grid.css
View File

@ -332,16 +332,19 @@
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.ui.stackable.grid .column:first-child {
margin-top: 0em !important;
padding-top: 0em !important;
}
.ui.stackable.divided.grid .column,
.ui.stackable.celled.grid .column {
border-top: 1px dotted rgba(0, 0, 0, 0.1);
}
.ui.stackable.divided.grid .column:first-child,
.ui.stackable.celled.grid .column:first-child {
.ui.stackable.grid > .row:first-child > .column:first-child,
.ui.stackable.grid > .column:first-child {
margin-top: 0em !important;
padding-top: 0em !important;
}
.ui.stackable.divided.grid > .row:first-child > .column:first-child,
.ui.stackable.celled.grid > .row:first-child > .column:first-child,
.ui.stackable.divided.grid > .column:first-child,
.ui.stackable.celled.grid > .column:first-child {
border-top: none !important;
}
}

10
build/uncompressed/elements/header.css
View File

@ -146,6 +146,9 @@ h5.ui.header {
.ui.inverted.header {
color: #FFFFFF;
}
.ui.inverted.header .sub.header {
color: rgba(255, 255, 255, 0.85);
}
/*-------------------
Inverted Colors
--------------------*/
@ -242,12 +245,15 @@ h5.ui.header {
/*-------------------
Icon
--------------------*/
.ui.header.icon {
.ui.icon.header {
display: inline-block;
text-align: center;
}
.ui.header.icon .icon {
.ui.icon.header .icon {
display: block;
font-size: 4em;
margin: 0em auto 0.2em;
}
.ui.block.icon.header .icon {
margin-bottom: 0em;
}

15
node/src/files/components/semantic/collections/grid.css
View File

@ -332,16 +332,19 @@
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.ui.stackable.grid .column:first-child {
margin-top: 0em !important;
padding-top: 0em !important;
}
.ui.stackable.divided.grid .column,
.ui.stackable.celled.grid .column {
border-top: 1px dotted rgba(0, 0, 0, 0.1);
}
.ui.stackable.divided.grid .column:first-child,
.ui.stackable.celled.grid .column:first-child {
.ui.stackable.grid > .row:first-child > .column:first-child,
.ui.stackable.grid > .column:first-child {
margin-top: 0em !important;
padding-top: 0em !important;
}
.ui.stackable.divided.grid > .row:first-child > .column:first-child,
.ui.stackable.celled.grid > .row:first-child > .column:first-child,
.ui.stackable.divided.grid > .column:first-child,
.ui.stackable.celled.grid > .column:first-child {
border-top: none !important;
}
}

10
node/src/files/components/semantic/elements/header.css
View File

@ -146,6 +146,9 @@ h5.ui.header {
.ui.inverted.header {
color: #FFFFFF;
}
.ui.inverted.header .sub.header {
color: rgba(255, 255, 255, 0.85);
}
/*-------------------
Inverted Colors
--------------------*/
@ -242,12 +245,15 @@ h5.ui.header {
/*-------------------
Icon
--------------------*/
.ui.header.icon {
.ui.icon.header {
display: inline-block;
text-align: center;
}
.ui.header.icon .icon {
.ui.icon.header .icon {
display: block;
font-size: 4em;
margin: 0em auto 0.2em;
}
.ui.block.icon.header .icon {
margin-bottom: 0em;
}

33
node/src/files/stylesheets/semantic.css
View File

@ -952,8 +952,8 @@ a:hover {
margin-left: 325px;
}
#example.index .container {
margin-left: 5em;
margin-right: 5em;
margin-left: 8em;
margin-right: 8em;
}
#example .sticky-wrapper.stuck .peek {
margin-left: 0px;
@ -1015,3 +1015,32 @@ a:hover {
margin-left: -890px;
}
}
@media only screen and (max-width : 780px) {
#example.index .masthead {
text-align: center;
padding: 50px 0px 15px;
}
#example.index .masthead h1 {
font-size: 3em;
}
#example.index .masthead h1 .icon {
display: none;
}
#example.index .masthead .button {
margin-bottom: 0.5em;
}
#example.index .masthead h2 {
font-size: 1.25em;
margin: 0em 0em 1em;
}
#example.index .container {
margin-left: 2em;
margin-right: 2em;
}
#example.index .icon.header .icon {
font-size: 3em;
}
}

2
node/src/layouts/default.html.eco
View File

@ -14,7 +14,7 @@
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Site Properities -->
<%- @getBlock('meta').toHTML() %>

15
src/collections/grid.less
View File

@ -423,16 +423,19 @@
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.ui.stackable.grid .column:first-child {
margin-top: 0em !important;
padding-top: 0em !important;
}
.ui.stackable.divided.grid .column,
.ui.stackable.celled.grid .column {
border-top: 1px dotted rgba(0, 0, 0, 0.1);
}
.ui.stackable.divided.grid .column:first-child,
.ui.stackable.celled.grid .column:first-child {
.ui.stackable.grid > .row:first-child > .column:first-child,
.ui.stackable.grid > .column:first-child {
margin-top: 0em !important;
padding-top: 0em !important;
}
.ui.stackable.divided.grid > .row:first-child > .column:first-child,
.ui.stackable.celled.grid > .row:first-child > .column:first-child,
.ui.stackable.divided.grid > .column:first-child,
.ui.stackable.celled.grid > .column:first-child {
border-top: none !important;
}
}

10
src/elements/header.less
View File

@ -161,6 +161,9 @@ h5.ui.header {
.ui.inverted.header {
color: #FFFFFF;
}
.ui.inverted.header .sub.header {
color: rgba(255, 255, 255, 0.85);
}
/*-------------------
@ -280,12 +283,15 @@ h5.ui.header {
Icon
--------------------*/
.ui.header.icon {
.ui.icon.header {
display: inline-block;
text-align: center;
}
.ui.header.icon .icon {
.ui.icon.header .icon {
display: block;
font-size: 4em;
margin: 0em auto 0.2em;
}
.ui.block.icon.header .icon {
margin-bottom: 0em;
}
Write Preview
Loading…
Cancel
Save