Finish Banner-Alert

This commit is contained in:
2022-09-07 10:36:57 -04:00
parent e8d9853de6
commit 248a5f437c
5 changed files with 63 additions and 13 deletions
+1 -1
View File
@@ -10,7 +10,7 @@ NOTES:
* Compression/Combination/Minification is not enabled unless debug="false" is specified on the 'compiliation' element in the web.config
* A new version will invalidate both client and server cache and create new persisted files
-->
<clientDependency version="1325334495" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
<clientDependency version="1325334497" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
<!--
This section is used for Web Forms only, the enableCompositeFiles="true" is optional and by default is set to true.
+18
View File
@@ -68,12 +68,14 @@ i {
.banner-link {
white-space: normal;
padding: 20px;
margin-top: 16px;
background: #000000;
background: rgba(0, 0, 0, 0.5);
-moz-border-radius: 10px;
border-radius: 10px;
/* standards-compliant: (IE) */ }
.banner-link .glyphicon, .banner-link .fa {
margin-left: 10px;
color: #8cc641; }
a.banner-link:hover {
@@ -82,6 +84,22 @@ a.banner-link:hover {
a.banner-link:hover .glyphicon {
color: #a8ed4f; }
.banner-alert {
white-space: normal;
padding: 10px 20px;
background: #97b374;
-moz-border-radius: 10px;
border-radius: 10px;
/* standards-compliant: (IE) */ }
.banner-alert .fa {
margin-left: 10px; }
.banner-alert h4 {
margin-bottom: 0px; }
a.banner-alert:hover {
text-decoration: none;
background: #6b7f52; }
h1.headline {
font-size: 2.9em;
text-align: center;
+1 -1
View File
@@ -1 +1 @@
html{position:relative;min-height:100%;}body{margin-bottom:60px;}body header{padding:15px 0;}body.debug header{background:repeating-linear-gradient(to right,#990,#090 10px,#333 10px,#333 20px);}body.debug header .navbar-brand{position:relative;}body.debug header .navbar-brand:before{content:"";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#f00;font-size:60px;padding-right:.5em;position:absolute;top:10px;left:0;}h1{padding:24px 0 12px 0;}p{padding:12px 0;}i{cursor:default;}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;}.row-no-padding [class*="col-"]{padding-left:0 !important;padding-right:0 !important;}.home .dark .row:first-child .column:first-child h1{padding-top:0;}.home .blogarchive{padding-top:20px;}.top-buffer{margin-top:20px;}.detail-actions>a,.detail-actions>form>button{margin-top:20px;float:left;clear:left;}.banner-link{white-space:normal;padding:20px;background:#000;background:rgba(0,0,0,.5);-moz-border-radius:10px;border-radius:10px;}.banner-link .glyphicon,.banner-link .fa{color:#8cc641;}a.banner-link:hover{text-decoration:none;background:rgba(0,0,0,.6);}a.banner-link:hover .glyphicon{color:#a8ed4f;}h1.headline{font-size:2.9em;text-align:center;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon h1:after{color:rgba(172,214,118,.8);font-family:"FontAwesome";font-size:.8em;padding-left:10px;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon.headline-icon-file h1:after{content:"";}.headline-icon.headline-icon-leaf h1:after{content:"";}.headline-icon.headline-icon-question h1:after{content:"";}.headline-icon.headline-icon-stats h1:after{content:"";}.headline-icon.headline-icon-user h1:after{content:"";}.headline-icon.headline-icon-list h1:after{content:"";}.status{white-space:nowrap;cursor:default;}.status:before{font-family:"FontAwesome";font-size:1em;padding-right:6px;}.status.status-pending{color:#f0ad4e;}.status.status-pending:before{content:"";}.status.status-complete{color:#337ab7;}.status.status-complete:before{content:"";}.status.status-exception{color:#a94442;}.status.status-exception:before{content:"";}.status.status-unresponsive{color:#66512c;}.status.status-unresponsive:before{content:"";}.status.status-running,.status.status-starting,.status.status-finishing{color:#3c763d;}.status.status-running:before{content:"";}.status.status-starting:before{content:"";}.status.status-finishing:before{content:"";}.status.status-cancelpending:before,.status.status-cancelling:before{content:"";}.status.status-cancelled{color:#ec971f;}.status.status-cancelled:before{content:"";}#chart{padding-top:20px;}.btn-file{position:relative;overflow:hidden;}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px;text-align:right;filter:alpha(opacity=0);opacity:0;outline:none;background:#fff;cursor:inherit;display:block;}form .validation-summary-errors ul{list-style-type:none;}form .validation-summary-errors ul li{color:#dc3545;}.autocomplete-suggestions{border:1px solid #999;background:#fff;overflow:auto;}.autocomplete-suggestion{padding:2px 5px;white-space:nowrap;overflow:hidden;}.autocomplete-selected{background:#f0f0f0;}.autocomplete-suggestions strong{font-weight:normal;color:#39f;}.autocomplete-group{padding:2px 5px;}.autocomplete-group strong{display:block;border-bottom:1px solid #000;}.toggle{width:15px;}.dropdown-menu li form .btn-link{display:block;color:#333;clear:both;float:left;font-size:1rem;font-weight:normal;line-height:1.42857;min-width:160px;padding:3px 20px;text-align:left;white-space:nowrap;}.dropdown-menu li form .btn-link:focus,.dropdown-menu li form .btn-link:hover{text-decoration:none;color:#262626;background-color:#f5f5f5;}.divider-right{border-right:1px dashed #333;}.read{overflow:hidden;font-size:16px !important;transition:all .3s;margin-bottom:10px;}.read-less{height:90px !important;}code,pre{line-height:1;}.alert{position:absolute;left:30%;top:15em;width:40%;z-index:1;}.copyright{font-size:.8em;color:#777 !important;cursor:default;}.withshadow{text-shadow:2px 2px 4px #000;}.files td{vertical-align:middle;}p.caption{font-style:italic;font-size:smaller;}
html{position:relative;min-height:100%;}body{margin-bottom:60px;}body header{padding:15px 0;}body.debug header{background:repeating-linear-gradient(to right,#990,#090 10px,#333 10px,#333 20px);}body.debug header .navbar-brand{position:relative;}body.debug header .navbar-brand:before{content:"";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#f00;font-size:60px;padding-right:.5em;position:absolute;top:10px;left:0;}h1{padding:24px 0 12px 0;}p{padding:12px 0;}i{cursor:default;}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;}.row-no-padding [class*="col-"]{padding-left:0 !important;padding-right:0 !important;}.home .dark .row:first-child .column:first-child h1{padding-top:0;}.home .blogarchive{padding-top:20px;}.top-buffer{margin-top:20px;}.detail-actions>a,.detail-actions>form>button{margin-top:20px;float:left;clear:left;}.banner-link{white-space:normal;padding:20px;margin-top:16px;background:#000;background:rgba(0,0,0,.5);-moz-border-radius:10px;border-radius:10px;}.banner-link .glyphicon,.banner-link .fa{margin-left:10px;color:#8cc641;}a.banner-link:hover{text-decoration:none;background:rgba(0,0,0,.6);}a.banner-link:hover .glyphicon{color:#a8ed4f;}.banner-alert{white-space:normal;padding:10px 20px;background:#97b374;-moz-border-radius:10px;border-radius:10px;}.banner-alert .fa{margin-left:10px;}.banner-alert h4{margin-bottom:0;}a.banner-alert:hover{text-decoration:none;background:#6b7f52;}h1.headline{font-size:2.9em;text-align:center;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon h1:after{color:rgba(172,214,118,.8);font-family:"FontAwesome";font-size:.8em;padding-left:10px;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(0,0,0,.4),5px 5px 10px rgba(0,0,0,.4);}.headline-icon.headline-icon-file h1:after{content:"";}.headline-icon.headline-icon-leaf h1:after{content:"";}.headline-icon.headline-icon-question h1:after{content:"";}.headline-icon.headline-icon-stats h1:after{content:"";}.headline-icon.headline-icon-user h1:after{content:"";}.headline-icon.headline-icon-list h1:after{content:"";}.status{white-space:nowrap;cursor:default;}.status:before{font-family:"FontAwesome";font-size:1em;padding-right:6px;}.status.status-pending{color:#f0ad4e;}.status.status-pending:before{content:"";}.status.status-complete{color:#337ab7;}.status.status-complete:before{content:"";}.status.status-exception{color:#a94442;}.status.status-exception:before{content:"";}.status.status-unresponsive{color:#66512c;}.status.status-unresponsive:before{content:"";}.status.status-running,.status.status-starting,.status.status-finishing{color:#3c763d;}.status.status-running:before{content:"";}.status.status-starting:before{content:"";}.status.status-finishing:before{content:"";}.status.status-cancelpending:before,.status.status-cancelling:before{content:"";}.status.status-cancelled{color:#ec971f;}.status.status-cancelled:before{content:"";}#chart{padding-top:20px;}.btn-file{position:relative;overflow:hidden;}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px;text-align:right;filter:alpha(opacity=0);opacity:0;outline:none;background:#fff;cursor:inherit;display:block;}form .validation-summary-errors ul{list-style-type:none;}form .validation-summary-errors ul li{color:#dc3545;}.autocomplete-suggestions{border:1px solid #999;background:#fff;overflow:auto;}.autocomplete-suggestion{padding:2px 5px;white-space:nowrap;overflow:hidden;}.autocomplete-selected{background:#f0f0f0;}.autocomplete-suggestions strong{font-weight:normal;color:#39f;}.autocomplete-group{padding:2px 5px;}.autocomplete-group strong{display:block;border-bottom:1px solid #000;}.toggle{width:15px;}.dropdown-menu li form .btn-link{display:block;color:#333;clear:both;float:left;font-size:1rem;font-weight:normal;line-height:1.42857;min-width:160px;padding:3px 20px;text-align:left;white-space:nowrap;}.dropdown-menu li form .btn-link:focus,.dropdown-menu li form .btn-link:hover{text-decoration:none;color:#262626;background-color:#f5f5f5;}.divider-right{border-right:1px dashed #333;}.read{overflow:hidden;font-size:16px !important;transition:all .3s;margin-bottom:10px;}.read-less{height:90px !important;}code,pre{line-height:1;}.alert{position:absolute;left:30%;top:15em;width:40%;z-index:1;}.copyright{font-size:.8em;color:#777 !important;cursor:default;}.withshadow{text-shadow:2px 2px 4px #000;}.files td{vertical-align:middle;}p.caption{font-style:italic;font-size:smaller;}
+31 -8
View File
@@ -90,15 +90,17 @@ i {
}
.banner-link {
white-space: normal;
padding: 20px;
background: #000000;
background: rgba(0, 0, 0, .5);
-moz-border-radius: 10px;
border-radius: 10px; /* standards-compliant: (IE) */
white-space: normal;
padding: 20px;
margin-top: 16px;
background: #000000;
background: rgba(0, 0, 0, .5);
-moz-border-radius: 10px;
border-radius: 10px; /* standards-compliant: (IE) */
.glyphicon, .fa {
color: #8cc641;
margin-left: 10px;
color: #8cc641;
}
}
@@ -111,6 +113,27 @@ a.banner-link:hover {
}
}
.banner-alert {
white-space: normal;
padding: 10px 20px;
background: #97b374;
-moz-border-radius: 10px;
border-radius: 10px; /* standards-compliant: (IE) */
.fa {
margin-left: 10px;
}
h4 {
margin-bottom: 0px;
}
}
a.banner-alert:hover {
text-decoration: none;
background: #6b7f52;
}
$text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.4), 5px 5px 10px rgba(0, 0, 0, 0.4);
h1.headline {
+12 -3
View File
@@ -1,10 +1,19 @@
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
var link = Model.MacroParameters["Link"];
var linkText = Model.MacroParameters["LinkText"];
var title = Model.MacroParameters["Title"];
var description = Model.MacroParameters["Description"];
var faicon = Model.MacroParameters["FaIcon"];
var url = new UmbracoHelper(UmbracoContext.Current).TypedContent(link).Url;
}
<div class="alert alert-warning text-center" style="margin-top: 20px" role="alert">
<a href="@url" class="alert-link">@linkText</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="fa @faicon alert-link"></span>
<div class="container" style="margin-top: 0px; margin-bottom: 0px;">
<div class="row justify-content-md-center">
<div class="col-md-auto" style="margin-bottom: 0px;">
<a class="banner-alert text--center" href="@url">
<h4>@title <span class="fa @faicon"></span></h4>
<p>@description</p>
</a>
</div>
</div>
</div>