Browse Source
Renames UI Block to message to be more explicit`
Renames UI Block to message to be more explicit`
Former-commit-id:pull/258/headb9df71f4c4Former-commit-id:e3eef25064
Jack Lukic
11 years ago
9 changed files with 624 additions and 95 deletions
Unified View
Diff Options
-
9RELEASE NOTES.md
-
32node/src/documents/collections/message.html
-
66node/src/files/components/semantic/src/collections/block.css
-
12node/src/files/components/semantic/src/collections/form.css
-
260node/src/files/components/semantic/src/collections/message.css
-
66node/src/files/components/semantic/src/elements/block.css
-
2node/src/layouts/default.html.eco
-
12src/collections/form.css
-
260src/collections/message.css
@ -0,0 +1,9 @@ |
|||||
|
* RELEASE NOTES |
||||
|
|
||||
|
** Breaking Changes |
||||
|
|
||||
|
* Renamed UI Blocks to UI Messages (may 13, 2013) |
||||
|
* Messages are automatically hidden inside forms (may 04, 2013) |
||||
|
* Renamed UI Item Grid variation to standard item prototype to avoid conflict with ui grid (may 12, 2013) |
||||
|
* Renamed "grid" variation of table to "celled" to fix conflict with ui grid (may 10, 2013) |
||||
|
* Buttons are now grey by default |
||||
@ -0,0 +1,260 @@ |
|||||
|
/* |
||||
|
* # Semantic Text Block - Flat |
||||
|
* http://github.com/quirkyinc/semantic |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 29 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Text Message |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.message { |
||||
|
position: relative; |
||||
|
min-height: 18px; |
||||
|
margin: 1em 0em; |
||||
|
|
||||
|
height: auto; |
||||
|
background-color: rgba(0, 0, 0, 0.04); |
||||
|
padding: 1em; |
||||
|
|
||||
|
line-height: 1.33; |
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
-webkit-border-radius: 4px 4px 4px 4px; |
||||
|
-moz-border-radius: 4px 4px 4px 4px; |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
|
||||
|
/* message with header */ |
||||
|
.ui.message .header { |
||||
|
font-size: 1.33em; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* message with paragraph */ |
||||
|
.ui.message p { |
||||
|
opacity: 0.85; |
||||
|
margin: 0.2em 0em; |
||||
|
} |
||||
|
.ui.message p:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
|
||||
|
/* block with child list */ |
||||
|
.ui.message ul.list { |
||||
|
opacity: 0.85; |
||||
|
list-style-position: inside; |
||||
|
margin: 0.2em 0em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
.ui.message ul.list li { |
||||
|
position: relative; |
||||
|
list-style-type: none; |
||||
|
font-style: italic; |
||||
|
margin: 0em 0em 0em 1em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
.ui.message ul.list li:before { |
||||
|
position: absolute; |
||||
|
content: '\2022'; |
||||
|
top: -0.05em; |
||||
|
left: -0.8em; |
||||
|
|
||||
|
height: 100%; |
||||
|
vertical-align: baseline; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.ui.message ul.list li:first-child { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
|
||||
|
/* dismissable block */ |
||||
|
.ui.message > .icon.close { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: 1em; |
||||
|
right: 0.5em; |
||||
|
opacity: 0.7; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
} |
||||
|
.ui.message > .icon.close:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.message.visible, |
||||
|
.ui.header.visible { |
||||
|
display: block !important; |
||||
|
} |
||||
|
.ui.message.hidden, |
||||
|
.ui.header.hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Compact |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.compact.message { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Attached |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.attached.message { |
||||
|
margin-bottom: 0px; |
||||
|
|
||||
|
-webkit-border-radius: 4px 4px 0px 0px; |
||||
|
-moz-border-radius: 4px 4px 0px 0px; |
||||
|
border-radius: 4px 4px 0px 0px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
} |
||||
|
.ui.bottom.attached.message { |
||||
|
margin-top: 0px; |
||||
|
|
||||
|
-webkit-border-radius: 0px 0px 4px 4px; |
||||
|
-moz-border-radius: 0px 0px 4px 4px; |
||||
|
border-radius: 0px 0px 4px 4px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Icon |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.icon.message > .icon { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
font-size: 3.8em; |
||||
|
padding-right: 0.4em; |
||||
|
opacity: 0.2; |
||||
|
} |
||||
|
.ui.icon.message > .content { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Colors |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.black.message { |
||||
|
background-color: #333333; |
||||
|
color: rgba(255, 255, 255, 0.95); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Types |
||||
|
---------------*/ |
||||
|
.ui.blue.message, |
||||
|
.ui.info.message { |
||||
|
border-color: #75C9E9; |
||||
|
background-color: #E9F9FF; |
||||
|
color: #1D6582; |
||||
|
} |
||||
|
|
||||
|
/* Success Text Block */ |
||||
|
.ui.green.message, |
||||
|
.ui.success.message, |
||||
|
.ui.positive.message { |
||||
|
background-color: #EEFFE9; |
||||
|
color: #119000; |
||||
|
border-color: #2FCB05; |
||||
|
} |
||||
|
|
||||
|
/* Warning Text Block */ |
||||
|
.ui.yellow.message, |
||||
|
.ui.warning.message { |
||||
|
background-color: #F6F3D5; |
||||
|
border-color: #CBB105; |
||||
|
color: #AF9801; |
||||
|
} |
||||
|
/* Error Text Block */ |
||||
|
.ui.red.message, |
||||
|
.ui.error.message, |
||||
|
.ui.negative.message { |
||||
|
background-color: #F1D7D7; |
||||
|
|
||||
|
color: #AD0000; |
||||
|
border-color: #B06C6C; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Sizes |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.small.message { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
.ui.message { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
.ui.large.message { |
||||
|
font-size: 1.125em; |
||||
|
} |
||||
|
.ui.huge.message { |
||||
|
font-size: 1.5em; |
||||
|
} |
||||
|
.ui.massive.message { |
||||
|
font-size: 2px; |
||||
|
} |
||||
@ -0,0 +1,260 @@ |
|||||
|
/* |
||||
|
* # Semantic Text Block - Flat |
||||
|
* http://github.com/quirkyinc/semantic |
||||
|
* |
||||
|
* |
||||
|
* Copyright 2013 Contributors |
||||
|
* Released under the MIT license |
||||
|
* http://opensource.org/licenses/MIT |
||||
|
* |
||||
|
* Released: April 29 2013 |
||||
|
*/ |
||||
|
|
||||
|
/******************************* |
||||
|
Text Block |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.message { |
||||
|
position: relative; |
||||
|
min-height: 18px; |
||||
|
margin: 1em 0em; |
||||
|
|
||||
|
height: auto; |
||||
|
background-color: rgba(0, 0, 0, 0.04); |
||||
|
padding: 1em; |
||||
|
|
||||
|
line-height: 1.33; |
||||
|
color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
-webkit-border-radius: 4px 4px 4px 4px; |
||||
|
-moz-border-radius: 4px 4px 4px 4px; |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
|
||||
|
/* block with headers */ |
||||
|
.ui.message .header { |
||||
|
font-size: 1.33em; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* block with paragraphs */ |
||||
|
.ui.message p { |
||||
|
opacity: 0.85; |
||||
|
margin: 0.2em 0em; |
||||
|
} |
||||
|
.ui.message p:first-child { |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
|
||||
|
/* block with child list */ |
||||
|
.ui.message ul.list { |
||||
|
opacity: 0.85; |
||||
|
list-style-position: inside; |
||||
|
margin: 0.2em 0em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
.ui.message ul.list li { |
||||
|
position: relative; |
||||
|
list-style-type: none; |
||||
|
font-style: italic; |
||||
|
margin: 0em 0em 0em 1em; |
||||
|
padding: 0em; |
||||
|
} |
||||
|
.ui.message ul.list li:before { |
||||
|
position: absolute; |
||||
|
content: '\2022'; |
||||
|
top: -0.05em; |
||||
|
left: -0.8em; |
||||
|
|
||||
|
height: 100%; |
||||
|
vertical-align: baseline; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.ui.message ul.list li:first-child { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
|
||||
|
/* dismissable block */ |
||||
|
.ui.message > .icon.close { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: 1em; |
||||
|
right: 0.5em; |
||||
|
opacity: 0.7; |
||||
|
|
||||
|
-webkit-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-moz-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-o-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
-ms-transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
transition: |
||||
|
opacity 0.1s linear |
||||
|
; |
||||
|
} |
||||
|
.ui.message > .icon.close:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
States |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.message.visible, |
||||
|
.ui.header.visible { |
||||
|
display: block !important; |
||||
|
} |
||||
|
.ui.message.hidden, |
||||
|
.ui.header.hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/******************************* |
||||
|
Variations |
||||
|
*******************************/ |
||||
|
|
||||
|
/*-------------- |
||||
|
Compact |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.compact.message { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Attached |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.attached.message { |
||||
|
margin-bottom: 0px; |
||||
|
|
||||
|
-webkit-border-radius: 4px 4px 0px 0px; |
||||
|
-moz-border-radius: 4px 4px 0px 0px; |
||||
|
border-radius: 4px 4px 0px 0px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
} |
||||
|
.ui.bottom.attached.message { |
||||
|
margin-top: 0px; |
||||
|
|
||||
|
-webkit-border-radius: 0px 0px 4px 4px; |
||||
|
-moz-border-radius: 0px 0px 4px 4px; |
||||
|
border-radius: 0px 0px 4px 4px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 0px 1px #DDDDDD |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Icon |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.icon.message > .icon { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
font-size: 3.8em; |
||||
|
padding-right: 0.4em; |
||||
|
opacity: 0.2; |
||||
|
} |
||||
|
.ui.icon.message > .content { |
||||
|
display: table-cell; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Colors |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.black.message { |
||||
|
background-color: #333333; |
||||
|
color: rgba(255, 255, 255, 0.95); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Types |
||||
|
---------------*/ |
||||
|
.ui.blue.message, |
||||
|
.ui.info.message { |
||||
|
border-color: #75C9E9; |
||||
|
background-color: #E9F9FF; |
||||
|
color: #1D6582; |
||||
|
} |
||||
|
|
||||
|
/* Success Text Block */ |
||||
|
.ui.green.message, |
||||
|
.ui.success.message, |
||||
|
.ui.positive.message { |
||||
|
background-color: #EEFFE9; |
||||
|
color: #119000; |
||||
|
border-color: #2FCB05; |
||||
|
} |
||||
|
|
||||
|
/* Warning Text Block */ |
||||
|
.ui.yellow.message, |
||||
|
.ui.warning.message { |
||||
|
background-color: #F6F3D5; |
||||
|
border-color: #CBB105; |
||||
|
color: #AF9801; |
||||
|
} |
||||
|
/* Error Text Block */ |
||||
|
.ui.red.message, |
||||
|
.ui.error.message, |
||||
|
.ui.negative.message { |
||||
|
background-color: #F1D7D7; |
||||
|
|
||||
|
color: #AD0000; |
||||
|
border-color: #B06C6C; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Sizes |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.small.message { |
||||
|
font-size: 0.875em; |
||||
|
} |
||||
|
.ui.message { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
.ui.large.message { |
||||
|
font-size: 1.125em; |
||||
|
} |
||||
|
.ui.huge.message { |
||||
|
font-size: 1.5em; |
||||
|
} |
||||
|
.ui.massive.message { |
||||
|
font-size: 2px; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save