Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Removing dependency on #ribbon #3

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Removing dependency on #ribbon #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c985ee5
remove dependency on #ribbon. Replaced it with .ribbon.
jukowski Mar 28, 2013
e0308c5
fixing styling problems
jukowski May 16, 2013
2aa6c20
removing yet another id from ribbon generation and added compact ribb…
jukowski May 16, 2013
4bfb122
making compact layout the default one
jukowski May 16, 2013
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
2 changes: 1 addition & 1 deletion index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

</head>
<body bgcolor="#c9cdd2">
<div id="ribbon">
<div id="ribbon" class="ribbon">
<span class="ribbon-window-title">Ribbon App Test</span>
<div class="ribbon-tab file" id="file-tab">
<span class="ribbon-title">File</span>
Expand Down
379 changes: 379 additions & 0 deletions ribbon/ribbon-tworows.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,379 @@
body
{
padding-top: 151px;
}

.page
{
border: 1px solid #a5acb5;
margin: 20px;
padding: 15px;
-webkit-box-shadow: #000000 0px 0px 10px;
-moz-box-shadow: #000000 0px 0px 10px;
box-shadow: #000000 0px 0px 10px;
background: #FFF;
behavior: url(/PIE.htc);
}

.ribbon
{
font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif;

cursor: default;
font-size: 8pt;
padding-top: 10px;
background-color: #eaedf1;
border-bottom: 1px solid #8b9097;
-webkit-box-shadow: #8b9097 0px 1px 3px;
-moz-box-shadow: #8b9097 0px 1px 3px;
box-shadow: #8b9097 0px 1px 3px;
overflow: hidden;
behavior: url(/PIE.htc);
z-index: 25;
top: 0;
left: 0;
right: 0;
height: 135px;
}

.ribbon.backstage
{
height: auto;
bottom: 0;
}
.ribbon .ribbon-window-title
{
text-align: center;
color: #000;
padding: 2px;
font-size: 10pt;
display: block;
}

.ribbon .ribbon-tab-header-strip
{
margin: 5px 0 0 10px;
white-space: nowrap;
}

.ribbon .ribbon-tab-header
{
display: inline;
margin: 0 5px;
padding: 5px 10px;
font-size: 8pt;
color: #444; /*border: 1px solid #eaedf1;*/
border-bottom: 1px solid #b6babf;
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
position: relative;
z-index: 40;
}

.ribbon.backstage .ribbon-tab-header
{
border-bottom: 1px solid #1f48a1;
}

.ribbon .ribbon-tab-header:hover
{
background: #f1f3f4;
border: 1px solid #b6babf;
margin: -1px 4px;
cursor: pointer;
}

.ribbon.backstage .ribbon-tab-header
{
border-bottom: 1px solid #1f48a1;
}

.ribbon .ribbon-tab-header.sel, .ribbon .ribbon-tab-header.sel:hover
{
background: #fff;
margin: -1px 4px;
border: 1px solid #b6babf;
border-bottom: 1px solid #fff;
cursor: default;
z-index: 45;
}

