Changeset 19863 in main


Ignore:
Timestamp:
02/17/20 23:12:59 (3 years ago)
Author:
GarthBraithwaite_STG
Message:

view - more FontIcon? css cleanup.

Location:
trunk/ibisph-view/src/main/webapp
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/ibisph-view/src/main/webapp/css/ExpandableContent.css

    r19860 r19863  
    9191
    9292
    93 .ExpandableContent > input + * > label.FontIcon:after
     93.ExpandableContent > input + * > label.FontIcon:before
    9494{
    9595    position:                   absolute;
    … …  
    9898        content:                        "\e015";
    9999}
    100 .ExpandableContent > input:checked + * > label.FontIcon:after
     100.ExpandableContent > input:checked + * > label.FontIcon:before
    101101{
    102102        content:                        "\e11b";

  • trunk/ibisph-view/src/main/webapp/css/Help.css

    r19705 r19863  
    3939}
    4040
    41 .Help.Popup:after,
    42 .Help.InfoIcon:after,
    43 .Help.LinkIcon:after,
    44 .Help.AlertIcon:after
     41.Help.Popup:before,
     42.Help.Info.FontIcon:before,
     43.Help.Link.FontIcon:before,
     44.Help.Alert.FontIcon:before
    4545{
    46         display:                        inline-block;
    4746        background-color:       #336699;
    4847        color:                          #eee;
    4948
    50 border: 1px solid #aaa;
    51 border-radius: 50%;
    52 width: 16px;
    53 line-height: 16px;
     49        border:                         1px solid #aaa;
     50        border-radius:          50%;
     51        width:                          16px;
     52        line-height:            16px;
    5453
    5554        content:                        "\e402";
    56         font-family:            "WebComponentsIcons";
    57         font-style:             normal;
    58         font-variant:           normal;
    59         font-weight:            normal;
    6055font-size: 16px;
    6156        cursor:                         help;
    6257
    63         speak:                          none;
    64         text-transform:         none;
    65         text-decoration:        none;
    66         vertical-align:         middle;
    67         text-align:             center;
     58}
     59.Help.Info.FontIcon:before  { content: "\e401"; }
     60.Help.Link.FontIcon:before 
     61{
     62        content:                        "\e672";
     63        cursor:                         pointer;
     64}
     65.Help.Alert.FontIcon:before { content: "\e403"; }
    6866
    69         -moz-osx-font-smoothing: grayscale;
    70         -webkit-font-smoothing: antialiased;
    71 }
    72 
    73 .Help.InfoIcon:after  { content: "\e401"; }
    74 .Help.LinkIcon:after  { content: "\e672"; }
    75 .Help.AlertIcon:after { content: "\e403"; }
    76 
    77 /* right side triangle - removed - kinda hokey...
    78 .Help.Popup:hover:after
    79 {
    80     content:                    " ";
    81     position:                   absolute;
    82     top:                                5px;
    83     right:                              15px;
    84     width:                              0;
    85     height:                     0;
    86 
    87     border-left:                10px solid transparent;
    88     border-right:               10px solid transparent;
    89     border-top:                 10px solid #aaa;
    90         background-color:       transparent;
    91         z-index:                        2;
    92 
    93         transform:              rotate(-90deg);
    94         filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    95 }
    96 */
    9767
    9868.Help.Popup:hover  .Container,
    … …  
    10070.Help.Popup:focus  .Container
    10171{
    102         top:                            17px;   /* can be 1 larger than the image size so that user can mouse over the container and have it stay open */
     72        top:                            20px;   /* can be 1 larger than the image size so that user can mouse over the container and have it stay open */
    10373        left:                           -250px;
    10474}

  • trunk/ibisph-view/src/main/webapp/css/MegaMenu.css

    r19848 r19863  
    109109}
    110110
    111 
    112 nav .MegaMenu .Body .Block .Introduction
    113 {
    114         color:                          #e8e8e8;
    115         font-size:                      0.9rem;
    116         line-height:            1.4rem;
    117         padding:                        0.8em 0 0.8em 0.5rem;
    118 }
    119 nav .MegaMenu .Body .Block .Description
    120 {
    121 /*      display:                        none;    put this is a ss.css to turn off */
    122         padding:                        0 10px 10px 0.5rem;
    123         color:                          #ccc;
    124         font-size:                      0.8rem;
    125         line-height:            1rem;
    126 }
    127 
    128 
    129 nav .MegaMenu .Body .Block h3,
    130 nav .MegaMenu .Body .Block ul li > div:first-child
    131 {
    132     margin:                     0 5px 0 2px;
    133 }
    134  
    135111nav .MegaMenu .Body .Block h3,
    136112nav .MegaMenu .Body .Block h4,
    … …  
    139115        border:                         1px solid #5588bb;
    140116        background-color:       #225588;
    141         padding:                        0.3em 0.3rem;
     117        padding:                        0.3em 0.5rem;
    142118        font-size:                      1.25rem;
    143119        font-weight:            normal;
    … …  
    145121        line-height:            1.3rem;
    146122}
    147 /*
    148 nav .MegaMenu .Body .Block h3 a,
    149 nav .MegaMenu .Body .Block h3 a:visited,
    150 nav .MegaMenu .Body .Block h4 a,
    151 nav .MegaMenu .Body .Block h4 a:visited,
    152 nav .MegaMenu .Body .Block h5 a,
    153 nav .MegaMenu .Body .Block h5 a:visited
    154 {
    155         display:                        block;
    156     padding:                    0.3em 0.4em 0.2em 0.4em;
    157         background-color:       #225588;
    158     color:                              inherit;
    159         font-size:                      1rem;
    160     text-decoration:    underline;
    161 }
    162 nav .MegaMenu .Body .Block h3 a:hover,
    163 nav .MegaMenu .Body .Block h4 a:hover,
    164 nav .MegaMenu .Body .Block h5 a:hover
    165 {
    166         border:                         1px solid #336699;
    167         background-color:       #225588;
    168         color:                          #ffeecc;
    169         text-decoration:        none;
    170         border-radius:          5px 5px 0px 0px; 
    171 }
    172 nav .MegaMenu .Body .Block h3.Title
    173 {
    174         border:                         none;
    175 }
    176 */
    177 
    178 
    179123
    180124nav .MegaMenu .Body .Block ul
    181125{
    182         padding:                        0px 3px 5px 5px;
    183 }
     126        margin:                         0;
     127        padding:                        0;
     128}
     129
    184130nav .MegaMenu .Body .Block ul li a
    185131{
     132        position:                       relative;
     133        display:                        block;
    186134        padding:                        6px 3px 5px 6px;
    187135        color:                          white;
    188         font-weight:            normal;
    189136    border:                     1px solid transparent;
    190137}
    … …  
    202149}
    203150
    204 /* clear the previous li's that are floated - otherwise the link hover overlaps
    205         see: http://css-tricks.com/all-about-floats/
    206  */
    207 nav .MegaMenu .Body .Block ul li ul:after
    208 {
    209         display:                        block;
    210         visibility:             hidden;
    211         height:                         0;
    212         max-height:             0;
    213         padding-bottom:         1em;
    214         content:                        ".";
    215 }
    216 
    217 nav .MegaMenu .Body .Block ul li ul li
    218 {
    219         display:                        inline-block;
    220         padding-left:           0px;
    221         color:                          white;
    222 }
    223 
    224 nav .MegaMenu .Body .Block ul li ul li > a,
    225 nav .MegaMenu .Body .Block ul li ul li > div:first-child
    226 {
    227         position:                       relative;
    228         display:                        inline-block;
    229         width:                          100%;
    230         padding:                        5px 8px 4px 5px;
    231         font-weight:            normal;
    232 }
    233 nav .MegaMenu .Body .Block ul li ul li > a:before,
    234 nav .MegaMenu .Body .Block ul li ul li > div:first-child:before
    235 {
    236         position:                       absolute;
    237         content:                        "\25C7";       
    238         font-size:                      12px;
    239         color:                          #bbb
    240 
    241 /*
    242         small dot: 2022 
    243         box: ffed
    244         checkbox: 2713
    245         star: \22C6\A0   
    246         triangle: 25BA
    247         diamond: \2666
    248         open circle: \00ba  >>=\00BB
    249 
    250         \1F4CA = bar chart
    251         \1F4C8 = up trend
    252         \1F4D8 = blue book
    253         \25A4 = box with lines
    254         \2148 italic
    255         \1D413 bold T
    256         \25B6 triangle
    257         \2605 star
    258         \2606 star outlined
    259         \2311 square
    260         \1F517 link
    261         \2754 question outline
    262         \2753 question solid
    263         \1F4AC balloon
    264         \1F4C7 rollodex
    265         \261E index finger
    266         \25C7 diamond outlined
    267         \2318 place of interest
    268         */
    269 }
    270 
    271 /*
    272 nav .MegaMenu .Body .Block ul li > div.SocialMedia:first-child
    273 {
    274         padding:                        0.5em 0.5em 0 0;
    275         background-color:       inherit;
    276         border:                         inherit;
    277 }
    278 nav .MegaMenu .Body .Block ul li > div.SocialMedia:first-child a
    279 {
    280         padding:                        0;
    281         margin-left:            0.25em
    282 }
    283 */
    284 
    285 /* GARTH TODO: Icon needs to be font icon ?????  */
     151nav .MegaMenu .Body .Block ul ul
     152{
     153        margin-left:            0.5rem;
     154}
     155
     156nav .MegaMenu .Body .Block ul ul .Description
     157{
     158/*      display:                        none;    put this is a ss.css to turn off */
     159        padding:                        0 10px 10px 0.5rem;
     160        color:                          #ccc;
     161        font-size:                      0.8rem;
     162        line-height:            1rem;
     163}
     164
     165
     166/* Need to have the class be Icon and NOT FontIcon so the general def is not used. */
    286167nav .MegaMenu .Body .Block ul.Icon li,
    287168nav .MegaMenu .Body .Block ul li.Icon
    288169{
    289         display:                        block;
    290170        margin-left:            25px;
    291171}
    … …  
    294174nav .MegaMenu .Body .Block li.Icon  > a:before
    295175{
    296         display:                        inline-block;
     176        position:                       absolute;
    297177        left:                           -25px;
    298         top:                            5px;
     178        top:                            7px;
    299179        background-color:       inherit;
    300         color:                          #eee;
    301180        width:                          16px;
    302         line-height:            16px;
     181        line-height:            1em;
    303182
    304183        content:                        "\e308";
    … …  
    313192        text-transform:         none;
    314193        text-decoration:        none;
    315         vertical-align:         middle;
    316194        text-align:             center;
    317195}
    318 
    319 
    320 
    321196nav .MegaMenu .Body .Block .Icon.Info a:before
    322197{
    … …  
    329204        border:                         1px solid white;
    330205        content:                        "\e614";
    331         font-size:                      12px;
    332206}
    333207nav .MegaMenu .Body .Block .Icon.Report a:before
    … …  
    336210        content:                        "\e124";
    337211        transform:                      rotate(-90deg);
    338 /**/
    339212}
    340213nav .MegaMenu .Body .Block .Icon.PDF a:before
    341214{
     215        top:                            3px;
    342216        background-color:       #FF3500;
    343217        content:                        "\e90e";
    … …  
    350224{
    351225        content:                        "\e672";
     226        height:                         19px;
     227        font-size:                      18px;
    352228}
    353229nav .MegaMenu .Body .Block .Icon.Image a:before
    … …  
    358234
    359235
     236
     237nav .MegaMenu .Body .Block .Introduction
     238{
     239        color:                          #e8e8e8;
     240        font-size:                      0.9rem;
     241        line-height:            1.4rem;
     242        padding:                        0.8em 0 0.8em 0.5rem;
     243}
    360244nav .MegaMenu .Body .Block ul li .Introduction a
    361245{
    … …  
    363247}
    364248
    365 
    366 
    367 
     249nav .MegaMenu .Body .Block .IntroductionVideo
     250{
     251        position:                       relative;
     252        margin-top:                     16px;
     253}
     254
     255nav .MegaMenu .Body .Block .IntroductionVideo img
     256{
     257        width:                          100%;
     258}
     259nav .MegaMenu .Body .Block .IntroductionVideo .FontIcon:before
     260{
     261        position:                       absolute;
     262        top:                            -100px;
     263        left:                           calc(50% - 40px);
     264        color:                          #fff;
     265        background-color:       rgb(33, 33, 33, 0.55);
     266        padding:                        8px 8px 8px 15px;
     267        font-size:                      64px;
     268        content:                        "\e200";
     269}
     270nav .MegaMenu .Body .Block .IntroductionVideo .FontIcon:hover:before
     271{
     272        background-color:       var(--background-color-hover);
     273        color:                          var(--color-hover);
     274}
     275nav .MegaMenu .Body .Block .IntroductionVideo .Overlay
     276{
     277        position:                       absolute;
     278        bottom:                         0;
     279        width:                          100%;
     280        padding:                        1em;
     281        color:                          #eee;
     282        background-color:       rgb(33, 33, 33, 0.55);
     283        cursor:                         pointer;
     284}
     285
     286
     287
     288/* Topic Text Icons */
    368289nav .MegaMenu .Body .Block .TextIconBlocks
    369290{

  • trunk/ibisph-view/src/main/webapp/css/Popup.css

    r19798 r19863  
    3636{
    3737        position:                       relative;
    38         text-decoration:        underline;
    3938}
    4039.Popup:hover
    … …  
    7877.Popup:focus  .Container:first-child
    7978{
    80         left:                           -15px;
    8179        visibility:                     visible;
    82 
    8380        opacity:                        1;
    8481        z-index:                        200;
    … …  
    122119        font-weight:            normal;
    123120
    124         border-radius:          container-border-radius; 
     121        border-radius:          var(--container-border-radius);
    125122        box-shadow:                     inset 2px 2px 5px 0px #333;
    126123}

  • trunk/ibisph-view/src/main/webapp/css/SocialMedia.css

    r19742 r19863  
    2828}
    2929
    30 .SocialMedia a:after
     30.SocialMedia a:before
    3131{
    3232        padding:        2px;
    3333        margin:         0px;
    3434}
    35 .SocialMedia ul li a:hover:after
     35.SocialMedia ul li a:hover:before
    3636{
    3737        color:  var(--color-hover);
    3838}
    3939
    40 .SocialMedia a.PrinterFriendly:after
     40.SocialMedia a.PrinterFriendly:before
    4141{
    4242        content:        "\e10a";
    4343        color:          #336699;
    4444}
    45 .SocialMedia a.Twitter:after
     45.SocialMedia a.Twitter:before
    4646{
    4747        content:        "\e820";
    4848        color:          #00acee;
    4949}
    50 .SocialMedia a.LinkedIn:after
     50.SocialMedia a.LinkedIn:before
    5151{
    5252        content:        "\e812";
    5353        color:          #0e76a8;
    5454}
    55 .SocialMedia a.Facebook:after
     55.SocialMedia a.Facebook:before
    5656{
    5757        content:        "\e80c";
    5858        color:          #3b5998;
    5959}
    60 .SocialMedia a.GooglePlus:after
     60.SocialMedia a.GooglePlus:before
    6161{
    6262        content:        "\e810";

  • trunk/ibisph-view/src/main/webapp/css/_general.css

    r19860 r19863  
    421421}
    422422*/
    423 .FontIcon:after,
    424 [font-icon]:after
     423.FontIcon:before,
     424[font-icon]:before
    425425{
    426426        content:                        attr(font-icon);
     427
     428        width:                          1em;
     429        line-height:            1em;
     430
    427431        font-family:            "WebComponentsIcons";
    428432        font-style:             normal;
    429433        font-variant:           normal;
    430434        font-weight:            normal;
     435        font-size:                      1em;
    431436
    432437        speak:                          none;
    433438        text-transform:         none;
    434439        text-decoration:        none;
    435         vertical-align:         top;
    436 }
    437 .FontIcon:after:hover,
    438 [font-icon]:after:hover
    439 {
    440         color:                          var(--color-hover);
    441 }
     440        vertical-align:         middle;
     441        text-align:             center;
     442
     443        cursor:                         inherit;
     444}
     445
    442446/*============================ End of Style Sheet ============================*/
    443447

  • trunk/ibisph-view/src/main/webapp/css/_layout-header.css

    r19838 r19863  
    182182}
    183183
    184 #siteNavigationMenu .MegaMenu .Block .IntroductionVideo
    185 {
    186         position:                       relative;
    187         max-width:                      400px;
    188         margin-top:                     16px;
    189         cursor:                         pointer;
    190 }
    191 
    192 #siteNavigationMenu .MegaMenu .Block .IntroductionVideo:after
    193 {
    194         position:                       absolute;
    195         top:                            calc(50% - 50px);
    196         left:                           calc(50% - 36px);
    197         color:                          #fff;
    198         background-color:       rgb(33, 33, 33, 0.55);
    199         padding:                        8px 8px 8px 15px;
    200         font-size:                      64px;
    201         content:                        "\e200";
    202 }
    203 #siteNavigationMenu .MegaMenu .Block .IntroductionVideo:hover:after
    204 {
    205         background-color:       var(--background-color-hover);
    206         color:                          var(--color-hover);
    207 }
    208 #siteNavigationMenu .MegaMenu .Block .IntroductionVideo img
    209 {
    210         width:                          100%;
    211 }
    212 #siteNavigationMenu .MegaMenu .Block .IntroductionVideo .Overlay
    213 {
    214         position:                       absolute;
    215         bottom:                         0;
    216         width:                          100%;
    217         padding:                        1em;
    218         color:                          #eee;
    219         background-color:       rgb(33, 33, 33, 0.55);
    220 }
    221 
    222 
    223 
    224184
    225185form.Search
    … …  
    253213form.Search button[type="submit"]
    254214{
    255         position:                       relative;
    256215        margin:                         0;
    257216        padding:                        0;
    258         width:                          38px;
    259         height:                         38px;
     217        line-height:            38px;
    260218        min-width:                      38px;
    261         max-width:                      380px;
    262219        border:                         none;
    263220        background-color:       transparent;
    … …  
    265222        box-shadow:                     none;
    266223}
    267 form.Search button[type="submit"] span:after
     224form.Search button[type="submit"]:before
    268225{
    269226        color:                          #114477;
    270227        font-size:                      32px;
    271 /*     
    272         content:                        attr(font-icon);
    273         content: "&#e13e";
    274         content: "\e13e";
    275          attr(font-icon);*/
     228        vertical-align:         top;
    276229}
    277230

  • trunk/ibisph-view/src/main/webapp/xslt/html/Help.xslt

    r19798 r19863  
    110110<!-- xsl:message select="concat('Help.popup level: ', $titleLevel, ', title: ', $title)"/ -->
    111111
    112                 <span class="Help Popup {$additionalClasses}">
     112                <span class="Help Popup FontIcon {$additionalClasses}">
    113113                        <div class="Container">
    114114                                <xsl:call-template name="ContentContainer.fixed">
    … …  
    130130                <xsl:param name="additionalClasses" select="'Right'"/>
    131131
    132                 <a href="{$url}" title="{$title}" target="_blank" class="Help LinkIcon {$additionalClasses}">
    133                 </a>
     132                <span onclick="window.open('{$url}', '_blank')" title="{$title}"
     133                        class="Help Link FontIcon {$additionalClasses}"
     134                > </span>
    134135        </xsl:template>
    135136
    … …  
    164165
    165166                <xsl:variable name="text" select="normalize-space($text)"/>
    166                 <a onclick="javascript:alert('{$text}';" title="{$title}" class="Help AlertIcon {$additionalClasses}"> </a>
     167                <span onclick="javascript:alert('{$text}';" title="{$title}"
     168                        class="Help Alert FontIcon {$additionalClasses}"
     169                > </span>
    167170        </xsl:template>
    168171

  • trunk/ibisph-view/src/main/webapp/xslt/html/SiteSpecific.xslt

    r19831 r19863  
    185185                                        dir="ltr" spellcheck="false" style="outline: none;"
    186186                                />
    187                                 <button type="submit" value="" alt="Search" title="Search"><span font-icon="&#xe13e;"></span></button>
     187                                <button type="submit" value="" alt="Search" title="Search" font-icon="&#xe13e;"></button>
    188188                                <input type="hidden" name="sitesearch" value="{$ibis.remoteRequestPath}" title="site URL to be searched"/>
    189189                        </form>
    … …  
    243243        >
    244244                <nav id="contextNavigation">
     245hellow
    245246                        <input id="contextNavigationMenuShowControl" type="checkbox" class="Control" title="Show/hide selections"/>
    246247                        <label for="contextNavigationMenuShowControl" title="show/hide the selections">Show/Hide Menu</label>

  • trunk/ibisph-view/src/main/webapp/xslt/html/query/module/builder/Page.xslt

    r19781 r19863  
    250250                        <xsl:call-template name="ContentContainer.contentBlockWithDelimitedTitleTextsNodesets">
    251251                                <xsl:with-param name="title"                 select="'Overview'"/>
     252                                <xsl:with-param name="additionalClasses"     select="'Overview'"/>
    252253                                <xsl:with-param name="contentBlockType"      select="'expandable'"/>
    253254                                <xsl:with-param name="expandableContentShow" select="true()"/>
Note: See TracChangeset for help on using the changeset viewer.