Changeset 20035 in main


Ignore:
Timestamp:
03/14/20 01:06:26 (2 weeks ago)
Author:
GarthBraithwaite_STG
Message:

view - site search css updates.

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

Legend:

Unmodified
Added
Removed
  • trunk/ibisph-view/src/main/webapp/css/ContentOptions.css

    r20024 r20035  
    195195    border-width:               10px;
    196196    border-style:               solid;
    197     border-color:               transparent #a0a0a0 transparent transparent;
     197    border-color:               transparent #c2d7f8 transparent transparent;
    198198}
    199199
  • trunk/ibisph-view/src/main/webapp/css/Popup.css

    r19893 r20035  
    6565
    6666        cursor:                         default;
    67 /*
    6867        border-radius:          var(--container-border-radius); 
    69 */
    7068        box-shadow:                     2px 2px 5px 0px #333;
    7169        transition:         opacity 0.5s linear;
     
    120118
    121119        border-radius:          var(--container-border-radius);
    122         box-shadow:                     inset 2px 2px 5px 0px #333;
     120/*      box-shadow:                     inset 2px 2px 5px 0px #333;*/
    123121}
    124122
     
    126124.Popup .Container .Content div
    127125{
    128         background-color:       #eeeeee;
     126        background-color:       #f8f8f8;
    129127        color:                          #003366;
    130128}
  • trunk/ibisph-view/src/main/webapp/css/_layout-header.css

    r20020 r20035  
    165165
    166166
    167 
    168 
    169 
    170 
    171 
    172 /* site search
    173 #siteNavigationMenu > li:last-child
    174 {
    175         position: relative;
    176         width: calc(100% - 900px);
    177 }
    178 #siteNavigationMenu > li:last-child:hover
    179 {
    180         background-color: transparent;
    181 }
    182 */
    183 
    184 
    185 
    186 form.Search
    187 {
    188         display: inline-block;
    189 width: calc(100% - 1090px);
    190         max-width: 385px;
    191         position: absolute;
    192         right: 0;
    193         top: -5px;
     167#siteSearch
     168{
     169        position:                       absolute;
     170        top:                            -5px;
     171        right:                          0;
     172        width:                          calc(100% - 1090px);
     173        max-width:                      300px;
    194174        border:                         1px solid #003366;
    195         background-color:       #e8e8e8;
     175        background-color:       white;
    196176        border-radius:          5px 0 0 5px;
    197         z-index: 1;
    198 }
    199 #siteNavigationMenu form.Search:hover
    200 {
    201         border-width:           2px;
    202 }
    203 
    204 #siteSearch:focus-within,
    205 form.Search:focus-within
    206 {
    207 width: 35em;
    208 max-width: 35em;
    209         width: calc(35em - 38px);
    210 }
    211 form.Search input[type="text"]
    212 {
    213         width: calc(100% - 40px);
    214         min-width: 120px;
    215         max-width: 350px;
     177        transition:             width 0.8s linear;
     178}
     179#siteSearch:focus-within
     180{
     181        width:                          500px;
     182        max-width:                      500px;
     183        background-color:       var(--inputBackgroundColor);
     184}
     185
     186#siteSearch #siteSearchInput
     187{
     188        width:                          calc(100% - 40px);
    216189        height:                         45px;
    217         font-size:                      16px;
    218190        padding:                        5px 5px 3px 5px;
    219191        margin-left:            2px;
     192        outline:                        none;
    220193        border:                         none;
    221         border-right:           1px solid black;
    222         transition:             width 0.8s ease;
    223 }
    224 form.Search:focus-within input[type="text"]
    225 {
    226         width:                          30em;
    227         max-width:                              30em;
    228         z-index:                        110;
    229 }
    230 
    231 form.Search button[type="submit"]
    232 {
    233         margin:                         0;
    234         padding:                        0;
    235         line-height:            38px;
     194        border-right:           1px solid #003366;
     195        font-size:                      16px;
     196}
     197
     198#siteSearch button[type="submit"]
     199{
     200        margin:                         -4px 0 0 0;
     201    padding:                    0;
     202        height:                         44px;
    236203        min-width:                      38px;
    237204        max-width:                      38px;
    238205        border:                         none;
    239         background-color:       transparent;
     206        border-radius:          0;
     207        background-color:       #f8f8f8;
    240208        color:                          black;
    241209        box-shadow:                     none;
    242210}
    243 form.Search button[type="submit"]::before
     211#siteSearch button[type="submit"]::before
    244212{
    245213        color:                          #114477;
    246         font-size:                      32px;
    247         vertical-align:         top;
    248 }
    249 form.Search:focus-within button[type="submit"]:hover::before
     214        font-size:                      33px;
     215}
     216#siteSearch button[type="submit"]:hover::before
    250217{
    251218        border-radius: 5px;
     
    253220        background-color: var(--background-color-hover);
    254221}
     222
    255223
    256224
     
    269237        color:                          inherit;
    270238        line-height:            34px;
    271         border-radius:          5px 5px 0px 0px
     239        border-radius:          5px
    272240}
    273241#userMenu.Popup > input + label::before,
     
    292260        background-color:       var(--background-color-hover);
    293261        color:                          white;
     262        border-radius:          5px 5px 0px 0px; 
    294263}
    295264
  • trunk/ibisph-view/src/main/webapp/css/_responsive-medium.css

    r20024 r20035  
    1 /* 960-1280 */
     1/* 960-1280
     2html {background-color: #f8e8c8; }
     3*/
    24
    3 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ V E R T I C A L   M E N U */
    4 #siteMenuPanelsControl + label
     5#siteSearch
    56{
    6         position:                       absolute;
    7         left:                           -4000px;
    8         width:                          0px;
    9         height:                         0px;
    10         opacity:                        0;
     7    top:                                2px;
     8        width:                          50px;
     9        max-width:                      50px;
     10    background-color:   transparent;
     11    border:                     none;
     12        cursor:                         pointer;
     13}
     14#siteSearch:focus-within
     15{
     16        top:                            -5px;
     17        border:                         1px solid #003366;
     18        height:                         50px;
     19        background-color:       var(--inputBackgroundColor);
     20        border-radius:          5px 0 0 5px;
     21}
     22
     23#siteSearch #siteSearchInput
     24{
     25        position:                       absolute;
     26        right:                          0;
     27        width:                          inherit;
     28        color:                          transparent;
     29        background-color:       transparent;
     30        border:                         none;
     31}
     32#siteSearch #siteSearchInput::placeholder
     33{
     34        color:                          transparent;
     35}
     36#siteSearch:focus-within #siteSearchInput
     37{
     38        right:                          35px;
     39        cursor:                         text;
     40        width:                          460px;
     41        max-width:                      460px;
     42        color:                          var(--color);
     43}
     44#siteSearch:focus-within #siteSearchInput::placeholder
     45{
     46        color:                          #777;
     47}
     48
     49#siteSearch button[type="submit"]
     50{
     51        margin-top:             1px;
     52        right:                          0;
     53        height:                         auto;
     54        min-width:                      35px;
     55        max-width:                      35px;
     56        background-color:       transparent;
     57}
     58#siteSearch:focus-within button[type="submit"]
     59{
     60        position:                       absolute;
     61        top:                            5px;
    1162}
    1263
    1364
    14 #siteNavigationMenu form.Search:hover
    15 {
    16         border-width:           inherit;
    17 }
    1865
    19 form.Search,
    20 form.Search input[type="text"]
    21 {
    22 top: 3px;
    23 right: 15px;
    24 background-color: transparent;
    25 border: 0;
    26 border-radius: 0;
    27         max-width: 35px;
    28         min-width: 35px;
    29 }
    30 form.Search input[type="text"]
    31 {
    32         position: absolute;
    33 right: 0;
    34 top: -1px;
    35 /*
    36     height: 32px;
    37 */
    38         background-color: transparent;
    39         cursor: pointer;
    40 }
    41 form.Search input[type="text"]::placeholder
    42 {
    43 
    44 color: transparent;
    45 display: none;
    46 }
    47 
    48 #siteSearch:focus-within #siteSearchInput
    49 {
    50         /*
    51         font-size:                      16px;
    52         padding:                        2px 5px 0px 5px;
    53 
    54         line-height:            30px;
    55         */
    56         top: -6px;
    57         width: 35em;
    58 border: 1px solid #336699;
    59 radius: 5px;
    60         background-color:       lightyellow;
    61         background-color:       var(--inputBackgroundColor);
    62         right: 35px;
    63         z-index: 1;
    64         cursor: text;
    65 }
    66 #siteSearch:focus-within #siteSearchInput::placeholder
    67 {
    68 color: #777;
    69 }
    70 
    71 
    72 form.Search button[type="submit"]
    73 {
    74         right: 0px;
    75 line-height: 32px;
    76 min-width: 35px;
    77 max-width: 35px;
    78 }
    79 form.Search:focus-within button[type="submit"]
    80 {
    81         position: absolute;
    82 }
    83 
    84 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ V E R T I C A L   M E N U */
  • trunk/ibisph-view/src/main/webapp/css/_responsive-small.css

    r20024 r20035  
    1111#content
    1212{
    13         padding: 0.2em 1rem 1em 1rem;
     13        padding:                                0.2em 1rem 1em 1rem;
    1414}
    1515
    1616.Topic #page #content #contentSections
    1717{
    18         width: calc(100% - 325px);
     18        width:                                  calc(100% - 325px);
    1919}
    2020.Topic #page #content .Aside
    2121{
    22         width: 300px;
    23     max-width: 300px;
     22        width:                                  300px;
     23    max-width:                          300px;
    2424}
    2525
  • trunk/ibisph-view/src/main/webapp/css/_responsive-tiny.css

    r20024 r20035  
    2020
    2121
     22
     23/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U */
    2224#siteNavigation
    2325{
    2426        top:                                    -5px;
    2527        height:                                 44px;
    26         padding:                                5px 5px 0 5px;
    2728        background-color:               #c2d7f8;
    2829}
    2930
    3031
     32/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U - C O N T R O L */
    3133#siteNavigation #siteMenuPanelsControl + .FontIcon
    3234{
    33         position:                       absolute;
    34         top:                            5px;
    35         right:                          10px;
     35        position:                               absolute;
     36        top:                                    5px;
     37        right:                                  10px;
    3638        color:                                  #225588; /*var(--color);*/
    37         background-color: white;
    38         font-size: 20px;
    39         padding: 5px;
    40         border: 1px solid #336699;
    41         border-radius: 5px;
     39        background-color:               white;
     40        font-size:                              20px;
     41        padding:                                5px;
     42        border:                                 1px solid #336699;
     43        border-radius:                  5px;
    4244}
    4345#siteNavigation #siteMenuPanelsControl:not(checked) + .FontIcon::before
     
    5153
    5254
    53 
    54 
    55 
    56 
     55/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U - M A I N */
    5756#siteNavigation .HorizontalMenu
    5857{
    59         position: absolute;
    60         top: 40px;
    61         right: 0;
     58        position:                               absolute;
     59        top:                                    40px;
     60        right:                                  0;
    6261        display: inline-block;
    6362        visibility: hidden;
     
    7675        border-radius:                  0;
    7776}
     77#siteNavigation .HorizontalMenu > li:hover,
     78#siteNavigation .HorizontalMenu > li:active,
     79#siteNavigation .HorizontalMenu > li:focus,
     80#siteNavigation .HorizontalMenu > li.On:hover
     81{
     82        overflow: visible;
     83}
     84
    7885
    7986#siteNavigationMenu #homeMenu a { padding-right: 170px; }
     
    8390        visibility: visible;
    8491}
    85 
    8692
    8793
     
    9298        line-height:    35px;
    9399}
    94 
     100#siteNavigation .HorizontalMenu > li > input[type="radio"]:checked + label
     101{
     102        display: block;
     103        border-radius: 0px 5px 5px 0px;
     104}
    95105#siteNavigation .HorizontalMenu > li > input[type="radio"] + label::after
    96106{
     
    108118
    109119
     120/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U - M E G A M E N U */
    110121#siteNavigation .HorizontalMenu li > .MegaMenu
    111122{
     
    119130        box-shadow: none;
    120131}
    121 
    122132#siteNavigation .HorizontalMenu li > input:checked ~ .MegaMenu
    123133{
     
    130140}
    131141
    132 
    133 
    134 #siteNavigation .HorizontalMenu > li > input[type="radio"]:checked + label
    135 {
    136         display: block;
    137         border-radius: 0px 5px 5px 0px;
    138 }
    139 #siteNavigation .HorizontalMenu > li:hover,
    140 #siteNavigation .HorizontalMenu > li:active,
    141 #siteNavigation .HorizontalMenu > li:focus,
    142 #siteNavigation .HorizontalMenu > li.On:hover
    143 {
    144         overflow: visible;
    145 }
    146142
    147143#siteNavigation .HorizontalMenu li > .MegaMenu .Body 
     
    181177
    182178
    183 
    184 
    185179#siteNavigation .HorizontalMenu .MegaMenu .Body .Block .TextIconBlocks
    186180{
     
    199193
    200194
     195/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S E A R C H */
    201196#siteSearch
    202197{
    203198        border-radius:          5px;
    204 background-color: white;
    205 }
    206 
    207 form.Search
    208 {
    209         right: 50px;
    210         top: 5px;
    211         width: auto;
    212 }
    213 form.Search input[type="text"]
    214 {
    215         height:                         31px;
    216         font-size:                      16px;
    217         padding:                        2px 5px 0px 5px;
    218 }
    219 form.Search input[type="text"]:focus
    220 {
    221 }
    222 
    223 form.Search button[type="submit"]
     199        background-color:       white;
     200        right:                          50px;
     201        top:                            5px;
     202        width:                          235px;
     203}
     204#siteSearch #siteSearchInput
     205{
     206        width:                          200px;
     207        height:                         32px;
     208        padding:                        3px 0 1px 7px;
     209}
     210
     211#siteSearch:focus-within
     212{
     213        max-width:                      400px;
     214}
     215
     216#siteSearch:focus-within #siteSearchInput
     217{
     218        width:                          calc(100% - 32px);
     219}
     220
     221#siteSearch button[type="submit"]
     222{
     223        height:                         30px;
     224        min-width:                      30px;
     225        max-width:                      30px;
     226}
     227#siteSearch button[type="submit"]::before
    224228{
    225229        line-height:            30px;
    226         min-width:                      30px;
    227 }
    228 form.Search button[type="submit"]::before
    229 {
    230         line-height:            30px;
    231         font-size:                      25px;
    232         padding: 0;
    233 }
    234 
    235 
    236 
    237 
     230        font-size:                      24px;
     231}
     232
     233
     234
     235
     236/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ O T H E R */
    238237#content
    239238{
  • trunk/ibisph-view/src/main/webapp/xslt/html/SiteSpecific.xslt

    r20024 r20035  
    174174                                        placeholder="Search the Site..."
    175175                                        type="text" autocomplete="on"
    176                                         dir="ltr" spellcheck="false" style="outline: none;"
     176                                        dir="ltr" spellcheck="false"
    177177                                />
    178178                                <button type="submit" value="" alt="Search" title="Search" font-icon="&#xe13e;"></button>
  • trunk/ibisph-view/src/main/webapp/xslt/html/indicator/profile/Indicator.xslt

    r19916 r20035  
    545545
    546546<!--
     547GARTH TODO:
    547548<xsl:message select="$indicatorComparisonValues"/>
    548549<xsl:message select="'yyyyyyyyyyyyyyyyyyyyyyyyy'"/>
  • trunk/ibisph-view/src/main/webapp/xslt/html/query/module/result/Page.xslt

    r19890 r20035  
    314314                                        <xsl:with-param name="title" select="'Data Sources'"/>
    315315                                        <xsl:with-param name="content">
    316 GARTH TODO:
     316<!-- GARTH TODO: REWORK USING STANDARD DATA SOURCE XML -->
    317317                                        <ul>
    318318<xsl:for-each select="$configuration/DATA_SOURCES/DATA_SOURCE">
  • trunk/ibisph-view/src/main/webapp/xslt/html/query/module/result/Result.xslt

    r19944 r20035  
    8484                        needs better format control then they will override the data table
    8585                        footnote template which will likely not reference this parameter value.
    86 GARTH TODO: Remove this stuff...
     86GARTH TODO: REWORK USING VALUE_ATTRIBUTE_NAME       Remove this stuff...
    8787                "
    8888        >
Note: See TracChangeset for help on using the changeset viewer.