.ribbon .ribbon-tab-header.file
{
padding: 5px 20px;
background: #2860b3;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4488e5), to(#2860b3));
background: -moz-linear-gradient(#4488e5, #2860b3);
-pie-background: linear-gradient(#4488e5, #2860b3);
border: 1px solid #1f48a1;
margin: -1px 4px;
border-bottom: 1px solid #4488e5;
cursor: default;
color: #fff;
}


.ribbon .ribbon-tab-header.file:hover
{
background: #3870c3;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5498f5), to(#3870c3));
background: -moz-linear-gradient(#5498f5, #3870c3);
-pie-background: linear-gradient(#5498f5, #3870c3);
border: 1px solid #1f48a1;
cursor: pointer;
border-bottom: 1px solid #4488e5;
z-index: 55;
position: relative;
}
.ribbon .ribbon-tab-header.file.sel
{
background: #4488e5;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2860b3), to(#4488e5));
background: -moz-linear-gradient(#2860b3, #4488e5);
-pie-background: linear-gradient(#2860b3, #4488e5);
border: 1px solid #1f48a1;
cursor: pointer;
border-bottom: 1px solid #4488e5;
z-index: 55;
position: relative;
}

.ribbon .ribbon-tab
{
height: 88px;
padding: 5px;
margin-top: 5px;
border-top: 1px solid #b6babf;
background: #FFF url('rib-back.png') repeat-x bottom;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eaedf1));
background: -moz-linear-gradient(#ffffff, #eaedf1); /*-pie-background: linear-gradient(#ffffff, #eaedf1);*/
overflow: hidden;
min-width: 500px;
behavior: url(/PIE.htc);
z-index: 30;
-pie-watch-ancestors: 2;
}

.ribbon .ribbon-tab.file
{
padding: 0;
margin-top: 5px;
border-top: 1px solid #1f48a1;

background-color:#4488e5;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#4488e5, endColorstr=#ffffff);
background-image:-moz-linear-gradient(left, #4488e5 15%, #ffffff 100%);
background-image:-webkit-linear-gradient(left, #4488e5 15%, #ffffff 100%);
background-image:-ms-linear-gradient(left, #4488e5 15%, #ffffff 100%);
background-image:linear-gradient(left, #4488e5 15%, #ffffff 100%);
background-image:-o-linear-gradient(left, #4488e5 15%, #ffffff 100%);
background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(15%,#4488e5), color-stop(100%,#ffffff));


overflow: hidden;
min-width: 500px;
z-index: 30;
}

.ribbon .ribbon-backstage
{
display: none;
}


.ribbon.backstage .ribbon-backstage
{
display: block;
position: absolute;
top: 60px;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background-color: #FFF;
}

.ribbon .section-title
{
color: #5B626C;
text-align: center;
clear: left;
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;

}

.ribbon .ribbon-section
{
float: left;
position: relative;
height: 95px;
}

.ribbon .ribbon-section-sep
{
border-left: 1px solid #E0E0E0;
border-right: 1px solid #fff;
margin: 0 5px;
height: 75px;
position: relative;
width: 0;
float: left;
}

.ribbon .ribbon-button
{
padding: 4px 6px;
border: 1px solid transparent;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;

}

.ribbon .ribbon-button-large
{
text-align: center;
height: 58px;
min-width: 44px;
float: left;
}

.ribbon .ribbon-button-small
{
height: 14px;
padding: 3px 4px;
text-align: left;

}

.ribbon .ribbon-button .button-help
{
display: none;
}

.ribbon .ribbon-button .button-title
{
color: #444;
}

.ribbon .ribbon-button-large .button-title
{
clear: left;
display: block;
}

.ribbon .ribbon-button-large .ribbon-icon
{
margin: auto;
}

.ribbon .ribbon-button-small .ribbon-icon
{
width: 16px;
height: 16px;
float: left;
clear: left;
margin: -1px 5px 0px 1px;
}
.ribbon .ribbon-button .ribbon-icon.ribbon-hot, .ribbon .ribbon-button .ribbon-icon.ribbon-disabled
{
display: none;
}

.ribbon .ribbon-button-large .ribbon-icon.ribbon-normal
{
display: block;
}

.ribbon .ribbon-button:hover .ribbon-icon.ribbon-normal
{
display: none;
}

.ribbon .ribbon-button-large:hover .ribbon-icon.ribbon-hot
{
display: block;
}
.ribbon .ribbon-button-small .ribbon-icon.ribbon-normal
{
display: inline;
}

.ribbon .ribbon-button-small:hover .ribbon-icon.ribbon-hot
{
display: inline;
}

.ribbon .ribbon-button:hover, .ribbon .ribbon-button.sel
{
border: 1px solid #F1C43F;
background: #fdeeb3;
cursor: pointer;

}
.ribbon .ribbon-button:active
{
border: 1px solid #F1C43F;
background: #F1C43F;
cursor: pointer;
}

.ribbon .ribbon-button.disabled .ribbon-icon, .ribbon .ribbon-button.disabled:hover .ribbon-icon
{
display: none;
}
.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-disabled
{
display: block;
opacity: 0.8;

}
.ribbon .ribbon-button.disabled .ribbon-icon.ribbon-implicit-disabled
{
opacity: 0.4;
}

.ribbon .ribbon-button.disabled:hover
{
border: 1px solid transparent;
background: transparent;
cursor: default;
}
.ribbon .ribbon-button.disabled:active
{
border: 1px solid transparent;
background: transparent;
cursor: default;
}

.ribbon .ribbon-button.disabled .button-title
{
color: #888;
}

.ribbon-tooltip
{
font-family: "Segoe UI" , Verdana, Tahoma, Helvetica, sans-serif;
font-size: 10pt;
position: fixed;
z-index: 5000;
border: 1px solid #8b9097;
background-color: #e5e5f0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#e5e5f0));
background: -moz-linear-gradient(#ffffff, #e5e5f0);
-pie-background: linear-gradient(#ffffff, #e5e5f0);
padding: 5px;
-webkit-box-shadow: #c6c9cd 1px 1px 3px;
-moz-box-shadow: #c6c9cd 1px 1px 3px;
box-shadow: #c6c9cd 1px 1px 3px;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
width: 200px;
top: 150px !important;
}
Loading