Skip to content

Commit

Permalink
various
Browse files Browse the repository at this point in the history
  • Loading branch information
mb.jquery.components committed Oct 7, 2015
1 parent 28697d3 commit 8daabf8
Show file tree
Hide file tree
Showing 3 changed files with 352 additions and 1 deletion.
343 changes: 342 additions & 1 deletion css/mbExtruder.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,345 @@
* *****************************************************************************
*/

.extruder{position:fixed;cursor:default;background:url("../elements/extruder_blank.png")}.extruder .header{height:27px}.extruder .extruder-content{display:none;background:#000}.extruder.open .extruder-content{-moz-box-shadow:2px 0 5px #999;-webkit-box-shadow:2px 0 5px #999;box-shadow:2px 0 5px #999}.extruder .footer{display:none;height:10px;background:#000;-moz-border-radius:0 0 8px 8px;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:8px;border-bottom-right-radius:8px;-moz-box-shadow:2px 0 5px #999;-webkit-box-shadow:2px 0 5px #999;box-shadow:2px 0 5px #999}.extruder.top .flap{color:#fff;font:18px/28px Arial,Helvetica,sans-serif;text-align:center;display:block;margin:auto;padding:0 5px 5px 5px;height:30px;width:180px;background:#000;cursor:pointer;-moz-border-radius:0 0 8px 8px;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:8px;border-bottom-right-radius:8px;-moz-box-shadow:2px 0 5px #999;-webkit-box-shadow:2px 0 5px #999;box-shadow:2px 0 5px #999;text-shadow:2px 2px 2px #333}.extruder.top .extruder-content{-moz-border-radius:0 0 8px 8px;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.extruder.bottom .flap{position:relative;color:white;font:18px/28px Arial,Helvetica,sans-serif;text-align:center;display:block;margin:auto;margin-top:1px;padding:0 5px 5px 5px;height:30px;width:180px;background:#000;cursor:pointer;-moz-border-radius:8px 8px 0 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:0;border-bottom-right-radius:0;text-shadow:2px 2px 2px #333;-moz-box-shadow:2px 0 5px #999;-webkit-box-shadow:2px 0 5px #999;box-shadow:2px 0 5px #999}.extruder.bottom .footer{-moz-border-radius:8px 8px 0 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative;margin-top:-5px}.extruder.bottom .extruder-content{-moz-border-radius:8px 8px 0 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:0;border-bottom-right-radius:0}.extruder.bottom .ext_wrapper{bottom:0}.extruder.left{height:100%;background:url("../elements/extruder_blank.png")}.extruder.left.open .extruder-content{-moz-box-shadow:2px 0 5px #999;-webkit-box-shadow:2px 0 5px #999;box-shadow:2px 0 5px #999}.extruder.left .extruder-content{border-right:3px solid #000}.extruder.left .ext_wrapper{height:100%}.extruder.left .footer{display:none}.extruder.left .flap{font-size:18px;color:white;top:0;padding:10px 0 10px 10px;margin-right:-37px;background:#000;width:30px;position:absolute;right:0;-moz-border-radius:0 8px 0 8px;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:8px;border-top-left-radius:0;border-top-right-radius:8px;border-bottom-left-radius:0;border-bottom-right-radius:8px;-moz-box-shadow:2px 0 5px #999;-webkit-box-shadow:2px 0 5px #999;box-shadow:2px 0 5px #999}.extruder.left .flap .flapLabel{background:#000}.extruder.right{height:100%;background:url("../elements/extruder_blank.png")}.extruder.right .extruder-content{border-left:3px solid #000}.extruder.right.open .extruder-content{-moz-box-shadow:-2px 0 5px #999;-webkit-box-shadow:-2px 0 5px #999;box-shadow:-2px 0 5px #999}.extruder.right .ext_wrapper{height:100%;right:0}.extruder.right .footer{display:none}.extruder.right .flap{font-size:18px;color:white;top:0;padding:10px 0 10px 10px;background:#000;width:30px;position:absolute;left:-37px;-moz-border-radius:8px 0 8px 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:0;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:0;border-top-left-radius:8px;border-top-right-radius:0;border-bottom-left-radius:8px;border-bottom-right-radius:0;-moz-box-shadow:-2px 0 5px #999;-webkit-box-shadow:-2px 0 5px #999;box-shadow:-2px 0 5px #999}.extruder.right .flap .flapLabel{background:#000}.extruder .voice{font:18px/24px Arial,Helvetica,sans-serif;color:white;padding:5px;padding-left:10px;height:27px;border-bottom:1px solid #333;text-shadow:2px 2px 2px #333}.extruder .voice:last-child{border-bottom:0}.extruder .voice .disabled{cursor:default}.extruder .text{background:#222;font:14px/16px Arial,Helvetica,sans-serif;color:gray;padding:10px;border-bottom:1px solid #333;text-shadow:2px 2px 2px #333}.extruder .voice.hover{background:url("../elements/extruder_voiceHover.png") repeat-x top}.extruder .voice.sel{background:url("../elements/extruder_voiceHover.png") repeat-x top}.extruder .voice img{float:left;margin-right:15px}.extruder .voice a.label{display:block;height:30px;color:white;padding-top:0;text-decoration:none}.extruder .voice span.label{display:block;height:30px;color:#d0cfcf;padding-top:0;text-decoration:none}.extruder .voice{position:relative}.extruder .settingsBtn{display:block;position:absolute;width:36px;height:36px;background:url("../elements/settingsBtn.png") no-repeat bottom;cursor:pointer;right:-3px;top:-4px}.extruder .optionsPanel{background:url("../elements/fuzz.gif");display:none;border-bottom:1px solid #333}.extruder .voice.sel{background:url("../elements/extruder_voiceHover.png") repeat-x top}.optionsPanel .panelVoice a{text-decoration:none;display:block;color:#ccc;padding:8px;padding-left:20px;font-size:16px;text-shadow:2px 2px 2px #333;border-bottom:1px solid #000;cursor:pointer}.optionsPanel .panelVoice a:hover{color:#fff;background:url("../elements/red_op_50.png")}:focus{outline:0}
.extruder {
position: fixed;
cursor: default;
background: url("../elements/extruder_blank.png")
}

.extruder *{
box-sizing: content-box;
}

.extruder .header {
height: 27px
}

.extruder .extruder-content {
display: none;
background: #000
}

.extruder.open .extruder-content {
-moz-box-shadow: 2px 0 5px #999;
-webkit-box-shadow: 2px 0 5px #999;
box-shadow: 2px 0 5px #999
}

.extruder .footer {
display: none;
height: 10px;
background: #000;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-moz-box-shadow: 2px 0 5px #999;
-webkit-box-shadow: 2px 0 5px #999;
box-shadow: 2px 0 5px #999
}

.extruder.top .flap {
color: #fff;
font: 18px/28px Arial, Helvetica, sans-serif;
text-align: center;
display: block;
margin: auto;
padding: 0 5px 5px 5px;
height: 30px;
width: 180px;
background: #000;
cursor: pointer;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-moz-box-shadow: 2px 0 5px #999;
-webkit-box-shadow: 2px 0 5px #999;
box-shadow: 2px 0 5px #999;
text-shadow: 2px 2px 2px #333
}

.extruder.top .extruder-content {
-moz-border-radius: 0 0 8px 8px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px
}

.extruder.bottom .flap {
position: relative;
color: white;
font: 18px/28px Arial, Helvetica, sans-serif;
text-align: center;
display: block;
margin: auto;
margin-top: 1px;
padding: 0 5px 5px 5px;
height: 30px;
width: 180px;
background: #000;
cursor: pointer;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
text-shadow: 2px 2px 2px #333;
-moz-box-shadow: 2px 0 5px #999;
-webkit-box-shadow: 2px 0 5px #999;
box-shadow: 2px 0 5px #999
}

.extruder.bottom .footer {
-moz-border-radius: 8px 8px 0 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: relative;
margin-top: -5px
}

.extruder.bottom .extruder-content {
-moz-border-radius: 8px 8px 0 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}

.extruder.bottom .ext_wrapper {
bottom: 0
}

.extruder.left {
height: 100%;
background: url("../elements/extruder_blank.png")
}

.extruder.left.open .extruder-content {
-moz-box-shadow: 2px 0 5px #999;
-webkit-box-shadow: 2px 0 5px #999;
box-shadow: 2px 0 5px #999
}

.extruder.left .extruder-content {
border-right: 3px solid #000
}

.extruder.left .ext_wrapper {
height: 100%
}

.extruder.left .footer {
display: none
}

.extruder.left .flap {
font-size: 18px;
color: white;
top: 0;
padding: 10px 0 10px 10px;
margin-right: -37px;
background: #000;
width: 30px;
position: absolute;
right: 0;
-moz-border-radius: 0 8px 0 8px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 8px;
-moz-box-shadow: 2px 0 5px #999;
-webkit-box-shadow: 2px 0 5px #999;
box-shadow: 2px 0 5px #999
}

.extruder.left .flap .flapLabel {
background: #000
}

.extruder.right {
height: 100%;
background: url("../elements/extruder_blank.png")
}

.extruder.right .extruder-content {
border-left: 3px solid #000
}

.extruder.right.open .extruder-content {
-moz-box-shadow: -2px 0 5px #999;
-webkit-box-shadow: -2px 0 5px #999;
box-shadow: -2px 0 5px #999
}

.extruder.right .ext_wrapper {
height: 100%;
right: 0
}

.extruder.right .footer {
display: none
}

.extruder.right .flap {
font-size: 18px;
color: white;
top: 0;
padding: 10px 0 10px 10px;
background: #000;
width: 30px;
position: absolute;
left: -37px;
-moz-border-radius: 8px 0 8px 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 0;
border-top-left-radius: 8px;
border-top-right-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 0;
-moz-box-shadow: -2px 0 5px #999;
-webkit-box-shadow: -2px 0 5px #999;
box-shadow: -2px 0 5px #999
}

.extruder.right .flap .flapLabel {
background: #000
}

.extruder .voice {
font: 18px/24px Arial, Helvetica, sans-serif;
color: white;
padding: 5px;
padding-left: 10px;
height: 27px;
border-bottom: 1px solid #333;
text-shadow: 2px 2px 2px #333
}

.extruder .voice:last-child {
border-bottom: 0
}

.extruder .voice .disabled {
cursor: default
}

.extruder .text {
background: #222;
font: 14px/16px Arial, Helvetica, sans-serif;
color: gray;
padding: 10px;
border-bottom: 1px solid #333;
text-shadow: 2px 2px 2px #333
}

.extruder .voice.hover {
background: url("../elements/extruder_voiceHover.png") repeat-x top
}

.extruder .voice.sel {
background: url("../elements/extruder_voiceHover.png") repeat-x top
}

.extruder .voice img {
float: left;
margin-right: 15px
}

.extruder .voice a.label {
display: block;
height: 30px;
color: white;
padding-top: 0;
text-decoration: none
}

.extruder .voice span.label {
display: block;
height: 30px;
color: #d0cfcf;
padding-top: 0;
text-decoration: none
}

.extruder .voice {
position: relative
}

.extruder .settingsBtn {
display: block;
position: absolute;
width: 36px;
height: 36px;
background: url("../elements/settingsBtn.png") no-repeat bottom;
cursor: pointer;
right: -3px;
top: -4px
}

.extruder .optionsPanel {
background: url("../elements/fuzz.gif");
display: none;
border-bottom: 1px solid #333
}

.extruder .voice.sel {
background: url("../elements/extruder_voiceHover.png") repeat-x top
}

.optionsPanel .panelVoice a {
text-decoration: none;
display: block;
color: #ccc;
padding: 8px;
padding-left: 20px;
font-size: 16px;
text-shadow: 2px 2px 2px #333;
border-bottom: 1px solid #000;
cursor: pointer
}

.optionsPanel .panelVoice a:hover {
color: #fff;
background: url("../elements/red_op_50.png")
}

:focus {
outline: 0
}
4 changes: 4 additions & 0 deletions css/mbExtruder.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@
background: url("../elements/extruder_blank.png");
}

.extruder *{
box-sizing: content-box;
}

.extruder .header{
height:27px;
}
Expand Down
6 changes: 6 additions & 0 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mb.extruder</title>
<style type="text/css">

* {
box-sizing: border-box;
}


body{
font-family:Arial, Helvetica, sans-serif;
margin:10px;
Expand Down

0 comments on commit 8daabf8

Please sign in to comment.