felipe.aquino/cae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

definicao de layout

Browse Source
This commit is contained in:
Felipe AQUINO
2026-02-06 14:37:54 +00:00
parent 872a5bb3ea
commit a4f80c85c2
2686 changed files with 640668 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
public/assets/scss/theme/_ribbon.scss Normal file
View File

@@ -0,0 +1,231 @@
/**=====================
56. Ribbon CSS Start
==========================**/
.ribbon-wrapper, .ribbon-wrapper-right, .ribbon-wrapper-bottom, .ribbon-wrapper-right-bottom {
position: relative;
padding-top: 40px;
}
.ribbon-vertical-left-wrapper {
padding-left: 40px;
position: relative;
}
.ribbon-overflow {
overflow: hidden;
}
.ribbon-vertical-right-wrapper{
padding-right: 40px;
}
.ribbon-wrapper-bottom {
padding-bottom: 40px;
padding-top: 0;
}
.ribbon-wrapper-right-bottom {
padding-right: 40px;
}
.ribbon-content {
margin-bottom: 0;
}
.ribbon {
padding: 0 20px;
height: 30px;
line-height: 30px;
clear: left;
position: absolute;
top: 12px;
left: 0px;
color: $white;
z-index:2;
}
.ribbon-space-bottom{
top:0px;
}
.ribbon-clip{
left: -14px;
&:before{
position: absolute;
top: 30px;
left: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-bookmark{
&:before {
position: absolute;
top: 0;
left: 100%;
display: block;
width: 0;
height: 0;
content: '';
border: 15px solid $dark-color;
border-right: 10px solid transparent;
}
}
.ribbon-right {
left: auto;
right: -2px;
}
.ribbon-clip-right{
right: -14px;
&:before{
position: absolute;
top: 30px;
right: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-clip-bottom{
left: -14px;
bottom:12px;
top:auto;
&:before{
position: absolute;
bottom: 30px;
left: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-clip-bottom-right{
right: -14px;
left:auto;
bottom:12px;
top:auto;
&:before{
position: absolute;
bottom: 30px;
right: 0;
width: 0;
height: 0;
content: "";
border: 7px solid transparent;
border-top-color: $dark-color;
border-right-color: $dark-color;
}
}
.ribbon-bookmark.ribbon-right:before {
right: 100%;
left: auto;
border-right: 15px solid $dark-color;
border-left: 10px solid transparent;
}
.ribbon-vertical-left {
clear: none;
padding: 0 5px;
height: 70px;
width: 30px;
line-height: 70px;
text-align: center;
left: 12px;
top: -2px;
}
.ribbon-vertical-right {
clear: none;
padding: 0 5px;
height: 70px;
width: 30px;
line-height: 70px;
text-align: center;
top: -2px;
left: auto;
right: 12px;
}
.ribbon-bookmark {
&.ribbon-vertical-left:before, &.ribbon-vertical-right:before {
top: 100%;
left: 0;
margin-top: -14px;
border-right: 15px solid $dark-color;
border-bottom: 10px solid transparent;
}
}
@each $ribbon-name, $ribbon-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.ribbon-#{$ribbon-name}{
background: $ribbon-color;
}
.ribbon-#{$ribbon-name} {
background: $ribbon-color;
}
.ribbon-bookmark {
&.ribbon-#{$ribbon-name}:before {
border-color: $ribbon-color;
border-right-color: transparent;
}
&.ribbon-right.ribbon-#{$ribbon-name}:before {
border-right-color: $ribbon-color;
border-left-color: transparent;
}
&.ribbon-vertical-left.ribbon-#{$ribbon-name}:before, &.ribbon-vertical-right.ribbon-#{$ribbon-name}:before {
border-right-color: $ribbon-color;
border-bottom-color: transparent;
}
}
.ribbon-#{$ribbon-name}.ribbon-corner {
&:before {
border-top-color: $ribbon-color;
border-left-color: $ribbon-color;
}
&.ribbon-right:before {
border-right-color: $ribbon-color;
border-left-color: transparent;
}
&.ribbon-bottom:before {
border-top-color: transparent;
border-bottom-color: $ribbon-color;
}
}
.ribbon-#{$ribbon-name}.ribbon-clip{
&:before{
border-color: transparent;
border-top-color: darken($ribbon-color, 10%);
border-right-color: darken($ribbon-color, 10%);
}
}
.ribbon-#{$ribbon-name}.ribbon-clip-right{
&:before{
border-right-color: transparent;
border-top-color: darken($ribbon-color, 10%);
border-left-color: darken($ribbon-color, 10%);
}
}
.ribbon-#{$ribbon-name}.ribbon-clip-bottom{
&:before{
border-top-color: transparent;
border-bottom-color: darken($ribbon-color, 10%);
border-right-color: darken($ribbon-color, 10%);
}
}
.ribbon-#{$ribbon-name}.ribbon-clip-bottom-right{
&:before{
border-top-color: transparent;
border-bottom-color: darken($ribbon-color, 10%);
border-right-color: transparent;
border-left-color: darken($ribbon-color, 10%);
}
}
}
/**=====================
56. Ribbon CSS Ends
==========================**/